From 3bbde4978162d43727a351cdba812d44bdb9221b Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Thu, 21 Nov 2024 12:59:51 +0000 Subject: [PATCH] Merge pull request #22055 from overleaf/ae-restore-review-tooltips Reapply "Allow position of review tooltip to be calculated automatically (#21803)" GitOrigin-RevId: b6dff2d12627b04ff1859bd4765be01670256aa4 --- package-lock.json | 38 ++++++++++--------- .../source-editor/extensions/index.ts | 10 +++++ .../extensions/review-tooltip.ts | 36 ++++++++++-------- services/web/package.json | 4 +- 4 files changed, 52 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 153c33e3c6..7f3330aa7c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3404,13 +3404,14 @@ } }, "node_modules/@codemirror/lint": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", - "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", + "version": "6.8.3", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.3.tgz", + "integrity": "sha512-GSGfKxCo867P7EX1k2LoCrjuQFeqVgPGRRsSl4J4c0KMkD+k1y6WYvTQkzv0iZ8JhLJDujEvlnMchv4CZQLh3Q==", "dev": true, + "license": "MIT", "dependencies": { "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", + "@codemirror/view": "^6.35.0", "crelt": "^1.0.5" } }, @@ -3432,10 +3433,11 @@ "dev": true }, "node_modules/@codemirror/view": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.0.tgz", - "integrity": "sha512-2vKJ79tOcVfgPYVJM2XjcL1BH5Bsl7/tgn9ilBj3XWeCS5kTRy/NE4FHEj4aMylOl/D3IPNsmZH0WPlB+DyIdA==", + "version": "6.35.0", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.0.tgz", + "integrity": "sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==", "dev": true, + "license": "MIT", "dependencies": { "@codemirror/state": "^6.4.0", "style-mod": "^4.1.0", @@ -41493,10 +41495,10 @@ "@codemirror/commands": "^6.6.2", "@codemirror/lang-markdown": "^6.2.5", "@codemirror/language": "^6.10.3", - "@codemirror/lint": "^6.8.2", + "@codemirror/lint": "^6.8.3", "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.0", + "@codemirror/view": "^6.35.0", "@juggle/resize-observer": "^3.3.1", "@lezer/common": "^1.2.3", "@lezer/generator": "^1.7.1", @@ -46502,13 +46504,13 @@ } }, "@codemirror/lint": { - "version": "6.8.2", - "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.2.tgz", - "integrity": "sha512-PDFG5DjHxSEjOXk9TQYYVjZDqlZTFaDBfhQixHnQOEVDDNHUbEh/hstAjcQJaA6FQdZTD1hquXTK0rVBLADR1g==", + "version": "6.8.3", + "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.3.tgz", + "integrity": "sha512-GSGfKxCo867P7EX1k2LoCrjuQFeqVgPGRRsSl4J4c0KMkD+k1y6WYvTQkzv0iZ8JhLJDujEvlnMchv4CZQLh3Q==", "dev": true, "requires": { "@codemirror/state": "^6.0.0", - "@codemirror/view": "^6.0.0", + "@codemirror/view": "^6.35.0", "crelt": "^1.0.5" } }, @@ -46530,9 +46532,9 @@ "dev": true }, "@codemirror/view": { - "version": "6.34.0", - "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.0.tgz", - "integrity": "sha512-2vKJ79tOcVfgPYVJM2XjcL1BH5Bsl7/tgn9ilBj3XWeCS5kTRy/NE4FHEj4aMylOl/D3IPNsmZH0WPlB+DyIdA==", + "version": "6.35.0", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.0.tgz", + "integrity": "sha512-I0tYy63q5XkaWsJ8QRv5h6ves7kvtrBWjBcnf/bzohFJQc5c14a1AQRdE8QpPF9eMp5Mq2FMm59TCj1gDfE7kw==", "dev": true, "requires": { "@codemirror/state": "^6.4.0", @@ -51003,10 +51005,10 @@ "@codemirror/commands": "^6.6.2", "@codemirror/lang-markdown": "^6.2.5", "@codemirror/language": "^6.10.3", - "@codemirror/lint": "^6.8.2", + "@codemirror/lint": "^6.8.3", "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.0", + "@codemirror/view": "^6.35.0", "@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/index.ts b/services/web/frontend/js/features/source-editor/extensions/index.ts index 96179a7b6e..63d8db3f74 100644 --- a/services/web/frontend/js/features/source-editor/extensions/index.ts +++ b/services/web/frontend/js/features/source-editor/extensions/index.ts @@ -95,6 +95,16 @@ export const createExtensions = (options: Record): Extension[] => [ // to avoid cutting off tooltips which overflow the editor. tooltips({ parent: document.body, + tooltipSpace(view) { + const { top, bottom } = view.scrollDOM.getBoundingClientRect() + + return { + top, + left: 0, + bottom, + right: window.innerWidth, + } + }, }), keymaps, goToLinePanel(), diff --git a/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts b/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts index ea268a7703..61d1681ae8 100644 --- a/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts +++ b/services/web/frontend/js/features/source-editor/extensions/review-tooltip.ts @@ -4,6 +4,7 @@ import { EditorView, showTooltip, Tooltip, + TooltipView, } from '@codemirror/view' import { Extension, @@ -11,16 +12,16 @@ import { StateEffect, Range, SelectionRange, + EditorState, } from '@codemirror/state' import { isSplitTestEnabled } from '@/utils/splitTestUtils' import { v4 as uuid } from 'uuid' -import { isCursorNearViewportTop } from '../utils/is-cursor-near-edge' export const addNewCommentRangeEffect = StateEffect.define>() export const removeNewCommentRangeEffect = StateEffect.define() -export const textSelectedEffect = StateEffect.define() +export const textSelectedEffect = StateEffect.define() export const removeReviewPanelTooltipEffect = StateEffect.define() @@ -46,7 +47,7 @@ export const reviewTooltip = (): Extension => { EditorView.updateListener.of(update => { if (update.selectionSet && !update.state.selection.main.empty) { update.view.dispatch({ - effects: textSelectedEffect.of(update.view), + effects: textSelectedEffect.of(null), }) } else if ( !update.startState.selection.main.empty && @@ -103,7 +104,7 @@ export const reviewTooltipStateField = StateField.define<{ } if (effect.is(textSelectedEffect)) { - tooltip = buildTooltip(effect.value) + tooltip = buildTooltip(tr.state) } if (tooltip && tr.state.selection.main.empty) { @@ -120,22 +121,25 @@ export const reviewTooltipStateField = StateField.define<{ ], }) -function buildTooltip(view: EditorView): Tooltip | null { - if (view.state.selection.main.empty) { +function buildTooltip(state: EditorState): Tooltip | null { + if (state.selection.main.empty) { return null } - const pos = view.state.selection.main.head return { - pos, - above: !isCursorNearViewportTop(view, pos, 50), - strictSide: true, - arrow: false, - create() { - const dom = document.createElement('div') - dom.className = 'review-tooltip-menu-container' - return { dom, overlap: true, offset: { x: 0, y: 8 } } - }, + pos: state.selection.main.head, + above: true, + create: createReviewTooltipView, + } +} + +const createReviewTooltipView = (): TooltipView => { + const dom = document.createElement('div') + dom.className = 'review-tooltip-menu-container' + return { + dom, + overlap: true, + offset: { x: 0, y: 8 }, } } diff --git a/services/web/package.json b/services/web/package.json index e780495779..5a5ce2babf 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -182,10 +182,10 @@ "@codemirror/commands": "^6.6.2", "@codemirror/lang-markdown": "^6.2.5", "@codemirror/language": "^6.10.3", - "@codemirror/lint": "^6.8.2", + "@codemirror/lint": "^6.8.3", "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.0", + "@codemirror/view": "^6.35.0", "@juggle/resize-observer": "^3.3.1", "@lezer/common": "^1.2.3", "@lezer/generator": "^1.7.1",