[cm6] Improve search match scrolling into view (#12787)

GitOrigin-RevId: 6ce9b86253a9c3a2c6ff44c10f78204ff16bd6e2

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

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<boolean>()
@@ -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'

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