ФреймворкJavaScript

Оглавление: живой список заголовков

Список заголовков страницы. Каждый пункт ведёт к своему заголовку. Вставляется через тулбокс или вводом /toc.

Список строится по странице на лету, поэтому он не сохраняется. Он обновляется, когда вы добавляете, переименовываете, перемещаете или удаляете заголовки. Блок показывает заголовки верхнего уровня и заголовки внутри колонок и выносок. Заголовки внутри переключателей, списков и заголовков-переключателей он пропускает. Пункты сдвигаются по уровню заголовка, а пропущенный уровень не добавляет лишнего отступа.

Щёлкните пункт или поставьте на него фокус и нажмите Enter, чтобы прокрутить к заголовку. ArrowUp/ArrowDown, Home и End переключают пункты. Пункт раздела, который вы сейчас читаете, отмечен атрибутом aria-current="location".

Без заголовков блок показывает «Добавьте заголовки, чтобы создать оглавление.». Он работает в режиме только для чтения. Вставка оглавления из Notion создаёт этот блок. При экспорте в Markdown блок пропускается, потому что заголовки экспортируются сами.

blocksToHtml (и HTML-экспорт на сервере) выводит его как <nav> со ссылками, собранный по сохранённым заголовкам. Каждый заголовок из списка получает id, чтобы ссылки работали: свой anchor, если он есть, иначе id блока. У каждого пункта есть data-depth.

Импорт

TypeScript

import { TableOfContents } from '@bloklabs/core/tools';

Формат данных

TypeScript

interface TableOfContentsData {
  textColor?: string;       // Colour preset name, absent for default
  backgroundColor?: string; // Colour preset name, absent for none
}

JSON

{
  "id": "toc001",
  "type": "table_of_contents",
  "data": {
    "backgroundColor": "gray"
  }
}

Пример использования

TypeScript

import { Blok } from '@bloklabs/core';
import { TableOfContents } from '@bloklabs/core/tools';

const editor = new Blok({
  holder: 'editor',
  tools: {
    table_of_contents: {
      class: TableOfContents,
    },
  },
});