Таблица ​

Выберите строки и столбцы на панели инструментов, чтобы создать таблицу. Ячейки могут содержать несколько абзацев, изображения, списки, цитаты, код, сворачиваемые разделы и видео. Установите курсор в ячейку, чтобы с помощью расположенных ниже инструментов свойств менять строки, столбцы, объединение, ячейки заголовка и цвет фона.

Попробуйте изменить абзацы и списки в ячейках примера ниже, затем выделите несколько ячеек перетаскиванием, чтобы поменять их фон одновременно. Нажмите Выбрать таблицу в инструментах свойств, чтобы выровнять саму таблицу с помощью основной панели инструментов.

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('ru')
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 ячеек может привести к наложению на кнопку сортировки.