Footnote
Connect extra explanations with numbers in the text and a list at the end of the document.
Enter text using the footnote toolbar button to insert a footnote at the caret. With a text selection, it is inserted at the end without replacing the selected text. Numbers are not stored; they are assigned automatically in document order.
Click a number in the body to edit its text in the property row. Use the delete control, or press Backspace or Delete twice beside the footnote to select and then remove it. The list below is read-only and disappears when there are no footnotes.
In preview and published pages with the viewer attached, hover over, click, or tap a number to read its text. Content accepts one line of plain text and uses a sans-serif font at 0.875 of the body’s base size. HTML is displayed literally.
npm install nabi-noteimport {
createLocale, createNabiWith, mountSurface, mountToolbar,
mountContextToolbar, mountHints, watchSettle, highlightWing, linkWing,
footnoteWing, mountViewTools,
} from 'nabi-note'
const selected = [
highlightWing,
linkWing,
footnoteWing,
]
const locale = createLocale('en')
const { nabi, registry } = createNabiWith(selected, { locale })
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 })
const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
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()))
// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')const selected = wings().use('fn').build()