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

[cm6] Improve bottom padding calculations

GitOrigin-RevId: 91fff97ebf6675cddffdd89118fd06f003321143
This commit is contained in:
Alf Eaton 2023-06-15 10:30:49 +01:00 committed by Copybot
parent 374e525cde
commit a4d1ac2f13
4 changed files with 28 additions and 27 deletions

16
package-lock.json generated
View file

@ -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",

View file

@ -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,
})
)
}

View file

@ -147,14 +147,18 @@ const bottomPaddingPlugin = ViewPlugin.define(view => {
}
})
const topPaddingFacet = Facet.define<number>()
const topPadding = topPaddingFacet.compute([overflowPaddingState], state => {
return state.field(overflowPaddingState).top
const topPaddingFacet = Facet.define<number, number>({
combine(values) {
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({

View file

@ -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",