From ffb24e061e5fb466abf2e2b2c4dab129e4684772 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Thu, 7 Dec 2023 15:44:45 +0200
Subject: [PATCH] Merge pull request #16139 from
 overleaf/ii-ide-page-prototype-review-panel-line-height

[web] React ide page line height

GitOrigin-RevId: da8c9cd178bc089fdc208abd1c453f7666ff58b1
---
 .../review-panel/hooks/use-review-panel-state.ts  | 15 ++++++++++++---
 .../review-panel-context-adapter.ts               |  1 -
 .../source-editor/hooks/use-codemirror-scope.ts   | 14 +++++---------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts b/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
index 5f65b1fcb9..92412c1128 100644
--- a/services/web/frontend/js/features/ide-react/context/review-panel/hooks/use-review-panel-state.ts
+++ b/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
diff --git a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts b/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts
index b5fa99d3c0..cd71fb3261 100644
--- a/services/web/frontend/js/features/ide-react/scope-adapters/review-panel-context-adapter.ts
+++ b/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', () => {})
 }
diff --git a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts b/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
index ee191d80a1..47752ea02b 100644
--- a/services/web/frontend/js/features/source-editor/hooks/use-codemirror-scope.ts
+++ b/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])