NABI NOTE
Documentación

Tipo de letra ​

Aplica una familia tipográfica al texto seleccionado. Si hay un rango seleccionado, solo cambia ese rango; si solo hay cursor, se aplica al texto del párrafo actual. Los archivos de fuente reales y los valores font-family se definen en el CSS del servicio.

Las familias predeterminadas son sans, serif, mono y cursive. Especialmente en servicios que incluyen coreano u otro contenido multilingüe, conviene decidir explícitamente qué fuentes usará cada familia.

Alas
Tipografía baseAltura
HTMLCargando el editor…
JSONnabi-treeCargando el editor…
Instalación
npm install nabi-note
Código
import {
  createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
  mountHints, watchSettle, typefaceWing, fontSizeWing, dropCapWing,
  mountViewTools,
} from 'nabi-note'

const selected = [
  typefaceWing,
  fontSizeWing,
  dropCapWing,
]
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: 'es' })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale: 'es' }
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('tf', {
  values: ['sans', 'serif', 'mono'],
}).build()

Si se omite values, se usan todas las familias predeterminadas. En los documentos solo se permiten los valores incluidos en values.

Estilos CSS ​

El documento guarda solo el nombre de la familia, y el CSS elige los archivos de fuente. Cambia las variables en el mismo contenedor para el editor y la vista publicada.

css
.nabi-content {
  --nabi-font-serif: "Noto Serif", "Noto Serif KR", serif;
  --nabi-font-mono: "JetBrains Mono", monospace;
}

Si usas fuentes web, carga primero esos archivos de fuente. cursive suele tener poca cobertura para muchos idiomas, así que es mejor ofrecerlo solo después de elegir la fuente real que usará tu servicio.