FrameworkJavaScript

List block: ordered, unordered, and checklists

Bulleted, numbered, and to-do (checklist) lists with unlimited nesting. Each list item is a separate block. The toolbox shows three entries by default — one for each style — and items can be converted between styles via the block settings menu.

Import

TypeScript

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

Configuration

Option	Type	Default	Description
`defaultStyle`	`"unordered" \| "ordered" \| "checklist"`	`"unordered"`	The list style used when inserting a new list block.
`styles`	`ListItemStyle[]`	`["unordered","ordered","checklist"]`	Restrict which styles are available in the block settings conversion menu.
`toolboxStyles`	`ListItemStyle[]`	`all styles`	Restrict which list styles appear as separate toolbox entries.
`itemColor`	`string`	`undefined`	Custom CSS color for list item text (e.g. "#3b82f6").
`itemSize`	`string`	`undefined`	Custom CSS font-size for list items (e.g. "18px", "1.25rem").

Save Data

TypeScript

interface ListItemData {
  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)
  depth?: number;     // Nesting depth (0 = root)
}

JSON

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

Usage Example

TypeScript

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

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