Merge pull request #13477 from overleaf/ae-bottom-padding

[cm6] Improve bottom padding calculations

GitOrigin-RevId: 91fff97ebf6675cddffdd89118fd06f003321143

package-lock.json

@@ -3400,9 +3400,9 @@
       "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA=="
     },
     "node_modules/@codemirror/view": {
-      "version": "6.13.1",
+      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.2.tgz",
-      "integrity": "sha512-O6uW3qOfycEdoD1RlGXb208hEiE75tIZp7lOznMUbAhUf+X/UCLlq4hsxjdRnoM+347b6VJu6e5erWuGMemEUg==",
+      "integrity": "sha512-XA/jUuu1H+eTja49654QkrQwx2CuDMdjciHcdqyasfTVo4HRlvj87rD/Qmm4HfnhwX8234FQSSA8HxEzxihX/Q==",
       "dependencies": {
         "@codemirror/state": "^6.1.4",
         "style-mod": "^4.0.0",
@@ -41178,7 +41178,7 @@
         "@codemirror/lint": "^6.2.1",
         "@codemirror/search": "github:overleaf/codemirror-search#ea83364b22ad66455fc94babea7d576fa9f76a93",
         "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.13.1",
+        "@codemirror/view": "^6.13.2",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
         "@google-cloud/bigquery": "^6.0.1",
@@ -44960,9 +44960,9 @@
       "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA=="
     },
     "@codemirror/view": {
-      "version": "6.13.1",
+      "version": "6.13.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.2.tgz",
-      "integrity": "sha512-O6uW3qOfycEdoD1RlGXb208hEiE75tIZp7lOznMUbAhUf+X/UCLlq4hsxjdRnoM+347b6VJu6e5erWuGMemEUg==",
+      "integrity": "sha512-XA/jUuu1H+eTja49654QkrQwx2CuDMdjciHcdqyasfTVo4HRlvj87rD/Qmm4HfnhwX8234FQSSA8HxEzxihX/Q==",
       "requires": {
         "@codemirror/state": "^6.1.4",
         "style-mod": "^4.0.0",
@@ -50129,7 +50129,7 @@
         "@codemirror/lint": "^6.2.1",
         "@codemirror/search": "github:overleaf/codemirror-search#ea83364b22ad66455fc94babea7d576fa9f76a93",
         "@codemirror/state": "^6.2.0",
-        "@codemirror/view": "^6.13.1",
+        "@codemirror/view": "^6.13.2",
         "@contentful/rich-text-html-renderer": "^16.0.2",
         "@contentful/rich-text-types": "^16.0.2",
         "@google-cloud/bigquery": "^6.0.1",

services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts

@@ -334,20 +334,17 @@ export const createChangeManager = (
       }
 
       case 'sizes': {
-        const { overflowTop, height } = payload
+        // the content height and top overflow of the review panel
-        const padding = view.documentPadding
+        const { height, overflowTop } = payload
-        const contentHeight =
+        // the difference between the review panel height and the editor content height
-          view.contentDOM.clientHeight - padding.top - padding.bottom
+        const heightDiff = height + overflowTop - view.contentDOM.clientHeight
-        const paddingNeeded = height - contentHeight
+        // the height of the block added at the top of the editor to match the review panel
-
+        const topPadding = editorVerticalTopPadding(view)
-        if (
+        if (overflowTop !== topPadding || heightDiff !== 0) {
-          overflowTop !== editorVerticalTopPadding(view) ||
-          paddingNeeded !== padding.bottom
-        ) {
           view.dispatch(
             setVerticalOverflow({
               top: overflowTop,
-              bottom: paddingNeeded,
+              bottom: heightDiff + view.documentPadding.bottom,
             })
           )
         }

services/web/frontend/js/features/source-editor/extensions/vertical-overflow.ts

@@ -147,14 +147,18 @@ const bottomPaddingPlugin = ViewPlugin.define(view => {
   }
 })
 
-const topPaddingFacet = Facet.define<number>()
+const topPaddingFacet = Facet.define<number, number>({
-const topPadding = topPaddingFacet.compute([overflowPaddingState], state => {
+  combine(values) {
-  return state.field(overflowPaddingState).top
+    return Math.max(0, ...values)
+  },
+})
+const topPadding = topPaddingFacet.from(overflowPaddingState, state => {
+  return state.top
 })
 
-const bottomPaddingFacet = Facet.define<number>({
+const bottomPaddingFacet = Facet.define<number, number>({
   combine(values) {
-    return [Math.max(...values)]
+    return Math.max(0, ...values)
   },
 })
 const bottomPadding = bottomPaddingFacet.computeN(
@@ -172,7 +176,7 @@ const bottomPadding = bottomPaddingFacet.computeN(
 const contentAttributes = EditorView.contentAttributes.compute(
   [bottomPaddingFacet],
   state => {
-    const [bottom] = state.facet(bottomPaddingFacet)
+    const bottom = state.facet(bottomPaddingFacet)
     const style = `padding-bottom: ${bottom}px;`
     return { style }
   }
@@ -207,7 +211,7 @@ class TopPaddingWidget extends WidgetType {
 const topPaddingDecoration = EditorView.decorations.compute(
   [topPaddingFacet],
   state => {
-    const [top] = state.facet(topPaddingFacet)
+    const top = state.facet(topPaddingFacet)
 
     return Decoration.set([
       Decoration.widget({

services/web/package.json

@@ -78,7 +78,7 @@
     "@codemirror/lint": "^6.2.1",
     "@codemirror/search": "github:overleaf/codemirror-search#ea83364b22ad66455fc94babea7d576fa9f76a93",
     "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.13.1",
+    "@codemirror/view": "^6.13.2",
     "@contentful/rich-text-html-renderer": "^16.0.2",
     "@contentful/rich-text-types": "^16.0.2",
     "@google-cloud/bigquery": "^6.0.1",