@jackuait/blok 0.6.0-beta.9 → 0.7.0-beta.1

package/src/tools/table/table-row-col-drag.ts

@@ -56,6 +56,7 @@ export class TableRowColDrag {
 
   private boundDocPointerMove: (e: PointerEvent) => void;
   private boundDocPointerUp: (e: PointerEvent) => void;
+  private boundDocPointerCancel: () => void;
 
   /** Resolves when drag ends — set by beginTracking, consumed by caller */
   private resolveTracking: ((wasDrag: boolean) => void) | null = null;
@@ -67,6 +68,7 @@ export class TableRowColDrag {
 
     this.boundDocPointerMove = this.handleDocPointerMove.bind(this);
     this.boundDocPointerUp = this.handleDocPointerUp.bind(this);
+    this.boundDocPointerCancel = this.handleDocPointerCancel.bind(this);
   }
 
   /**
@@ -87,6 +89,7 @@ export class TableRowColDrag {
 
     document.addEventListener('pointermove', this.boundDocPointerMove);
     document.addEventListener('pointerup', this.boundDocPointerUp);
+    document.addEventListener('pointercancel', this.boundDocPointerCancel);
 
     return new Promise<boolean>(resolve => {
       this.resolveTracking = resolve;
@@ -113,6 +116,7 @@ export class TableRowColDrag {
 
     document.removeEventListener('pointermove', this.boundDocPointerMove);
     document.removeEventListener('pointerup', this.boundDocPointerUp);
+    document.removeEventListener('pointercancel', this.boundDocPointerCancel);
 
     this.onDragStateChange?.(false, null);
     this.isDragging = false;
@@ -139,6 +143,7 @@ export class TableRowColDrag {
   private handleDocPointerUp(e: PointerEvent): void {
     document.removeEventListener('pointermove', this.boundDocPointerMove);
     document.removeEventListener('pointerup', this.boundDocPointerUp);
+    document.removeEventListener('pointercancel', this.boundDocPointerCancel);
 
     if (this.isDragging) {
       this.finishDrag(e);
@@ -150,6 +155,15 @@ export class TableRowColDrag {
     this.cleanup();
   }
 
+  /**
+   * Handle pointercancel — browser aborted the pointer (touch gesture, system dialog, etc.).
+   * Cleans up without applying the move (treats as abort).
+   */
+  private handleDocPointerCancel(): void {
+    this.resolveTracking?.(this.isDragging);
+    this.cleanup();
+  }
+
   private startDrag(): void {
     this.grid.style.userSelect = 'none';
     document.body.style.cursor = 'grabbing';

package/src/tools/table/table-scroll-haze.ts

@@ -0,0 +1,152 @@
+/**
+ * Scroll haze overlays for the Table tool.
+ *
+ * Adds gradient overlays on the left/right edges of the table wrapper
+ * to indicate that the table content is horizontally scrollable.
+ * Uses a passive scroll event listener with rAF throttling.
+ */
+
+const HAZE_ATTR = 'data-blok-table-haze';
+const HAZE_VISIBLE_ATTR = 'data-blok-table-haze-visible';
+
+/** Minimum scrollLeft delta to consider "scrolled" (avoids sub-pixel flicker). */
+const SCROLL_THRESHOLD = 1;
+
+const HAZE_CLASSES = [
+  'absolute',
+  'top-0',
+  'bottom-0',
+  'w-12',
+  'pointer-events-none',
+  'opacity-0',
+  'transition-opacity',
+  'duration-150',
+  'z-1',
+];
+
+const LEFT_HAZE_CLASSES = [
+  'left-0',
+  'bg-linear-to-r',
+  'from-white/80',
+  'to-transparent',
+];
+
+const RIGHT_HAZE_CLASSES = [
+  'right-5',
+  'bg-linear-to-l',
+  'from-white/80',
+  'to-transparent',
+];
+
+/**
+ * Manages left/right gradient haze overlays that indicate
+ * the table can be scrolled horizontally.
+ */
+export class TableScrollHaze {
+  private leftHaze: HTMLDivElement | null = null;
+  private rightHaze: HTMLDivElement | null = null;
+  private scrollContainer: HTMLElement | null = null;
+  private boundOnScroll: (() => void) | null = null;
+  private ticking = false;
+
+  /**
+   * Create haze overlay elements and attach the scroll listener.
+   *
+   * @param wrapper - The table wrapper element (position: relative)
+   * @param scrollContainer - The scroll container with overflow-x: auto
+   */
+  public init(wrapper: HTMLElement, scrollContainer: HTMLElement): void {
+    this.scrollContainer = scrollContainer;
+
+    this.leftHaze = this.createHazeElement('left');
+    this.rightHaze = this.createHazeElement('right');
+
+    wrapper.appendChild(this.leftHaze);
+    wrapper.appendChild(this.rightHaze);
+
+    this.boundOnScroll = (): void => {
+      if (!this.ticking) {
+        requestAnimationFrame(() => {
+          this.syncVisibility();
+          this.ticking = false;
+        });
+        this.ticking = true;
+      }
+    };
+
+    scrollContainer.addEventListener('scroll', this.boundOnScroll, { passive: true });
+
+    this.syncVisibility();
+  }
+
+  /**
+   * Recalculate haze visibility (e.g. after column resize or add/delete).
+   */
+  public update(): void {
+    this.syncVisibility();
+  }
+
+  /**
+   * Remove overlay elements and detach the scroll listener.
+   */
+  public destroy(): void {
+    if (this.boundOnScroll && this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.boundOnScroll);
+    }
+
+    this.leftHaze?.remove();
+    this.rightHaze?.remove();
+
+    this.leftHaze = null;
+    this.rightHaze = null;
+    this.scrollContainer = null;
+    this.boundOnScroll = null;
+    this.ticking = false;
+  }
+
+  private createHazeElement(side: 'left' | 'right'): HTMLDivElement {
+    const el = document.createElement('div');
+
+    el.setAttribute(HAZE_ATTR, side);
+    el.setAttribute('aria-hidden', 'true');
+    el.classList.add(...HAZE_CLASSES, ...(side === 'left' ? LEFT_HAZE_CLASSES : RIGHT_HAZE_CLASSES));
+
+    return el;
+  }
+
+  private syncVisibility(): void {
+    const sc = this.scrollContainer;
+
+    if (!sc) {
+      return;
+    }
+
+    const { overflowX } = getComputedStyle(sc);
+    const canScroll = overflowX === 'auto' || overflowX === 'scroll';
+
+    if (!canScroll) {
+      this.setVisible(this.leftHaze, false);
+      this.setVisible(this.rightHaze, false);
+
+      return;
+    }
+
+    const { scrollLeft, scrollWidth, clientWidth } = sc;
+    const maxScroll = scrollWidth - clientWidth;
+
+    this.setVisible(this.leftHaze, scrollLeft > SCROLL_THRESHOLD);
+    this.setVisible(this.rightHaze, maxScroll > SCROLL_THRESHOLD && scrollLeft < maxScroll - SCROLL_THRESHOLD);
+  }
+
+  private setVisible(el: HTMLElement | null, visible: boolean): void {
+    if (!el) {
+      return;
+    }
+
+    if (visible) {
+      el.setAttribute(HAZE_VISIBLE_ATTR, '');
+    } else {
+      el.removeAttribute(HAZE_VISIBLE_ATTR);
+    }
+  }
+}

package/src/tools/table/types.ts

@@ -4,7 +4,7 @@ import type { BlockToolData } from '../../../types';
  * Cell content always contains block IDs.
  * Every cell in the table is represented as an array of block references.
  */
-export type CellContent = { blocks: string[] };
+export type CellContent = { blocks: string[]; color?: string; textColor?: string; text?: string };
 
 /**
  * Legacy cell content type for migration from string-based cells.
@@ -53,4 +53,25 @@ export interface TableConfig {
   withHeadings?: boolean;
   /** Whether to start stretched */
   stretched?: boolean;
+  /** Additional tool names to restrict from being inserted into table cells */
+  restrictedTools?: string[];
+}
+
+/**
+ * Block data within a clipboard cell (no IDs — those are assigned on paste).
+ */
+export interface ClipboardBlockData {
+  tool: string;
+  data: Record<string, unknown>;
+  tunes?: Record<string, unknown>;
+}
+
+/**
+ * Clipboard payload for copied table cells.
+ * Stored as JSON in a data attribute on the HTML table element.
+ */
+export interface TableCellsClipboard {
+  rows: number;
+  cols: number;
+  cells: Array<Array<{ blocks: ClipboardBlockData[]; color?: string; textColor?: string }>>;
 }

package/src/tools/table/view/table-cell-blocks-adapter.ts

@@ -0,0 +1,47 @@
+import type { TableEventBroker, BlockLifecycleEvent } from '../ownership/table-event-broker';
+import type { TableOwnershipRegistry } from '../ownership/table-ownership-registry';
+
+/**
+ * Adapter that bridges the ownership-based event broker into the existing
+ * TableCellBlocks event handling.
+ *
+ * In shadow mode, this adapter subscribes the table to the broker and
+ * forwards routed events to the table's handler. It does NOT replace the
+ * existing global event listener — both paths run in parallel for validation.
+ *
+ * After cutover (Task 7), this adapter becomes the sole event path.
+ */
+export class TableCellBlocksAdapter {
+  private readonly tableId: string;
+  private readonly broker: TableEventBroker;
+  private readonly registry: TableOwnershipRegistry;
+  private readonly onEvent: (blockId: string, event: BlockLifecycleEvent) => void;
+
+  constructor(options: {
+    tableId: string;
+    broker: TableEventBroker;
+    registry: TableOwnershipRegistry;
+    onEvent: (blockId: string, event: BlockLifecycleEvent) => void;
+  }) {
+    this.tableId = options.tableId;
+    this.broker = options.broker;
+    this.registry = options.registry;
+    this.onEvent = options.onEvent;
+
+    this.broker.subscribe(this.tableId, this.handleBrokerEvent);
+  }
+
+  /**
+   * Destroy the adapter — unsubscribe from the broker.
+   */
+  destroy(): void {
+    this.broker.unsubscribe(this.tableId);
+  }
+
+  /**
+   * Handler for events routed through the broker.
+   */
+  private handleBrokerEvent = (blockId: string, event: BlockLifecycleEvent): void => {
+    this.onEvent(blockId, event);
+  };
+}

package/src/tools/toggle/block-operations.ts

@@ -0,0 +1,110 @@
+/**
+ * Toggle Block Operations - Block-related operations for ToggleItem.
+ *
+ * Extracted from ToggleItem to reduce file size.
+ */
+
+import { stripFakeBackgroundElements } from '../../components/utils';
+
+import type { ToggleItemData } from './types';
+
+/**
+ * Parse HTML string into a DocumentFragment.
+ *
+ * @param html - HTML string to parse
+ * @returns DocumentFragment with parsed nodes
+ */
+export const parseHTML = (html: string): DocumentFragment => {
+  const wrapper = document.createElement('div');
+  wrapper.innerHTML = html.trim();
+
+  const fragment = document.createDocumentFragment();
+  fragment.append(...Array.from(wrapper.childNodes));
+
+  return fragment;
+};
+
+/**
+ * Save the toggle item data.
+ *
+ * @param data - Current toggle item data
+ * @param element - The toggle wrapper element (or null)
+ * @param getContentElement - Function to get the content element
+ * @returns The saved toggle item data
+ */
+export const saveToggleItem = (
+  data: ToggleItemData,
+  element: HTMLElement | null,
+  getContentElement: () => HTMLElement | null
+): ToggleItemData => {
+  if (!element) return data;
+
+  const contentEl = getContentElement();
+  const text = contentEl ? stripFakeBackgroundElements(contentEl.innerHTML) : data.text;
+
+  return { text };
+};
+
+/**
+ * Context for merge operations
+ */
+export interface MergeContext {
+  data: ToggleItemData;
+  getContentElement: () => HTMLElement | null;
+  parseHTML: (html: string) => DocumentFragment;
+}
+
+/**
+ * Merge incoming data into toggle item.
+ *
+ * @param context - The merge context
+ * @param incomingData - The incoming data to merge
+ */
+export const mergeToggleItemData = (
+  context: MergeContext,
+  incomingData: ToggleItemData
+): void => {
+  const { data, getContentElement } = context;
+
+  data.text += incomingData.text;
+
+  const contentEl = getContentElement();
+
+  if (contentEl && incomingData.text) {
+    const fragment = context.parseHTML(incomingData.text);
+
+    contentEl.appendChild(fragment);
+    contentEl.normalize();
+  }
+};
+
+/**
+ * Set data on the toggle item (for undo/redo).
+ *
+ * @param currentData - The current toggle item data
+ * @param newData - The new data to apply
+ * @param getContentElement - Function to get the content element
+ * @returns Object with the updated data and whether the update was in-place
+ */
+export const setToggleItemData = (
+  currentData: ToggleItemData,
+  newData: ToggleItemData,
+  getContentElement: () => HTMLElement | null
+): { newData: ToggleItemData; inPlace: boolean } => {
+  const contentEl = getContentElement();
+
+  if (!contentEl) {
+    return { newData: currentData, inPlace: false };
+  }
+
+  const updatedData: ToggleItemData = {
+    ...currentData,
+    ...newData,
+  };
+
+  if (typeof newData.text === 'string') {
+    contentEl.innerHTML = newData.text;
+  }
+
+  return { newData: updatedData, inPlace: true };
+};

package/src/tools/toggle/constants.ts

@@ -0,0 +1,49 @@
+/**
+ * Constants for the Toggle tool
+ */
+
+/**
+ * Tool name used when registering this tool with Blok
+ */
+export const TOOL_NAME = 'toggle';
+
+/**
+ * Placeholder translation key
+ */
+export const PLACEHOLDER_KEY = 'tools.toggle.placeholder';
+
+/**
+ * Base styles for toggle wrapper
+ *
+ * Matches paragraph spacing: py-[3px] from blok-block + mt-[2px] mb-px
+ */
+export const BASE_STYLES = 'outline-hidden py-[3px] mt-[2px] mb-px';
+
+/**
+ * Styles for toggle content area
+ */
+export const CONTENT_STYLES = 'outline-hidden pl-0.5 leading-[1.6em] flex-1 min-w-0';
+
+/**
+ * Styles for toggle wrapper (arrow + content layout)
+ */
+export const TOGGLE_WRAPPER_STYLES = 'flex items-start';
+
+/**
+ * Styles for the toggle arrow button
+ */
+export const ARROW_STYLES = 'flex-shrink-0 w-6 h-6 flex items-center justify-center cursor-pointer select-none rounded hover:bg-black/5 transition-all duration-200 ease-in-out mt-px';
+
+/**
+ * SVG icon for the toggle arrow
+ */
+export const ARROW_ICON = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.5 2.5L8.5 6L4.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+
+/**
+ * Data attributes specific to the toggle tool
+ */
+export const TOGGLE_ATTR = {
+  toggleOpen: 'data-blok-toggle-open',
+  toggleArrow: 'data-blok-toggle-arrow',
+  toggleContent: 'data-blok-toggle-content',
+} as const;

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

@@ -0,0 +1,125 @@
+/**
+ * DOM Builder - Pure functions for DOM creation.
+ *
+ * These functions are extracted from ToggleItem for testability.
+ * They create DOM elements without side effects.
+ */
+
+import { DATA_ATTR } from '../../components/constants';
+import { twMerge } from '../../components/utils/tw';
+
+import {
+  ARROW_ICON,
+  ARROW_STYLES,
+  BASE_STYLES,
+  CONTENT_STYLES,
+  TOGGLE_ATTR,
+  TOGGLE_WRAPPER_STYLES,
+  TOOL_NAME,
+} from './constants';
+import type { ToggleItemData } from './types';
+
+/**
+ * Context object for DOM building operations
+ */
+export interface ToggleDOMBuilderContext {
+  /** The toggle item data */
+  data: ToggleItemData;
+  /** Whether the editor is in read-only mode */
+  readOnly: boolean;
+  /** Whether the toggle is open (expanded) */
+  isOpen: boolean;
+  /** Optional keydown event handler */
+  keydownHandler: ((event: KeyboardEvent) => void) | null;
+  /** Callback when the arrow is clicked */
+  onArrowClick: () => void;
+}
+
+/**
+ * Result of building a toggle item element
+ */
+export interface ToggleBuildResult {
+  /** The wrapper element */
+  wrapper: HTMLElement;
+  /** The arrow element for expanding/collapsing */
+  arrowElement: HTMLElement;
+  /** The content element for text input */
+  contentElement: HTMLElement;
+}
+
+/**
+ * Build the complete toggle item DOM structure.
+ *
+ * @param context - The builder context
+ * @returns Object containing the created elements
+ */
+export const buildToggleItem = (context: ToggleDOMBuilderContext): ToggleBuildResult => {
+  const { data, readOnly, isOpen, keydownHandler, onArrowClick } = context;
+
+  const wrapper = document.createElement('div');
+  wrapper.className = twMerge(BASE_STYLES, TOGGLE_WRAPPER_STYLES);
+  wrapper.setAttribute(DATA_ATTR.tool, TOOL_NAME);
+  wrapper.setAttribute(TOGGLE_ATTR.toggleOpen, String(isOpen));
+
+  const arrowElement = buildArrow(isOpen, onArrowClick);
+  const contentElement = buildContent(data, readOnly, keydownHandler);
+
+  wrapper.appendChild(arrowElement);
+  wrapper.appendChild(contentElement);
+
+  return { wrapper, arrowElement, contentElement };
+};
+
+/**
+ * Build the arrow element for toggling open/closed state.
+ *
+ * @param isOpen - Whether the toggle is currently open
+ * @param onArrowClick - Callback when arrow is clicked
+ * @returns The arrow element
+ */
+const buildArrow = (isOpen: boolean, onArrowClick: () => void): HTMLElement => {
+  const arrow = document.createElement('div');
+  arrow.className = ARROW_STYLES;
+  arrow.setAttribute(TOGGLE_ATTR.toggleArrow, '');
+  arrow.setAttribute('role', 'button');
+  arrow.setAttribute('tabindex', '-1');
+  arrow.setAttribute('aria-label', 'Toggle');
+  arrow.innerHTML = ARROW_ICON;
+
+  if (isOpen) {
+    arrow.style.transform = 'rotate(90deg)';
+  }
+
+  arrow.addEventListener('click', (event: MouseEvent) => {
+    event.stopPropagation();
+    onArrowClick();
+  });
+
+  return arrow;
+};
+
+/**
+ * Build the content element for text input.
+ *
+ * @param data - The toggle item data
+ * @param readOnly - Whether the editor is read-only
+ * @param keydownHandler - Optional keydown event handler
+ * @returns The content element
+ */
+const buildContent = (
+  data: ToggleItemData,
+  readOnly: boolean,
+  keydownHandler: ((event: KeyboardEvent) => void) | null
+): HTMLElement => {
+  const content = document.createElement('div');
+  content.className = CONTENT_STYLES;
+  content.setAttribute(TOGGLE_ATTR.toggleContent, '');
+  content.contentEditable = readOnly ? 'false' : 'true';
+  content.innerHTML = data.text;
+
+  if (keydownHandler) {
+    content.addEventListener('keydown', keydownHandler);
+  }
+
+  return content;
+};