Extensions
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()] })1 · Install
One package for every extension · there is no @matrajs/selectionHighlight to install.
npm i @matrajs/core2 · Add it to the editor
Import it and put it in the extensions array. That array is the whole feature list:
what is not in it is not in your bundle and not in the document's schema.
import { createEditor, document, paragraph, text, selectionHighlight } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, selectionHighlight({ … })],
element: document.querySelector('#editor'),
})3 · Use it
Nothing to call · this one works once it is in the array. Every other occurrence of the selected word, highlighted.
Options
selectionHighlight is a function · call it with an options object.
| Option | Type | What it does |
|---|---|---|
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. |
Styling
This one needs CSS to look right, and ships the minimum as a string rather than a file · nothing loads unless you load it, and you can ignore it and write your own.
import { selectionHighlightCSS } from '@matrajs/core'
const style = document.createElement('style')
style.textContent = selectionHighlightCSS
document.head.append(style)