Extensions
placeholder
Prompt text for an empty editor.
Implemented as a data attribute on the editable element plus a CSS rule, rather than a fake node in the document — a placeholder that lives in the document is one a user can select, copy and accidentally save.
1 · Install
One package for every extension · there is no @matrajs/placeholder 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, placeholder } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, placeholder({ … })],
element: document.querySelector('#editor'),
})3 · Use it
Nothing to call · this one works once it is in the array. Prompt text for an empty editor.
Options
placeholder is a function · call it with an options object.
| Option | Type | What it does |
|---|---|---|
text required | string | — |
everyBlock | boolean | Also prompt inside an empty block the caret is in, not just an empty document — the way a Notion-style page hints at every new line. |
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 { placeholderCSS } from '@matrajs/core'
const style = document.createElement('style')
style.textContent = placeholderCSS
document.head.append(style)