ФреймворкJavaScript

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

Heading blocks from H1 to H6. Supports multiple toolbox entries (one per heading level), keyboard shortcuts (# ## ### etc.), and optional toggle (collapse/expand children) for H1–H3.

Импорт

TypeScript

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

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

Опция	Тип	По умолчанию	Описание
`placeholder`	`string`	`level name (e.g. "Heading 2", localised)`	Placeholder text shown in an empty heading block.
`levels`	`number[]`	`[1,2,3,4,5,6]`	Restrict which heading levels are available.
`defaultLevel`	`number`	`2`	The heading level used when inserting a new header block.
`levelOverrides`	`Record<number, { tag?, name?, size?, marginTop?, marginBottom? }>`	`{}`	Per-level overrides for HTML tag, display name, or CSS values.
`shortcuts`	`Record<number, string>`	`undefined`	Custom keyboard shortcuts per level. If omitted, markdown-style shortcuts (#, ## …) are used. Pass an empty object {} to disable all shortcuts.
`anchorIds`	`boolean \| (text: string, blockId: string) => string`	`undefined`	Opt-in text-derived anchor ids on rendered headings. true uses the built-in slugifier (keeps Unicode letters/digits and letter case, strips punctuation and zero-width chars, joins words with hyphens, e.g. «Обучайте команду» → id "Обучайте-команду"); a function lets you generate ids yourself (empty string = no id). Ids stay in sync on text edits and survive level changes. Cross-block duplicate dedup is out of scope — consumers dedup themselves.

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

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
}

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',
    },
  },
});