NABI NOTE
Documentation

Couleur du texte ​

Appliquez un nom de couleur au texte sélectionné. La valeur stockée n'est pas une chaîne de couleur CSS ; il s'agit d'un nom autorisé, et la couleur réelle est définie par la variable CSS --nabi-tc-<name>. Cela permet au même document de rester lisible dans les thèmes clair et sombre.

Ailes
Police par défautDécalage
HTMLChargement de l'éditeur…
JSONnabi-treeChargement de l'éditeur…
Installation
npm install nabi-note
Code
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, textColorWing, highlightWing, mountViewTools,
} from 'nabi-note'

const selected = [
  textColorWing,
  highlightWing,
]
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: 'fr' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'fr' }
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('tc', {
  values: ['green', 'coral', 'blue'],
}).build()

Si values est omis, la palette par défaut est green, coral, violet, amber et blue. Si vous réduisez la liste, d'autres couleurs sont rejetées par les commandes et lors du chargement des documents.

Styles CSS ​

Le document stocke uniquement des noms de couleur. Définissez les couleurs réelles de l'éditeur et de la vue publiée avec des variables CSS.

css
.nabi-content { --nabi-tc-blue: #2563eb; }

Vérifiez le contraste avec la couleur de fond. Dans un thème sombre, le même nom de couleur peut recevoir une valeur différente.

css
.dark .article-body {
  --nabi-tc-blue: #93c5fd;
  --nabi-tc-green: #86efac;
}