तक्ता ​

टूलबारमधून ओळी आणि स्तंभ निवडून तक्ता तयार करा. कक्षांमध्ये अनेक परिच्छेद, प्रतिमा, याद्या, अवतरणे, कोड, दुमडता येणारे भाग आणि व्हिडिओ ठेवता येतात. कक्षात कर्सर ठेवल्यावर खालील गुणधर्म साधनांतून ओळी, स्तंभ, विलीनीकरण, शीर्षक कक्ष आणि पार्श्वभूमीचे रंग बदलता येतात.

खालील उदाहरणातील कक्षांचे परिच्छेद व याद्या बदलून पाहा, मग ओढून अनेक कक्ष निवडून त्यांची पार्श्वभूमी एकत्र बदला. गुणधर्म साधनांतील संपूर्ण तक्ता निवडा दाबल्यावर मुख्य टूलबारमधून तक्ता स्वतः संरेखित करता येतो.

npm install nabi-note

import {
  createLocale, createNabiWith, mountSurface, mountToolbar,
  mountContextToolbar, mountHints, watchSettle, boldWing, linkWing,
  headingWing, alignWing, dropCapWing, bulletListWing, orderedListWing,
  taskListWing, quoteWing, detailsWing, codeWing, dividerWing,
  tableWings, imageWing, youtubeWing, uploadWing, mountUpload,
  mountUploadView, mountViewTools,
} from 'nabi-note'

const selected = [
  boldWing,
  linkWing,
  headingWing,
  alignWing,
  dropCapWing,
  bulletListWing,
  orderedListWing,
  taskListWing,
  quoteWing,
  detailsWing,
  codeWing,
  dividerWing,
  ...tableWings,
  imageWing,
  youtubeWing,
  uploadWing,
]
const locale = createLocale('mr')
const { nabi, registry } = createNabiWith(selected, { locale })

// 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')!

const view = mountUploadView({ nabi, surface: content, locale })
const upload = mountUpload({
  nabi, root: content, locale,
  // your upload goes here — report progress with task.onProgress(0–100)
  uploader: async (task) => ({ uri: 'https://cdn.example/uploaded' }),
  extensions: ['png', 'jpg', 'pdf'], maxFileSize: 10 * 1024 * 1024,
  onStart: (tasks) => view.start(tasks),
  onProgress: (id, percent) => view.progress(id, percent),
  onSettle: () => view.settle(),
  onDone: () => view.done(),
})

// The locale also sets the direction — Arabic and Urdu run right to left
mountSurface({ nabi, registry, root: content, locale, fileSink: upload.take })

const settle = watchSettle(document, { surface: content })
const shared = { nabi, registry, surface: content, settle, locale }
const toolbar = mountToolbar({ ...shared, root: document.querySelector('#toolbar')!, onFiles: upload.take })
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('table').build()

कक्षांत वापरायचे wing देखील नोंदवा. सर्व मूलभूत wing असलेला संपादक wings().allBasic() वापरून तयार करा.

कक्षांमध्ये लिहिणे ​

यादी आणि कोडमधील Enter प्रत्येक ब्लॉकचे इनपुट नियम पाळते. कोडचा समास आणखी कमी करता आला नाही तरी Shift+Tab मागील कक्षात जात नाही. कक्षाच्या सुरुवातीला किंवा शेवटी Backspace किंवा Delete दाबल्याने तो शेजारच्या कक्षाशी किंवा तक्त्याबाहेरील परिच्छेदाशी जोडला जात नाही.

पेस्ट करणे आणि प्रतिमा किंवा ब्लॉक जोडणे सुरू केलेल्या कक्षातच राहते. कक्षांच्या सीमा ओलांडणाऱ्या निवडीवर ब्लॉक जोडता किंवा पेस्ट करता येत नाही. कक्षात तक्ता किंवा फ्लोट भाग ठेवता येत नाही; अशी रचना आयात किंवा पेस्ट केल्यास तिच्यातील सामग्री उघडून क्रमाने ठेवली जाते.

सामान्य कक्षांत शीर्षके वापरता येतात, पण शीर्षक कक्षांना परिच्छेदाचे शीर्षक स्वरूप लागू होत नाही. कक्ष शीर्षक कक्षात बदलताना त्यातील शीर्षके सामान्य परिच्छेद बनतात, तर मजकूर व इतर स्वरूप कायम राहते.

कक्षाच्या पार्श्वभूमीचे रंग ​

पार्श्वभूमीचा रंग एका कक्षाला किंवा ओढून निवडलेल्या आयताकृती भागाला लागू होतो. मजकुराचा काही भाग निवडला तरी त्याच्या संपूर्ण कक्षाची पार्श्वभूमी बदलते. फिकट रंग लाइट व डार्क थीमनुसार दिसतात. निवडलेल्या कक्षांचे रंग वेगवेगळे असतील तर कोणताही एक रंग निवडलेला दाखवला जात नाही.

सध्याची कक्ष निवड कायम ठेवून आदेशानेही रंग बदलता येतो.

nabi.applyCommand('setCellColor', { bg: 'cyan' })

मान्य मूल्ये yellow, green, cyan, pink, purple आणि orange आहेत. मूळ पार्श्वभूमी परत आणण्यासाठी गुणधर्म साधनांत डीफॉल्ट निवडा किंवा रिकामी स्ट्रिंग द्या.

nabi.applyCommand('setCellColor', { bg: '' })

सामग्री हटवणे, कापणे किंवा स्वरूप साफ करणे यामुळे कक्षाचा पार्श्वभूमी रंग मिटत नाही. विलीनीकरणात वरच्या डाव्या कक्षाचा रंग वापरला जातो; विभाजनात नव्या कक्षांनाही तोच रंग मिळतो. नवीन ओळी व स्तंभ मूळ पार्श्वभूमीने सुरू होतात. पार्श्वभूमी रंगातील बदल पूर्ववत व पुन्हा करता येतात.

कक्षातील सामग्री व तक्त्याचे संरेखन ​

कक्षात कर्सर असल्यास संरेखन आतील परिच्छेदांना किंवा प्रतिमांना लागू होते. अनेक कक्ष निवडल्यास कोड वगळून त्यांतील संरेखित करता येणाऱ्या सर्व परिच्छेदांना व वस्तूंना ते लागू होते. शीर्षक, संरेखन व मोठे पहिले अक्षर यांची टूलबार स्थितीही प्रत्यक्ष निवडलेल्या आतील परिच्छेदांवर अवलंबून असते. निवडलेल्या परिच्छेदांची मूल्ये भिन्न असतील तर एकच मूल्य दाखवले जात नाही.

तक्ता स्वतः संरेखित करण्यासाठी गुणधर्म साधनांतील संपूर्ण तक्ता निवडा दाबून मुख्य टूलबारची संरेखन बटणे वापरा. तक्त्याभोवतीच्या परिच्छेदात तक्त्याच्या आधी किंवा नंतर कर्सर ठेवल्यावर तुटक सीमा दिसत असेल तेव्हाही तेच संरेखन वापरता येते. ही सीमा फक्त लक्ष्य दाखवते; कर्सरला संपूर्ण तक्त्याच्या निवडीत बदलत नाही.

nabi.applyCommand('selectTable')
nabi.applyCommand('setAlign', { value: 'c' })

ओळी व स्तंभ जोडणे किंवा हटवणे, विलीनीकरण आणि विभाजन निवडलेल्या कक्षांनुसार काम करतात. विलीनीकरणात प्रत्येक कक्षातील ब्लॉक ओळींच्या क्रमाने राहतात. विभाजनात सामग्री मूळ कक्षात राहते आणि इतर कक्ष रिकामे असतात.

प्रत करणे व जतन करणे ​

अनेक कक्ष निवडून प्रत केल्यास दिसणारा आयताकृती भाग शेवटच्या कक्षापर्यंत कॉपी होतो. HTML आणि अंतर्गत क्लिपबोर्ड स्वरूप रिकामे कक्ष, विलीनीकरण, ब्लॉक, मजकुराचे स्वरूप व पार्श्वभूमी रंग जपतात. साध्या मजकुरात कक्ष टॅब आणि नव्या ओळींनी वेगळे होतात; कक्षातील ब्लॉकमधील नव्या ओळी व प्रतिमा आणि व्हिडिओचे URL जपले जातात. कापल्यावर फक्त निवडलेल्या कक्षांतील सामग्री रिकामी होते; ती एकदा पूर्ववत करून परत आणता येते.

तक्त्याच्या आधी किंवा नंतर कर्सर ठेवल्यावर तुटक सीमा दिसत असेल तर प्रत करणे आणि कापणे तक्त्याभोवतीच्या संपूर्ण परिच्छेदाला लागू होते. क्लिपबोर्डवर लिहिणे यशस्वी झाल्यावरच कापणे परिच्छेद व तक्ता दोन्ही काढते. फ्लोट भागातील तक्ता कापला किंवा हटवला तरी बाहेरील फ्लोट भाग राहतो.

JSON किंवा HTML मध्ये जतन केल्यावर कक्षांचे ब्लॉक व पार्श्वभूमी रंग जपले जातात. साधे तक्ते Markdown तक्ते म्हणून निर्यात होतात; अनेक ब्लॉक किंवा पार्श्वभूमी रंग असलेले तक्ते सामग्री जपण्यासाठी HTML म्हणून राहतात. HTML मध्ये कक्षाच्या रंगाचे नाव td किंवा th वरील data-nabi-cell-color गुणधर्मात जतन होते. बाहेरील HTML मधील मनमानी पार्श्वभूमी रंग शैली कक्षाचे रंग म्हणून आयात होत नाहीत.

प्रकाशित दृश्यात स्तंभानुसार क्रम लावण्यासाठी तक्ता क्रम लावता येण्याजोगा म्हणून जतन करा आणि nabi-note/viewer चे attachViewer() जोडा. विलीन कक्ष असलेल्या तक्त्यांना स्तंभानुसार क्रम लावता येत नाही.

CSS शैली ​

तक्त्यासाठी .nabi-content table आणि कक्षांसाठी .nabi-content :is(th, td) वापरून शैली द्या. ठरवलेले पार्श्वभूमी रंग झाकले जाऊ नयेत म्हणून पट्टे आणि शीर्षक पार्श्वभूमी फक्त रंग नसलेल्या कक्षांना लावा.

.article-body table { inline-size: 100%; border-collapse: collapse; }
.article-body :is(th, td) { padding: .6rem .75rem; border: 1px solid var(--nabi-line); }
.article-body th { font-weight: 700; }
.article-body th:not([data-nabi-cell-color]) { background: var(--nabi-soft); }
.article-body tr:nth-child(even) td:not([data-nabi-cell-color]) {
  background: color-mix(in srgb, var(--nabi-soft) 45%, transparent);
}

कक्षाचा पार्श्वभूमी रंग --nabi-cell-yellow सारख्या रंगाच्या नावाच्या CSS चलांनी बदला. खालील CSS पॅकेज CSS नंतर लोड करा आणि table-note वर्ग व सध्याच्या थीमचे data-nabi-theme मूल्य थेट संपादकाच्या .nabi किंवा प्रकाशित दृश्याच्या .nabi-content घटकाला द्या.

.table-note:is(.nabi, .nabi-content)[data-nabi-theme="light"] {
  --nabi-cell-cyan: #e2f4f7;
}
.table-note:is(.nabi, .nabi-content)[data-nabi-theme="dark"] {
  --nabi-cell-cyan: #183b43;
}

viewer जोडला असल्यास .nabi-sort बटण कायम ठेवा. कक्षाचे position किंवा उजवे padding जबरदस्तीने बदलल्यास क्रम लावण्याच्या बटणावर आच्छादन होऊ शकते.