NABI NOTE
Documentation

Surbrillance ​

Appliquez une couleur de surbrillance derrière le texte sélectionné. Les données stockées conservent uniquement les noms de couleurs autorisés au lieu de valeurs CSS arbitraires, afin que les données du document et le style visuel restent séparés.

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, linkWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  textColorWing,
  highlightWing,
  linkWing,
]
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('hl', {
  values: ['yellow', 'green', 'cyan'],
}).build()

Si values est omis, la palette par défaut est yellow, green, cyan, pink, purple et orange. Si vous réduisez la liste, les couleurs non enregistrées ne sont pas conservées même lors du chargement d'un document existant.

Styles CSS ​

Le document stocke uniquement des noms de couleurs. Modifiez les couleurs de l'éditeur et de la vue publiée via des variables CSS.

css
.nabi-content { --nabi-hl-yellow: #fff0a6; }

La modification simultanée de plusieurs couleurs permet de conserver les noms de couleurs du document tout en adaptant uniquement l'humeur du produit.

css
.article-body {
  --nabi-hl-yellow: #fff0a6;
  --nabi-hl-green: #c8f0d8;
  --nabi-hl-pink: #ffd6e5;
}