diff --git a/package-lock.json b/package-lock.json index 8117331e48..93c47f9e22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3400,9 +3400,9 @@ "integrity": "sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==" }, "node_modules/@codemirror/view": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.1.tgz", - "integrity": "sha512-O6uW3qOfycEdoD1RlGXb208hEiE75tIZp7lOznMUbAhUf+X/UCLlq4hsxjdRnoM+347b6VJu6e5erWuGMemEUg==", + "version": "6.13.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.2.tgz", + "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", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.1.tgz", - "integrity": "sha512-O6uW3qOfycEdoD1RlGXb208hEiE75tIZp7lOznMUbAhUf+X/UCLlq4hsxjdRnoM+347b6VJu6e5erWuGMemEUg==", + "version": "6.13.2", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.13.2.tgz", + "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", diff --git a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts b/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts index c39a03f194..85d1b52999 100644 --- a/services/web/frontend/js/features/source-editor/extensions/changes/change-manager.ts +++ b/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 - const padding = view.documentPadding - const contentHeight = - view.contentDOM.clientHeight - padding.top - padding.bottom - const paddingNeeded = height - contentHeight - - if ( - overflowTop !== editorVerticalTopPadding(view) || - paddingNeeded !== padding.bottom - ) { + // the content height and top overflow of the review panel + const { height, overflowTop } = payload + // the difference between the review panel height and the editor content height + const heightDiff = height + overflowTop - view.contentDOM.clientHeight + // the height of the block added at the top of the editor to match the review panel + const topPadding = editorVerticalTopPadding(view) + if (overflowTop !== topPadding || heightDiff !== 0) { view.dispatch( setVerticalOverflow({ top: overflowTop, - bottom: paddingNeeded, + bottom: heightDiff + view.documentPadding.bottom, }) ) } diff --git a/services/web/frontend/js/features/source-editor/extensions/vertical-overflow.ts b/services/web/frontend/js/features/source-editor/extensions/vertical-overflow.ts index 134c8cee60..3d01e88a12 100644 --- a/services/web/frontend/js/features/source-editor/extensions/vertical-overflow.ts +++ b/services/web/frontend/js/features/source-editor/extensions/vertical-overflow.ts @@ -147,14 +147,18 @@ const bottomPaddingPlugin = ViewPlugin.define(view => { } }) -const topPaddingFacet = Facet.define() -const topPadding = topPaddingFacet.compute([overflowPaddingState], state => { - return state.field(overflowPaddingState).top +const topPaddingFacet = Facet.define({ + combine(values) { + return Math.max(0, ...values) + }, +}) +const topPadding = topPaddingFacet.from(overflowPaddingState, state => { + return state.top }) -const bottomPaddingFacet = Facet.define({ +const bottomPaddingFacet = Facet.define({ 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({ diff --git a/services/web/package.json b/services/web/package.json index 3c39c34c35..9522639e02 100644 --- a/services/web/package.json +++ b/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",