तालिका ​

टूलबार में पंक्तियाँ और स्तंभ चुनकर तालिका बनाएँ। कोशिकाओं में कई अनुच्छेद, चित्र, सूचियाँ, उद्धरण, कोड, समेटने वाले भाग और वीडियो रख सकते हैं। कोशिका में कर्सर रखने पर नीचे के गुण उपकरणों से पंक्तियाँ, स्तंभ, विलय, शीर्षक कोशिकाएँ और पृष्ठभूमि रंग बदल सकते हैं।

नीचे के उदाहरण में कोशिकाओं के अनुच्छेद और सूचियाँ बदलें, फिर कई कोशिकाओं पर खींचकर उनकी पृष्ठभूमि एक साथ बदलें। गुण उपकरणों में पूरी तालिका चुनें दबाकर मुख्य टूलबार से तालिका को स्वयं संरेखित कर सकते हैं।

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('hi')
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 को जबरन बदलने से वह क्रमबद्ध करने के बटन पर चढ़ सकती है।