@jackuait/blok 0.10.7 → 0.10.9

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

@@ -6,14 +6,12 @@ import {
   WRAPPER_STYLES,
   EMOJI_BUTTON_STYLES,
   CHILDREN_STYLES,
-  DRAG_ZONE_STYLES,
 } from './constants';
 
 export interface CalloutDOMRefs {
   wrapper: HTMLElement;
   emojiButton: HTMLButtonElement;
   childContainer: HTMLElement;
-  dragZone: HTMLElement;
 }
 
 export interface BuildCalloutDOMOptions {
@@ -53,13 +51,5 @@ export function buildCalloutDOM(options: BuildCalloutDOMOptions): CalloutDOMRefs
   wrapper.appendChild(emojiButton);
   wrapper.appendChild(childContainer);
 
-  // Drag zone — covers left padding area (x=[0,16px]) for drag handle,
-  // sits behind emoji button so emoji clicks pass through
-  const dragZone = document.createElement('span');
-  dragZone.className = DRAG_ZONE_STYLES;
-  dragZone.style.width = '32px'; // matches pl-8 left padding
-  dragZone.setAttribute('data-callout-drag-zone', '');
-  wrapper.prepend(dragZone);
-
-  return { wrapper, emojiButton, childContainer, dragZone };
+  return { wrapper, emojiButton, childContainer };
 }

package/src/tools/callout/index.ts

@@ -66,7 +66,6 @@ export class CalloutTool implements BlockTool {
   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>) {
@@ -121,7 +120,6 @@ export class CalloutTool implements BlockTool {
     });
 
     this._dom = dom;
-    this._dragZone = dom.dragZone;
     this.applyColors();
 
     if (!this.readOnly) {
@@ -262,10 +260,6 @@ export class CalloutTool implements BlockTool {
     }
   }
 
-  public get dragZone(): HTMLElement | null {
-    return this._dragZone;
-  }
-
   private syncPickerActiveColors(): void {
     if (this._colorPicker === null) {
       return;

package/src/tools/header/index.ts

@@ -23,7 +23,7 @@ import { PLACEHOLDER_CLASSES, setupPlaceholder } from '../../components/utils/pl
 import { twMerge } from '../../components/utils/tw';
 import { BODY_PLACEHOLDER_STYLES, TOGGLE_ATTR } from '../toggle/constants';
 import { buildArrow } from '../toggle/dom-builder';
-import { updateArrowState, updateBodyPlaceholderVisibility, updateChildrenVisibility } from '../toggle/toggle-lifecycle';
+import { updateArrowState, updateBodyPlaceholderVisibility, updateChildrenVisibility, updateToggleEmptyState } from '../toggle/toggle-lifecycle';
 import { handleHeaderToggleEnter, handleHeaderToggleBackspace } from './header-toggle-keyboard';
 
 /**
@@ -764,6 +764,7 @@ export class Header implements BlockTool {
    */
   private buildWrapper(): HTMLElement {
     const wrapper = document.createElement('div');
+    wrapper.setAttribute(TOGGLE_ATTR.toggleEmpty, 'true');
 
     // Inner row: positioning context for the arrow (only heading height, not children).
     const headerRow = document.createElement('div');
@@ -799,12 +800,21 @@ export class Header implements BlockTool {
     // 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');
+    /**
+     * Listen for typing inside child blocks so the empty-state attribute
+     * (and the grayish arrow it drives) tracks what the user types in real time.
+     */
+    childContainer.addEventListener('input', this.handleChildContainerInput);
     this._childContainerElement = childContainer;
     wrapper.appendChild(childContainer);
 
     return wrapper;
   }
 
+  private handleChildContainerInput = (): void => {
+    updateToggleEmptyState(this._wrapper, this._childContainerElement);
+  };
+
   /**
    * Wrap the heading element in a new wrapper div containing the toggle arrow,
    * replacing the heading's current position in the DOM.
@@ -814,6 +824,7 @@ export class Header implements BlockTool {
     const parent = this._element.parentNode;
 
     this._wrapper = document.createElement('div');
+    this._wrapper.setAttribute(TOGGLE_ATTR.toggleEmpty, 'true');
 
     // Inner row: positioning context for the arrow (only heading height, not children).
     const headerRow = document.createElement('div');
@@ -916,6 +927,8 @@ export class Header implements BlockTool {
       this._isOpen,
       this.readOnly
     );
+
+    updateToggleEmptyState(this._wrapper, this._childContainerElement);
   }
 
   /**

package/src/tools/table/table-operations.ts

@@ -326,10 +326,15 @@ export const mountCellBlocksReadOnly = (
           continue;
         }
 
-        // Skip blocks that don't belong to this table.
-        // Corrupted data may contain cross-table references; mounting them
-        // would steal (or clone) DOM nodes from the other table.
-        if (block.parentId !== _tableBlockId) {
+        // Skip blocks whose parentId explicitly points to a DIFFERENT table
+        // (corrupted cross-table references). Blocks with null/undefined
+        // parentId are accepted: legitimate flat-array data shapes (e.g. the
+        // dodopizza article format) reference children by id from
+        // `cell.blocks` without setting `parent` on each child, and the
+        // Renderer's normalizeTableChildParents pre-step is the primary
+        // place that backfills parentId. This guard is defense-in-depth for
+        // load paths that bypass the Renderer (Yjs sync, direct insertion).
+        if (block.parentId !== null && block.parentId !== undefined && block.parentId !== _tableBlockId) {
           continue;
         }
 

package/src/tools/toggle/constants.ts

@@ -43,7 +43,7 @@ export const TOGGLE_WRAPPER_STYLES = 'flex items-center';
 /**
  * Styles for the toggle arrow button
  */
-export const ARROW_STYLES = 'flex-shrink-0 p-[8px] flex items-center justify-center cursor-pointer select-none rounded can-hover:hover:bg-item-hover-bg transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none';
+export const ARROW_STYLES = 'flex-shrink-0 p-[8px] flex items-center justify-center cursor-pointer select-none rounded can-hover:hover:bg-item-hover-bg transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none in-data-[blok-toggle-empty=true]:text-gray-text';
 
 /**
  * SVG icon for the toggle arrow
@@ -77,4 +77,5 @@ export const TOGGLE_ATTR = {
   toggleContent: 'data-blok-toggle-content',
   toggleBodyPlaceholder: 'data-blok-toggle-body-placeholder',
   toggleChildren: 'data-blok-toggle-children',
+  toggleEmpty: 'data-blok-toggle-empty',
 } as const;

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

@@ -73,6 +73,13 @@ export const buildToggleItem = (context: ToggleDOMBuilderContext): ToggleBuildRe
   wrapper.className = BASE_STYLES;
   wrapper.setAttribute(DATA_ATTR.tool, TOOL_NAME);
   wrapper.setAttribute(TOGGLE_ATTR.toggleOpen, String(isOpen));
+  /**
+   * Empty state default: assume no children until the tool syncs real state
+   * via updateToggleEmptyState() in its lifecycle methods. This drives the
+   * grayish arrow styling applied through the in-data-[blok-toggle-empty=true]
+   * Tailwind variant on ARROW_STYLES.
+   */
+  wrapper.setAttribute(TOGGLE_ATTR.toggleEmpty, 'true');
 
   const headerRow = document.createElement('div');
   headerRow.className = TOGGLE_WRAPPER_STYLES;

package/src/tools/toggle/index.ts

@@ -27,7 +27,7 @@ import {
 import { clean } from '../../components/utils/sanitizer';
 import { ARIA_LABEL_COLLAPSE_KEY, ARIA_LABEL_EXPAND_KEY, BODY_PLACEHOLDER_KEY, PLACEHOLDER_KEY, TOOL_NAME } from './constants';
 import { IconToggleList } from '../../components/icons';
-import { renderToggleItem, updateArrowState, updateChildrenVisibility, updateBodyPlaceholderVisibility } from './toggle-lifecycle';
+import { renderToggleItem, updateArrowState, updateChildrenVisibility, updateBodyPlaceholderVisibility, updateToggleEmptyState } from './toggle-lifecycle';
 import { handleToggleEnter, handleToggleBackspace } from './toggle-keyboard';
 import type { ToggleItemData, ToggleItemConfig } from './types';
 
@@ -127,9 +127,20 @@ export class ToggleItem implements BlockTool {
     this._bodyPlaceholderElement = result.bodyPlaceholderElement;
     this._childContainerElement = result.childContainerElement;
 
+    /**
+     * Listen for input events from child blocks so the empty-state attribute
+     * (and the grayish arrow it drives) tracks what the user is typing in
+     * real time.
+     */
+    this._childContainerElement.addEventListener('input', this.handleChildContainerInput);
+
     return this._element;
   }
 
+  private handleChildContainerInput = (): void => {
+    updateToggleEmptyState(this._element, this._childContainerElement);
+  };
+
   public rendered(): void {
     this.updateChildrenVisibility();
     this.updateBodyPlaceholderVisibility();
@@ -322,6 +333,8 @@ export class ToggleItem implements BlockTool {
       this._isOpen,
       this.readOnly
     );
+
+    updateToggleEmptyState(this._element, this._childContainerElement);
   }
 
   private handleBodyPlaceholderClick(): void {

package/src/tools/toggle/toggle-lifecycle.ts

@@ -13,6 +13,30 @@ import { TOGGLE_ATTR } from './constants';
 import { buildToggleItem } from './dom-builder';
 import type { ToggleDOMBuilderContext } from './dom-builder';
 
+/**
+ * Sync the wrapper's data-blok-toggle-empty attribute to reflect whether the
+ * toggle's body has any visible text. Reads `textContent` off the child
+ * container directly so the state updates live as the user types (or deletes).
+ * The attribute drives the grayish arrow styling via the
+ * in-data-[blok-toggle-empty=true] Tailwind variant on ARROW_STYLES.
+ *
+ * @param wrapper - The toggle wrapper element that receives the attribute
+ * @param childContainer - The element that hosts the child block holders
+ */
+export const updateToggleEmptyState = (
+  wrapper: HTMLElement | null,
+  childContainer: HTMLElement | null
+): void => {
+  if (wrapper === null) {
+    return;
+  }
+
+  const text = childContainer?.textContent ?? '';
+  const isEmpty = text.trim() === '';
+
+  wrapper.setAttribute(TOGGLE_ATTR.toggleEmpty, String(isEmpty));
+};
+
 /**
  * Context for rendering a toggle item
  */