@jackuait/blok 0.10.0-beta.8 → 0.10.0

package/src/tools/callout/index.ts

@@ -16,6 +16,7 @@ import type { CalloutData, CalloutConfig } from './types';
 import { buildCalloutDOM, type CalloutDOMRefs } from './dom-builder';
 import { saveCallout } from './block-operations';
 import { handleCalloutFirstChildBackspace } from './callout-keyboard';
+import { mountChildBlocks } from '../nested-blocks';
 import { createColorPicker, type ColorPickerHandle } from '../../components/shared/color-picker';
 import { colorVarName } from '../../components/shared/color-presets';
 import { mapToNearestPresetName } from '../../components/utils/color-mapping';
@@ -60,11 +61,12 @@ const VARIANT_TO_BG_PRESET: Record<string, string | null> = {
 
 export class CalloutTool implements BlockTool {
   private readonly api: API;
-  private readonly readOnly: boolean;
+  private readOnly: boolean;
   private _data: CalloutData;
   private _dom: CalloutDOMRefs | null = null;
   private _emojiPicker: EmojiPicker | null = null;
   private _colorPicker: ColorPickerHandle | null = null;
+  private _dragZone: HTMLElement | null = null;
   private blockId?: string;
 
   constructor({ data, api, readOnly, block }: BlockToolConstructorOptions<CalloutData, CalloutConfig>) {
@@ -108,6 +110,10 @@ export class CalloutTool implements BlockTool {
   }
 
   public render(): HTMLElement {
+    if (this._dom) {
+      return this._dom.wrapper;
+    }
+
     const dom = buildCalloutDOM({
       emoji: this._data.emoji,
       readOnly: this.readOnly,
@@ -115,6 +121,7 @@ export class CalloutTool implements BlockTool {
     });
 
     this._dom = dom;
+    this._dragZone = dom.dragZone;
     this.applyColors();
 
     if (!this.readOnly) {
@@ -144,12 +151,7 @@ export class CalloutTool implements BlockTool {
 
     const children = this.api.blocks.getChildren(this.blockId);
 
-    // Append existing children to the container
-    for (const child of children) {
-      if (child.holder.parentElement !== this._dom.childContainer) {
-        this._dom.childContainer.appendChild(child.holder);
-      }
-    }
+    mountChildBlocks(this._dom.childContainer, children);
 
     // Auto-create initial paragraph child when callout has no children
     if (children.length === 0) {
@@ -252,6 +254,18 @@ export class CalloutTool implements BlockTool {
     // No-op — no subscriptions to clean up
   }
 
+  public setReadOnly(state: boolean): void {
+    this.readOnly = state;
+
+    if (this._dom) {
+      this._dom.emojiButton.disabled = state;
+    }
+  }
+
+  public get dragZone(): HTMLElement | null {
+    return this._dragZone;
+  }
+
   private syncPickerActiveColors(): void {
     if (this._colorPicker === null) {
       return;

package/src/tools/code/constants.ts

@@ -53,7 +53,7 @@ export const LANGUAGES: LanguageEntry[] = [
 ];
 
 // CSS — Tailwind classes
-export const WRAPPER_STYLES = 'flex flex-col rounded-lg bg-bg-secondary overflow-hidden my-1';
+export const WRAPPER_STYLES = 'flex flex-col rounded-lg border border-border-secondary bg-bg-secondary overflow-hidden my-1';
 export const HEADER_STYLES = 'flex items-center gap-1 px-3 py-1.5 border-b border-border-primary text-xs text-gray-text';
 export const LANGUAGE_BUTTON_STYLES = 'px-1.5 py-0.5 rounded cursor-pointer bg-transparent border-0 text-xs text-gray-text font-medium transition-colors can-hover:hover:bg-item-hover-bg select-none';
 export const HEADER_BUTTON_STYLES = 'p-1 rounded cursor-pointer bg-transparent border-0 text-gray-text transition-colors can-hover:hover:bg-item-hover-bg flex items-center justify-center';
@@ -73,6 +73,14 @@ export const TAB_ACTIVE_STYLES = 'bg-blue-500 text-white';
 export const TAB_INACTIVE_STYLES = 'bg-transparent text-gray-text can-hover:hover:bg-item-hover-bg';
 export const PREVIEW_AREA_STYLES = 'px-4 py-3 overflow-x-auto min-h-[1.5em] flex justify-center';
 
+// i18n key — preview toggle
+export const PREVIEW_TOGGLE_KEY = 'tools.code.previewToggle';
+
+// CSS — more menu dropdown
+export const MORE_MENU_STYLES = 'absolute right-0 top-full mt-1 min-w-[10rem] rounded-lg bg-bg-secondary border border-border-secondary shadow-lg p-1 z-10';
+export const MORE_MENU_ITEM_STYLES = 'flex items-center gap-2 w-full px-2.5 py-1.5 rounded text-xs text-gray-text cursor-pointer bg-transparent border-0 transition-colors can-hover:hover:bg-item-hover-bg select-none';
+export const MORE_MENU_ITEM_ACTIVE_STYLES = 'text-blue-500';
+
 // Shiki theme names for syntax highlighting
 export const SHIKI_LIGHT_THEME = 'one-light';
 export const SHIKI_DARK_THEME = 'vitesse-dark';

package/src/tools/code/dom-builder.ts

@@ -4,15 +4,14 @@ import {
   LANGUAGE_BUTTON_STYLES,
   HEADER_BUTTON_STYLES,
   CODE_AREA_STYLES,
-  TAB_STYLES,
-  TAB_ACTIVE_STYLES,
-  TAB_INACTIVE_STYLES,
   PREVIEW_AREA_STYLES,
   CODE_BODY_STYLES,
   GUTTER_STYLES,
   GUTTER_LINE_STYLES,
+  MORE_MENU_STYLES,
+  MORE_MENU_ITEM_STYLES,
 } from './constants';
-import { IconCopy, IconWrap, IconLineNumbers } from '../../components/icons';
+import { IconCopy, IconCode, IconChevronDown, IconEllipsis, IconWrap, IconLineNumbers } from '../../components/icons';
 
 export interface CodeDOMRefs {
   wrapper: HTMLElement;
@@ -23,9 +22,10 @@ export interface CodeDOMRefs {
   preElement: HTMLPreElement;
   codeElement: HTMLElement;
   gutterElement: HTMLElement;
-  codeTab: HTMLButtonElement | null;
-  previewTab: HTMLButtonElement | null;
+  previewToggleButton: HTMLButtonElement | null;
   previewElement: HTMLDivElement | null;
+  moreButton: HTMLButtonElement;
+  moreMenu: HTMLElement;
 }
 
 export interface BuildCodeDOMOptions {
@@ -36,38 +36,30 @@ export interface BuildCodeDOMOptions {
   wrapLabel: string;
   lineNumbersLabel?: string;
   previewable?: boolean;
-  codeTabLabel?: string;
-  previewTabLabel?: string;
+  previewToggleLabel?: string;
 }
 
 function buildPreviewElements(
-  codeTabLabel?: string,
-  previewTabLabel?: string,
-): { codeTab: HTMLButtonElement; previewTab: HTMLButtonElement; previewElement: HTMLDivElement } {
-  const codeTab = document.createElement('button');
+  previewToggleLabel?: string,
+): { previewToggleButton: HTMLButtonElement; previewElement: HTMLDivElement } {
+  const previewToggleButton = document.createElement('button');
 
-  codeTab.type = 'button';
-  codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
-  codeTab.textContent = codeTabLabel ?? 'Code';
-  codeTab.setAttribute('data-blok-testid', 'code-code-tab');
-
-  const previewTab = document.createElement('button');
-
-  previewTab.type = 'button';
-  previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
-  previewTab.textContent = previewTabLabel ?? 'Preview';
-  previewTab.setAttribute('data-blok-testid', 'code-preview-tab');
+  previewToggleButton.type = 'button';
+  previewToggleButton.className = HEADER_BUTTON_STYLES;
+  previewToggleButton.innerHTML = IconCode;
+  previewToggleButton.setAttribute('aria-label', previewToggleLabel ?? 'Preview');
+  previewToggleButton.setAttribute('data-blok-testid', 'code-preview-toggle-btn');
 
   const previewElement = document.createElement('div');
 
   previewElement.className = PREVIEW_AREA_STYLES;
   previewElement.setAttribute('data-blok-testid', 'code-preview');
 
-  return { codeTab, previewTab, previewElement };
+  return { previewToggleButton, previewElement };
 }
 
 export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
-  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, codeTabLabel, previewTabLabel } = options;
+  const { code, languageName, readOnly, copyLabel, wrapLabel, lineNumbersLabel, previewable, previewToggleLabel } = options;
 
   // Wrapper
   const wrapper = document.createElement('div');
@@ -77,38 +69,30 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   const header = document.createElement('div');
   header.className = HEADER_STYLES;
 
-  // Language button (opens language picker)
+  // Language button (opens language picker) — includes text + chevron icon
   const languageButton = document.createElement('button');
   languageButton.type = 'button';
   languageButton.className = LANGUAGE_BUTTON_STYLES;
-  languageButton.textContent = languageName;
   languageButton.setAttribute('aria-haspopup', 'listbox');
   languageButton.setAttribute('data-blok-testid', 'code-language-btn');
 
+  const langText = document.createElement('span');
+  langText.textContent = languageName;
+  languageButton.appendChild(langText);
+
+  const chevronSpan = document.createElement('span');
+  chevronSpan.className = 'inline-flex items-center ml-0.5 -mr-0.5';
+  chevronSpan.innerHTML = IconChevronDown;
+  languageButton.appendChild(chevronSpan);
+
   // Spacer
   const spacer = document.createElement('div');
   spacer.className = 'flex-1';
 
-  // Tab buttons (only when previewable)
-  const { codeTab, previewTab, previewElement } = previewable
-    ? buildPreviewElements(codeTabLabel, previewTabLabel)
-    : { codeTab: null, previewTab: null, previewElement: null };
-
-  // Wrap toggle button
-  const wrapButton = document.createElement('button');
-  wrapButton.type = 'button';
-  wrapButton.className = HEADER_BUTTON_STYLES;
-  wrapButton.innerHTML = IconWrap;
-  wrapButton.setAttribute('aria-label', wrapLabel);
-  wrapButton.setAttribute('data-blok-testid', 'code-wrap-btn');
-
-  // Line numbers toggle button
-  const lineNumbersButton = document.createElement('button');
-  lineNumbersButton.type = 'button';
-  lineNumbersButton.className = HEADER_BUTTON_STYLES;
-  lineNumbersButton.innerHTML = IconLineNumbers;
-  lineNumbersButton.setAttribute('aria-label', lineNumbersLabel ?? 'Line numbers');
-  lineNumbersButton.setAttribute('data-blok-testid', 'code-line-numbers-btn');
+  // Preview toggle button (only when previewable and not read-only)
+  const { previewToggleButton, previewElement } = previewable
+    ? buildPreviewElements(previewToggleLabel)
+    : { previewToggleButton: null, previewElement: null };
 
   // Copy button
   const copyButton = document.createElement('button');
@@ -118,6 +102,54 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
   copyButton.setAttribute('aria-label', copyLabel);
   copyButton.setAttribute('data-blok-testid', 'code-copy-btn');
 
+  // More button (ellipsis)
+  const moreButton = document.createElement('button');
+  moreButton.type = 'button';
+  moreButton.className = HEADER_BUTTON_STYLES;
+  moreButton.innerHTML = IconEllipsis;
+  moreButton.setAttribute('aria-label', 'More');
+  moreButton.setAttribute('aria-haspopup', 'true');
+  moreButton.setAttribute('data-blok-testid', 'code-more-btn');
+
+  // More menu dropdown
+  const moreMenu = document.createElement('div');
+  moreMenu.className = MORE_MENU_STYLES;
+  moreMenu.hidden = true;
+  moreMenu.setAttribute('data-blok-testid', 'code-more-menu');
+
+  // Line numbers toggle (inside more menu)
+  const lineNumbersButton = document.createElement('button');
+  lineNumbersButton.type = 'button';
+  lineNumbersButton.className = MORE_MENU_ITEM_STYLES;
+  lineNumbersButton.setAttribute('data-blok-testid', 'code-line-numbers-btn');
+
+  const lineNumIconSpan = document.createElement('span');
+  lineNumIconSpan.className = 'flex items-center justify-center w-5 h-5';
+  lineNumIconSpan.innerHTML = IconLineNumbers;
+  lineNumbersButton.appendChild(lineNumIconSpan);
+
+  const lineNumText = document.createElement('span');
+  lineNumText.textContent = lineNumbersLabel ?? 'Line numbers';
+  lineNumbersButton.appendChild(lineNumText);
+
+  // Wrap toggle (inside more menu)
+  const wrapButton = document.createElement('button');
+  wrapButton.type = 'button';
+  wrapButton.className = MORE_MENU_ITEM_STYLES;
+  wrapButton.setAttribute('data-blok-testid', 'code-wrap-btn');
+
+  const wrapIconSpan = document.createElement('span');
+  wrapIconSpan.className = 'flex items-center justify-center w-5 h-5';
+  wrapIconSpan.innerHTML = IconWrap;
+  wrapButton.appendChild(wrapIconSpan);
+
+  const wrapText = document.createElement('span');
+  wrapText.textContent = wrapLabel;
+  wrapButton.appendChild(wrapText);
+
+  moreMenu.appendChild(lineNumbersButton);
+  moreMenu.appendChild(wrapButton);
+
   // Code area
   const codeElement = document.createElement('code');
   codeElement.className = CODE_AREA_STYLES;
@@ -146,19 +178,23 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     gutterElement.appendChild(lineEl);
   });
 
-  // Assemble header
+  // Assemble header: [language] [spacer] [preview toggle?] [copy] [more ▸ menu]
   header.appendChild(languageButton);
   header.appendChild(spacer);
 
-  if (codeTab && previewTab) {
-    header.appendChild(codeTab);
-    header.appendChild(previewTab);
+  if (previewToggleButton) {
+    header.appendChild(previewToggleButton);
   }
 
-  header.appendChild(lineNumbersButton);
-  header.appendChild(wrapButton);
   header.appendChild(copyButton);
 
+  // More wrapper (relative position anchor for absolute dropdown)
+  const moreWrapper = document.createElement('div');
+  moreWrapper.className = 'relative';
+  moreWrapper.appendChild(moreButton);
+  moreWrapper.appendChild(moreMenu);
+  header.appendChild(moreWrapper);
+
   // Pre wrapper for semantic HTML
   const preElement = document.createElement('pre');
   preElement.appendChild(codeElement);
@@ -177,5 +213,5 @@ export function buildCodeDOM(options: BuildCodeDOMOptions): CodeDOMRefs {
     wrapper.appendChild(previewElement);
   }
 
-  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, codeTab, previewTab, previewElement };
+  return { wrapper, languageButton, lineNumbersButton, copyButton, wrapButton, preElement, codeElement, gutterElement, previewToggleButton, previewElement, moreButton, moreMenu };
 }

package/src/tools/code/index.ts

@@ -14,7 +14,8 @@ import { IconCodeBlock } from '../../components/icons';
 import { buildCodeDOM } from './dom-builder';
 import type { CodeDOMRefs } from './dom-builder';
 import { handleCodeKeydown } from './code-keyboard';
-import { LanguagePicker } from './language-picker';
+import { PopoverDesktop } from '../../components/utils/popover';
+import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
 import {
   DEFAULT_LANGUAGE,
   LANGUAGES,
@@ -24,13 +25,10 @@ import {
   LINE_NUMBERS_KEY,
   COPIED_KEY,
   LANGUAGE_KEY,
+  SEARCH_LANGUAGE_KEY,
   COPIED_FEEDBACK_STYLES,
   PREVIEWABLE_LANGUAGES,
-  CODE_TAB_KEY,
-  PREVIEW_TAB_KEY,
-  TAB_STYLES,
-  TAB_ACTIVE_STYLES,
-  TAB_INACTIVE_STYLES,
+  PREVIEW_TOGGLE_KEY,
   PREVIEW_AREA_STYLES,
   GUTTER_LINE_STYLES,
 } from './constants';
@@ -48,7 +46,7 @@ export class CodeTool implements BlockTool {
   private _dom: CodeDOMRefs | null = null;
   private _wrapping = true;
   private _lineNumbers = true;
-  private _picker: LanguagePicker | null = null;
+  private _picker: PopoverDesktop | null = null;
   private _previewActive = false;
   private _previewContainer: HTMLElement | null = null;
   private _disposeHighlights: (() => void) | null = null;
@@ -76,8 +74,7 @@ export class CodeTool implements BlockTool {
       wrapLabel: this.api.i18n.t(WRAP_LINES_KEY),
       lineNumbersLabel: this.api.i18n.t(LINE_NUMBERS_KEY),
       previewable: this.readOnly ? false : isPreviewable,
-      codeTabLabel: this.api.i18n.t(CODE_TAB_KEY),
-      previewTabLabel: this.api.i18n.t(PREVIEW_TAB_KEY),
+      previewToggleLabel: this.api.i18n.t(PREVIEW_TOGGLE_KEY),
     });
 
     this._dom = dom;
@@ -86,7 +83,10 @@ export class CodeTool implements BlockTool {
     dom.gutterElement.hidden = !this._lineNumbers;
     dom.lineNumbersButton.addEventListener('click', () => this.toggleLineNumbers());
 
-    // Read-only + previewable: show preview only, hide code, no tabs
+    // More menu toggle
+    dom.moreButton.addEventListener('click', () => this.toggleMoreMenu());
+
+    // Read-only + previewable: show preview only, hide code, no toggle
     if (this.readOnly && isPreviewable) {
       const previewEl = document.createElement('div');
 
@@ -99,8 +99,8 @@ export class CodeTool implements BlockTool {
       void this.renderPreview();
     }
 
-    // Edit mode + previewable: show tabs, default to preview
-    if (!this.readOnly && isPreviewable && dom.codeTab && dom.previewTab && dom.previewElement) {
+    // Edit mode + previewable: show preview toggle, default to preview
+    if (!this.readOnly && isPreviewable && dom.previewToggleButton && dom.previewElement) {
       this._previewActive = true;
       dom.preElement.hidden = true;
       dom.gutterElement.hidden = true;
@@ -108,8 +108,7 @@ export class CodeTool implements BlockTool {
       this._previewContainer = dom.previewElement;
       void this.renderPreview();
 
-      dom.codeTab.addEventListener('click', () => this.showCode());
-      dom.previewTab.addEventListener('click', () => this.showPreview());
+      dom.previewToggleButton.addEventListener('click', () => this.togglePreview());
     }
 
     if (!this.readOnly) {
@@ -135,17 +134,28 @@ export class CodeTool implements BlockTool {
     dom.wrapButton.addEventListener('click', () => this.toggleWrap());
 
     if (!this.readOnly) {
-      this._picker = new LanguagePicker({
-        languages: LANGUAGES,
-        onSelect: (id: string) => this.setLanguage(id),
-        i18n: this.api.i18n,
-        activeLanguageId: this._data.language,
+      const languageItems: PopoverItemParams[] = LANGUAGES.map((lang) => ({
+        title: lang.name,
+        name: lang.id,
+        toggle: 'language',
+        isActive: (): boolean => this._data.language === lang.id,
+        closeOnActivate: true,
+        onActivate: (): void => this.setLanguage(lang.id),
+      }));
+
+      this._picker = new PopoverDesktop({
+        items: languageItems,
+        trigger: dom.languageButton,
+        leftAlignElement: dom.wrapper,
+        searchable: true,
+        width: '200px',
+        messages: {
+          search: this.api.i18n.t(SEARCH_LANGUAGE_KEY),
+        },
       });
 
-      document.body.appendChild(this._picker.getElement());
-
       dom.languageButton.addEventListener('click', () => {
-        this._picker?.open(dom.languageButton);
+        this._picker?.show();
       });
     }
 
@@ -156,8 +166,16 @@ export class CodeTool implements BlockTool {
     void this.highlightCode();
   }
 
+  private togglePreview(): void {
+    if (this._previewActive) {
+      this.showCode();
+    } else {
+      this.showPreview();
+    }
+  }
+
   private showCode(): void {
-    if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
+    if (!this._dom?.previewElement || !this._dom.previewToggleButton) {
       return;
     }
 
@@ -165,12 +183,10 @@ export class CodeTool implements BlockTool {
     this._dom.preElement.hidden = false;
     this._dom.gutterElement.hidden = !this._lineNumbers;
     this._dom.previewElement.hidden = true;
-    this._dom.codeTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
-    this._dom.previewTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
   }
 
   private showPreview(): void {
-    if (!this._dom?.previewElement || !this._dom.codeTab || !this._dom.previewTab) {
+    if (!this._dom?.previewElement || !this._dom.previewToggleButton) {
       return;
     }
 
@@ -178,13 +194,19 @@ export class CodeTool implements BlockTool {
     this._dom.preElement.hidden = true;
     this._dom.gutterElement.hidden = true;
     this._dom.previewElement.hidden = false;
-    this._dom.codeTab.className = `${TAB_STYLES} ${TAB_INACTIVE_STYLES}`;
-    this._dom.previewTab.className = `${TAB_STYLES} ${TAB_ACTIVE_STYLES}`;
 
     // Re-render preview with current code content
     void this.renderPreview();
   }
 
+  private toggleMoreMenu(): void {
+    if (!this._dom) {
+      return;
+    }
+
+    this._dom.moreMenu.hidden = !this._dom.moreMenu.hidden;
+  }
+
   private async renderPreview(): Promise<void> {
     if (!this._previewContainer) {
       return;
@@ -198,6 +220,22 @@ export class CodeTool implements BlockTool {
     this._previewContainer.innerHTML = rendered;
   }
 
+  public setReadOnly(state: boolean): void {
+    this.readOnly = state;
+
+    if (!this._dom) {
+      return;
+    }
+
+    if (state) {
+      this._dom.codeElement.setAttribute('contenteditable', 'false');
+      this._dom.codeElement.removeAttribute('spellcheck');
+    } else {
+      this._dom.codeElement.setAttribute('contenteditable', 'plaintext-only');
+      this._dom.codeElement.setAttribute('spellcheck', 'false');
+    }
+  }
+
   public save(_blockContent: HTMLElement): CodeData {
     return {
       code: this._dom?.codeElement.textContent ?? '',
@@ -265,10 +303,14 @@ export class CodeTool implements BlockTool {
     this._data.language = id;
 
     if (this._dom) {
-      this._dom.languageButton.textContent = this.getLanguageName(id);
+      // Update the text span inside the language button (first child)
+      const textSpan = this._dom.languageButton.querySelector('span');
+
+      if (textSpan) {
+        textSpan.textContent = this.getLanguageName(id);
+      }
     }
 
-    this._picker?.setActiveLanguage(id);
     void this.highlightCode();
   }
 
@@ -419,7 +461,7 @@ export class CodeTool implements BlockTool {
     }
 
     if (this._picker) {
-      this._picker.getElement().remove();
+      this._picker.destroy();
       this._picker = null;
     }
   }

package/src/tools/divider/index.ts

@@ -96,6 +96,11 @@ export class DividerTool implements BlockTool {
    */
   public onPaste(_event: PasteEvent): void {}
 
+  /**
+   * Toggle read-only mode in place. Divider is purely presentational — no-op.
+   */
+  public setReadOnly(_state: boolean): void {}
+
   /**
    * Nothing to sanitize — no HTML content
    */

package/src/tools/header/index.ts

@@ -111,6 +111,12 @@ export class Header implements BlockTool {
    */
   private readOnly: boolean;
 
+  /**
+   * Cleanup function for the placeholder, returned by setupPlaceholder().
+   * Stored so we can tear down the placeholder when entering read-only mode.
+   */
+  private placeholderCleanup: (() => void) | null = null;
+
   /**
    * Tool's settings passed from Editor
    */
@@ -302,6 +308,45 @@ export class Header implements BlockTool {
     this._element.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  /**
+   * Toggle read-only mode in-place without re-rendering the DOM element.
+   * Manages contentEditable, keydown listener (for toggle headings),
+   * placeholder setup/teardown, and body placeholder click handler.
+   *
+   * @param state - true to enter read-only mode, false to exit
+   */
+  public setReadOnly(state: boolean): void {
+    if (!this._element) {
+      return;
+    }
+
+    this.readOnly = state;
+
+    if (state) {
+      this._element.contentEditable = 'false';
+
+      if (this._data.isToggleable) {
+        this._element.removeEventListener('keydown', this.handleKeyDown);
+      }
+
+      if (this.placeholderCleanup) {
+        this.placeholderCleanup();
+        this.placeholderCleanup = null;
+      }
+    } else {
+      this._element.contentEditable = 'true';
+
+      if (this._data.isToggleable) {
+        this._element.addEventListener('keydown', this.handleKeyDown);
+      }
+
+      const translatedName = this.api.i18n.t(this.currentLevel.nameKey);
+      const placeholderText = this.resolvePlaceholderText(translatedName);
+
+      this.placeholderCleanup = setupPlaceholder(this._element, placeholderText);
+    }
+  }
+
   /**
    * Expand the toggle heading (no-op if not toggleable or already expanded).
    * Can be called externally via block.call('expand').
@@ -679,7 +724,7 @@ export class Header implements BlockTool {
     const placeholderText = this.resolvePlaceholderText(translatedName);
 
     if (!this.readOnly) {
-      setupPlaceholder(tag, placeholderText);
+      this.placeholderCleanup = setupPlaceholder(tag, placeholderText);
     } else {
       tag.setAttribute('data-placeholder', placeholderText);
     }
@@ -750,6 +795,7 @@ export class Header implements BlockTool {
     // pl-8 (32px) matches the heading's left padding so children align with the title text start.
     childContainer.className = 'pl-8';
     childContainer.setAttribute(TOGGLE_ATTR.toggleChildren, '');
+    childContainer.setAttribute(DATA_ATTR.nestedBlocks, '');
     // Block DOM mutations inside the children container from triggering the header tool's
     // didMutated → syncBlockDataToYjs path (same rationale as the toggle list tool).
     childContainer.setAttribute('data-blok-mutation-free', 'true');

package/src/tools/list/dom-builder.ts

@@ -111,7 +111,9 @@ export const buildListItem = (context: DOMBuilderContext): BuildResult => {
   // Extract element references for the result
   const markerElement = itemContent.querySelector<HTMLElement>('[data-list-marker]');
   const checkboxElement = itemContent.querySelector<HTMLInputElement>('input[type="checkbox"]');
-  const contentElement = itemContent.querySelector<HTMLElement>('[contenteditable]');
+  const contentElement = data.style === 'checklist'
+    ? itemContent.querySelector<HTMLElement>(`[data-blok-testid="${LIST_TEST_IDS.checklistContent}"]`)
+    : itemContent.querySelector<HTMLElement>(`[data-blok-testid="${LIST_TEST_IDS.contentContainer}"]`);
 
   return {
     wrapper,