Task List
A list with completion state. Type [ ] or [x] followed by Space in an empty paragraph, or create one from the toolbar, then click the checkbox to change its state.
The checked state is stored with each item in the document. When an item is split, the checked state follows the item that keeps the text rather than the empty item before it, so splitting a completed task does not flip the state unexpectedly.
Wings
Base typefaceOffset
HTMLLoading the editor…
JSONnabi-treeLoading the editor…
Install
npm install nabi-noteCode
import {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, orderedListWing, taskListWing, tableWings,
mountViewTools,
} from 'nabi-note'
const selected = [
orderedListWing,
taskListWing,
...tableWings,
]
const { nabi, registry } = createNabiWith(selected)
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('tl').build()