लिंक ​

Pilih teks lalu lampirkan alamat padanya. Jika Anda memasukkan alamat tanpa memilih teks, alamat itu sendiri dimasukkan sebagai teks tautan. Mengetik alamat http:// atau https:// lalu menekan Space atau Enter juga mengubahnya menjadi tautan.

Tautan hanya menyimpan http:, https:, dan path situs yang sama yang diawali . atau /. Alamat yang asalnya tidak dapat dikenali jelas, seperti javascript: atau //example.com, ditolak. Tautan lampiran yang dibuat oleh upload juga menyimpan informasi file dan tidak dapat dibuat manual seperti tautan biasa.

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('hi')
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()

URL पेस्ट करना ​

शुरू और अंत के खाली अक्षर हटाने के बाद यदि पेस्ट की गई पूरी सामग्री एक मान्य http:// या https:// URL है, तो उसे तुरंत लिंक के रूप में डाला जाता है। वाक्यों के भीतर URL, कई URL वाला पाठ और सापेक्ष पथ मौजूदा पेस्ट व्यवहार के अनुसार संसाधित होते हैं। कोड ब्लॉक और लिंक wing के बिना वाले संपादक में सामग्री पाठ बनी रहती है। मूल फ़ॉर्मैट बनाए रखने के लिए संपादक से कॉपी किए गए मान्य आंतरिक क्लिपबोर्ड डेटा को प्राथमिकता मिलती है।

लिंक का दिखने वाला पाठ तय करने के लिए mountSurface() में onPasteUrl कॉलबैक का उपयोग करें।

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

लौटाई गई स्ट्रिंग में खाली अक्षरों के अलावा कोई अक्षर हो, तो वह दिखने वाला पाठ बन जाती है। कॉलबैक न होने पर, खाली या स्ट्रिंग के अलावा किसी दूसरे प्रकार का मान लौटाने पर, या विफल होने पर पेस्ट किया गया URL ही दिखने वाला पाठ रहता है। लौटाई गई स्ट्रिंग को कभी HTML नहीं माना जाता और वह लिंक का पता नहीं बदलती।

कॉलबैक async फ़ंक्शन और Promise भी स्वीकार करता है। जवाब की प्रतीक्षा के दौरान URL लिंक तुरंत डाल दिया जाता है; बाद में मान्य परिणाम आने पर केवल उसी लिंक का दिखने वाला पाठ बदलता है। इस बीच लिंक संपादित या हटा दिया गया हो, नया दस्तावेज़ लोड हुआ हो, या surface अनमाउंट किया गया हो, तो देर से आए परिणाम को अनदेखा किया जाता है।

CSS स्टाइल ​

Beri gaya tautan biasa dengan .nabi-content a, dan tautan lampiran secara terpisah dengan .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);
}

Bagian ::before dan ::after pada tautan lampiran dipakai untuk menampilkan ikon dan ekstensi file, jadi biasanya sebaiknya jangan mengganti atau menghapus content-nya.