ФреймворкJavaScript

Заголовок: уровни от H1 до H6

Блоки заголовков от H1 до H6. Поддерживают несколько пунктов тулбокса (по одному на уровень заголовка), сочетания клавиш (#, ##, ### и т. д.) и необязательный режим переключателя (сворачивание и разворачивание дочерних блоков) на любом уровне — в тулбоксе перечислены пункты от «Сворачиваемый заголовок 1» до «Сворачиваемый заголовок 6», доступные по markdown-префиксам `>#` … `>######`. Преобразование существующего блока в сворачиваемый заголовок (через «Преобразовать в» или `blocks.convert` с `isToggleable: true`) забирает его секцию: каждый следующий соседний блок до ближайшего заголовка того же или более высокого ранга становится дочерним для нового переключателя — как в Notion.

Импорт

TypeScript

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

Конфигурация

Опция	Тип	По умолчанию	Описание
`placeholder`	`string`	`level name (e.g. "Heading 2", localised)`	Плейсхолдер, который показывается в пустом блоке заголовка.
`levels`	`number[]`	`[1,2,3,4,5,6]`	Ограничивает набор доступных уровней заголовков.
`defaultLevel`	`number`	`2`	Уровень заголовка, который используется при вставке нового блока header.
`levelOverrides`	`Record<number, { tag?, name?, size?, marginTop?, marginBottom? }>`	`{}`	Переопределения HTML-тега, отображаемого названия или CSS-значений для каждого уровня.
`shortcuts`	`Record<number, string>`	`undefined`	Собственные markdown-префиксы для каждого уровня заголовка. Если опция не задана, используются стандартные markdown-префиксы (#, ## …). Передайте пустой объект {}, чтобы отключить префиксы обычных заголовков — префиксы сворачиваемых заголовков (`>#` … `>######`) сопоставляются отдельно, всегда активны и не настраиваются и не отключаются здесь (они по-прежнему учитывают `levels`).
`anchorIds`	`boolean \| (text: string, blockId: string) => string`	`undefined`	Подключаемые по желанию id-якоря, выводимые из текста отрисованных заголовков. true использует встроенный слагификатор (сохраняет буквы и цифры Unicode и регистр букв, убирает пунктуацию и символы нулевой ширины, соединяет слова дефисами, например «Обучайте команду» → id "Обучайте-команду"); функция позволяет генерировать id самостоятельно (пустая строка — id не добавляется). Id остаются синхронными при правках текста и переживают смену уровня. Устранение дублей между блоками сюда не входит — потребители дедуплицируют их сами.

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

TypeScript

interface HeaderData {
  text: string;             // Heading HTML content
  level: number;            // 1–6
  isToggleable?: boolean;   // true when the heading has toggle (collapse/expand)
  isOpen?: boolean;         // Persisted toggle state, present when toggleable
  textColor?: string;       // Block colour preset, present when set
  backgroundColor?: string; // Block background colour preset, present when set
  anchor?: string;          // Anchor id for in-document links, present when set
}

JSON

{
  "id": "def456",
  "type": "header",
  "data": {
    "text": "Getting Started",
    "level": 2
  }
}

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

TypeScript

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

const editor = new Blok({
  holder: 'editor',
  tools: {
    header: {
      class: Header,
      levels: [1, 2, 3],
      defaultLevel: 2,
      placeholder: 'Enter a heading',
    },
  },
});