அட்டவணை ​

கருவிப்பட்டையில் வரிசைகளையும் நெடுவரிசைகளையும் தேர்ந்தெடுத்து அட்டவணையை உருவாக்குங்கள். கலங்களில் பல பத்திகள், படங்கள், பட்டியல்கள், மேற்கோள்கள், குறியீடு, மடிக்கக்கூடிய பகுதிகள், காணொளிகளை வைக்கலாம். கலத்தில் இடஞ்சுட்டியை வைத்தால் கீழுள்ள பண்புக் கருவிகளில் வரிசை, நெடுவரிசை, இணைப்பு, தலைப்புக் கலம், பின்னணி நிறத்தை மாற்றலாம்.

கீழுள்ள எடுத்துக்காட்டில் கலங்களின் பத்திகளையும் பட்டியல்களையும் திருத்தி, பல கலங்களை இழுத்துத் தேர்ந்தெடுத்து அவற்றின் பின்னணியை ஒன்றாக மாற்றிப் பாருங்கள். பண்புக் கருவிகளில் முழு அட்டவணையையும் தேர்ந்தெடு என்பதை அழுத்தினால் முதன்மைக் கருவிப்பட்டையில் அட்டவணையையே சீரமைக்கலாம்.

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('ta')
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 மற்றும் உள் கிளிப்போர்டு வடிவம் காலிக் கலங்கள், இணைப்புகள், தொகுதிகள், உரை வடிவம், பின்னணி நிறங்களைப் பாதுகாக்கும். எளிய உரையில் கலங்கள் தாவல் மற்றும் வரிமுறிப்பால் பிரிக்கப்படும்; கலத்திற்குள் தொகுதிகளுக்கு இடையேயான வரிமுறிப்புகளும் படம், காணொளி முகவரிகளும் பாதுகாக்கப்படும். வெட்டுதல் தேர்ந்தெடுத்த கலங்களின் உள்ளடக்கத்தை மட்டும் காலியாக்கும்; ஒரே செயல்தவிர்ப்பால் மீட்கலாம்.

அட்டவணைக்கு முன் அல்லது பின் இடஞ்சுட்டியை வைத்து கோட்டுத் துண்டு எல்லை தெரிந்தால், நகலெடுத்தலும் வெட்டுதலும் அட்டவணையைச் சூழ்ந்த முழுப் பத்திக்கும் பொருந்தும். கிளிப்போர்டில் எழுதுவது வெற்றியடைந்த பிறகே வெட்டுதல் பத்தியையும் அட்டவணையையும் அகற்றும். மிதக்கும் பகுதியிலுள்ள அட்டவணையை வெட்டினாலும் நீக்கினாலும் வெளிப்புற மிதக்கும் பகுதி இருக்கும்.

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 ஐ வலுக்கட்டாயமாக மாற்றினால் வரிசைப்படுத்தல் பொத்தானுடன் ஒன்றின் மேல் ஒன்று படியலாம்.