@jackuait/blok 0.10.0-beta.9 → 0.10.1

package/src/components/i18n/locales/sl/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Veliko",
   "tools.code.codeTab": "Koda",
   "tools.code.previewTab": "Predogled",
+  "tools.code.sideBySide": "Drug ob drugem",
   "tools.table.placement": "Postavitev",
   "tools.table.placementTopLeft": "Zgoraj levo",
   "tools.table.placementTopCenter": "Zgoraj na sredini",

package/src/components/i18n/locales/sq/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "I madh",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Shikimi paraprak",
+  "tools.code.sideBySide": "Krah për krah",
   "tools.table.placement": "Vendosja",
   "tools.table.placementTopLeft": "Lart majtas",
   "tools.table.placementTopCenter": "Lart në qendër",

package/src/components/i18n/locales/sr/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Велики",
   "tools.code.codeTab": "Код",
   "tools.code.previewTab": "Преглед",
+  "tools.code.sideBySide": "Упоредно",
   "tools.table.placement": "Позиција",
   "tools.table.placementTopLeft": "Горе лево",
   "tools.table.placementTopCenter": "Горе по средини",

package/src/components/i18n/locales/sv/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Stor",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Förhandsgranskning",
+  "tools.code.sideBySide": "Sida vid sida",
   "tools.table.placement": "Placering",
   "tools.table.placementTopLeft": "Uppe till vänster",
   "tools.table.placementTopCenter": "Uppe i mitten",

package/src/components/i18n/locales/sw/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Kubwa",
   "tools.code.codeTab": "Msimbo",
   "tools.code.previewTab": "Hakiki",
+  "tools.code.sideBySide": "Kando kwa kando",
   "tools.table.placement": "Uwekaji",
   "tools.table.placementTopLeft": "Juu kushoto",
   "tools.table.placementTopCenter": "Juu katikati",

package/src/components/i18n/locales/ta/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "பெரிய",
   "tools.code.codeTab": "குறியீடு",
   "tools.code.previewTab": "முன்னோட்டம்",
+  "tools.code.sideBySide": "பக்கவாட்டில்",
   "tools.table.placement": "இட அமைப்பு",
   "tools.table.placementTopLeft": "மேல் இடது",
   "tools.table.placementTopCenter": "மேல் நடு",

package/src/components/i18n/locales/te/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "పెద్ద",
   "tools.code.codeTab": "కోడ్",
   "tools.code.previewTab": "ముందుచూపు",
+  "tools.code.sideBySide": "ప్రక్కన ప్రక్కన",
   "tools.table.placement": "స్థానం",
   "tools.table.placementTopLeft": "పైన ఎడమ",
   "tools.table.placementTopCenter": "పైన మధ్య",

package/src/components/i18n/locales/th/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "ใหญ่",
   "tools.code.codeTab": "โค้ด",
   "tools.code.previewTab": "ตัวอย่าง",
+  "tools.code.sideBySide": "เคียงข้างกัน",
   "tools.table.placement": "ตำแหน่ง",
   "tools.table.placementTopLeft": "บนซ้าย",
   "tools.table.placementTopCenter": "บนกลาง",

package/src/components/i18n/locales/tr/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Büyük",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Önizleme",
+  "tools.code.sideBySide": "Yan yana",
   "tools.table.placement": "Yerleşim",
   "tools.table.placementTopLeft": "Sol üst",
   "tools.table.placementTopCenter": "Orta üst",

package/src/components/i18n/locales/ug/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "چوڭ",
   "tools.code.codeTab": "كود",
   "tools.code.previewTab": "ئالدىن كۆرۈش",
+  "tools.code.sideBySide": "يانمۇ-يان",
   "tools.table.placement": "ئورنى",
   "tools.table.placementTopLeft": "ئۈستى سول",
   "tools.table.placementTopCenter": "ئۈستى ئوتتۇرا",

package/src/components/i18n/locales/uk/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Великий",
   "tools.code.codeTab": "Код",
   "tools.code.previewTab": "Попередній перегляд",
+  "tools.code.sideBySide": "Поруч",
   "tools.table.placement": "Розташування",
   "tools.table.placementTopLeft": "Зверху зліва",
   "tools.table.placementTopCenter": "Зверху по центру",

package/src/components/i18n/locales/ur/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "بڑا",
   "tools.code.codeTab": "کوڈ",
   "tools.code.previewTab": "پیش نظارہ",
+  "tools.code.sideBySide": "ساتھ ساتھ",
   "tools.table.placement": "جگہ",
   "tools.table.placementTopLeft": "اوپر بائیں",
   "tools.table.placementTopCenter": "اوپر درمیان",

package/src/components/i18n/locales/vi/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Lớn",
   "tools.code.codeTab": "Mã",
   "tools.code.previewTab": "Xem trước",
+  "tools.code.sideBySide": "Song song",
   "tools.table.placement": "Vị trí",
   "tools.table.placementTopLeft": "Trên trái",
   "tools.table.placementTopCenter": "Trên giữa",

package/src/components/i18n/locales/yi/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "גרויס",
   "tools.code.codeTab": "קאָד",
   "tools.code.previewTab": "פֿאָרויסבליק",
+  "tools.code.sideBySide": "זייט ביי זייט",
   "tools.table.placement": "אָרט",
   "tools.table.placementTopLeft": "אויבן לינקס",
   "tools.table.placementTopCenter": "אויבן מיטן",

package/src/components/i18n/locales/zh/messages.json

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "大",
   "tools.code.codeTab": "代码",
   "tools.code.previewTab": "预览",
+  "tools.code.sideBySide": "并排",
   "tools.table.placement": "位置",
   "tools.table.placementTopLeft": "左上",
   "tools.table.placementTopCenter": "居中上",

package/src/components/icons/index.ts

@@ -1,3 +1,17 @@
+// Check/Confirm icon
+export const IconCheck = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m4.5 10.5 4 4 7-8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Sparkle/Auto-detect icon — 4-pointed star (modern AI/auto symbol)
+export const IconWand = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2 Q10 10 18 10 Q10 10 10 18 Q10 10 2 10 Q10 10 10 2Z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>
+`;
+
 // Cross/Close icon
 export const IconCross = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -95,6 +109,13 @@ export const IconPlus = `
 </svg>
 `;
 
+// Chevron Down icon
+export const IconChevronDown = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m6 8 4 4 4-4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
 // Chevron Left icon
 export const IconChevronLeft = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -481,24 +502,6 @@ export const IconCodeBlock = `
 </svg>
 `;
 
-// Line wrap icon
-export const IconWrap = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M4 6h12M4 10h8a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H9m0 0 2-2m-2 2 2 2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
-
-// Line numbers icon (gutter marks + code lines)
-export const IconLineNumbers = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7 4v12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" opacity="0.35"/>
-  <circle cx="4.5" cy="7" r="0.75" fill="currentColor"/>
-  <circle cx="4.5" cy="10" r="0.75" fill="currentColor"/>
-  <circle cx="4.5" cy="13" r="0.75" fill="currentColor"/>
-  <path d="M10 7h6M10 10h6M10 13h4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
-</svg>
-`;
-
 // Emoji Picker Category Icons
 
 // Star icon (Callout category)
@@ -601,6 +604,14 @@ export const IconMergeCells = `
 // Split cell icon (one cell splitting into two)
 export const IconSplitCell = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/><path d="M8 8l4 4-4 4"/><path d="M16 8l-4 4 4 4"/></svg>`;
 
+// Split view icon (two panels side by side)
+export const IconSplitView = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="4" width="6" height="12" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+  <rect x="11" y="4" width="6" height="12" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+</svg>
+`;
+
 // Placement icon (3x3 alignment dot grid)
 export const IconPlacement = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -344,6 +344,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       // Previous sibling exists in the same parent — fall through to merge/remove logic
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the start of the first input in a table cell, Backspace should be a no-op
+     * rather than merging the previous cell's last block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * Backspace at the start of the first Block should do nothing
      */
@@ -447,6 +456,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       return;
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the end of the last input in a table cell, Delete should be a no-op
+     * rather than merging the next cell's first block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * If next Block is empty, it should be removed just like a character
      */

package/src/components/modules/blockManager/hierarchy.ts

@@ -4,6 +4,7 @@
  * @module BlockHierarchy
  */
 import type { Block } from '../../block';
+import { DATA_ATTR } from '../../constants/data-attributes';
 
 import type { BlockRepository } from './repository';
 
@@ -113,7 +114,9 @@ export class BlockHierarchy {
 
     // Move block holder into toggle child container if the new parent has one,
     // honouring the flat-array order so the DOM order matches the logical order.
-    if (newParentId !== null && newParent !== undefined) {
+    // Skip if the holder is already claimed by another nested-blocks container
+    // (e.g. a table cell) — moving it would steal it from that container.
+    if (newParentId !== null && newParent !== undefined && !block.holder.closest(`[${DATA_ATTR.nestedBlocks}]`)) {
       const newContainer = newParent.holder.querySelector('[data-blok-toggle-children]');
       if (newContainer) {
         const allBlocks = this.repository.blocks;

package/src/components/modules/readonly.ts

@@ -16,6 +16,11 @@ export class ReadOnly extends Module {
    */
   private toolsDontSupportReadOnly: string[] = [];
 
+  /**
+   * Array of tools name which don't support in-place read-only toggle via setReadOnly()
+   */
+  private toolsDontSupportInPlaceToggle: string[] = [];
+
   /**
    * Value to track read-only state
    * @type {boolean}
@@ -29,6 +34,19 @@ export class ReadOnly extends Module {
     return this.readOnlyEnabled;
   }
 
+  /**
+   * Whether tool support for in-place toggle has been checked during prepare()
+   */
+  private inPlaceToggleChecked = false;
+
+  /**
+   * Whether all registered block tools support in-place read-only toggle.
+   * Returns false until prepare() has run the check.
+   */
+  private get supportsInPlaceToggle(): boolean {
+    return this.inPlaceToggleChecked && this.toolsDontSupportInPlaceToggle.length === 0;
+  }
+
   /**
    * Set initial state
    */
@@ -43,9 +61,13 @@ export class ReadOnly extends Module {
         if (!tool.isReadOnlySupported) {
           toolsDontSupportReadOnly.push(name);
         }
+        if (!tool.supportsInPlaceReadOnly) {
+          this.toolsDontSupportInPlaceToggle.push(name);
+        }
       });
 
     this.toolsDontSupportReadOnly = toolsDontSupportReadOnly;
+    this.inPlaceToggleChecked = true;
 
     if (this.config.readOnly === true && toolsDontSupportReadOnly.length > 0) {
       this.throwCriticalError();
@@ -101,6 +123,24 @@ export class ReadOnly extends Module {
       return this.readOnlyEnabled;
     }
 
+    /**
+     * If all tools support in-place toggle, call setReadOnly on each block
+     * instead of the full save/clear/render cycle
+     */
+    if (this.supportsInPlaceToggle) {
+      this.Blok.ModificationsObserver.disable();
+
+      const blocks = (this.Blok.BlockManager as { blocks?: Array<{ setReadOnly: (s: boolean) => void }> }).blocks ?? [];
+
+      for (const block of blocks) {
+        block.setReadOnly(state);
+      }
+
+      this.Blok.ModificationsObserver.enable();
+
+      return this.readOnlyEnabled;
+    }
+
     /**
      * Mutex for modifications observer to prevent onChange call when read-only mode is enabled
      */
@@ -117,6 +157,8 @@ export class ReadOnly extends Module {
       return this.readOnlyEnabled;
     }
 
+    const savedScrollY = window.scrollY;
+
     this.Blok.Renderer.markRenderStart();
 
     try {
@@ -126,6 +168,10 @@ export class ReadOnly extends Module {
       this.Blok.Renderer.markRenderEnd();
     }
 
+    if (window.scrollY !== savedScrollY) {
+      window.scrollTo(0, savedScrollY);
+    }
+
     this.Blok.ModificationsObserver.enable();
 
     return this.readOnlyEnabled;

package/src/components/modules/rectangleSelection.ts

@@ -72,6 +72,14 @@ export class RectangleSelection extends Module {
    */
   private mouseDownWithinBoundsFromContentEditable = false;
 
+  /**
+   * Set when the user mousedowns in a position that should eventually close the toolbar
+   * if a drag begins, but NOT immediately (to avoid interfering with button clicks like
+   * the plus button). The toolbar is closed on the first mousemove after mousedown.
+   * Cleared on mouseup / endSelection.
+   */
+  private pendingToolbarClose = false;
+
   /**
    *  Is scrolling now
    */
@@ -187,7 +195,7 @@ export class RectangleSelection extends Module {
 
     const selectorsToAvoid = [
       createSelector(DATA_ATTR.elementContent),
-      createSelector(DATA_ATTR.toolbar),
+      createSelector(DATA_ATTR.settingsToggler),
       createSelector(DATA_ATTR.popover),
       INLINE_TOOLBAR_INTERFACE_SELECTOR,
     ];
@@ -202,12 +210,13 @@ export class RectangleSelection extends Module {
     }
 
     /**
-     * Hide the toolbar immediately so it does not obstruct drag selection.
-     * Only close the toolbar if the selection starts within the horizontal bounds of the editor.
-     * This allows rectangle selection to start from outside (e.g., left margin) without closing the toolbar.
+     * Schedule toolbar close for the first mousemove (i.e. when the user actually drags).
+     * Deferring prevents a plain click (e.g. on the plus button) from accidentally closing
+     * the toolbar before its own click handler fires.
+     * Only close if starting within the horizontal bounds of the editor.
      */
     if (withinEditorHorizontally) {
-      this.Blok.Toolbar.close();
+      this.pendingToolbarClose = true;
     }
 
     this.mousedown = true;
@@ -221,6 +230,7 @@ export class RectangleSelection extends Module {
   public endSelection(): void {
     this.mousedown = false;
     this.mouseDownWithinBoundsFromContentEditable = false;
+    this.pendingToolbarClose = false;
     this.startX = 0;
     this.startY = 0;
     this.anchorBlockIndex = null;
@@ -361,6 +371,16 @@ export class RectangleSelection extends Module {
       this.Blok.Toolbar.close();
     }
 
+    /**
+     * Close the toolbar on the first actual drag movement after a mousedown
+     * that was scheduled to close it. Using mousemove instead of mousedown ensures
+     * plain button clicks (e.g. the plus button) don't close the toolbar prematurely.
+     */
+    if (this.pendingToolbarClose) {
+      this.pendingToolbarClose = false;
+      this.Blok.Toolbar.close();
+    }
+
     this.changingRectangle(mouseEvent);
     this.scrollByZones(mouseEvent.clientY);
   }

package/src/components/modules/toolbar/index.ts

@@ -289,11 +289,17 @@ export class Toolbar extends Module<ToolbarNodes> {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.nodes.actions?.classList.remove(this.CSS.actionsOpened);
         this.nodes.actions?.removeAttribute('data-blok-opened');
+        if (this.nodes.actions) {
+          this.nodes.actions.style.pointerEvents = 'none';
+        }
       },
       show: (): void => {
         // eslint-disable-next-line @typescript-eslint/no-deprecated
         this.nodes.actions?.classList.add(this.CSS.actionsOpened);
         this.nodes.actions?.setAttribute('data-blok-opened', 'true');
+        if (this.nodes.actions) {
+          this.nodes.actions.style.pointerEvents = 'auto';
+        }
       },
     };
   }
@@ -421,8 +427,11 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.isFirstChildOfCallout(targetBlock);
+    const isCalloutBlock = targetBlock.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    // Hide plus button for callout blocks and their first children to avoid
+    // overlap with the callout emoji icon in the left padding area.
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
@@ -478,15 +487,6 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     if (blockContentElement) {
       this.toolboxInstance.updateLeftAlignElement(blockContentElement);
-
-      /**
-       * Sync toolbar content wrapper's margin with the block content element
-       * so toolbar buttons align with the block content edge, even when
-       * consumer CSS overrides the block content's margin.
-       */
-      if (this.nodes.content) {
-        this.nodes.content.style.marginLeft = getComputedStyle(blockContentElement).marginLeft;
-      }
     }
 
     /**
@@ -507,6 +507,39 @@ export class Toolbar extends Module<ToolbarNodes> {
     }
 
     this.open();
+
+    /**
+     * For blocks with interactive elements at the left edge (toggle arrows,
+     * callout emoji buttons), disable pointer-events on the actions
+     * container so clicks pass through to the block content.
+     * Must run after open() which sets pointer-events: auto on actions.
+     */
+    const isToggleHeader = targetBlock.name === 'header'
+      && targetBlock.holder.querySelector('[data-blok-toggle-arrow]') !== null;
+    const hasLeftEdgeInteraction = targetBlock.name === 'callout'
+      || targetBlock.name === 'toggle'
+      || isToggleHeader;
+
+    if (hasLeftEdgeInteraction && this.nodes.actions) {
+      this.nodes.actions.style.pointerEvents = 'none';
+      this.restoreSettingsTogglerForLeftEdgeBlock(targetBlock);
+    }
+
+    /**
+     * Sync toolbar content wrapper's margin with the block content element
+     * so toolbar buttons align with the block content edge, even when
+     * consumer CSS overrides the block content's margin.
+     *
+     * Uses Math.max to guarantee the actions container (positioned via right:100%)
+     * never extends beyond the left edge of the viewport, which would make the
+      * drag handle unreachable by pointer events.
+     */
+    if (blockContentElement && this.nodes.content) {
+      const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
+
+      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+    }
   }
 
   /**
@@ -607,18 +640,10 @@ export class Toolbar extends Module<ToolbarNodes> {
       targetBlock.setupDraggable(settingsToggler, this.Blok.DragManager);
     }
 
-    /**
-     * Sync toolbar content wrapper's margin with the block content element
-     * so toolbar buttons align with the block content edge.
-     */
     const blockContentElement = targetBlockHolder.querySelector<HTMLElement>(`[${DATA_ATTR.elementContent}]`);
 
     if (blockContentElement) {
       this.toolboxInstance.updateLeftAlignElement(blockContentElement);
-
-      if (this.nodes.content) {
-        this.nodes.content.style.marginLeft = getComputedStyle(blockContentElement).marginLeft;
-      }
     }
 
     /**
@@ -632,6 +657,17 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.blockTunesToggler.show();
 
     this.open();
+
+    /**
+     * Sync toolbar content wrapper's margin with the block content element.
+     * Clamp to actionsWidth so actions never extend beyond the left viewport edge.
+     */
+    if (blockContentElement && this.nodes.content) {
+      const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
+      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
+
+      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+    }
   }
 
   /**
@@ -822,14 +858,48 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.hoveredBlock !== null && this.isFirstChildOfCallout(this.hoveredBlock);
+    const isCalloutBlock = this.hoveredBlock?.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
     }
   }
 
+  /**
+   * Re-enables pointer-events on the settings toggler (and callout drag zone) after
+   * the actions container has been set to pointer-events: none for left-edge blocks.
+   *
+   * For callout blocks: also wires the dedicated drag zone as the drag handle and
+   * re-enables the settings toggler so the settings menu remains accessible.
+   * The emoji button (at x=32px) no longer overlaps the actions zone (x=[0,29px])
+   * because the callout uses pl-8 (32px) left padding.
+   *
+   * For all other left-edge blocks (toggle, header with arrow): simply re-enables the
+   * settings toggler so it continues to function as the drag handle.
+   */
+  private restoreSettingsTogglerForLeftEdgeBlock(targetBlock: Block): void {
+    if (targetBlock.name === 'callout') {
+      if (this.nodes.settingsToggler) {
+        this.nodes.settingsToggler.style.pointerEvents = 'auto';
+      }
+
+      const calloutDragZone = targetBlock.holder.querySelector<HTMLElement>('[data-callout-drag-zone]');
+
+      if (calloutDragZone) {
+        calloutDragZone.style.pointerEvents = 'auto';
+        targetBlock.setupDraggable(calloutDragZone, this.Blok.DragManager);
+      }
+
+      return;
+    }
+
+    if (this.nodes.settingsToggler) {
+      this.nodes.settingsToggler.style.pointerEvents = 'auto';
+    }
+  }
+
   /**
    * If the block is inside a table cell, resolve to the parent table block.
    * This ensures the toolbar shows for the table when clicking/focusing inside cells.
@@ -915,6 +985,13 @@ export class Toolbar extends Module<ToolbarNodes> {
       this.CSS.actions,
     ]);
 
+    /**
+     * Start with pointer-events disabled so invisible (opacity-0) actions
+     * don't intercept clicks on elements underneath (e.g. toggle arrows).
+     * blockActions.show()/hide() toggles this inline style.
+     */
+    actions.style.pointerEvents = 'none';
+
     this.nodes.content = content;
 
     this.nodes.actions = actions;

package/src/components/modules/toolbar/positioning.ts

@@ -77,15 +77,24 @@ export class ToolbarPositioner {
      */
     const textElement = listItemElement?.querySelector('[contenteditable]');
     const pluginsContent = targetBlock.pluginsContent;
+    /**
+     * If the tool provides a toolbar anchor element, use it instead of searching
+     * for a contenteditable descendant. This allows tools with deeply nested
+     * editable areas (e.g., code block with a header above the code) to control
+     * where the toolbar centers vertically.
+     */
+    const toolbarAnchor = !textElement && !listItemElement
+      ? targetBlock.getToolbarAnchorElement()
+      : undefined;
     /**
      * If pluginsContent is a non-editable container (e.g. a toggle heading wrapper <div>),
      * use its first contenteditable descendant for accurate line-height centering.
      */
     const editableDescendant =
-      !pluginsContent.matches('[contenteditable]')
+      !toolbarAnchor && !pluginsContent.matches('[contenteditable]')
         ? (pluginsContent.querySelector('[contenteditable]') ?? null)
         : null;
-    const contentElement = textElement ?? listItemElement ?? editableDescendant ?? pluginsContent;
+    const contentElement = textElement ?? listItemElement ?? toolbarAnchor ?? editableDescendant ?? pluginsContent;
     const contentRect = contentElement.getBoundingClientRect();
     const contentOffset = contentRect.top - holderRect.top;
 

package/src/components/modules/toolbar/styles.ts

@@ -19,8 +19,6 @@ export const getToolbarStyles = (): { [name: string]: string } => {
     actions: twJoin(
       'absolute flex opacity-0 pr-[5px]',
       'right-full',
-      // Re-enable pointer events for interactive elements
-      'pointer-events-auto',
       // Mobile styles
       'mobile:right-auto',
       // RTL styles