جدول ​

برای ساخت جدول، سطرها و ستون‌ها را از نوار ابزار انتخاب کنید. سلول‌ها می‌توانند چند پاراگراف، تصویر، فهرست، نقل‌قول، کد، بخش جمع‌شونده و ویدئو داشته باشند. نشانگر را در یک سلول قرار دهید تا با ابزارهای ویژگی در پایین، سطرها، ستون‌ها، ادغام، سلول‌های سرآیند و رنگ پس‌زمینه را ویرایش کنید.

در مثال زیر، پاراگراف‌ها و فهرست‌های داخل سلول‌ها را ویرایش کنید، سپس با کشیدن روی چند سلول، پس‌زمینهٔ آن‌ها را هم‌زمان تغییر دهید. با زدن انتخاب جدول در ابزارهای ویژگی، می‌توانید خود جدول را از نوار ابزار اصلی تراز کنید.

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

بال‌هایی را که درون سلول‌ها استفاده می‌کنید نیز ثبت کنید. برای ویرایشگری با همهٔ بال‌های پایه، از 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 و قالب داخلی کلیپ‌بورد، سلول‌های خالی، ادغام‌ها، بلوک‌ها، قالب‌بندی متن و رنگ‌های پس‌زمینه را حفظ می‌کنند. متن ساده، سلول‌ها را با تب و خط جدید جدا می‌کند و خط‌های جدید میان بلوک‌های یک سلول و نشانی تصاویر و ویدئوها را نگه می‌دارد. برش فقط محتوای سلول‌های انتخاب‌شده را خالی می‌کند و با یک واگرد برمی‌گردد.

وقتی نشانگر پیش یا پس از جدول است و کادر خط‌چین دیده می‌شود، کپی و برش روی کل پاراگراف دربرگیرندهٔ جدول اعمال می‌شوند. برش پس از موفقیت نوشتن در کلیپ‌بورد، پاراگراف و جدول را با هم حذف می‌کند. برش یا حذف جدول درون ناحیهٔ شناور، ناحیهٔ شناور بیرونی را نگه می‌دارد.

ذخیره در JSON و HTML، بلوک‌ها و رنگ پس‌زمینهٔ سلول‌ها را حفظ می‌کند. جدول‌های ساده به‌صورت جدول Markdown صادر می‌شوند؛ جدول‌هایی با چند بلوک یا رنگ پس‌زمینه، برای حفظ محتوا به‌شکل HTML می‌مانند. در HTML، نام رنگ سلول در ویژگی data-nabi-cell-color عنصر td یا th ذخیره می‌شود. سبک‌های دلخواه رنگ پس‌زمینه از HTML بیرونی، به‌عنوان رنگ پس‌زمینهٔ سلول وارد نمی‌شوند.

برای مرتب‌سازی ستون‌ها در نمای منتشرشده، جدول را قابل مرتب‌سازی ذخیره کنید و attachViewer() از nabi-note/viewer را متصل کنید. جدول‌های دارای سلول ادغام‌شده مشمول مرتب‌سازی ستون‌ها نیستند.

سبک‌های 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);
}

خود رنگ پس‌زمینهٔ سلول را با متغیرهای CSS دارای نام رنگ، مانند --nabi-cell-yellow، تغییر دهید. 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 سمت راست سلول می‌تواند باعث هم‌پوشانی با دکمهٔ مرتب‌سازی شود.