పట్టిక ​

టూల్‌బార్‌లో వరుసలు, నిలువు వరుసలు ఎంచుకుని పట్టికను సృష్టించండి. గడుల్లో అనేక పేరాలు, చిత్రాలు, జాబితాలు, ఉల్లేఖనలు, కోడ్, మడత విభాగాలు, వీడియోలను ఉంచవచ్చు. గడిలో కర్సర్ ఉంచితే కింద ఉన్న లక్షణ సాధనాలతో వరుసలు, నిలువు వరుసలు, విలీనం, హెడర్లు, నేపథ్య రంగులను మార్చవచ్చు.

కింది ఉదాహరణలో గడుల్లోని పేరాలు, జాబితాలను సవరించి, అనేక గడులను లాగి ఎంచుకుని వాటి నేపథ్యాలను కలిపి మార్చండి. లక్షణ సాధనాల్లో మొత్తం పట్టికను ఎంచుకోండి నొక్కితే ప్రధాన టూల్‌బార్ ద్వారా పట్టికనే సమలేఖనం చేయవచ్చు.

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('te')
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ను బలవంతంగా మార్చితే క్రమీకరణ బటన్‌పై కప్పవచ్చు.