Every extension
selectionHighlight
Every other occurrence of the selected word, highlighted.
What a code editor does when a name is selected, and what makes "is this used anywhere else" a glance rather than a search. Only a selection that could be a word qualifies: inside one textblock, no whitespace, at least `minLength` characters. The selected range itself is left alone, since the browser is already drawing that one.
Matches are found per top-level block and remembered on the block node with the query they were found for. Moving the selection to another occurrence of the same word rescans nothing; typing rescans the paragraph being typed in; selecting a different word rescans each block as it is reached. The result is memoised on the document and the selection, so a transaction that changed neither hands the renderer the same array and it draws nothing.
createEditor({ extensions: [...starterKit, selectionHighlight()] })
Adding it
import { createEditor, document, paragraph, text, selectionHighlight } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, selectionHighlight({ … })],
element: document.querySelector('#editor'),
})
There is no separate package · selectionHighlight is already in @matrajs/core, and an extension you do not import is not in your bundle. document, paragraph and text are the floor every document needs.
Options
| Field | Type | |
|---|---|---|
minLength | number | The shortest selection that is looked for elsewhere. Default 2. |
caseSensitive | boolean | Match case. Default false. |
wholeWord | boolean | Whole words only, so a selected `cat` leaves `cats` alone. Default false. |
max | number | The most matches drawn, so a common word in a long document stays cheap. Default 500. |
Styles
This one needs a stylesheet to look right, and ships the minimum as a string rather than a file · nothing is loaded unless you load it.
import { selectionHighlightCSS } from '@matrajs/core'
const style = document.createElement('style')
style.textContent = selectionHighlightCSS
document.head.append(style)