টেবিল ​

টুলবার থেকে সারি ও কলাম বেছে টেবিল তৈরি করুন। ঘরে একাধিক অনুচ্ছেদ, ছবি, তালিকা, উদ্ধৃতি, কোড, ভাঁজযোগ্য অংশ ও ভিডিও রাখা যায়। ঘরে কার্সর রাখলে নিচের বৈশিষ্ট্য সরঞ্জাম দিয়ে সারি, কলাম, একত্রীকরণ, শিরোনাম ঘর ও পটভূমির রং বদলানো যায়।

নিচের উদাহরণে ঘরের অনুচ্ছেদ ও তালিকা বদলে দেখুন, তারপর টেনে একাধিক ঘর বেছে একসঙ্গে পটভূমি বদলান। বৈশিষ্ট্য সরঞ্জামে পুরো সারণি নির্বাচন করুন চাপলে মূল টুলবার থেকে টেবিলটিকেই সারিবদ্ধ করা যায়।

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('bn')
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 জোর করে বদলালে সাজানোর বোতামের ওপর পড়তে পারে।