लिंक ​

मजकूर निवडा आणि त्याला address जोडा. मजकूर न निवडता address घातल्यास address स्वतः link text म्हणून घातला जातो. http:// किंवा https:// address टाइप करून Space किंवा Enter दाबल्यास तोही link बनतो.

links फक्त http:, https: आणि . किंवा / ने सुरू होणारे त्याच site चे paths साठवतात. javascript: किंवा //example.com सारखे स्पष्ट origin नसलेले addresses नाकारले जातात. upload ने तयार झालेल्या attachment links मध्ये file informationही असते आणि त्या सामान्य link सारख्या हाताने बनवता येत नाहीत.

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('mr')
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 शैली ​

सामान्य links ला .nabi-content a ने आणि attachment links ला स्वतंत्रपणे .nabi-content a[data-nabi-file] ने style करा.

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

attachment link चे ::before आणि ::after icon व file extension दाखवतात, म्हणून त्यांचा content सहसा बदलू किंवा काढू नये.