Rich text / foldkit-richtext-dom
As a form control
foldkit-richtext-dom/input puts the editor in a foldkit-form form: a key whose value is a
RichText.Document. It is the one entry that imports foldkit-form, an optional peer.
ts
import { Form } from 'foldkit-form'
import { richTextInput } from 'foldkit-richtext-dom/input'
// PostInput is an `Entity.input(...)` whose `body` field is a `RichText.Document`.
const PostForm = Form.make('PostForm', PostInput, {
inputs: { body: richTextInput('post-body', { placeholder: 'Write the post…' }) },
})Here there is no parent to hold the document: a form key has nothing to report an edit to,
and Input.bundle refuses a Bundle with an OutMessage. So EditorInput is the same editor
holding its document in its own Model, with each committed edit and undo folded back in. The
form owns that Model as the key's draft; the document is the key's value, validated,
submitted, and reported by authoredChanged like any other.
- Placement:
richTextInput(hostId, placement)places whateditorAtplaces, under that host id. Since one host id is one editor, a key repeated in a form's rows cannot be a rich-text control yet. - Nothing entered: a new record starts on one empty paragraph, which is where a caret can go. A blank document reads as no value, so a required key refuses it.
- Filling:
fillshows a given document with a history of its own and no selection, since the caret was in runs the given document does not have. - Resuming:
settled, for a stored draft shown again, keeps the caret, the stored marks, and the history, clears only the slash menu's highlight, and takes this placement's host id in case the draft was stored under another.