Every extension
details
A collapsible block — a Notion toggle, an HTML `<details>`.
Rendered as the real element, so open and closed are what the browser already knows how to do. The node view keeps the document in step with the disclosure triangle: clicking it writes `open` to the attribute, and an `open` that arrives from elsewhere — undo, a peer, a loaded document — is written back to the element.
Adding it
import { createEditor, document, paragraph, text, details } from '@matrajs/core'
const editor = createEditor({
extensions: [document, paragraph, text, details],
element: document.querySelector('#editor'),
})
There is no separate package · details 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.
Commands
-
editor.commands.insertDetails() -
editor.commands.toggleDetails() -
editor.commands.setDetailsOpen() -
editor.commands.unsetDetails()
Keys
- Enter ·
Attributes
-
open· defaults totrue
HTML
-
Parses
details -
Renders
details
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 { detailsCSS } from '@matrajs/core'
const style = document.createElement('style')
style.textContent = detailsCSS
document.head.append(style)