YouTube
Accepte une URL ou un ID de vidéo YouTube et le transforme en bloc intégré. Le document ne stocke que l'ID de la vidéo (11 caractères) et la largeur, et non l'URL complète ; une nouvelle vidéo commence centrée à 70 % de la largeur.
La largeur est choisie parmi des valeurs fixes, et l'alignement est stocké sur le paragraphe qui entoure la vidéo. Dans l'éditeur, le premier clic sélectionne la vidéo ; une fois sélectionnée, un nouveau clic peut la lire. Pour modifier l'adresse, supprimez la vidéo et insérez-en une nouvelle.
npm install nabi-noteimport {
createNabiWith, mountSurface, mountToolbar, mountContextToolbar,
mountHints, watchSettle, codeWing, imageWing, youtubeWing,
mountViewTools,
} from 'nabi-note'
const selected = [
codeWing,
imageWing,
youtubeWing,
]
const { nabi, registry } = createNabiWith(selected)
// Bring your own highlighter (Prism, highlight.js, Shiki, …) — the wing stays as it is
// and only the attach is swapped (`makeCodeAttach` ships from the same door)
// { ...codeWing, attach: makeCodeAttach({ highlight: (source, lang) => [{ text: source }] }) }
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()))const selected = wings().use('youtube').build()Styles CSS
Utilisez .nabi-content iframe pour modifier la bordure ou les coins de la vidéo. Ne modifiez pas la largeur stockée ni l'alignement.
.article-body iframe {
border-radius: 14px;
box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}Le package utilise aspect-ratio, la largeur et les marges d'alignement pour maintenir la taille correcte de la vidéo ; ne les écrasez pas.