Tablo ​

Tablo oluşturmak için araç çubuğundan satır ve sütunları seçin. Hücreler birden fazla paragraf, görsel, liste, alıntı, kod, daraltılabilir bölüm ve video içerebilir. İmleci bir hücreye yerleştirerek alttaki özellik araçlarıyla satırları, sütunları, birleştirmeyi, başlık hücrelerini ve arka plan renklerini düzenleyebilirsiniz.

Aşağıdaki örnekte hücrelerdeki paragrafları ve listeleri düzenleyin, ardından birkaç hücre üzerinde sürükleyerek arka planlarını birlikte değiştirin. Özellik araçlarında Tabloyu seç düğmesine basarak ana araç çubuğundan tablonun kendisini hizalayabilirsiniz.

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

Hücrelerin içinde kullanacağınız kanatları da kaydedin. Tüm temel kanatları kullanan bir düzenleyiciyi wings().allBasic() ile oluşturabilirsiniz.

Hücre içinde yazma ​

Listelerde ve kodda Enter, ilgili bloğun giriş kurallarına uyar. Kodun girintisi daha fazla azaltılamasa da Shift+Tab önceki hücreye geçmez. Hücrenin başında veya sonunda Backspace ya da Delete kullanmak, hücreyi komşu hücreyle veya tablo dışındaki bir paragrafla birleştirmez.

Yapıştırma ve görsel ya da blok ekleme, işlemin başladığı hücrenin içinde kalır. Hücre sınırlarını aşan seçimlere blok ekleme veya yapıştırma uygulanamaz. Hücrelerin içine tablo veya kayan bölge yerleştirilemez; bu tür yapılar içe aktarıldığında veya yapıştırıldığında içerikleri sırasıyla açılır.

Normal hücrelerde başlık kullanılabilir, ancak başlık hücrelerine başlık biçimi uygulanmaz. Bir hücre başlık hücresine dönüştürüldüğünde içindeki başlıklar normal paragrafa dönüşür; metin ve diğer biçimler korunur.

Hücre arka plan renkleri ​

Arka plan rengi tek bir hücreye veya sürükleyerek seçilen dikdörtgen aralığa uygulanır. Metnin yalnızca bir kısmı seçilse bile onu içeren hücrenin tamamının arka planı değişir. Soluk renkler açık ve koyu temaya uyarlanır. Seçili hücrelerin renkleri farklıysa tek bir renk seçili olarak gösterilmez.

Geçerli hücre seçimini koruyarak bir komutla da rengi değiştirebilirsiniz.

nabi.applyCommand('setCellColor', { bg: 'cyan' })

İzin verilen değerler yellow, green, cyan, pink, purple ve orange değerleridir. Varsayılan arka plana dönmek için özellik araçlarında Varsayılan seçeneğini seçin veya boş bir dize gönderin.

nabi.applyCommand('setCellColor', { bg: '' })

İçerik silme, kesme ve biçimi temizleme hücre arka plan rengini kaldırmaz. Birleştirme sol üst hücrenin rengini kullanır; bölme sırasında oluşan yeni hücreler de aynı rengi alır. Yeni eklenen satır ve sütunlar varsayılan arka planla başlar. Arka plan rengi değişiklikleri geri alma ve yinelemeyi destekler.

Hücre içeriğini ve tabloyu hizalama ​

İmleç bir hücredeyken hizalama, içindeki paragraflara veya görsellere uygulanır. Birden fazla hücre seçildiğinde, kod hariç içlerindeki hizalanabilir tüm paragraf ve nesnelere birlikte uygulanır. Başlık, hizalama ve büyük başlangıç harfi araçlarının durumu da gerçekten seçilmiş iç paragrafları izler. Seçilen paragrafların değerleri farklıysa tek bir değer gösterilmez.

Tablonun kendisini hizalamak için özellik araçlarında Tabloyu seç düğmesine, ardından ana araç çubuğundaki hizalama düğmelerine basın. İmleci tabloyu saran paragrafın önüne veya arkasına getirip kesik çizgili kenarlık göründüğünde de aynı hizalamayı kullanabilirsiniz. Bu kenarlık yalnızca hedefi gösterir; imleci tüm tablo seçimine dönüştürmez.

nabi.applyCommand('selectTable')
nabi.applyCommand('setAlign', { value: 'c' })

Satır ve sütun ekleme ya da silme, birleştirme ve bölme seçili hücrelere göre çalışır. Birleştirme her hücrenin bloklarını satır sırasıyla korur. Bölmede içerik özgün hücrede kalır, diğer hücreler boş olur.

Kopyalama ve kaydetme ​

Birden fazla hücre seçilip kopyalandığında ekranda görünen dikdörtgen aralık son hücre dahil kopyalanır. HTML ve dahili pano biçimi boş hücreleri, birleştirmeleri, blokları, metin biçimlerini ve arka plan renklerini korur. Düz metin hücreleri sekmeler ve satır sonlarıyla ayırır; hücre içindeki bloklar arasındaki satır sonlarını ve görsel ile video adreslerini korur. Kesme yalnızca seçili hücrelerin içeriğini boşaltır ve tek bir geri alma işlemiyle geri döndürülebilir.

İmleç tablonun önünde veya arkasındayken kesik çizgili kenarlık görünüyorsa kopyalama ve kesme tabloyu saran paragrafın tamamına uygulanır. Kesme, panoya yazma başarılı olduktan sonra paragrafı ve tabloyu birlikte kaldırır. Kayan bölgenin içindeki bir tabloyu kesmek veya silmek dıştaki kayan bölgeyi korur.

JSON ve HTML olarak kaydetme hücre bloklarını ve arka plan renklerini korur. Basit tablolar Markdown tablosu olarak dışa aktarılır; birden fazla blok veya arka plan rengi içeren tablolar, içerik korunacak şekilde HTML olarak kalır. HTML’de hücrenin renk adı td veya th öğesinin data-nabi-cell-color özniteliğinde saklanır. Harici HTML’deki rastgele arka plan rengi stilleri hücre arka plan rengi olarak içe aktarılmaz.

Yayımlanan görünümde sütun sıralamasını kullanmak için tabloyu sıralanabilir olarak kaydedin ve nabi-note/viewer içindeki attachViewer() işlevini bağlayın. Birleştirilmiş hücreler içeren tablolar sütun sıralamasına dahil değildir.

CSS stilleri ​

Tabloları .nabi-content table, hücreleri .nabi-content :is(th, td) ile biçimlendirin. Atanan arka plan renklerinin üzerine yazmamak için şeritleri ve başlık arka planlarını yalnızca renksiz hücrelere uygulayın.

.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);
}

Hücre arka plan renklerinin kendisini --nabi-cell-yellow gibi renk adını içeren CSS değişkenleriyle değiştirin. Aşağıdaki CSS’i paket CSS’inden sonra yükleyin; table-note sınıfını ve geçerli temanın data-nabi-theme değerini doğrudan düzenleyicinin .nabi öğesine veya yayımlanan görünümün .nabi-content öğesine atayın.

.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 bağlıysa .nabi-sort düğmesini koruyun. Hücrelerin position değerini veya sağ padding değerini zorla değiştirmek sıralama düğmesiyle çakışmaya yol açabilir.