diff --git a/package-lock.json b/package-lock.json index 2bc7316772..6ef2d73217 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3432,10 +3432,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.34.3", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.3.tgz", + "integrity": "sha512-Ph5d+u8DxIeSgssXEakaakImkzBV4+slwIbcxl9oc9evexJhImeu/G8TK7+zp+IFK9KuJ0BdSn6kTBJeH2CHvA==", "dev": true, + "license": "MIT", "dependencies": { "@codemirror/state": "^6.4.0", "style-mod": "^4.1.0", @@ -41474,7 +41475,7 @@ "@codemirror/lint": "^6.8.2", "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.0", + "@codemirror/view": "^6.34.3", "@juggle/resize-observer": "^3.3.1", "@lezer/common": "^1.2.1", "@lezer/generator": "^1.7.1", @@ -46493,9 +46494,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.34.3", + "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.34.3.tgz", + "integrity": "sha512-Ph5d+u8DxIeSgssXEakaakImkzBV4+slwIbcxl9oc9evexJhImeu/G8TK7+zp+IFK9KuJ0BdSn6kTBJeH2CHvA==", "dev": true, "requires": { "@codemirror/state": "^6.4.0", @@ -50969,7 +50970,7 @@ "@codemirror/lint": "^6.8.2", "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.0", + "@codemirror/view": "^6.34.3", "@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 8f28101e1a..a41b383ece 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -185,7 +185,7 @@ "@codemirror/lint": "^6.8.2", "@codemirror/search": "github:overleaf/codemirror-search#94f33f7fa6db95dadd3d7aed05c30cdde550835a", "@codemirror/state": "^6.4.1", - "@codemirror/view": "^6.34.0", + "@codemirror/view": "^6.34.3", "@juggle/resize-observer": "^3.3.1", "@lezer/common": "^1.2.1", "@lezer/generator": "^1.7.1",