Extensions

details

Node in detailsKit 0.57 kB gzipped

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.

1 · Install

One package for every extension · there is no @matrajs/details to install.

npm i @matrajs/core

2 · 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, details } from '@matrajs/core'

const editor = createEditor({
  extensions: [document, paragraph, text, details],
  element: document.querySelector('#editor'),
})

Already in detailsKit · if you spread that kit you have this extension and adding it again is a duplicate the schema will reject.

3 · Use it

Run a command, and give focus back · a click on a button takes it away.

editor.commands.insertDetails()
editor.focus()

From the keyboard: Enter .

Wired to a button, with the pressed state kept in step:

const button = document.querySelector('#insertDetails')

button.addEventListener('click', () => {
  editor.commands.insertDetails()
  editor.focus()
})

const read = () => button.setAttribute('aria-pressed', String(editor.isActive('details')))
editor.on('selectionChange', read)
editor.on('change', read)
read()

Both events, not one. selectionChange covers the caret moving into it; change covers the command that changed it without moving anything. A toolbar wired to only the first goes stale the moment someone uses the keyboard.

Commands

Every one returns true if it changed the document and false if it could not · a command that does not apply where the caret is says so rather than throwing.

Command	Call
`insertDetails`	`editor.commands.insertDetails()`
`toggleDetails`	`editor.commands.toggleDetails()`
`setDetailsOpen`	`editor.commands.setDetailsOpen(open: boolean, at: Pos)`
`unsetDetails`	`editor.commands.unsetDetails()`

Keyboard shortcuts

Enter ·

Mod is Command on a Mac and Control everywhere else. To rebind one, put your own extension after this in the array · later keys win.

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 { detailsCSS } from '@matrajs/core'

const style = document.createElement('style')
style.textContent = detailsCSS
document.head.append(style)

In the document

Attribute	Default
`open`	`true`

Reads details when HTML is pasted or loaded.
Writes details in getHTML() and renderToHTML().