ФреймворкJavaScript

Список: нумерованные, маркированные и чек-листы

Маркированные, нумерованные списки и списки задач (чек-листы) с неограниченной вложенностью. Каждый пункт списка — отдельный блок. По умолчанию в тулбоксе показываются три пункта, по одному на каждый стиль, а пункты списка можно преобразовывать между стилями через меню настроек блока.

Импорт

TypeScript

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

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

Опция	Тип	По умолчанию	Описание
`defaultStyle`	`"unordered" \| "ordered" \| "checklist"`	`"unordered"`	Стиль списка, который используется при вставке нового блока списка.
`styles`	`ListStyle[]`	`["unordered","ordered","checklist"]`	Ограничивает набор стилей, доступных в меню преобразования в настройках блока.
`toolboxStyles`	`ListStyle[]`	`all styles`	Ограничивает набор стилей списка, которые показываются отдельными пунктами тулбокса.
`itemColor`	`string`	`undefined`	Собственный CSS-цвет текста пунктов списка (например, "#3b82f6").
`itemSize`	`string`	`undefined`	Собственное значение CSS-свойства font-size для пунктов списка (например, "18px", "1.25rem").

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

TypeScript

interface ListData {
  text: string;                                    // Item HTML content
  style: 'unordered' | 'ordered' | 'checklist'; // List type
  checked?: boolean;  // Checklist check state
  start?: number;     // First number for ordered lists (root items only); omitted when 1
  depth?: number;     // Nesting depth; omitted for root items (depth 0)
}

JSON

{
  "id": "ghi789",
  "type": "list",
  "data": {
    "text": "First item",
    "style": "unordered"
  }
}

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

TypeScript

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

const editor = new Blok({
  holder: 'editor',
  tools: {
    list: {
      class: List,
      defaultStyle: 'unordered',
    },
  },
});