@jackuait/blok 0.10.0-beta.9 → 0.10.0

package/types/tools/adapters/block-tool-adapter.d.ts

@@ -35,6 +35,12 @@ interface BlockToolAdapter extends BaseToolAdapter<ToolType.Block, BlockTool>{
    */
   isReadOnlySupported: boolean;
 
+  /**
+   * Returns true if the Tool's prototype has a setReadOnly method,
+   * enabling the in-place read-only toggle path (no save/clear/render cycle).
+   */
+  supportsInPlaceReadOnly: boolean;
+
   /**
    * Returns true if Tool supports linebreaks
    */

package/types/tools/block-tool.d.ts

@@ -87,6 +87,16 @@ export interface BlockTool extends BaseTool {
    * @returns Object with left offset in pixels, or undefined if no offset should be applied
    */
   getContentOffset?(hoveredElement: Element): { left: number } | undefined;
+
+  /**
+   * Called when read-only mode is toggled without re-rendering the block.
+   * Implementations should update the DOM in place: toggle contentEditable,
+   * bind/unbind event listeners, show/hide interactive elements, etc.
+   *
+   * Optional — tools without this method trigger a full save/clear/render
+   * fallback when read-only mode is toggled.
+   */
+  setReadOnly?(state: boolean): void;
 }
 
 /**

package/bin/blok.mjs

@@ -1,10 +0,0 @@
-#!/usr/bin/env node
-
-import { readFileSync } from 'node:fs';
-import { run } from '../dist/cli.mjs';
-
-const version = process.env.npm_package_version
-  || JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf-8')).version;
-const args = process.argv.slice(2);
-
-run(args, version);

package/dist/cli.mjs

@@ -1,37 +0,0 @@
-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-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.",
-	"> Apply these changes systematically to the user's codebase.",
-	`> Current Blok version: ${e}`,
-	"",
-	"---",
-	""
-].join("\n") + t, r = (t, n) => {
-	n ? (e.writeFileSync(n, t, "utf-8"), process.stderr.write(`Written to ${n}\n`)) : process.stdout.write(t);
-}, i = "Usage: blok [options]\n\nOptions:\n  --migration          Output the EditorJS to Blok migration guide (LLM-friendly)\n  --output <file>      Write output to a file instead of stdout\n  --help               Show this help message\n\nExamples:\n  npx @jackuait/blok --migration\n  npx @jackuait/blok --migration | pbcopy\n  npx @jackuait/blok --migration --output migration-guide.md\n", a = (e) => {
-	if (e.includes("--help")) return { command: "help" };
-	if (e.includes("--migration")) {
-		let t = e.indexOf("--output");
-		return {
-			command: "migration",
-			output: t === -1 ? void 0 : e[t + 1]
-		};
-	}
-	return { command: null };
-}, o = (e, t) => {
-	let { command: o, output: s } = a(e);
-	switch (o) {
-		case "migration":
-			r(n(t), s);
-			break;
-		case "help":
-		case null:
-			process.stdout.write(i);
-			break;
-	}
-};
-//#endregion
-export { o as run };

package/src/tools/code/language-picker.ts

@@ -1,241 +0,0 @@
-import type { LanguageEntry } from './constants';
-import { SEARCH_LANGUAGE_KEY } from './constants';
-
-interface I18n {
-  t: (key: string) => string;
-}
-
-export interface LanguagePickerOptions {
-  languages: LanguageEntry[];
-  onSelect: (id: string) => void;
-  i18n: I18n;
-  activeLanguageId: string;
-}
-
-export class LanguagePicker {
-  private readonly _languages: LanguageEntry[];
-  private readonly _onSelect: (id: string) => void;
-  private readonly _i18n: I18n;
-  private _activeLanguageId: string;
-
-  private _element: HTMLElement;
-  private _searchInput: HTMLInputElement;
-  private _list: HTMLElement;
-  private _backdrop: HTMLElement | null = null;
-  private _anchorEl: HTMLElement | null = null;
-
-  constructor(options: LanguagePickerOptions) {
-    this._languages = options.languages;
-    this._onSelect = options.onSelect;
-    this._i18n = options.i18n;
-    this._activeLanguageId = options.activeLanguageId;
-    this._element = this.buildElement();
-
-    const searchInput = this._element.querySelector<HTMLInputElement>('[data-blok-testid="code-language-search"]');
-    const list = this._element.querySelector<HTMLElement>('[data-language-list]');
-
-    if (searchInput === null || list === null) {
-      throw new Error('LanguagePicker: failed to build required elements');
-    }
-
-    this._searchInput = searchInput;
-    this._list = list;
-  }
-
-  public getElement(): HTMLElement {
-    return this._element;
-  }
-
-  public open(anchor: HTMLElement): void {
-    this._anchorEl = anchor;
-    this._searchInput.value = '';
-    this.renderList(this._languages);
-
-    this._element.hidden = false;
-    this.showBackdrop();
-    this.position(anchor);
-    this._searchInput.focus();
-  }
-
-  public close(): void {
-    this._element.hidden = true;
-    this.removeBackdrop();
-    this._anchorEl?.focus();
-  }
-
-  public setActiveLanguage(id: string): void {
-    this._activeLanguageId = id;
-
-    const buttons = Array.from(this._list.querySelectorAll<HTMLButtonElement>('button[data-language-id]'));
-
-    for (const btn of buttons) {
-      const isActive = btn.getAttribute('data-language-id') === id;
-
-      this.applyActiveStyle(btn, isActive);
-    }
-  }
-
-  // ─── DOM Construction ─────────────────────────────────────
-
-  private buildElement(): HTMLElement {
-    const el = document.createElement('div');
-
-    el.setAttribute('data-blok-testid', 'code-language-picker');
-    el.className = [
-      'fixed z-50 w-[240px] overflow-hidden rounded-lg',
-      'border border-neutral-200/70 bg-white shadow-xl',
-      'theme-dark:border-neutral-700/50 theme-dark:bg-neutral-900',
-    ].join(' ');
-    el.hidden = true;
-
-    // Search wrapper
-    const searchWrapper = document.createElement('div');
-
-    searchWrapper.className = 'px-2 pt-2 pb-1';
-
-    const input = document.createElement('input');
-
-    input.type = 'text';
-    input.placeholder = this._i18n.t(SEARCH_LANGUAGE_KEY);
-    input.setAttribute('data-blok-testid', 'code-language-search');
-    input.className = [
-      'w-full text-xs rounded-md py-1.5 px-2.5 outline-hidden',
-      'bg-neutral-100 text-neutral-800 placeholder:text-neutral-400',
-      'theme-dark:bg-neutral-800 theme-dark:text-neutral-200 theme-dark:placeholder:text-neutral-500',
-      'focus:ring-2 focus:ring-neutral-300/60 theme-dark:focus:ring-neutral-600/60',
-      'transition-shadow duration-150',
-    ].join(' ');
-    input.addEventListener('input', () => this.handleSearchChange(input.value));
-
-    searchWrapper.appendChild(input);
-    el.appendChild(searchWrapper);
-
-    // Language list
-    const list = document.createElement('div');
-
-    list.setAttribute('data-language-list', '');
-    list.className = 'max-h-[300px] overflow-y-auto px-1 pb-1';
-    el.appendChild(list);
-
-    // Keyboard handler
-    el.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        this.close();
-      }
-    });
-
-    return el;
-  }
-
-  // ─── Rendering ────────────────────────────────────────────
-
-  private renderList(languages: LanguageEntry[]): void {
-    this._list.innerHTML = '';
-
-    for (const lang of languages) {
-      const btn = document.createElement('button');
-
-      btn.type = 'button';
-      btn.setAttribute('data-language-id', lang.id);
-      btn.textContent = lang.name;
-      btn.className = [
-        'w-full text-left text-xs px-2 py-1.5 rounded cursor-pointer',
-        'bg-transparent border-0',
-        'text-neutral-700 theme-dark:text-neutral-300',
-        'can-hover:hover:bg-neutral-100 theme-dark:can-hover:hover:bg-neutral-800',
-        'transition-colors',
-      ].join(' ');
-
-      this.applyActiveStyle(btn, lang.id === this._activeLanguageId);
-
-      btn.addEventListener('click', () => {
-        this._onSelect(lang.id);
-        this.close();
-      });
-
-      this._list.appendChild(btn);
-    }
-  }
-
-  private applyActiveStyle(btn: HTMLButtonElement, active: boolean): void {
-    const activeClasses = ['bg-neutral-100', 'theme-dark:bg-neutral-800', 'font-medium'];
-
-    if (active) {
-      btn.classList.add(...activeClasses);
-      btn.setAttribute('data-active', 'true');
-    } else {
-      btn.classList.remove(...activeClasses);
-      btn.removeAttribute('data-active');
-    }
-  }
-
-  private handleSearchChange(query: string): void {
-    const trimmed = query.trim().toLowerCase();
-
-    if (trimmed === '') {
-      this.renderList(this._languages);
-
-      return;
-    }
-
-    const filtered = this._languages.filter(
-      (lang) => lang.name.toLowerCase().includes(trimmed)
-    );
-
-    this.renderList(filtered);
-  }
-
-  // ─── Backdrop ──────────────────────────────────────────────
-
-  private showBackdrop(): void {
-    this.removeBackdrop();
-
-    const backdrop = document.createElement('div');
-
-    backdrop.setAttribute('data-blok-language-picker-backdrop', '');
-    backdrop.style.position = 'fixed';
-    backdrop.style.inset = '0';
-    backdrop.style.zIndex = '50';
-
-    backdrop.addEventListener('mousedown', (e: MouseEvent) => {
-      if (e.target === backdrop) {
-        this.close();
-      }
-    });
-
-    this._element.parentElement?.insertBefore(backdrop, this._element);
-    backdrop.appendChild(this._element);
-    this._backdrop = backdrop;
-  }
-
-  private removeBackdrop(): void {
-    if (this._backdrop === null) {
-      return;
-    }
-
-    this._backdrop.parentElement?.insertBefore(this._element, this._backdrop);
-    this._backdrop.remove();
-    this._backdrop = null;
-  }
-
-  // ─── Positioning ──────────────────────────────────────────
-
-  private position(anchor: HTMLElement): void {
-    const rect = anchor.getBoundingClientRect();
-    const pickerRect = this._element.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    const viewportWidth = window.innerWidth;
-
-    const top = rect.bottom + pickerRect.height > viewportHeight
-      ? rect.top - pickerRect.height - 4
-      : rect.bottom + 4;
-
-    const idealLeft = rect.left - 8;
-    const left = idealLeft + pickerRect.width > viewportWidth
-      ? rect.right - pickerRect.width
-      : Math.max(0, idealLeft);
-
-    this._element.style.top = `${top}px`;
-    this._element.style.left = `${left}px`;
-  }
-}