@jackuait/blok 0.10.0-beta.5 → 0.10.0-beta.7

package/dist/cli.mjs

@@ -1,6 +1,6 @@
 import * as e from "node:fs";
 //#region src/cli/commands/migrationContent.ts
-var t = "# Migrating from EditorJS to Blok\n\nThis guide covers the breaking changes when migrating from EditorJS to Blok.\n\n## Table of Contents\n\n- [Core Changes](#core-changes)\n- [Data Attributes](#data-attributes)\n- [CSS Classes](#css-classes)\n- [Bundled Tools](#bundled-tools)\n  - [Tool Configuration](#tool-configuration)\n  - [Lifecycle Hooks](#lifecycle-hooks)\n  - [Delimiter → Divider](#delimiter--divider)\n- [Configuration Defaults](#configuration-defaults)\n- [New API Methods](#new-api-methods)\n- [DOM Selectors](#dom-selectors)\n- [E2E Test Selectors](#e2e-test-selectors)\n\n---\n\n## Core Changes\n\n### Class Name\n\n```diff\n- import EditorJS from '@editorjs/editorjs';\n+ import Blok from '@jackuait/blok';\n\n- const editor = new EditorJS({ ... });\n+ const editor = new Blok({ ... });\n```\n\n### Default Holder\n\nThe default holder ID changed from `editorjs` to `blok`:\n\n```diff\n- <div id=\"editorjs\"></div>\n+ <div id=\"blok\"></div>\n```\n\nOr specify explicitly:\n\n```javascript\nconst editor = new Blok({\n  holder: 'my-editor', // works the same as before\n});\n```\n\n### TypeScript Types\n\n```diff\n- import type { EditorConfig, OutputData } from '@editorjs/editorjs';\n+ import type { BlokConfig, OutputData } from '@jackuait/blok';\n```\n\n---\n\n## Data Attributes\n\nBlok uses `data-blok-*` attributes instead of EditorJS's mixed naming conventions.\n\n| EditorJS | Blok |\n|----------|------|\n| `data-id` | `data-blok-id` |\n| `data-item-name` | `data-blok-item-name` |\n| `data-empty` | `data-blok-empty` |\n| `.ce-block--selected` (class) | `data-blok-selected=\"true\"` |\n| — | `data-blok-component` (tool name) |\n| — | `data-blok-interface` (element type) |\n| — | `data-blok-testid` (testing) |\n| — | `data-blok-opened` (toolbar state) |\n| — | `data-blok-placeholder` |\n| — | `data-blok-stretched` |\n| — | `data-blok-focused` |\n| — | `data-blok-popover-opened` |\n| — | `data-blok-tool` (tool name on rendered element) |\n| — | `data-blok-dragging` (block being dragged) |\n| — | `data-blok-hidden` (hidden state) |\n| — | `data-blok-narrow` (narrow mode) |\n| — | `data-blok-rtl` (RTL mode) |\n| — | `data-blok-drag-handle` (drag handle element) |\n| — | `data-blok-overlay` (selection overlay) |\n| — | `data-blok-overlay-rectangle` (selection rectangle) |\n\n### Querying Blocks\n\n```diff\n- document.querySelector('[data-id=\"abc123\"]');\n+ document.querySelector('[data-blok-id=\"abc123\"]');\n\n- document.querySelector('[data-item-name=\"bold\"]');\n+ document.querySelector('[data-blok-item-name=\"bold\"]');\n```\n\n---\n\n## CSS Classes\n\nBlok replaces BEM class names with data attributes for selection.\n\n### Editor Wrapper\n\n| EditorJS | Blok |\n|----------|------|\n| `.codex-editor` | `[data-blok-editor]` |\n| `.codex-editor__redactor` | `[data-blok-redactor]` |\n| `.codex-editor--narrow` | `[data-blok-narrow=\"true\"]` |\n| `.codex-editor--rtl` | `[data-blok-rtl=\"true\"]` |\n\n### Block Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block--selected` | `[data-blok-selected=\"true\"]` |\n| `.ce-block--stretched` | `[data-blok-stretched=\"true\"]` |\n| `.ce-block--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n\n### Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-toolbox--opened` | `[data-blok-toolbox][data-blok-opened=\"true\"]` |\n\n### Inline Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-inline-tool` | `[data-blok-testid=\"inline-tool\"]` |\n| `.ce-inline-tool--link` | `[data-blok-testid=\"inline-tool-link\"]` |\n| `.ce-inline-tool--bold` | `[data-blok-testid=\"inline-tool-bold\"]` |\n| `.ce-inline-tool--italic` | `[data-blok-testid=\"inline-tool-italic\"]` |\n\n### Popover\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover--opened` | `[data-blok-popover][data-blok-opened=\"true\"]` |\n| `.ce-popover__container` | `[data-blok-popover-container]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `.ce-popover-item--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-popover-item--confirmation` | `[data-blok-confirmation=\"true\"]` |\n| `.ce-popover-item__icon` | `[data-blok-testid=\"popover-item-icon\"]` |\n| `.ce-popover-item__icon--tool` | `[data-blok-testid=\"popover-item-icon-tool\"]` |\n\n### Tool-Specific Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-paragraph` | `[data-blok-tool=\"paragraph\"]` |\n| `.ce-header` | `[data-blok-tool=\"header\"]` |\n\n### Conversion Toolbar & Settings\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-conversion-toolbar` | `[data-blok-testid=\"conversion-toolbar\"]` |\n| `.ce-conversion-tool` | `[data-blok-testid=\"conversion-tool\"]` |\n| `.ce-settings` | `[data-blok-testid=\"block-settings\"]` |\n| `.ce-tune` | `[data-blok-testid=\"block-tune\"]` |\n\n### Other Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-stub` | `[data-blok-stub]` |\n| `.ce-drag-handle` | `[data-blok-drag-handle]` |\n| `.ce-ragged-right` | `[data-blok-ragged-right=\"true\"]` |\n\n### CDX List Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-list` | `[data-blok-list]` |\n| `.cdx-list__item` | `[data-blok-list-item]` |\n| `.cdx-list--ordered` | `[data-blok-list=\"ordered\"]` |\n| `.cdx-list--unordered` | `[data-blok-list=\"unordered\"]` |\n\n### CDX Utility Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-button` | `[data-blok-button]` |\n| `.cdx-input` | `[data-blok-input]` |\n| `.cdx-loader` | `[data-blok-loader]` |\n| `.cdx-search-field` | `[data-blok-search-field]` |\n\n---\n\n## Bundled Tools\n\nBlok includes Header and Paragraph tools. No external packages needed:\n\n```diff\n- import Header from '@editorjs/header';\n- import Paragraph from '@editorjs/paragraph';\n\n+ import Blok from '@jackuait/blok';\n\nconst editor = new Blok({\n  tools: {\n-   header: Header,\n-   paragraph: Paragraph,\n+   header: Blok.Header,\n+   paragraph: Blok.Paragraph, // optional, it's the default\n  },\n});\n```\n\n### Tool Configuration\n\nBoth bundled tools accept configuration options:\n\n#### HeaderConfig\n\n```typescript\nimport type { HeaderConfig } from '@jackuait/blok';\n\nconst editor = new Blok({\n  tools: {\n    header: {\n      class: Blok.Header,\n      config: {\n        placeholder: 'Enter a heading',\n        levels: [2, 3, 4],      // Restrict to H2-H4 only\n        defaultLevel: 2,        // Default to H2\n      } as HeaderConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty header |\n| `levels` | `number[]` | `[1,2,3,4,5,6]` | Available heading levels (1-6) |\n| `defaultLevel` | `number` | `2` | Default heading level |\n\n#### ParagraphConfig\n\n```typescript\nimport type { ParagraphConfig } from '@jackuait/blok';\n\nconst editor = new Blok({\n  tools: {\n    paragraph: {\n      class: Blok.Paragraph,\n      config: {\n        placeholder: 'Start typing...',\n        preserveBlank: true,\n      } as ParagraphConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty paragraph |\n| `preserveBlank` | `boolean` | `false` | Keep empty paragraphs when saving |\n\n### Delimiter → Divider\n\nEditor.js's `@editorjs/delimiter` is replaced by Blok's built-in `divider` tool:\n\n```diff\n- import Delimiter from '@editorjs/delimiter';\n\nconst editor = new Blok({\n  tools: {\n-   delimiter: Delimiter,\n+   divider: Blok.Divider,\n  },\n});\n```\n\n**Saved data migration:** The block type name changed from `\"delimiter\"` to `\"divider\"`. The data format is identical (empty `{}`):\n\n```diff\n  {\n-   \"type\": \"delimiter\",\n+   \"type\": \"divider\",\n    \"data\": {}\n  }\n```\n\n> **Note:** Blok automatically recognizes `\"delimiter\"` blocks and renders them as dividers, so existing articles work without data migration. However, renaming the type in your database is recommended for consistency.\n\n---\n\n## Configuration Defaults\n\n| Option | EditorJS | Blok |\n|--------|----------|------|\n| `holder` | `\"editorjs\"` | `\"blok\"` |\n| `defaultBlock` | `\"paragraph\"` | `\"paragraph\"` |\n\n---\n\n## New API Methods\n\nBlok exposes shorthand methods directly on the instance:\n\n```javascript\nconst editor = new Blok({ ... });\n\n// Shorthand methods\nawait editor.save();      // Same as editor.saver.save()\neditor.clear();           // Same as editor.blocks.clear()\nawait editor.render(data);// Same as editor.blocks.render(data)\neditor.focus();           // Same as editor.caret.focus()\n\n// Event methods\neditor.on('change', handler);   // Same as editor.events.on()\neditor.off('change', handler);  // Same as editor.events.off()\neditor.emit('custom', data);    // Same as editor.events.emit()\n```\n\n---\n\n## DOM Selectors\n\nBlok uses consistent `data-blok-interface` attributes for major UI components:\n\n```javascript\n// Find the editor wrapper\nconst editorWrapper = document.querySelector('[data-blok-interface=\"blok\"]');\n\n// Find inline toolbar\nconst inlineToolbar = document.querySelector('[data-blok-interface=\"inline-toolbar\"]');\n\n// Find tooltip\nconst tooltip = document.querySelector('[data-blok-interface=\"tooltip\"]');\n```\n\nThese selectors are stable and recommended for programmatic access to Blok's UI components.\n\n### Key Changes\n\n1. **Prefix custom classes** with `blok-` instead of `ce-` or `cdx-`\n2. **Use `data-blok-*`** attributes instead of `data-*`\n\n---\n\n## E2E Test Selectors\n\nUpdate your test selectors to use Blok's `data-blok-testid` attributes:\n\n| EditorJS | Blok |\n|----------|------|\n| `[data-cy=editorjs]` | `[data-blok-testid=\"blok-editor\"]` |\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `[data-item-name=\"...\"]` | `[data-blok-item-name=\"...\"]` |\n\n### Playwright Example\n\n```diff\n// EditorJS\n- await page.locator('[data-cy=editorjs] .ce-block').click();\n- await page.locator('.ce-toolbar__settings-btn').click();\n- await page.locator('[data-item-name=\"delete\"]').click();\n\n// Blok\n+ await page.locator('[data-blok-element]').click();\n+ await page.locator('[data-blok-settings-toggler]').click();\n+ await page.locator('[data-blok-item-name=\"delete\"]').click();\n```\n\n### Additional Test Selectors\n\n| Element | Selector |\n|---------|----------|\n| Block tunes popover | `[data-blok-testid=\"block-tunes-popover\"]` |\n| Popover search input | `[data-blok-testid=\"popover-search-input\"]` |\n| Popover item title | `[data-blok-testid=\"popover-item-title\"]` |\n| Popover overlay | `[data-blok-testid=\"popover-overlay\"]` |\n| Inline tool input | `[data-blok-testid=\"inline-tool-input\"]` |\n| Tooltip | `[data-blok-testid=\"tooltip\"]` |\n| Redactor | `[data-blok-testid=\"redactor\"]` |\n| Toolbox | `[data-blok-testid=\"toolbox\"]` |\n| Toolbox popover | `[data-blok-testid=\"toolbox-popover\"]` |\n| Selection overlay | `[data-blok-testid=\"overlay\"]` |\n| Selection rectangle | `[data-blok-testid=\"overlay-rectangle\"]` |\n\n---\n\n### State Selectors\n\n| State | Selector |\n|-------|----------|\n| Toolbar opened | `[data-blok-opened=\"true\"]` |\n| Block selected | `[data-blok-selected=\"true\"]` |\n| Popover opened | `[data-blok-popover-opened=\"true\"]` |\n| Item focused | `[data-blok-focused=\"true\"]` |\n| Item disabled | `[data-blok-disabled=\"true\"]` |\n| Nested popover | `[data-blok-nested=\"true\"]` |\n| Toolbox opened | `[data-blok-toolbox-opened=\"true\"]` |\n| Block dragging | `[data-blok-dragging=\"true\"]` |\n| Element hidden | `[data-blok-hidden=\"true\"]` |\n| Narrow mode | `[data-blok-narrow=\"true\"]` |\n| RTL mode | `[data-blok-rtl=\"true\"]` |\n\n---\n\n## Quick Checklist\n\n- [ ] Replace `new EditorJS` with `new Blok`\n- [ ] Update imports from `@editorjs/*` to `@jackuait/blok`\n- [ ] Change holder from `editorjs` to `blok` (or specify explicitly)\n- [ ] Use bundled tools: `Blok.Header`, `Blok.Paragraph`\n- [ ] Replace `@editorjs/delimiter` with built-in `Blok.Divider`\n- [ ] Update `EditorConfig` type to `BlokConfig`\n- [ ] Replace `data-id` with `data-blok-id` in queries\n- [ ] Replace `data-item-name` with `data-blok-item-name`\n- [ ] Replace `.ce-*` selectors with `[data-blok-*]` attributes\n- [ ] Replace `.cdx-*` selectors with `[data-blok-*]` attributes\n- [ ] Update E2E test selectors\n", n = (e) => [
+var t = "# Migrating from EditorJS to Blok\n\nThis guide covers the breaking changes when migrating from EditorJS to Blok.\n\n## Table of Contents\n\n- [Core Changes](#core-changes)\n- [Data Attributes](#data-attributes)\n- [CSS Classes](#css-classes)\n- [Bundled Tools](#bundled-tools)\n  - [Tool Configuration](#tool-configuration)\n  - [Lifecycle Hooks](#lifecycle-hooks)\n  - [Delimiter → Divider](#delimiter--divider)\n- [Configuration Defaults](#configuration-defaults)\n- [New API Methods](#new-api-methods)\n- [DOM Selectors](#dom-selectors)\n- [E2E Test Selectors](#e2e-test-selectors)\n\n---\n\n## Core Changes\n\n### Class Name\n\n```diff\n- import EditorJS from '@editorjs/editorjs';\n+ import Blok from '@jackuait/blok';\n\n- const editor = new EditorJS({ ... });\n+ const editor = new Blok({ ... });\n```\n\n### Default Holder\n\nThe default holder ID changed from `editorjs` to `blok`:\n\n```diff\n- <div id=\"editorjs\"></div>\n+ <div id=\"blok\"></div>\n```\n\nOr specify explicitly:\n\n```javascript\nconst editor = new Blok({\n  holder: 'my-editor', // works the same as before\n});\n```\n\n### TypeScript Types\n\n```diff\n- import type { EditorConfig, OutputData } from '@editorjs/editorjs';\n+ import type { BlokConfig, OutputData } from '@jackuait/blok';\n```\n\n---\n\n## Data Attributes\n\nBlok uses `data-blok-*` attributes instead of EditorJS's mixed naming conventions.\n\n| EditorJS | Blok |\n|----------|------|\n| `data-id` | `data-blok-id` |\n| `data-item-name` | `data-blok-item-name` |\n| `data-empty` | `data-blok-empty` |\n| `.ce-block--selected` (class) | `data-blok-selected=\"true\"` |\n| — | `data-blok-component` (tool name) |\n| — | `data-blok-interface` (element type) |\n| — | `data-blok-testid` (testing) |\n| — | `data-blok-opened` (toolbar state) |\n| — | `data-blok-placeholder` |\n| — | `data-blok-stretched` |\n| — | `data-blok-focused` |\n| — | `data-blok-popover-opened` |\n| — | `data-blok-tool` (tool name on rendered element) |\n| — | `data-blok-dragging` (block being dragged) |\n| — | `data-blok-hidden` (hidden state) |\n| — | `data-blok-rtl` (RTL mode) |\n| — | `data-blok-drag-handle` (drag handle element) |\n| — | `data-blok-overlay` (selection overlay) |\n| — | `data-blok-overlay-rectangle` (selection rectangle) |\n\n### Querying Blocks\n\n```diff\n- document.querySelector('[data-id=\"abc123\"]');\n+ document.querySelector('[data-blok-id=\"abc123\"]');\n\n- document.querySelector('[data-item-name=\"bold\"]');\n+ document.querySelector('[data-blok-item-name=\"bold\"]');\n```\n\n---\n\n## CSS Classes\n\nBlok replaces BEM class names with data attributes for selection.\n\n### Editor Wrapper\n\n| EditorJS | Blok |\n|----------|------|\n| `.codex-editor` | `[data-blok-editor]` |\n| `.codex-editor__redactor` | `[data-blok-redactor]` |\n| `.codex-editor--rtl` | `[data-blok-rtl=\"true\"]` |\n\n### Block Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block--selected` | `[data-blok-selected=\"true\"]` |\n| `.ce-block--stretched` | `[data-blok-stretched=\"true\"]` |\n| `.ce-block--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n\n### Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-toolbox--opened` | `[data-blok-toolbox][data-blok-opened=\"true\"]` |\n\n### Inline Toolbar\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-inline-tool` | `[data-blok-testid=\"inline-tool\"]` |\n| `.ce-inline-tool--link` | `[data-blok-testid=\"inline-tool-link\"]` |\n| `.ce-inline-tool--bold` | `[data-blok-testid=\"inline-tool-bold\"]` |\n| `.ce-inline-tool--italic` | `[data-blok-testid=\"inline-tool-italic\"]` |\n\n### Popover\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover--opened` | `[data-blok-popover][data-blok-opened=\"true\"]` |\n| `.ce-popover__container` | `[data-blok-popover-container]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `.ce-popover-item--focused` | `[data-blok-focused=\"true\"]` |\n| `.ce-popover-item--confirmation` | `[data-blok-confirmation=\"true\"]` |\n| `.ce-popover-item__icon` | `[data-blok-testid=\"popover-item-icon\"]` |\n| `.ce-popover-item__icon--tool` | `[data-blok-testid=\"popover-item-icon-tool\"]` |\n\n### Tool-Specific Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-paragraph` | `[data-blok-tool=\"paragraph\"]` |\n| `.ce-header` | `[data-blok-tool=\"header\"]` |\n\n### Conversion Toolbar & Settings\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-conversion-toolbar` | `[data-blok-testid=\"conversion-toolbar\"]` |\n| `.ce-conversion-tool` | `[data-blok-testid=\"conversion-tool\"]` |\n| `.ce-settings` | `[data-blok-testid=\"block-settings\"]` |\n| `.ce-tune` | `[data-blok-testid=\"block-tune\"]` |\n\n### Other Elements\n\n| EditorJS | Blok |\n|----------|------|\n| `.ce-stub` | `[data-blok-stub]` |\n| `.ce-drag-handle` | `[data-blok-drag-handle]` |\n| `.ce-ragged-right` | `[data-blok-ragged-right=\"true\"]` |\n\n### CDX List Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-list` | `[data-blok-list]` |\n| `.cdx-list__item` | `[data-blok-list-item]` |\n| `.cdx-list--ordered` | `[data-blok-list=\"ordered\"]` |\n| `.cdx-list--unordered` | `[data-blok-list=\"unordered\"]` |\n\n### CDX Utility Classes\n\n| EditorJS | Blok |\n|----------|------|\n| `.cdx-button` | `[data-blok-button]` |\n| `.cdx-input` | `[data-blok-input]` |\n| `.cdx-loader` | `[data-blok-loader]` |\n| `.cdx-search-field` | `[data-blok-search-field]` |\n\n---\n\n## Bundled Tools\n\nBlok includes Header and Paragraph tools. No external packages needed:\n\n```diff\n- import Header from '@editorjs/header';\n- import Paragraph from '@editorjs/paragraph';\n\n+ import Blok from '@jackuait/blok';\n\nconst editor = new Blok({\n  tools: {\n-   header: Header,\n-   paragraph: Paragraph,\n+   header: Blok.Header,\n+   paragraph: Blok.Paragraph, // optional, it's the default\n  },\n});\n```\n\n### Tool Configuration\n\nBoth bundled tools accept configuration options:\n\n#### HeaderConfig\n\n```typescript\nimport type { HeaderConfig } from '@jackuait/blok';\n\nconst editor = new Blok({\n  tools: {\n    header: {\n      class: Blok.Header,\n      config: {\n        placeholder: 'Enter a heading',\n        levels: [2, 3, 4],      // Restrict to H2-H4 only\n        defaultLevel: 2,        // Default to H2\n      } as HeaderConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty header |\n| `levels` | `number[]` | `[1,2,3,4,5,6]` | Available heading levels (1-6) |\n| `defaultLevel` | `number` | `2` | Default heading level |\n\n#### ParagraphConfig\n\n```typescript\nimport type { ParagraphConfig } from '@jackuait/blok';\n\nconst editor = new Blok({\n  tools: {\n    paragraph: {\n      class: Blok.Paragraph,\n      config: {\n        placeholder: 'Start typing...',\n        preserveBlank: true,\n      } as ParagraphConfig,\n    },\n  },\n});\n```\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `placeholder` | `string` | `''` | Placeholder text for empty paragraph |\n| `preserveBlank` | `boolean` | `false` | Keep empty paragraphs when saving |\n\n### Delimiter → Divider\n\nEditor.js's `@editorjs/delimiter` is replaced by Blok's built-in `divider` tool:\n\n```diff\n- import Delimiter from '@editorjs/delimiter';\n\nconst editor = new Blok({\n  tools: {\n-   delimiter: Delimiter,\n+   divider: Blok.Divider,\n  },\n});\n```\n\n**Saved data migration:** The block type name changed from `\"delimiter\"` to `\"divider\"`. The data format is identical (empty `{}`):\n\n```diff\n  {\n-   \"type\": \"delimiter\",\n+   \"type\": \"divider\",\n    \"data\": {}\n  }\n```\n\n> **Note:** Blok automatically recognizes `\"delimiter\"` blocks and renders them as dividers, so existing articles work without data migration. However, renaming the type in your database is recommended for consistency.\n\n---\n\n## Configuration Defaults\n\n| Option | EditorJS | Blok |\n|--------|----------|------|\n| `holder` | `\"editorjs\"` | `\"blok\"` |\n| `defaultBlock` | `\"paragraph\"` | `\"paragraph\"` |\n\n---\n\n## New API Methods\n\nBlok exposes shorthand methods directly on the instance:\n\n```javascript\nconst editor = new Blok({ ... });\n\n// Shorthand methods\nawait editor.save();      // Same as editor.saver.save()\neditor.clear();           // Same as editor.blocks.clear()\nawait editor.render(data);// Same as editor.blocks.render(data)\neditor.focus();           // Same as editor.caret.focus()\n\n// Event methods\neditor.on('change', handler);   // Same as editor.events.on()\neditor.off('change', handler);  // Same as editor.events.off()\neditor.emit('custom', data);    // Same as editor.events.emit()\n```\n\n---\n\n## DOM Selectors\n\nBlok uses consistent `data-blok-interface` attributes for major UI components:\n\n```javascript\n// Find the editor wrapper\nconst editorWrapper = document.querySelector('[data-blok-interface=\"blok\"]');\n\n// Find inline toolbar\nconst inlineToolbar = document.querySelector('[data-blok-interface=\"inline-toolbar\"]');\n\n// Find tooltip\nconst tooltip = document.querySelector('[data-blok-interface=\"tooltip\"]');\n```\n\nThese selectors are stable and recommended for programmatic access to Blok's UI components.\n\n### Key Changes\n\n1. **Prefix custom classes** with `blok-` instead of `ce-` or `cdx-`\n2. **Use `data-blok-*`** attributes instead of `data-*`\n\n---\n\n## E2E Test Selectors\n\nUpdate your test selectors to use Blok's `data-blok-testid` attributes:\n\n| EditorJS | Blok |\n|----------|------|\n| `[data-cy=editorjs]` | `[data-blok-testid=\"blok-editor\"]` |\n| `.ce-block` | `[data-blok-element]` |\n| `.ce-block__content` | `[data-blok-element-content]` |\n| `.ce-toolbar` | `[data-blok-toolbar]` |\n| `.ce-toolbar__plus` | `[data-blok-testid=\"plus-button\"]` |\n| `.ce-toolbar__settings-btn` | `[data-blok-settings-toggler]` |\n| `.ce-toolbar__actions` | `[data-blok-testid=\"toolbar-actions\"]` |\n| `.ce-toolbox` | `[data-blok-toolbox]` |\n| `.ce-inline-toolbar` | `[data-blok-testid=\"inline-toolbar\"]` |\n| `.ce-popover` | `[data-blok-popover]` |\n| `.ce-popover-item` | `[data-blok-testid=\"popover-item\"]` |\n| `[data-item-name=\"...\"]` | `[data-blok-item-name=\"...\"]` |\n\n### Playwright Example\n\n```diff\n// EditorJS\n- await page.locator('[data-cy=editorjs] .ce-block').click();\n- await page.locator('.ce-toolbar__settings-btn').click();\n- await page.locator('[data-item-name=\"delete\"]').click();\n\n// Blok\n+ await page.locator('[data-blok-element]').click();\n+ await page.locator('[data-blok-settings-toggler]').click();\n+ await page.locator('[data-blok-item-name=\"delete\"]').click();\n```\n\n### Additional Test Selectors\n\n| Element | Selector |\n|---------|----------|\n| Block tunes popover | `[data-blok-testid=\"block-tunes-popover\"]` |\n| Popover search input | `[data-blok-testid=\"popover-search-input\"]` |\n| Popover item title | `[data-blok-testid=\"popover-item-title\"]` |\n| Popover overlay | `[data-blok-testid=\"popover-overlay\"]` |\n| Inline tool input | `[data-blok-testid=\"inline-tool-input\"]` |\n| Tooltip | `[data-blok-testid=\"tooltip\"]` |\n| Redactor | `[data-blok-testid=\"redactor\"]` |\n| Toolbox | `[data-blok-testid=\"toolbox\"]` |\n| Toolbox popover | `[data-blok-testid=\"toolbox-popover\"]` |\n| Selection overlay | `[data-blok-testid=\"overlay\"]` |\n| Selection rectangle | `[data-blok-testid=\"overlay-rectangle\"]` |\n\n---\n\n### State Selectors\n\n| State | Selector |\n|-------|----------|\n| Toolbar opened | `[data-blok-opened=\"true\"]` |\n| Block selected | `[data-blok-selected=\"true\"]` |\n| Popover opened | `[data-blok-popover-opened=\"true\"]` |\n| Item focused | `[data-blok-focused=\"true\"]` |\n| Item disabled | `[data-blok-disabled=\"true\"]` |\n| Nested popover | `[data-blok-nested=\"true\"]` |\n| Toolbox opened | `[data-blok-toolbox-opened=\"true\"]` |\n| Block dragging | `[data-blok-dragging=\"true\"]` |\n| Element hidden | `[data-blok-hidden=\"true\"]` |\n| RTL mode | `[data-blok-rtl=\"true\"]` |\n\n---\n\n## Quick Checklist\n\n- [ ] Replace `new EditorJS` with `new Blok`\n- [ ] Update imports from `@editorjs/*` to `@jackuait/blok`\n- [ ] Change holder from `editorjs` to `blok` (or specify explicitly)\n- [ ] Use bundled tools: `Blok.Header`, `Blok.Paragraph`\n- [ ] Replace `@editorjs/delimiter` with built-in `Blok.Divider`\n- [ ] Update `EditorConfig` type to `BlokConfig`\n- [ ] Replace `data-id` with `data-blok-id` in queries\n- [ ] Replace `data-item-name` with `data-blok-item-name`\n- [ ] Replace `.ce-*` selectors with `[data-blok-*]` attributes\n- [ ] Replace `.cdx-*` selectors with `[data-blok-*]` attributes\n- [ ] Update E2E test selectors\n", n = (e) => [
 	"# Blok Migration Guide (for LLM-assisted migration)",
 	"",
 	"> This document contains everything needed to migrate a project from EditorJS to Blok.",

package/dist/full.mjs

@@ -1,29 +1,29 @@
-import { tr as e } from "./chunks/constants-Ccno9NZS.mjs";
-import { n as t, t as n } from "./chunks/blok-DH-WEcA8.mjs";
-import { t as r } from "./chunks/objectSpread2-BY4mgzrQ.mjs";
-import { _ as i, a, c as o, g as s, h as c, i as l, n as u, o as d, p as f, r as p, s as m, t as h } from "./chunks/tools-C2_IVsQY.mjs";
+import { n as e, t } from "./chunks/blok-CiLRmoHI.mjs";
+import { $n as n } from "./chunks/constants-DFS8l39Y.mjs";
+import { t as r } from "./chunks/objectSpread2-CWwMYL_U.mjs";
+import { _ as i, a, c as o, g as s, i as c, l, m as u, n as d, o as f, s as p, t as m, v as h } from "./chunks/tools-CSYsrnud.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {
-		class: i,
+		class: h,
 		inlineToolbar: !0,
 		config: { preserveBlank: !0 }
 	},
 	header: {
-		class: s,
+		class: i,
 		inlineToolbar: !0
 	},
 	list: {
-		class: c,
+		class: s,
 		inlineToolbar: !0
 	}
 }, _ = r(r({}, g), {}, {
-	bold: { class: o },
-	italic: { class: m },
-	marker: { class: a },
-	underline: { class: l },
-	strikethrough: { class: p },
-	link: { class: d }
+	bold: { class: l },
+	italic: { class: o },
+	marker: { class: f },
+	underline: { class: a },
+	strikethrough: { class: c },
+	link: { class: p }
 });
 //#endregion
-export { n as Blok, o as Bold, e as DATA_ATTR, s as Header, m as Italic, d as Link, c as List, a as Marker, i as Paragraph, p as Strikethrough, f as Toggle, l as Underline, _ as allTools, h as defaultBlockTools, u as defaultInlineTools, g as defaultTools, t as version };
+export { t as Blok, l as Bold, n as DATA_ATTR, i as Header, o as Italic, p as Link, s as List, f as Marker, h as Paragraph, c as Strikethrough, u as Toggle, a as Underline, _ as allTools, m as defaultBlockTools, d as defaultInlineTools, g as defaultTools, e as version };

package/dist/locales.mjs

@@ -58,6 +58,8 @@ var e = {
 	"tools.table.clearSelection": "Clear",
 	"tools.table.copySelection": "Copy",
 	"tools.table.cellColor": "Color",
+	"tools.table.mergeCells": "Merge cells",
+	"tools.table.splitCell": "Split cell",
 	"tools.table.headerColumn": "Header column",
 	"tools.table.insertColumnLeft": "Insert Column Left",
 	"tools.table.insertColumnRight": "Insert Column Right",
@@ -70,6 +72,16 @@ var e = {
 	"tools.table.dragToAddRemoveRows": "Drag to add or remove rows",
 	"tools.table.clickToAddColumn": "Click to add a new column",
 	"tools.table.dragToAddRemoveColumns": "Drag to add or remove columns",
+	"tools.table.placement": "Placement",
+	"tools.table.placementTopLeft": "Top Left",
+	"tools.table.placementTopCenter": "Top Center",
+	"tools.table.placementTopRight": "Top Right",
+	"tools.table.placementMiddleLeft": "Middle Left",
+	"tools.table.placementMiddleCenter": "Center",
+	"tools.table.placementMiddleRight": "Middle Right",
+	"tools.table.placementBottomLeft": "Bottom Left",
+	"tools.table.placementBottomCenter": "Bottom Center",
+	"tools.table.placementBottomRight": "Bottom Right",
 	"blockSettings.delete": "Delete",
 	"a11y.dragHandle": "Drag to move block or click for menu",
 	"a11y.dragHandleRole": "drag handle",
@@ -88,8 +100,6 @@ var e = {
 	"toolNames.underline": "Underline",
 	"toolNames.strikethrough": "Strikethrough",
 	"toolNames.callout": "Callout",
-	"toolNames.database": "Database",
-	"toolNames.board": "Board",
 	"toolNames.divider": "Divider",
 	"toolNames.quote": "Quote",
 	"searchTerms.divider": "divider",
@@ -144,20 +154,6 @@ var e = {
 	"tools.callout.emojiCategoryObjects": "Objects",
 	"tools.callout.emojiCategorySymbols": "Symbols",
 	"tools.callout.emojiCategoryFlags": "Flags",
-	"tools.database.addColumn": "Add column",
-	"tools.database.renameColumn": "Rename column",
-	"tools.database.deleteColumn": "Delete column",
-	"tools.database.addCard": "Add card",
-	"tools.database.newPage": "New page",
-	"tools.database.deleteCard": "Delete card",
-	"tools.database.cardTitlePlaceholder": "Empty page",
-	"tools.database.columnTitlePlaceholder": "Column",
-	"tools.database.emptyColumn": "No cards",
-	"tools.database.rowTitlePlaceholder": "Empty page",
-	"tools.database.addRow": "Add row",
-	"tools.database.newRow": "New row",
-	"tools.database.openRow": "Open row",
-	"tools.database.deleteRow": "Delete row",
 	"tools.callout.color": "Color",
 	"tools.callout.colorDefault": "Default",
 	"tools.callout.colorGray": "Gray",
@@ -173,7 +169,22 @@ var e = {
 	"tools.quote.size": "Quote size",
 	"tools.quote.placeholder": "Quote",
 	"tools.quote.defaultSize": "Default",
-	"tools.quote.largeSize": "Large"
+	"tools.quote.largeSize": "Large",
+	"toolNames.code": "Code",
+	"toolNames.inlineCode": "Code",
+	"tools.code.placeholder": "Write code…",
+	"tools.code.language": "Language",
+	"tools.code.copied": "Copied!",
+	"tools.code.copyCode": "Copy code",
+	"tools.code.wrapLines": "Wrap lines",
+	"tools.code.searchLanguage": "Search language...",
+	"tools.code.codeTab": "Code",
+	"tools.code.previewTab": "Preview",
+	"tools.code.lineNumbers": "Line numbers",
+	"searchTerms.code": "code",
+	"searchTerms.snippet": "snippet",
+	"searchTerms.program": "program",
+	"searchTerms.pre": "pre"
 }, t = new Set([
 	"ar",
 	"dv",
@@ -193,74 +204,74 @@ s.set("en", o);
 var c = () => {
 	s.clear(), s.set("en", o);
 }, l = {
-	am: () => import("./messages-C6Y4Jv2N.mjs"),
-	ar: () => import("./messages-BokEflKa.mjs"),
-	az: () => import("./messages-CBdQ3XP9.mjs"),
-	bg: () => import("./messages-hTpeKUaW.mjs"),
-	bn: () => import("./messages-CBzd_x7H.mjs"),
-	bs: () => import("./messages-BSe3QDnQ.mjs"),
-	cs: () => import("./messages-CqkRG9mH.mjs"),
-	da: () => import("./messages-DOTJ2NvJ.mjs"),
-	de: () => import("./messages-CjmSrt1D.mjs"),
-	dv: () => import("./messages-BKjqW08U.mjs"),
-	el: () => import("./messages-xEI8gEDK.mjs"),
+	am: () => import("./messages-Bq3F2Tp_.mjs"),
+	ar: () => import("./messages-CR_L_UtK.mjs"),
+	az: () => import("./messages-DLX_iBDJ.mjs"),
+	bg: () => import("./messages-BJeGJksD.mjs"),
+	bn: () => import("./messages-BbYq1pk-.mjs"),
+	bs: () => import("./messages-CmB406HW.mjs"),
+	cs: () => import("./messages-BwHs4cm1.mjs"),
+	da: () => import("./messages-Ci0KqX-J.mjs"),
+	de: () => import("./messages-Smt4GBbj.mjs"),
+	dv: () => import("./messages-CJTy6JZt.mjs"),
+	el: () => import("./messages-xh2eOLvs.mjs"),
 	en: () => Promise.resolve({ default: e }),
-	es: () => import("./messages-BywbKcPC.mjs"),
-	et: () => import("./messages-BBq0M604.mjs"),
-	fa: () => import("./messages-DVQNjdPk.mjs"),
-	fi: () => import("./messages-Bo_FUvVH.mjs"),
-	fil: () => import("./messages-DA-o8X3A.mjs"),
-	fr: () => import("./messages-D3cAcyzj.mjs"),
-	gu: () => import("./messages-DD5pW0zJ.mjs"),
-	he: () => import("./messages-Ccd587Yn.mjs"),
-	hi: () => import("./messages-eTourT12.mjs"),
-	hr: () => import("./messages-CVcQD-9u.mjs"),
-	hu: () => import("./messages-BJ7BuFZi.mjs"),
-	hy: () => import("./messages-DZEcrbmH.mjs"),
-	id: () => import("./messages-tK67CBqn.mjs"),
-	it: () => import("./messages-DqyqEw1_.mjs"),
-	ja: () => import("./messages-BXI3qIos.mjs"),
-	ka: () => import("./messages-BCuTVHBV.mjs"),
-	km: () => import("./messages-DnatBKPm.mjs"),
-	kn: () => import("./messages-CHJ5SOZI.mjs"),
-	ko: () => import("./messages-BtxaN-xx.mjs"),
-	ku: () => import("./messages-DJKLtW7u.mjs"),
-	lo: () => import("./messages-pgPcitDH.mjs"),
-	lt: () => import("./messages-DV9e1DW7.mjs"),
-	lv: () => import("./messages-BVKZK-3t.mjs"),
-	mk: () => import("./messages-BmNaAyKS.mjs"),
-	ml: () => import("./messages-CdlsTFB1.mjs"),
-	mn: () => import("./messages-upqrRZQH2.mjs"),
-	mr: () => import("./messages-DIRha_gg2.mjs"),
-	ms: () => import("./messages-B-4fku2H2.mjs"),
-	my: () => import("./messages-BGsDZTQp2.mjs"),
-	ne: () => import("./messages-BvgTQLf72.mjs"),
-	nl: () => import("./messages-DjJQoYvP2.mjs"),
-	no: () => import("./messages-Dkg99bfr2.mjs"),
-	pa: () => import("./messages-DJT4Bt_02.mjs"),
-	pl: () => import("./messages-C6OJvnJg2.mjs"),
-	ps: () => import("./messages-i4S6q64n2.mjs"),
-	pt: () => import("./messages-DbxbxUiK2.mjs"),
-	ro: () => import("./messages-BvgXeMSL2.mjs"),
-	ru: () => import("./messages-DtrSrdfE2.mjs"),
-	sd: () => import("./messages-BcFQFcJ92.mjs"),
-	si: () => import("./messages-JhoVMjfX2.mjs"),
-	sk: () => import("./messages-Bk984gRE2.mjs"),
-	sl: () => import("./messages-C30Vz-UZ2.mjs"),
-	sq: () => import("./messages-C5XPUD9T2.mjs"),
-	sr: () => import("./messages-Bio7KYsr2.mjs"),
-	sv: () => import("./messages-tsHpMdDT2.mjs"),
-	sw: () => import("./messages-BAcH6PtT2.mjs"),
-	ta: () => import("./messages--S8_taOd2.mjs"),
-	te: () => import("./messages-Dddxv8-f2.mjs"),
-	th: () => import("./messages-CM5fsPo02.mjs"),
-	tr: () => import("./messages-Dcyrzdxa2.mjs"),
-	ug: () => import("./messages-CgzbJ8_l2.mjs"),
-	uk: () => import("./messages-BCG_evLg.mjs"),
-	ur: () => import("./messages-CYX48nfg.mjs"),
-	vi: () => import("./messages-BBvDbp62.mjs"),
-	yi: () => import("./messages-DUBHHfEt.mjs"),
-	zh: () => import("./messages-fLi0P2dP.mjs")
+	es: () => import("./messages-Ce6KVEbT.mjs"),
+	et: () => import("./messages-Bm0Feca1.mjs"),
+	fa: () => import("./messages-DLlc9QPw.mjs"),
+	fi: () => import("./messages-DY4IqlhY.mjs"),
+	fil: () => import("./messages-Dl5Y2-Ia.mjs"),
+	fr: () => import("./messages-DBiVgUs2.mjs"),
+	gu: () => import("./messages-F2xRoY1w.mjs"),
+	he: () => import("./messages-B1ZUQagA.mjs"),
+	hi: () => import("./messages-BmAn22OX.mjs"),
+	hr: () => import("./messages-B19o-Teb.mjs"),
+	hu: () => import("./messages-BIHc0KHY.mjs"),
+	hy: () => import("./messages-BECMxmfX.mjs"),
+	id: () => import("./messages-j7o5rT9s.mjs"),
+	it: () => import("./messages-nUVjeh7K.mjs"),
+	ja: () => import("./messages-nlhESX9t.mjs"),
+	ka: () => import("./messages-DTh9a8mR.mjs"),
+	km: () => import("./messages-CcF4y-E4.mjs"),
+	kn: () => import("./messages-Dw__BcTj.mjs"),
+	ko: () => import("./messages-CjbnogEC.mjs"),
+	ku: () => import("./messages-hWwSRF-2.mjs"),
+	lo: () => import("./messages-ynAe7ewZ.mjs"),
+	lt: () => import("./messages-E_ZuzGDt.mjs"),
+	lv: () => import("./messages-CqXtJTpU.mjs"),
+	mk: () => import("./messages-DkLU_rWm.mjs"),
+	ml: () => import("./messages-dv19AkyJ.mjs"),
+	mn: () => import("./messages-B7ieAJBd2.mjs"),
+	mr: () => import("./messages-BsycN_JI2.mjs"),
+	ms: () => import("./messages-DnG0ef8t2.mjs"),
+	my: () => import("./messages-DMr62KiO2.mjs"),
+	ne: () => import("./messages-BYmmMDrN2.mjs"),
+	nl: () => import("./messages-D0aw5_0k2.mjs"),
+	no: () => import("./messages-BTQPpoM42.mjs"),
+	pa: () => import("./messages-aMXpHt5X2.mjs"),
+	pl: () => import("./messages-Dl3Sv6Rq2.mjs"),
+	ps: () => import("./messages-D8FQWulF2.mjs"),
+	pt: () => import("./messages-96iaAUds2.mjs"),
+	ro: () => import("./messages-DPA-mMWC2.mjs"),
+	ru: () => import("./messages-BiUGXvYr2.mjs"),
+	sd: () => import("./messages-CWIXvnDf2.mjs"),
+	si: () => import("./messages-5jvKxQNu2.mjs"),
+	sk: () => import("./messages-DbySKTKt2.mjs"),
+	sl: () => import("./messages-rk-A1Wa42.mjs"),
+	sq: () => import("./messages-BRZX964b2.mjs"),
+	sr: () => import("./messages-Dnp9N6RU2.mjs"),
+	sv: () => import("./messages-aWZH50vu2.mjs"),
+	sw: () => import("./messages-7QD-X6XT2.mjs"),
+	ta: () => import("./messages-BiiongNz2.mjs"),
+	te: () => import("./messages-DIJlIqlQ2.mjs"),
+	th: () => import("./messages-Ddnj2iTG2.mjs"),
+	tr: () => import("./messages-DYTTu0O12.mjs"),
+	ug: () => import("./messages-CSUHBs4c2.mjs"),
+	uk: () => import("./messages-Dy-Y_nEI.mjs"),
+	ur: () => import("./messages-DnGJD4TL.mjs"),
+	vi: () => import("./messages-Dvn35ksS.mjs"),
+	yi: () => import("./messages-BIoeoik5.mjs"),
+	zh: () => import("./messages-BYNcD6uR.mjs")
 }, u = async (e) => {
 	let t = s.get(e);
 	if (t !== void 0) return t;