جدول ​

جدول بنانے کے لیے ٹول بار سے قطاریں اور کالم منتخب کریں۔ خانوں میں کئی پیراگراف، تصاویر، فہرستیں، اقتباسات، کوڈ، سمٹنے والے حصے اور ویڈیوز رکھی جا سکتی ہیں۔ کسی خانے میں کرسر رکھ کر نیچے موجود خصوصیات کے ٹولز سے قطاریں، کالم، ادغام، سرخی کے خانے اور پس منظر کے رنگ تبدیل کریں۔

نیچے دی گئی مثال کے خانوں میں پیراگراف اور فہرستیں بدل کر دیکھیں، پھر کئی خانوں پر گھسیٹ کر ان کے پس منظر ایک ساتھ تبدیل کریں۔ خصوصیات کے ٹولز میں پورا جدول منتخب کریں دبانے سے آپ مرکزی ٹول بار کے ذریعے خود جدول کی سیدھ بدل سکتے ہیں۔

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('ur')
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 میں خانے کے رنگ کا نام 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);
}

خانوں کے اصل پس منظر کے رنگ، رنگ کے نام والے 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 کو زبردستی بدلنے سے چھانٹی کے بٹن کے ساتھ ٹکراؤ ہو سکتا ہے۔