Merge pull request #16139 from overleaf/ii-ide-page-prototype-review-panel-line-height

[web] React ide page line height

GitOrigin-RevId: da8c9cd178bc089fdc208abd1c453f7666ff58b1

services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts

@@ -170,9 +170,8 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
   const openDocId = currentDocumentId
   const [shouldCollapse, setShouldCollapse] =
     useState<ReviewPanel.Value<'shouldCollapse'>>(true)
-  const [lineHeight] = useScopeValue<number>(
-    'reviewPanel.rendererData.lineHeight'
-  )
+  const [lineHeight, setLineHeight] =
+    useState<ReviewPanel.Value<'lineHeight'>>(0)
 
   const [formattedProjectMembers, setFormattedProjectMembers] = useState<
     ReviewPanel.Value<'formattedProjectMembers'>
@@ -1163,6 +1162,11 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       }
     }
 
+    const editorLineHeightChanged = (payload: typeof lineHeight) => {
+      setLineHeight(payload)
+      handleLayoutChange()
+    }
+
     const editorTrackChangesChanged = async () => {
       const entries = await updateEntries(currentDocumentId)
       dispatchReviewPanelEvent('recalculate-screen-positions', {
@@ -1315,6 +1319,11 @@ function useReviewPanelState(): ReviewPanelStateReactIde {
       const { type, payload } = event.detail
 
       switch (type) {
+        case 'line-height': {
+          editorLineHeightChanged(payload)
+          break
+        }
+
         case 'track-changes:changed': {
           editorTrackChangesChanged()
           break

services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts

@@ -5,7 +5,6 @@ export default function populateReviewPanelScope(store: ReactScopeValueStore) {
   store.set('reviewPanel.nVisibleSelectedChanges', 0)
   store.set('users', {})
   store.set('reviewPanel.layoutToLeft', false)
-  store.set('reviewPanel.rendererData.lineHeight', 0)
   store.set('gotoEntry', () => {})
   store.set('addNewComment', () => {})
 }

services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts

@@ -36,7 +36,10 @@ import {
   resetLearnedWords,
   setSpelling,
 } from '../extensions/spelling'
-import { createChangeManager } from '../extensions/changes/change-manager'
+import {
+  createChangeManager,
+  dispatchEditorEvent,
+} from '../extensions/changes/change-manager'
 import { setKeybindings } from '../extensions/keybindings'
 import { Highlight } from '../../../../../types/highlight'
 import { EditorView } from '@codemirror/view'
@@ -171,14 +174,7 @@ function useCodeMirrorScope(view: EditorView) {
 
   useEffect(() => {
     if (lineHeight && fontSize) {
-      window.dispatchEvent(
-        new CustomEvent('editor:event', {
-          detail: {
-            type: 'line-height',
-            payload: lineHeights[lineHeight] * fontSize,
-          },
-        })
-      )
+      dispatchEditorEvent('line-height', lineHeights[lineHeight] * fontSize)
     }
   }, [lineHeight, fontSize])