@jackuait/blok 0.6.0-beta.13 → 0.6.0-beta.14

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

@@ -188,7 +188,7 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
     await this.openingPromise;
     this.openingPromise = null;
 
-    this.Blok.Toolbar.close();
+    this.Blok.Toolbar.hideBlockActions();
   }
 
   /**

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

@@ -157,13 +157,27 @@ export class BlockHoverController extends Controller {
       return null;
     }
 
-    const result = blocks.reduce<{ block: Block; distance: number }>((nearest, block) => {
+    /**
+     * Filter out blocks whose holders are inside a table cell container.
+     * Cell blocks should not participate in nearest-block detection —
+     * the parent table block should be found instead.
+     * This matches the direct-hit path which also resolves cell blocks to their parent table block.
+     */
+    const topLevelBlocks = blocks.filter(block =>
+      block.holder.closest('[data-blok-table-cell-blocks]') === null
+    );
+
+    if (topLevelBlocks.length === 0) {
+      return null;
+    }
+
+    const result = topLevelBlocks.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);
 
       return distance < nearest.distance ? { block, distance } : nearest;
-    }, { block: blocks[0], distance: Infinity });
+    }, { block: topLevelBlocks[0], distance: Infinity });
 
     return result.block;
   }

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

@@ -35,15 +35,34 @@ export const createRedactorTouchHandler = (
     /**
      * Select clicked Block as Current
      */
-    try {
-      deps.Blok.BlockManager.setCurrentBlockByChildNode(clickedNode);
-    } catch (_e) {
-      /**
-       * If clicked outside first-level Blocks and it is not RectSelection, set Caret to the last empty Block
-       */
-      if (!deps.Blok.RectangleSelection.isRectActivated()) {
-        deps.Blok.Caret.setToTheLastBlock();
-      }
+    const block = deps.Blok.BlockManager.setCurrentBlockByChildNode(clickedNode);
+
+    /**
+     * If clicked outside first-level Blocks and it is not RectSelection, set Caret to the last empty Block
+     */
+    if (!block && !deps.Blok.RectangleSelection.isRectActivated()) {
+      deps.Blok.Caret.setToTheLastBlock();
+    }
+
+    /**
+     * If the click landed below the last block's content area (in the holder padding zone),
+     * create/focus a new paragraph instead of keeping the block selected.
+     */
+    const isBelowLastBlock = block !== undefined
+      && block === deps.Blok.BlockManager.lastBlock
+      && isClickBelowLastBlockContent(block.holder, event);
+
+    if (isBelowLastBlock && !deps.Blok.ReadOnly.isEnabled) {
+      deps.Blok.Caret.setToTheLastBlock();
+      deps.Blok.Toolbar.moveAndOpen(deps.Blok.BlockManager.lastBlock);
+
+      return;
+    }
+
+    if (isBelowLastBlock) {
+      deps.Blok.Caret.setToTheLastBlock();
+
+      return;
     }
 
     /**
@@ -51,7 +70,19 @@ export const createRedactorTouchHandler = (
      * (used for showing Block Settings toggler after opening and closing Inline Toolbar)
      */
     if (!deps.Blok.ReadOnly.isEnabled && !deps.Blok.Toolbar.contains(initialTarget)) {
-      deps.Blok.Toolbar.moveAndOpen(undefined, clickedNode);
+      /**
+       * When the clicked node is inside a table cell, resolve to the parent table block
+       * so moveAndOpen receives the table block (not undefined / the inner cell paragraph).
+       * Without this, moveAndOpen falls back to currentBlock (the cell paragraph), detects
+       * it's inside a table cell, and hides the plus button and settings toggler.
+       */
+      const tableCellContainer = clickedNode.closest?.('[data-blok-table-cell-blocks]');
+      const tableBlockWrapper = tableCellContainer?.closest('[data-blok-testid="block-wrapper"]');
+      const resolvedBlock = tableBlockWrapper
+        ? deps.Blok.BlockManager.getBlockByChildNode(tableBlockWrapper)
+        : undefined;
+
+      deps.Blok.Toolbar.moveAndOpen(resolvedBlock, clickedNode);
     }
   };
 }
@@ -93,3 +124,45 @@ export const getClickedNode = (
 
   return initialTarget;
 }
+
+/**
+ * Extracts the clientY coordinate from a mouse or touch event
+ *
+ * @param event - The event to extract clientY from
+ * @returns The clientY value, or null if not available
+ */
+const getClientY = (event: Event): number | null => {
+  if (event instanceof MouseEvent) {
+    return event.clientY;
+  }
+
+  if (event instanceof TouchEvent && event.touches.length > 0) {
+    return event.touches[0].clientY;
+  }
+
+  return null;
+}
+
+/**
+ * Checks whether a click event landed below a block's content area.
+ * Used to detect clicks in the holder padding zone below the last block.
+ *
+ * @param blockHolder - The block's holder element
+ * @param event - The mouse or touch event
+ * @returns True if the click was below the block content's bottom edge
+ */
+const isClickBelowLastBlockContent = (
+  blockHolder: HTMLElement,
+  event: Event
+): boolean => {
+  const clientY = getClientY(event);
+
+  if (clientY === null) {
+    return false;
+  }
+
+  const contentEl = blockHolder.querySelector('[data-blok-element-content]');
+  const contentRect = contentEl?.getBoundingClientRect();
+
+  return contentRect !== undefined && clientY > contentRect.bottom;
+};

package/src/components/modules/yjs/block-observer.ts

@@ -169,9 +169,15 @@ export class BlockObserver {
       this.emitChange({ type: 'move', blockId, origin });
     }
 
-    // Emit pure adds
-    for (const blockId of pureAdds) {
-      this.emitChange({ type: 'add', blockId, origin });
+    // Emit pure adds — batch when there are multiple so that parent and
+    // child blocks can be registered in BlockManager before any lifecycle
+    // hooks (like Table.rendered → initializeCells) fire.
+    if (pureAdds.length === 1) {
+      this.emitChange({ type: 'add', blockId: pureAdds[0], origin });
+    }
+
+    if (pureAdds.length > 1) {
+      this.emitChange({ type: 'batch-add', blockIds: pureAdds, origin });
     }
 
     // Emit pure removes

package/src/components/modules/yjs/document-store.ts

@@ -2,6 +2,7 @@ import * as Y from 'yjs';
 
 import type { YBlockSerializer, YjsOutputBlockData } from './serializer';
 import type { TransactionOrigin } from './types';
+import { equals } from '../../utils/object';
 
 // Re-export YjsOutputBlockData as DocumentStoreBlockData for consistency
 type DocumentStoreBlockData = YjsOutputBlockData;
@@ -162,8 +163,9 @@ export class DocumentStore {
 
     // Skip if value hasn't changed - this prevents creating unnecessary undo entries
     // when block data is synced after mutations that don't actually change data
-    // (e.g., marker updates in list items during undo/redo)
-    if (currentValue === value) {
+    // (e.g., marker updates in list items during undo/redo, or table content
+    // arrays that are reference-different but structurally identical)
+    if (equals(currentValue, value)) {
       return;
     }
 

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

@@ -1,11 +1,13 @@
 /**
- * Event emitted when blocks change
+ * Event emitted when blocks change.
+ *
+ * Most events carry a single `blockId`. The `batch-add` type carries
+ * multiple IDs so that parent and child blocks can be created together
+ * before any lifecycle hooks fire.
  */
-export interface BlockChangeEvent {
-  type: 'add' | 'remove' | 'update' | 'move';
-  blockId: string;
-  origin: TransactionOrigin;
-}
+export type BlockChangeEvent =
+  | { type: 'add' | 'remove' | 'update' | 'move'; blockId: string; origin: TransactionOrigin }
+  | { type: 'batch-add'; blockIds: string[]; origin: TransactionOrigin };
 
 /**
  * Transaction origin types.

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -257,7 +257,9 @@ export class PopoverItemDefault extends PopoverItem {
     if (title !== undefined) {
       const titleEl = document.createElement('div');
 
-      titleEl.className = 'mr-auto truncate text-sm font-medium leading-5';
+      titleEl.className = params.secondaryLabel
+        ? 'flex-grow truncate text-sm font-medium leading-5'
+        : 'mr-auto truncate text-sm font-medium leading-5';
       titleEl.setAttribute(DATA_ATTR.popoverItemTitle, '');
       titleEl.setAttribute('data-blok-testid', 'popover-item-title');
       titleEl.textContent = title;
@@ -270,7 +272,7 @@ export class PopoverItemDefault extends PopoverItem {
     if (params.secondaryLabel) {
       const secondaryEl = document.createElement('div');
 
-      secondaryEl.className = 'whitespace-nowrap pr-1.5 text-xs font-light tracking-[0.25px] text-text-secondary opacity-60';
+      secondaryEl.className = 'min-w-[3.5rem] text-right whitespace-nowrap pl-3 pr-1.5 text-xs font-light tracking-[0.25px] text-text-secondary opacity-60';
       secondaryEl.setAttribute(DATA_ATTR.popoverItemSecondaryTitle, '');
       secondaryEl.setAttribute('data-blok-testid', 'popover-item-secondary-title');
       secondaryEl.textContent = params.secondaryLabel;
@@ -324,8 +326,8 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
-      // Asymmetric padding for vertical popovers (better visual balance)
-      !isInline && !isNestedInline && 'pl-2 pr-8',
+      // Asymmetric padding: pr-8 for visual balance, pr-2 when secondary label occupies right edge
+      !isInline && !isNestedInline && (this.params.secondaryLabel ? 'pl-2 pr-2' : 'pl-2 pr-8'),
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled

package/src/components/utils/popover/popover-desktop.ts

@@ -138,6 +138,18 @@ export class PopoverDesktop extends PopoverAbstract {
     return this.flipper.hasFocus();
   }
 
+  /**
+   * Toggles hidden state of all items matching the given name.
+   * Invalidates the cached size so the next access re-measures the popover.
+   * @param name - name of the items to toggle
+   * @param isHidden - true to hide, false to show
+   */
+  public override toggleItemHiddenByName(name: string, isHidden: boolean): void {
+    super.toggleItemHiddenByName(name, isHidden);
+
+    this._size = undefined;
+  }
+
   /**
    * Scroll position inside items container of the popover
    */

package/src/stories/Popover.stories.ts

@@ -351,7 +351,6 @@ export const ConfirmationState: Story = {
         deleteButton.setAttribute('data-blok-popover-item-confirmation', 'true');
         deleteButton.setAttribute('data-blok-popover-item-no-hover', 'true');
         deleteButton.setAttribute('data-blok-popover-item-no-focus', 'true');
-        // eslint-disable-next-line internal-storybook/no-class-selectors
         deleteButton.classList.add('!bg-item-confirm-bg', '!text-white');
       }
 
@@ -516,7 +515,6 @@ export const DisabledItem: Story = {
         // Add the proper disabled classes and attribute that match the real implementation
         // The itemDisabled class from popover-item-default.const.ts is:
         // 'cursor-default pointer-events-none text-text-secondary'
-        // eslint-disable-next-line internal-storybook/no-class-selectors
         popoverItem.classList.add('cursor-default', 'pointer-events-none', 'text-text-secondary');
         popoverItem.setAttribute('data-blok-disabled', 'true');
       }

package/src/styles/main.css

@@ -135,7 +135,7 @@
 }
 
 [data-blok-table-cell-blocks] .blok-block {
-  @apply p-0 m-0;
+  @apply p-0 m-0 min-h-[1.6em];
 }
 
 /**
@@ -146,3 +146,11 @@
 [data-blok-table-heading-col] {
   @apply font-semibold bg-gray-50;
 }
+
+/**
+ * Table scroll haze overlays
+ * Gradient indicators that show horizontal scroll availability
+ */
+[data-blok-table-haze][data-blok-table-haze-visible] {
+  @apply opacity-100;
+}

package/src/tools/list/caret-manager.ts

@@ -7,8 +7,12 @@
 import type { API } from '../../../types';
 
 /**
- * Sets caret to the content element of a block after ensuring DOM is ready.
- * Uses requestAnimationFrame to wait for the browser to process DOM updates.
+ * Sets caret to the content element of a block.
+ * Operates synchronously so subsequent keystrokes land in the correct block
+ * (deferring via requestAnimationFrame causes a race where characters typed
+ * between the block split and the next animation frame go to the wrong element).
+ * Falls back to requestAnimationFrame only when the content element is not yet
+ * available (e.g. async rendering).
  *
  * @param api - The API instance
  * @param block - BlockAPI to set caret to
@@ -19,8 +23,7 @@ export const setCaretToBlockContent = (
   block: ReturnType<API['blocks']['insert']>,
   position: 'start' | 'end' = 'end'
 ): void => {
-  // Use requestAnimationFrame to ensure DOM has been updated
-  requestAnimationFrame(() => {
+  const applyFocus = (deferred: boolean): void => {
     const holder = block.holder;
     if (!holder) return;
 
@@ -29,8 +32,10 @@ export const setCaretToBlockContent = (
     if (!(contentEl instanceof HTMLElement)) {
       // Fallback to setToBlock if no content element found
       api.caret.setToBlock(block, position);
-      // Update the caret "after" position for undo/redo since we're in requestAnimationFrame
-      api.caret.updateLastCaretAfterPosition();
+
+      if (deferred) {
+        api.caret.updateLastCaretAfterPosition();
+      }
 
       return;
     }
@@ -55,8 +60,21 @@ export const setCaretToBlockContent = (
     selection.removeAllRanges();
     selection.addRange(range);
 
-    // Update the caret "after" position for undo/redo since we moved the caret
-    // asynchronously via requestAnimationFrame after the Yjs transaction committed
-    api.caret.updateLastCaretAfterPosition();
-  });
+    if (deferred) {
+      // Update the caret "after" position for undo/redo since we moved the caret
+      // asynchronously via requestAnimationFrame after the Yjs transaction committed
+      api.caret.updateLastCaretAfterPosition();
+    }
+  };
+
+  // Try synchronous focus first — the block is already in the DOM after insert()
+  const holder = block.holder;
+  const contentEl = holder?.querySelector('[contenteditable="true"]');
+
+  if (contentEl instanceof HTMLElement) {
+    applyFocus(false);
+  } else {
+    // Content element not available yet — fall back to next frame
+    requestAnimationFrame(() => applyFocus(true));
+  }
 }