الجدول ​

اختر الصفوف والأعمدة من شريط الأدوات لإنشاء جدول. يمكن أن تحتوي الخلايا على فقرات متعددة وصور وقوائم واقتباسات وشيفرة وأقسام قابلة للطي ومقاطع فيديو. ضع المؤشر داخل خلية لتعديل الصفوف والأعمدة والدمج وخلايا الرأس وألوان الخلفية باستخدام أدوات الخصائص أدناه.

جرّب تعديل الفقرات والقوائم داخل خلايا المثال أدناه، ثم اسحب لتحديد عدة خلايا وتغيير خلفياتها معًا. اضغط تحديد الجدول في أدوات الخصائص لمحاذاة الجدول نفسه من شريط الأدوات الرئيسي.

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('ar')
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 الأيمن للخلايا إلى تداخلها مع زر الفرز.