@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/components/modules/toolbar/plus-button.ts

@@ -90,10 +90,10 @@ export class PlusButtonHandler {
     const plusButton = $.make('div', [
       twJoin(
         // Base toolbox-button styles
-        'text-dark cursor-pointer w-toolbox-btn h-toolbox-btn rounded-[7px] inline-flex justify-center items-center select-none',
+        'text-text-secondary cursor-pointer w-6 h-6 rounded-[5px] inline-flex justify-center items-center select-none',
         'shrink-0',
         // SVG sizing
-        '[&_svg]:h-6 [&_svg]:w-6',
+        '[&_svg]:h-[22px] [&_svg]:w-[22px]',
         // Hover (can-hover)
         'can-hover:hover:bg-bg-light',
         // Keep hover background when toolbox is open
@@ -173,12 +173,33 @@ export class PlusButtonHandler {
     const hoveredBlockIndex = hoveredBlock !== null
       ? BlockManager.getBlockIndex(hoveredBlock)
       : BlockManager.currentBlockIndex;
-    const insertIndex = insertAbove ? hoveredBlockIndex : hoveredBlockIndex + 1;
+    const baseInsertIndex = insertAbove ? hoveredBlockIndex : hoveredBlockIndex + 1;
+
+    // When inserting below, skip past any blocks nested inside another block's
+    // DOM (e.g. paragraph blocks inside table cells). The block array may
+    // interleave nested blocks from multiple parents, so check whether each
+    // block's holder lives inside any block-wrapper ancestor rather than only
+    // the hovered block's holder.
+    const blocksAfterInsert = BlockManager.blocks.slice(baseInsertIndex);
+    const isNested = (block: Block): boolean =>
+      block.holder.parentElement?.closest('[data-blok-testid="block-wrapper"]') !== null;
+    const firstNonNestedOffset = !insertAbove && hoveredBlock && blocksAfterInsert.length > 0
+      ? blocksAfterInsert.findIndex((block) => !isNested(block))
+      : 0;
+    const insertIndex = baseInsertIndex + (firstNonNestedOffset === -1 ? blocksAfterInsert.length : firstNonNestedOffset);
 
     const targetBlock = isEmptyParagraph || startsWithSlash
       ? hoveredBlock
       : BlockManager.insertDefaultBlockAtIndex(insertIndex, true);
 
+    // The DOM insertion may place the new block's holder inside a nested
+    // container (e.g. a table cell) because the previous block in the array
+    // is inside another block's DOM. Move the holder to be a sibling after
+    // the hovered block so it becomes a top-level block.
+    if (targetBlock !== hoveredBlock && isNested(targetBlock)) {
+      hoveredBlock?.holder.after(targetBlock.holder);
+    }
+
     // Insert "/" or position caret after existing one
     if (startsWithSlash) {
       Caret.setToBlock(targetBlock, Caret.positions.DEFAULT, 1);

package/src/components/modules/toolbar/settings-toggler.ts

@@ -113,9 +113,9 @@ export class SettingsTogglerHandler {
     const settingsToggler = $.make('span', [
       twJoin(
         // Base toolbox-button styles
-        'text-dark cursor-pointer w-toolbox-btn h-toolbox-btn rounded-[7px] inline-flex justify-center items-center select-none',
+        'text-text-secondary cursor-pointer w-[22px] h-6 rounded-[5px] inline-flex justify-center items-center select-none',
         // SVG sizing
-        '[&_svg]:h-6 [&_svg]:w-6',
+        '[&_svg]:h-[22px] [&_svg]:w-[22px]',
         // Active state
         'active:cursor-grabbing',
         // Hover (can-hover)
@@ -127,9 +127,7 @@ export class SettingsTogglerHandler {
         'group-data-[blok-block-settings-opened=true]:can-hover:hover:cursor-pointer',
         // Mobile styles (static positioning with overlay-pane appearance)
         'mobile:bg-white mobile:border mobile:border-[#e8e8eb] mobile:shadow-overlay-pane mobile:rounded-[6px] mobile:z-[2]',
-        'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile',
-        // Not-mobile styles
-        'not-mobile:w-6'
+        'mobile:w-toolbox-btn-mobile mobile:h-toolbox-btn-mobile'
       ),
       'group-data-[blok-dragging=true]:cursor-grabbing',
     ], {

package/src/components/modules/ui.ts

@@ -30,6 +30,7 @@ interface UINodes extends Record<string, unknown> {
   holder: HTMLElement;
   wrapper: HTMLElement;
   redactor: HTMLElement;
+  bottomZone: HTMLElement;
 }
 
 /**
@@ -191,12 +192,11 @@ export class UI extends Module<UINodes> {
     this.selectionController.setWrapperElement(this.nodes.wrapper);
 
     /**
-     * Block hover controller needs content rect getter
+     * Block hover controller detects hover over blocks and finds nearest block
      */
     this.blockHoverController = new BlockHoverController({
       config: this.config,
       eventsDispatcher: this.eventsDispatcher,
-      contentRectGetter: () => this.contentRect,
     });
     this.blockHoverController.state = this.Blok;
 
@@ -452,11 +452,15 @@ export class UI extends Module<UINodes> {
     }
 
     /**
-     * Set customizable bottom zone height
+     * Create dedicated bottom zone element
      */
-    this.nodes.redactor.style.paddingBottom = this.config.minHeight + 'px';
+    this.nodes.bottomZone = $.make('div', ['cursor-text']);
+    this.nodes.bottomZone.setAttribute('data-blok-bottom-zone', '');
+    this.nodes.bottomZone.setAttribute('data-blok-testid', 'bottom-zone');
+    this.nodes.bottomZone.style.minHeight = this.config.minHeight + 'px';
 
     this.nodes.wrapper.appendChild(this.nodes.redactor);
+    this.nodes.wrapper.appendChild(this.nodes.bottomZone);
     this.nodes.holder.appendChild(this.nodes.wrapper);
 
     this.bindReadOnlyInsensitiveListeners();
@@ -541,7 +545,16 @@ export class UI extends Module<UINodes> {
    */
   private bindReadOnlySensitiveListeners(): void {
     /**
-     * Redactor click handler for bottom zone clicks
+     * Bottom zone click handler — creates new block when clicking below last block
+     */
+    this.readOnlyMutableListeners.on(this.nodes.bottomZone, 'click', (event: Event) => {
+      if (event instanceof MouseEvent) {
+        this.bottomZoneClicked(event);
+      }
+    }, false);
+
+    /**
+     * Redactor click handler for Ctrl+click anchor navigation
      */
     this.readOnlyMutableListeners.on(this.nodes.redactor, 'click', (event: Event) => {
       if (event instanceof MouseEvent) {
@@ -610,98 +623,63 @@ export class UI extends Module<UINodes> {
   }
 
   /**
-   * All clicks on the redactor zone
-   * @param {MouseEvent} event - click event
-   * @description
-   * - By clicks on the Blok's bottom zone:
-   *      - if last Block is empty, set a Caret to this
-   *      - otherwise, add a new empty Block and set a Caret to that
+   * Handle click on the bottom zone element below the last block.
+   * Creates a new default block if needed, focuses the last block, and opens the toolbar.
    */
-  private redactorClicked(event: MouseEvent): void {
+  private bottomZoneClicked(event: MouseEvent): void {
     if (!Selection.isCollapsed) {
       return;
     }
 
-    /**
-     * case when user clicks on anchor element
-     * if it is clicked via ctrl key, then we open new window with url
-     */
-    const element = event.target as Element;
-    const ctrlKey = event.metaKey || event.ctrlKey;
-    const shouldOpenAnchorInNewTab = $.isAnchor(element) && ctrlKey;
+    const { BlockSelection, BlockManager, Caret, Toolbar } = this.Blok;
 
-    if (!shouldOpenAnchorInNewTab) {
-      this.processBottomZoneClick(event);
+    if (BlockSelection.anyBlockSelected) {
+      return;
+    }
 
+    if (!BlockManager.lastBlock) {
       return;
     }
 
     event.stopImmediatePropagation();
     event.stopPropagation();
 
-    const href = element.getAttribute('href');
-
-    if (!href) {
-      return;
+    /**
+     * Insert a default-block at the bottom if:
+     * - last-block is not a default-block (Text)
+     * - Or, default-block is not empty
+     */
+    if (!BlockManager.lastBlock.tool.isDefault || !BlockManager.lastBlock.isEmpty) {
+      BlockManager.insertAtEnd();
     }
 
-    const validUrl = getValidUrl(href);
-
-    openTab(validUrl);
+    Caret.setToTheLastBlock();
+    Toolbar.moveAndOpen(BlockManager.lastBlock);
   }
 
   /**
-   * Check if user clicks on the Blok's bottom zone:
-   * - set caret to the last block
-   * - or add new empty block
-   * @param event - click event
+   * Handle Ctrl+click on anchor elements to open in new tab
    */
-  private processBottomZoneClick(event: MouseEvent): void {
-    const lastBlock = this.Blok.BlockManager.getBlockByIndex(-1);
-
-    if (lastBlock === undefined) {
-      return;
-    }
-
-    const lastBlockBottomCoord = $.offset(lastBlock.holder).bottom;
-    const clickedCoord = event.pageY;
-    const { BlockSelection } = this.Blok;
-    const isClickedBottom = event.target instanceof Element &&
-      event.target.isEqualNode(this.nodes.redactor) &&
-      /**
-       * If there is cross block selection started, target will be equal to redactor so we need additional check
-       */
-      !BlockSelection.anyBlockSelected &&
-
-      /**
-       * Prevent caret jumping (to last block) when clicking between blocks
-       */
-      lastBlockBottomCoord < clickedCoord;
+  private redactorClicked(event: MouseEvent): void {
+    const element = event.target as Element;
+    const ctrlKey = event.metaKey || event.ctrlKey;
 
-    if (!isClickedBottom) {
+    if (!$.isAnchor(element) || !ctrlKey) {
       return;
     }
 
     event.stopImmediatePropagation();
     event.stopPropagation();
 
-    const { BlockManager, Caret, Toolbar } = this.Blok;
+    const href = element.getAttribute('href');
 
-    /**
-     * Insert a default-block at the bottom if:
-     * - last-block is not a default-block (Text)
-     *   to prevent unnecessary tree-walking on Tools with many nodes (for ex. Table)
-     * - Or, default-block is not empty
-     */
-    if (!BlockManager.lastBlock?.tool.isDefault || !BlockManager.lastBlock?.isEmpty) {
-      BlockManager.insertAtEnd();
+    if (!href) {
+      return;
     }
 
-    /**
-     * Set the caret and toolbar to empty Block
-     */
-    Caret.setToTheLastBlock();
-    Toolbar.moveAndOpen(BlockManager.lastBlock);
+    const validUrl = getValidUrl(href);
+
+    openTab(validUrl);
   }
 
   /**

package/src/components/modules/uiControllers/controllers/blockHover.ts

@@ -5,20 +5,15 @@ import { throttle } from '../../../utils';
 import { Controller } from './_base';
 
 /**
- * BlockHoverController detects when user hovers over blocks, including extended hover zone.
+ * BlockHoverController detects when user hovers over blocks or finds nearest block.
  *
  * Responsibilities:
  * - Listen to mousemove events (throttled)
- * - Find block by element hit or extended zone
+ * - Find block by element hit or nearest by Y distance
  * - Emit BlockHovered events
  * - Track last hovered block to avoid duplicate events
  */
 export class BlockHoverController extends Controller {
-  /**
-   * Getter function for content rect
-   */
-  private contentRectGetter: () => DOMRect;
-
   /**
    * Used to not emit the same block multiple times to the 'block-hovered' event on every mousemove.
    * Stores block ID to ensure consistent comparison regardless of how the block was detected.
@@ -42,10 +37,8 @@ export class BlockHoverController extends Controller {
   constructor(options: {
     config: Controller['config'];
     eventsDispatcher: Controller['eventsDispatcher'];
-    contentRectGetter: () => DOMRect;
   }) {
     super(options);
-    this.contentRectGetter = options.contentRectGetter;
   }
 
   /**
@@ -71,38 +64,23 @@ export class BlockHoverController extends Controller {
         return;
       }
 
-      const hoveredBlockElement = (event.target as Element | null)?.closest('[data-blok-testid="block-wrapper"]');
+      const closestBlockWrapper = (event.target as Element | null)?.closest('[data-blok-testid="block-wrapper"]');
 
       /**
-       * If no block element found directly, try the extended hover zone
+       * If the hovered block is inside a table cell, resolve to the table block instead.
+       * Without this, the toolbar hides itself for nested cell blocks and the table's
+       * block tune settings become inaccessible.
        */
-      const zoneBlock = !hoveredBlockElement
-        ? this.findBlockInHoverZone(event.clientX, event.clientY)
-        : null;
-
-      if (zoneBlock !== null && this.blockHoveredState.lastHoveredBlockId !== zoneBlock.id) {
-        /**
-         * Emit the event but DON'T set lastHoveredBlockId for hover zone events.
-         * This allows the event to be emitted again when the mouse enters the actual block element,
-         * which is important for proper toolbar positioning after cross-block selection.
-         */
-        this.eventsDispatcher.emit(BlockHovered, {
-          block: zoneBlock,
-          target: zoneBlock.holder,
-        });
-      }
-
-      if (zoneBlock !== null) {
-        return;
-      }
+      const hoveredBlockElement = closestBlockWrapper?.closest('[data-blok-table-cell-blocks]')
+        ? closestBlockWrapper.closest('[data-blok-table-cell-blocks]')?.closest('[data-blok-testid="block-wrapper"]') ?? null
+        : closestBlockWrapper;
 
+      /**
+       * If no block element found directly, find the nearest block by Y distance
+       */
       if (!hoveredBlockElement) {
-        /**
-         * When no block is found (mouse left the editor area), reset the hover state.
-         * This allows hover events to be emitted again when re-entering a block,
-         * which is important after cross-block selection completes.
-         */
-        this.blockHoveredState.lastHoveredBlockId = null;
+        this.emitNearestBlockHovered(event.clientY);
+
         return;
       }
 
@@ -134,9 +112,8 @@ export class BlockHoverController extends Controller {
     );
 
     /**
-     * Listen on document to detect hover in the extended zone
-     * which is outside the wrapper's bounds.
-     * We filter events to only process those over the editor or in the hover zone.
+     * Listen on document to detect hover anywhere on the page.
+     * When cursor is not directly on a block, finds the nearest block by Y distance.
      */
     this.readOnlyMutableListeners.on(document, 'mousemove', (event: Event) => {
       throttledHandleBlockHovered(event);
@@ -146,38 +123,49 @@ export class BlockHoverController extends Controller {
   }
 
   /**
-   * Finds a block by vertical position when cursor is in the hover zone.
-   * The hover zone extends indefinitely on both sides of the content (left and right),
-   * allowing the toolbar to follow hover anywhere outside the content area horizontally.
-   * @param clientX - Cursor X position
+   * Finds and emits a BlockHovered event for the nearest block by Y distance.
+   * Deduplicates by lastHoveredBlockId to avoid redundant events.
    * @param clientY - Cursor Y position
-   * @returns Block at the vertical position, or null if not in hover zone or no block found
    */
-  private findBlockInHoverZone(clientX: number, clientY: number): Block | null {
-    const contentRect = this.contentRectGetter();
+  private emitNearestBlockHovered(clientY: number): void {
+    const nearestBlock = this.findNearestBlock(clientY);
 
-    /**
-     * Check if cursor is outside the content area horizontally (either left OR right side).
-     * The zone extends indefinitely on both sides, not limited to HOVER_ZONE_SIZE.
-     */
-    const isInHoverZone = clientX < contentRect.left || clientX > contentRect.right;
+    if (nearestBlock === null || this.blockHoveredState.lastHoveredBlockId === nearestBlock.id) {
+      return;
+    }
 
-    if (!isInHoverZone) {
+    this.blockHoveredState.lastHoveredBlockId = nearestBlock.id;
+
+    this.eventsDispatcher.emit(BlockHovered, {
+      block: nearestBlock,
+      target: nearestBlock.holder,
+    });
+  }
+
+  /**
+   * Finds the nearest block by vertical distance to cursor position.
+   * Returns the block whose vertical center is closest to the cursor Y position.
+   * If cursor is above all blocks, returns the first block.
+   * If cursor is below all blocks, returns the last block.
+   * @param clientY - Cursor Y position
+   * @returns Nearest block, or null if no blocks exist
+   */
+  private findNearestBlock(clientY: number): Block | null {
+    const blocks = this.Blok.BlockManager.blocks;
+
+    if (blocks.length === 0) {
       return null;
     }
 
-    /**
-     * Find block by Y position
-     */
-    for (const block of this.Blok.BlockManager.blocks) {
+    const result = blocks.reduce<{ block: Block; distance: number }>((nearest, block) => {
       const rect = block.holder.getBoundingClientRect();
+      const centerY = (rect.top + rect.bottom) / 2;
+      const distance = Math.abs(clientY - centerY);
 
-      if (clientY >= rect.top && clientY <= rect.bottom) {
-        return block;
-      }
-    }
+      return distance < nearest.distance ? { block, distance } : nearest;
+    }, { block: blocks[0], distance: Infinity });
 
-    return null;
+    return result.block;
   }
 
   /**

package/src/components/modules/uiControllers/controllers/keyboard.ts

@@ -1,4 +1,5 @@
 import { SelectionUtils as Selection } from '../../../selection/index';
+import { PopoverRegistry } from '../../../utils/popover/popover-registry';
 import { KEYS_REQUIRING_CARET_CAPTURE } from '../constants';
 
 import { Controller } from './_base';
@@ -258,28 +259,33 @@ export class KeyboardController extends Controller {
     }
 
     /**
-     * Close BlockSettings first if it's open, regardless of selection state.
-     * This prevents navigation mode from being enabled when the user closes block tunes with Escape.
+     * Toolbox needs specific Escape handling for caret restoration,
+     * so check it before the registry
      */
-    if (this.Blok.BlockSettings.opened) {
-      this.Blok.BlockSettings.close();
+    if (this.Blok.Toolbar.toolbox.opened) {
+      this.Blok.Toolbar.toolbox.close();
+      this.Blok.BlockManager.currentBlock &&
+        this.Blok.Caret.setToBlock(this.Blok.BlockManager.currentBlock, this.Blok.Caret.positions.END);
 
       return;
     }
 
     /**
-     * Clear blocks selection by ESC (but not when entering navigation mode)
+     * Close any open popover via registry (BlockSettings, table grips, future popovers).
+     * Must come before block selection clearing to prevent navigation mode
+     * from being enabled when closing block settings.
      */
-    if (this.Blok.BlockSelection.anyBlockSelected) {
-      this.Blok.BlockSelection.clearSelection(event);
+    if (PopoverRegistry.instance.hasOpenPopovers()) {
+      PopoverRegistry.instance.closeTopmost();
 
       return;
     }
 
-    if (this.Blok.Toolbar.toolbox.opened) {
-      this.Blok.Toolbar.toolbox.close();
-      this.Blok.BlockManager.currentBlock &&
-        this.Blok.Caret.setToBlock(this.Blok.BlockManager.currentBlock, this.Blok.Caret.positions.END);
+    /**
+     * Clear blocks selection by ESC (but not when entering navigation mode)
+     */
+    if (this.Blok.BlockSelection.anyBlockSelected) {
+      this.Blok.BlockSelection.clearSelection(event);
 
       return;
     }

package/src/components/modules/uiControllers/handlers/click.ts

@@ -68,8 +68,6 @@ export const analyzeClickContext = (
  *
  * Responsibilities:
  * - Clear current block when clicking outside editor
- * - Close BlockSettings when appropriate
- * - Move toolbar when clicking in redactor after closing settings
  * - Clear block selection
  * - Close inline toolbar
  *
@@ -108,16 +106,6 @@ export const createDocumentClickedHandler = (
       Blok.BlockManager.unsetCurrentBlock();
     }
 
-    const shouldCloseBlockSettings = Blok.BlockSettings.opened && !context.doNotProcess;
-    if (shouldCloseBlockSettings) {
-      Blok.BlockSettings.close();
-    }
-
-    if (shouldCloseBlockSettings && context.clickedInsideRedactor) {
-      const clickedBlock = Blok.BlockManager.getBlockByChildNode(context.target);
-      Blok.Toolbar.moveAndOpen(clickedBlock);
-    }
-
     /**
      * Clear Selection if user clicked somewhere
      * But preserve selection when clicking on block settings toggler or inside block settings

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

@@ -189,6 +189,29 @@ export class YjsManager extends Module {
     this.undoHistory.redo();
   }
 
+  /**
+   * Check if undo is available.
+   * @returns true if undo is available
+   */
+  public canUndo(): boolean {
+    return this.undoHistory.canUndo();
+  }
+
+  /**
+   * Check if redo is available.
+   * @returns true if redo is available
+   */
+  public canRedo(): boolean {
+    return this.undoHistory.canRedo();
+  }
+
+  /**
+   * Clear all history.
+   */
+  public clear(): void {
+    this.undoHistory.clear();
+  }
+
   /**
    * Stop capturing changes into current undo group.
    * Call this to force next change into a new undo entry.

package/src/components/ui/toolbox.ts

@@ -1,5 +1,7 @@
+import { RESTRICTED_TOOLS } from '../../tools/table/table-restrictions';
 import { Dom } from '../dom';
 import { BlokMobileLayoutToggled } from '../events';
+import { SelectionUtils } from '../selection';
 import type { BlockToolAdapter } from '../tools/block';
 import type { ToolsCollection } from '../tools/collection';
 import { beautifyShortcut, capitalize, isMobileScreen } from '../utils';
@@ -155,7 +157,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
   /**
    * Whether the toolbox was opened inside a table cell.
-   * Used to restore the table item visibility on close.
+   * Used to restore restricted tool visibility on close.
    */
   private isInsideTableCell = false;
 
@@ -273,17 +275,28 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
 
     /**
-     * Hide the table tool when the caret is inside a table cell
-     * to prevent nested tables.
+     * Hide restricted tools (headers, tables) when the caret is inside a table cell.
      */
     this.isInsideTableCell = currentBlock !== undefined
       && currentBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
 
     if (this.isInsideTableCell) {
-      this.popover?.toggleItemHiddenByName('table', true);
+      this.toggleRestrictedToolsHidden(true);
     }
 
     this.popover?.show();
+
+    /**
+     * When opening toolbox inside a table cell, position it at the caret
+     * instead of at the trigger element (which is outside the table).
+     * Must be called after show() so the popover is in the DOM.
+     */
+    if (this.isInsideTableCell && this.popover instanceof PopoverDesktop) {
+      const caretRect = SelectionUtils.rect;
+
+      this.popover.updatePosition(caretRect);
+    }
+
     this.opened = true;
     this.emit(ToolboxEvent.Opened);
     this.startListeningToBlockInput();
@@ -294,7 +307,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   public close(): void {
     if (this.isInsideTableCell) {
-      this.popover?.toggleItemHiddenByName('table', false);
+      this.toggleRestrictedToolsHidden(false);
       this.isInsideTableCell = false;
     }
 
@@ -364,7 +377,7 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private onPopoverClose = (): void => {
     if (this.isInsideTableCell) {
-      this.popover?.toggleItemHiddenByName('table', false);
+      this.toggleRestrictedToolsHidden(false);
       this.isInsideTableCell = false;
     }
 
@@ -373,6 +386,28 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.emit(ToolboxEvent.Closed);
   };
 
+  /**
+   * Toggles hidden state for all popover items belonging to restricted tools.
+   * Handles tools like header that have multiple entries with custom names (header-1, header-2, etc.)
+   * by matching item names that equal or start with a restricted tool name.
+   */
+  private toggleRestrictedToolsHidden(isHidden: boolean): void {
+    for (const item of this.toolboxItemsToBeDisplayed) {
+      if (!('name' in item) || item.name === undefined) {
+        continue;
+      }
+
+      const { name } = item;
+      const isRestricted = RESTRICTED_TOOLS.some(
+        restricted => name === restricted || name.startsWith(`${restricted}-`)
+      );
+
+      if (isRestricted) {
+        this.popover?.toggleItemHiddenByName(name, isHidden);
+      }
+    }
+  }
+
   /**
    * Returns list of tools that enables the Toolbox (by specifying the 'toolbox' getter)
    */

package/src/components/utils/placeholder.ts

@@ -56,6 +56,22 @@ export const PLACEHOLDER_FOCUS_ONLY_CLASSES: string[] = [
   '[&[data-empty=true]:focus]:before:content-[attr(data-blok-placeholder-active)]',
 ];
 
+/**
+ * Placeholder classes that show when the editor is empty (ancestor has data-blok-empty="true").
+ * Shows placeholder without requiring focus — used for initial empty-state hint.
+ * Uses data-blok-placeholder-active attribute for the placeholder text.
+ */
+export const PLACEHOLDER_EMPTY_EDITOR_CLASSES: string[] = [
+  '[[data-blok-empty=true]_&]:empty:before:pointer-events-none',
+  '[[data-blok-empty=true]_&]:empty:before:text-gray-text',
+  '[[data-blok-empty=true]_&]:empty:before:cursor-text',
+  '[[data-blok-empty=true]_&]:empty:before:content-[attr(data-blok-placeholder-active)]',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:pointer-events-none',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:text-gray-text',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:cursor-text',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:content-[attr(data-blok-placeholder-active)]',
+];
+
 /**
  * Check if an element's content is empty
  *