Сноска
Связывайте дополнительные пояснения с номерами в тексте и списком в конце документа.
Введите текст с помощью кнопки сноски на панели инструментов, чтобы вставить сноску в позицию курсора. Если текст выделен, сноска добавляется в конце выделения, сохраняя сам текст. Номера не сохраняются, а автоматически назначаются по порядку в документе.
Нажмите номер в тексте, чтобы изменить содержимое в строке свойств. Используйте инструмент удаления или дважды нажмите Backspace либо Delete рядом со сноской, чтобы сначала выделить, а затем удалить её. Список внизу доступен только для чтения и исчезает, когда сносок нет.
В предпросмотре и на опубликованных страницах с подключённым viewer наведите указатель, щёлкните или коснитесь номера, чтобы прочитать содержимое. Допускается одна строка обычного текста, которая отображается шрифтом без засечек размером 0,875 от базового размера основного текста. HTML отображается буквально.
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('ru')
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()