NABI NOTE
Documentation

Lien ​

Sélectionnez du texte et attachez-y une adresse. Si vous saisissez une adresse sans avoir sélectionné de texte, l'adresse elle-même est insérée comme texte du lien. La saisie d'une adresse http:// ou https: suivie de la touche Espace ou Entrée la transforme également en un lien.

Les liens ne stockent que les chemins http:, https: et ceux du même site commençant par . ou /. Les adresses dont l'origine ne peut pas être clairement identifiée, telles que javascript: ou //example.com, sont rejetées. Les liens de pièces jointes créés par des téléchargements stockent également des informations sur le fichier et ne peuvent pas être créés manuellement comme les liens ordinaires.

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

const selected = [
  subscriptWing,
  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('a').build()

Styles CSS ​

Stylisez les liens ordinaires avec .nabi-content a, et les liens de pièces jointes séparément avec .nabi-content a[data-nabi-file].

css
.article-body a:not([data-nabi-file]) {
  color: var(--nabi-accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.article-body a[data-nabi-file] {
  display: inline-flex;
  gap: .35em;
  padding: .25em .55em;
  background: var(--nabi-soft);
}

Les parties ::before et ::after des liens de pièces jointes sont utilisées pour afficher l'icône du fichier et l'extension, il est donc généralement préférable de ne pas remplacer ni supprimer leur content.