Link ​

Markieren Sie Text und verknüpfen Sie eine Adresse damit. Wenn Sie eine Adresse eingeben, ohne Text auszuwählen, wird die Adresse selbst als Linktext eingefügt. Das Tippen einer http://- oder https://-Adresse und anschließendes Drücken von Leertaste oder Eingabetaste wandelt diese ebenfalls in einen Link um.

Links speichern nur http:, https: und gleichseitige Pfade, die mit . oder / beginnen. Adressen, deren Ursprung nicht eindeutig identifiziert werden kann, wie javascript: oder //example.com, werden abgelehnt. Durch Uploads erstellte Anhangslinks speichern ebenfalls Dateinformationen und können nicht manuell wie gewöhnliche Links erstellt werden.

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, subscriptWing, linkWing,
  footnoteWing, mountViewTools,
} from 'nabi-note'

const selected = [
  subscriptWing,
  linkWing,
  footnoteWing,
]
const locale = createLocale('de')
const { nabi, registry } = createNabiWith(selected, { locale })

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 })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
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()))

// Call from your language selector. Content and editing history stay intact.
// locale.setLocale('ko')

const selected = wings().use('a').build()

URLs einfügen ​

Wenn der gesamte eingefügte Inhalt ohne umgebende Leerzeichen eine gültige http://- oder https://-URL ist, wird er sofort als Link eingefügt. URLs in Sätzen, Text mit mehreren URLs und relative Pfade werden wie bisher eingefügt. In Codeblöcken und Editoren ohne Link-Wing bleibt der Inhalt Text. Gültige interne Zwischenablagedaten aus dem Editor haben Vorrang, damit ihre ursprüngliche Formatierung erhalten bleibt.

Mit dem Callback onPasteUrl in mountSurface() können Sie den Anzeigetext des Links festlegen.

const surface = mountSurface({
  nabi,
  registry,
  root: document.querySelector<HTMLElement>('#editor')!,
  onPasteUrl(url, isSameOrigin, path) {
    if (isSameOrigin && path === '/guide') return 'NABI NOTE'
    return url
  },
})

Eine zurückgegebene Zeichenfolge, die nicht nur aus Leerzeichen besteht, wird als Anzeigetext verwendet. Wenn der Callback fehlt, einen leeren Wert oder einen anderen Typ zurückgibt oder fehlschlägt, bleibt die eingefügte URL der Anzeigetext. Zurückgegebene Zeichenfolgen werden niemals als HTML interpretiert und ändern die Linkadresse nicht.

Der Callback unterstützt auch async-Funktionen und Promises. Während die Antwort aussteht, wird der URL-Link sofort eingefügt; ein späteres gültiges Ergebnis ändert nur den Anzeigetext dieses Links. Ein verspätetes Ergebnis wird ignoriert, wenn der Link bearbeitet oder gelöscht, ein neues Dokument geladen oder die Surface ausgehängt wurde.

CSS-Stile ​

Stilieren Sie gewöhnliche Links mit .nabi-content a und Anhangslinks separat mit .nabi-content a[data-nabi-file].

.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);
}

Die Teile ::before und ::after von Anhangslinks werden verwendet, um das Dateiicon und die Erweiterung anzuzeigen, daher ist es in der Regel am besten, deren content nicht zu ersetzen oder zu entfernen.