Every extension
locked
Blocks that refuse to change.
A contract with clauses nobody may edit and blanks they may; a form letter whose greeting is fixed; a template where the headings stay and the prose beneath them is yours. Every editor makes the whole document editable or none of it, and the gap between those is what this fills.
The lock is an attribute, so it travels with the document, and the guard is a change filter rather than a read-only view: a keystroke, a paste, a drop, a drag and a command that would alter a locked node are all refused the same way, because all of them are changes. Nothing that leaves a locked node exactly as it was is refused — typing beside it, moving it, moving something past it — because nodes are immutable and an untouched node keeps its identity: every locked node of the old document has to be present, as the same object, in the new one. Top-level blocks nothing touched are the same objects too, so their locked nodes come out of a cache and the check costs the blocks that changed.
The lock itself is the one edit a locked node accepts, and undo of a lock is another, so `lock`, `unlock` and history all pass. `setContent` replaces the document rather than editing it and passes too.
Adding it
import { createEditor, document, paragraph, text, locked } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, locked({ … })],
element: document.querySelector('#editor'),
})
There is no separate package · locked 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 | |
|---|---|---|
types | readonly string[] | Node types that may carry the lock. Defaults to every block the bundled extensions define. A name the editor does not have is ignored, so the default list costs nothing in a small editor and covers the whole of a large one. |
Commands
-
editor.commands.lock() -
editor.commands.unlock() -
editor.commands.toggleLock()
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 { lockedCSS } from '@matrajs/core'
const style = document.createElement('style')
style.textContent = lockedCSS
document.head.append(style)