From 40cbfc451aa08eef3a8fb0dccb2b12d08323f14e Mon Sep 17 00:00:00 2001 From: Alf Eaton Date: Fri, 28 Apr 2023 09:41:05 +0100 Subject: [PATCH] [cm6] Improve search match scrolling into view (#12787) GitOrigin-RevId: 6ce9b86253a9c3a2c6ff44c10f78204ff16bd6e2 --- package-lock.json | 16 ++++++------- .../source-editor/extensions/search.ts | 24 ++++++++++++++++++- services/web/package.json | 2 +- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 226d4f3feb..d244f9de58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3248,9 +3248,9 @@ } }, "node_modules/@codemirror/search": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.3.0.tgz", - "integrity": "sha512-rBhZxzT34CarfhgCZGhaLBScABDN3iqJxixzNuINp9lrb3lzm0nTpR77G1VrxGO3HOGK7j62jcJftQM7eCOIuw==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.4.0.tgz", + "integrity": "sha512-zMDgaBXah+nMLK2dHz9GdCnGbQu+oaGRXS1qviqNZkvOCv/whp5XZFyoikLp/23PM9RBcbuKUUISUmQHM1eRHw==", "dependencies": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", @@ -35172,7 +35172,7 @@ "@codemirror/lang-markdown": "^6.1.1", "@codemirror/language": "^6.6.0", "@codemirror/lint": "^6.2.1", - "@codemirror/search": "^6.3.0", + "@codemirror/search": "^6.4.0", "@codemirror/state": "^6.2.0", "@codemirror/view": "^6.9.6", "@contentful/rich-text-html-renderer": "^16.0.2", @@ -40025,9 +40025,9 @@ } }, "@codemirror/search": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.3.0.tgz", - "integrity": "sha512-rBhZxzT34CarfhgCZGhaLBScABDN3iqJxixzNuINp9lrb3lzm0nTpR77G1VrxGO3HOGK7j62jcJftQM7eCOIuw==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.4.0.tgz", + "integrity": "sha512-zMDgaBXah+nMLK2dHz9GdCnGbQu+oaGRXS1qviqNZkvOCv/whp5XZFyoikLp/23PM9RBcbuKUUISUmQHM1eRHw==", "requires": { "@codemirror/state": "^6.0.0", "@codemirror/view": "^6.0.0", @@ -44852,7 +44852,7 @@ "@codemirror/lang-markdown": "^6.1.1", "@codemirror/language": "^6.6.0", "@codemirror/lint": "^6.2.1", - "@codemirror/search": "^6.3.0", + "@codemirror/search": "^6.4.0", "@codemirror/state": "^6.2.0", "@codemirror/view": "^6.9.6", "@contentful/rich-text-html-renderer": "^16.0.2", diff --git a/services/web/frontend/js/features/source-editor/extensions/search.ts b/services/web/frontend/js/features/source-editor/extensions/search.ts index 96dba7e17c..3aa31a59ef 100644 --- a/services/web/frontend/js/features/source-editor/extensions/search.ts +++ b/services/web/frontend/js/features/source-editor/extensions/search.ts @@ -8,7 +8,12 @@ import { searchPanelOpen, } from '@codemirror/search' import { EditorView, keymap, ViewPlugin } from '@codemirror/view' -import { Annotation, EditorState, TransactionSpec } from '@codemirror/state' +import { + Annotation, + EditorState, + SelectionRange, + TransactionSpec, +} from '@codemirror/state' import { highlightSelectionMatches } from './highlight-selection-matches' const restoreSearchQueryAnnotation = Annotation.define() @@ -55,6 +60,23 @@ export const search = () => { // a wrapper round `search`, which creates a custom panel element and passes it to React by dispatching an event searchExtension({ literal: true, + // centre the search match if it was outside the visible area + scrollToMatch: (range: SelectionRange, view: EditorView) => { + const coords = { + from: view.coordsAtPos(range.from), + to: view.coordsAtPos(range.to), + } + const scrollRect = view.scrollDOM.getBoundingClientRect() + const strategy = + (coords.from && coords.from.top < scrollRect.top) || + (coords.to && coords.to.bottom > scrollRect.bottom) + ? 'center' + : 'nearest' + + return EditorView.scrollIntoView(range, { + y: strategy, + }) + }, createPanel: () => { const dom = document.createElement('div') dom.className = 'ol-cm-search' diff --git a/services/web/package.json b/services/web/package.json index 70b226ec70..1c2ecd4ac7 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -76,7 +76,7 @@ "@codemirror/lang-markdown": "^6.1.1", "@codemirror/language": "^6.6.0", "@codemirror/lint": "^6.2.1", - "@codemirror/search": "^6.3.0", + "@codemirror/search": "^6.4.0", "@codemirror/state": "^6.2.0", "@codemirror/view": "^6.9.6", "@contentful/rich-text-html-renderer": "^16.0.2",