From 7da8e3b6462a7463ed66ac28173f99e39d94a08e Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Wed, 25 Oct 2023 12:11:41 +0100
Subject: [PATCH] Merge pull request #15435 from
 overleaf/mj-scroll-content-width-fix

[web] Fix broken scrolling with table rendering error

GitOrigin-RevId: 425c9ccf2f7f40e0842455eeb40975171c1f0d16
---
 .../extensions/visual/visual-theme.ts         | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts b/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
index 63da2406a5..b4966f5548 100644
--- a/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/visual/visual-theme.ts
@@ -1,7 +1,7 @@
 import { EditorView } from '@codemirror/view'
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags } from '@lezer/highlight'
-import { Annotation, Compartment, Extension } from '@codemirror/state'
+import { Annotation, Compartment, Extension, Facet } from '@codemirror/state'
 
 /**
  * A syntax highlighter for content types that are only styled in the visual editor.
@@ -427,13 +427,24 @@ const mainVisualTheme = EditorView.theme({
 
 const contentWidthThemeConf = new Compartment()
 const changeContentWidthAnnotation = Annotation.define<boolean>()
+const currentWidth = Facet.define<string, string>({
+  combine: values => {
+    if (values.length === 0) {
+      return ''
+    }
+    return values[0]
+  },
+})
 
 function createContentWidthTheme(contentWidth: string) {
-  return EditorView.theme({
-    '&.cm-editor': {
-      '--content-width': contentWidth,
-    },
-  })
+  return [
+    currentWidth.of(contentWidth),
+    EditorView.theme({
+      '&.cm-editor': {
+        '--content-width': contentWidth,
+      },
+    }),
+  ]
 }
 
 const contentWidthSetter = EditorView.updateListener.of(update => {
@@ -446,9 +457,18 @@ const contentWidthSetter = EditorView.updateListener.of(update => {
     ) {
       return
     }
+
+    const viewWidth = `${update.view.contentDOM.offsetWidth}px`
+
+    const currentConfiguredWidth = update.state.facet(currentWidth)
+    if (currentConfiguredWidth === viewWidth) {
+      // We already have the correct width stored
+      return
+    }
+
     update.view.dispatch({
       effects: contentWidthThemeConf.reconfigure(
-        createContentWidthTheme(update.view.contentDOM.offsetWidth + 'px')
+        createContentWidthTheme(viewWidth)
       ),
       // Set the selection explicitly to force the cursor to redraw if CM6
       // fails to spot a change in geometry, which sometimes seems to happen