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

GitOrigin-RevId: 6ce9b86253a9c3a2c6ff44c10f78204ff16bd6e2
This commit is contained in:
Alf Eaton 2023-04-28 09:41:05 +01:00 committed by Copybot
parent c53411ff1d
commit 40cbfc451a
3 changed files with 32 additions and 10 deletions

16
package-lock.json generated
View file

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

View file

@ -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'

View file

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