NABI NOTE
Docs

Details ​

Group a short summary and body into one block. When you create it from the toolbar, you enter the summary first and continue writing content below it.

The open state set with the triangle is stored in the document and becomes the initial state in the published view. While editing, the body is kept open so it can be changed, but the stored state value is preserved.

Wings
Base typefaceOffset
HTMLLoading the editor…
JSONnabi-treeLoading the editor…
Install
npm install nabi-note
Code
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, quoteWing, detailsWing, codeWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  quoteWing,
  detailsWing,
  codeWing,
]
const { nabi, registry } = createNabiWith(selected)

// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }

const root = document.querySelector('.nabi')!
const content = document.querySelector('.nabi-content')!

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale: 'en' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'en' }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')! })
const context = mountContextToolbar({ ...shared, root: document.querySelector('#context')! })
mountHints({ toolbar, context, root, surface: content })
// The preview and fullscreen buttons — they stand their own box at the end of the row
mountViewTools({ ...shared, root, container: document.querySelector('#toolbar')! })

// on every change — hook up your own code here
// nabi.onChange(() => user_callback(nabi.getHtml()))
ts
const selected = wings().use('details').build()

CSS Styles ​

Style the details block with .nabi-content details, and the title with .nabi-content details > summary.

css
.article-body details {
  padding: .75rem 1rem;
  border: 1px solid var(--nabi-line);
  border-radius: var(--nabi-radius);
  background: var(--nabi-soft);
}

.article-body details > summary { cursor: pointer; font-weight: 700; }
.article-body details[open] > summary { margin-block-end: .75rem; }

The open attribute is the initial open state saved by the author. CSS can style this state, but it is better not to force the state itself.