@jackuait/blok 0.6.0-beta.4 → 0.6.0-beta.6

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

@@ -1,22 +1,11 @@
-import {
-  IconInsertAbove,
-  IconInsertBelow,
-  IconInsertLeft,
-  IconInsertRight,
-  IconTrash,
-  IconHeaderRow,
-  IconHeaderColumn,
-} from '../../components/icons';
-import { PopoverDesktop, PopoverItemType } from '../../components/utils/popover';
+import type { I18n } from '../../../types/api';
 import { twMerge } from '../../components/utils/tw';
 
 import { BORDER_WIDTH, CELL_ATTR, ROW_ATTR } from './table-core';
 import { collapseGrip, createGripDotsSvg, expandGrip, GRIP_HOVER_SIZE } from './table-grip-visuals';
-import { createHeadingToggle } from './table-heading-toggle';
 import { getCumulativeColEdges, TableRowColDrag } from './table-row-col-drag';
-
-import { PopoverEvent } from '@/types/utils/popover/popover-event';
-import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+import { createGripPopover } from './table-row-col-popover';
+import type { PopoverState } from './table-row-col-popover';
 
 const GRIP_ATTR = 'data-blok-table-grip';
 const GRIP_COL_ATTR = 'data-blok-table-grip-col';
@@ -52,6 +41,7 @@ export interface TableRowColControlsOptions {
   onDragStateChange?: (isDragging: boolean, dragType: 'row' | 'col' | null) => void;
   onGripClick?: (type: 'row' | 'col', index: number) => void;
   onGripPopoverClose?: () => void;
+  i18n: I18n;
 }
 
 const GRIP_CAPSULE_CLASSES = [
@@ -100,16 +90,18 @@ export class TableRowColControls {
   private onAction: (action: RowColAction) => void;
   private onGripClick: ((type: 'row' | 'col', index: number) => void) | undefined;
   private onGripPopoverClose: (() => void) | undefined;
+  private i18n: I18n;
 
   private colGrips: HTMLElement[] = [];
   private rowGrips: HTMLElement[] = [];
-  private activePopover: PopoverDesktop | null = null;
-  private activePopoverGrip: HTMLElement | null = null;
+  private popoverState: PopoverState = { popover: null, grip: null };
   private lockedGrip: HTMLElement | null = null;
   private boundUnlockGrip: (e: PointerEvent) => void;
   private hideTimeout: ReturnType<typeof setTimeout> | null = null;
   private activeColGripIndex = -1;
   private activeRowGripIndex = -1;
+  private isInsideTable = false;
+  private rowResizeObserver: ResizeObserver | null = null;
 
   private drag: TableRowColDrag;
 
@@ -126,6 +118,7 @@ export class TableRowColControls {
     this.onAction = options.onAction;
     this.onGripClick = options.onGripClick;
     this.onGripPopoverClose = options.onGripPopoverClose;
+    this.i18n = options.i18n;
 
     this.drag = new TableRowColDrag({
       grid: this.grid,
@@ -228,15 +221,19 @@ export class TableRowColControls {
     });
 
     this.positionGrips();
+    this.observeRowHeights();
   }
 
   private destroyGrips(): void {
+    this.rowResizeObserver?.disconnect();
+    this.rowResizeObserver = null;
     this.colGrips.forEach(g => g.remove());
     this.rowGrips.forEach(g => g.remove());
     this.colGrips = [];
     this.rowGrips = [];
     this.activeColGripIndex = -1;
     this.activeRowGripIndex = -1;
+    this.isInsideTable = false;
   }
 
   private createGripElement(type: 'row' | 'col', index: number): HTMLElement {
@@ -313,8 +310,25 @@ export class TableRowColControls {
     });
   }
 
+  /**
+   * Set up ResizeObserver to watch for row height changes and reposition grips.
+   */
+  private observeRowHeights(): void {
+    this.rowResizeObserver?.disconnect();
+
+    this.rowResizeObserver = new ResizeObserver(() => {
+      this.positionGrips();
+    });
+
+    const rows = this.grid.querySelectorAll(`[${ROW_ATTR}]`);
+
+    rows.forEach(row => {
+      this.rowResizeObserver?.observe(row as HTMLElement);
+    });
+  }
+
   private isGripInteractionLocked(): boolean {
-    return this.activePopover !== null || this.lockedGrip !== null;
+    return this.popoverState.popover !== null || this.lockedGrip !== null;
   }
 
   private handleMouseOver(e: MouseEvent): void {
@@ -339,6 +353,7 @@ export class TableRowColControls {
 
     this.showColGrip(position.col);
     this.showRowGrip(position.row);
+    this.isInsideTable = true;
   }
 
   private handleMouseLeave(): void {
@@ -385,7 +400,7 @@ export class TableRowColControls {
       const el: HTMLElement = grip;
 
       // Don't hide the grip that has an active popover
-      if (!visible && grip === this.activePopoverGrip) {
+      if (!visible && grip === this.popoverState.grip) {
         return;
       }
 
@@ -400,6 +415,7 @@ export class TableRowColControls {
     this.clearHideTimeout();
     this.hideColGrip();
     this.hideRowGrip();
+    this.isInsideTable = false;
   }
 
   private showColGrip(index: number): void {
@@ -440,10 +456,25 @@ export class TableRowColControls {
 
   private applyVisibleClasses(grip: HTMLElement): void {
     const el = grip;
+    const isCol = el.hasAttribute(GRIP_COL_ATTR);
+    const type: 'col' | 'row' = isCol ? 'col' : 'row';
+    const pillSize = isCol ? COL_PILL_HEIGHT : ROW_PILL_WIDTH;
+
+    // Reset to pill size before making visible
+    collapseGrip(el, type, pillSize);
+
+    if (this.isInsideTable) {
+      el.style.transition = 'none';
+    }
 
     el.className = twMerge(GRIP_CAPSULE_CLASSES, GRIP_VISIBLE_CLASSES);
     el.setAttribute('data-blok-table-grip-visible', '');
 
+    if (this.isInsideTable) {
+      void el.offsetHeight;
+      el.style.transition = '';
+    }
+
     const svg = el.querySelector('svg');
 
     if (svg) {
@@ -453,7 +484,7 @@ export class TableRowColControls {
   }
 
   private applyActiveClasses(grip: HTMLElement): void {
-    grip.className = twMerge(GRIP_CAPSULE_CLASSES, GRIP_ACTIVE_CLASSES);
+    Object.assign(grip, { className: twMerge(GRIP_CAPSULE_CLASSES, GRIP_ACTIVE_CLASSES) });
     grip.setAttribute('data-blok-table-grip-visible', '');
 
     const svg = grip.querySelector('svg');
@@ -476,11 +507,22 @@ export class TableRowColControls {
     const el = grip;
     const isCol = el.hasAttribute(GRIP_COL_ATTR);
     const type: 'col' | 'row' = isCol ? 'col' : 'row';
-    const pillSize = isCol ? COL_PILL_HEIGHT : ROW_PILL_WIDTH;
+    // With border-box, pillSize must account for the 12px padding (6px each side)
+    const HIT_AREA_PADDING = 12;
+    const pillSize = isCol ? (COL_PILL_HEIGHT + HIT_AREA_PADDING) : (ROW_PILL_WIDTH + HIT_AREA_PADDING);
+
+    if (this.isInsideTable) {
+      el.style.transition = 'none';
+    }
 
     collapseGrip(el, type, pillSize);
     el.className = twMerge(GRIP_CAPSULE_CLASSES, GRIP_IDLE_CLASSES);
     el.removeAttribute('data-blok-table-grip-visible');
+
+    if (this.isInsideTable) {
+      void el.offsetHeight;
+      el.style.transition = '';
+    }
   }
 
   private handleDragStateChange(isDragging: boolean, _dragType: 'row' | 'col' | null): void {
@@ -495,6 +537,7 @@ export class TableRowColControls {
     this.hideTimeout = setTimeout(() => {
       this.hideColGrip();
       this.hideRowGrip();
+      this.isInsideTable = false;
       this.hideTimeout = null;
     }, HIDE_DELAY_MS);
   }
@@ -553,175 +596,41 @@ export class TableRowColControls {
   // ── Popover menus ────────────────────────────────────────────
 
   private openPopover(type: 'row' | 'col', index: number): void {
-    this.destroyPopover();
-    this.clearHideTimeout();
-
-    const grip = type === 'col'
-      ? this.colGrips[index]
-      : this.rowGrips[index];
-
-    if (!grip) {
-      return;
-    }
-
-    const items = type === 'col'
-      ? this.buildColumnMenu(index)
-      : this.buildRowMenu(index);
-
-    this.activePopover = new PopoverDesktop({
-      items,
-      trigger: grip,
-      flippable: true,
-    });
-
-    // Track which grip has the popover so setGripsDisplay won't hide it
-    this.activePopoverGrip = grip;
-
-    this.activePopover.on(PopoverEvent.Closed, () => {
-      // Guard against re-entrant calls: destroyPopover() calls popover.destroy()
-      // which calls hide() and re-emits Closed. Skip the re-entrant invocation.
-      if (this.activePopover === null) {
-        return;
+    this.popoverState = createGripPopover(
+      type,
+      index,
+      { col: this.colGrips, row: this.rowGrips },
+      {
+        getColumnCount: this.getColumnCount,
+        getRowCount: this.getRowCount,
+        isHeadingRow: this.isHeadingRow,
+        isHeadingColumn: this.isHeadingColumn,
+        onAction: this.onAction,
+        i18n: this.i18n,
+      },
+      {
+        clearHideTimeout: () => this.clearHideTimeout(),
+        hideAllGripsExcept: (grip) => this.hideAllGripsExcept(grip),
+        applyActiveClasses: (grip) => this.applyActiveClasses(grip),
+        applyVisibleClasses: (grip) => this.applyVisibleClasses(grip),
+        scheduleHideAll: () => this.scheduleHideAll(),
+        destroyPopover: () => this.destroyPopover(),
+        onGripPopoverClose: this.onGripPopoverClose,
       }
+    );
 
-      this.destroyPopover();
-      this.applyVisibleClasses(grip);
-      this.scheduleHideAll();
-      this.onGripPopoverClose?.();
-    });
-
-    // Hide all other grips and make the active one blue
-    this.hideAllGripsExcept(grip);
-    this.applyActiveClasses(grip);
-
-    // Expand the grip to hover size so it remains visible while popover is open
-    if (type === 'col') {
-      grip.style.height = `${GRIP_HOVER_SIZE}px`;
-    } else {
-      grip.style.width = `${GRIP_HOVER_SIZE}px`;
-    }
-
-    this.activePopover.show();
+    // Show after storing state so callbacks (e.g. onGripClick → setGripsDisplay)
+    // see the updated popoverState.grip reference
+    this.popoverState.popover?.show();
     this.onGripClick?.(type, index);
   }
 
   private destroyPopover(): void {
-    if (this.activePopover !== null) {
-      const popover = this.activePopover;
+    if (this.popoverState.popover !== null) {
+      const popoverRef = this.popoverState.popover;
 
-      this.activePopover = null;
-      this.activePopoverGrip = null;
-      popover.destroy();
+      this.popoverState = { popover: null, grip: null };
+      popoverRef.destroy();
     }
   }
-
-  private buildColumnMenu(colIndex: number): PopoverItemParams[] {
-    const headingItems: PopoverItemParams[] = colIndex === 0
-      ? [
-        {
-          type: PopoverItemType.Html,
-          element: createHeadingToggle({
-            icon: IconHeaderColumn,
-            label: 'Header column',
-            isActive: this.isHeadingColumn(),
-            onToggle: () => {
-              this.onAction({ type: 'toggle-heading-column' });
-            },
-          }),
-        },
-        { type: PopoverItemType.Separator },
-      ]
-      : [];
-
-    const baseItems: PopoverItemParams[] = [
-      {
-        icon: IconInsertLeft,
-        title: 'Insert Column Left',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-col-left', index: colIndex });
-        },
-      },
-      {
-        icon: IconInsertRight,
-        title: 'Insert Column Right',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-col-right', index: colIndex });
-        },
-      },
-    ];
-
-    const canDelete = this.getColumnCount() > 1;
-    const deleteItems: PopoverItemParams[] = [
-      { type: PopoverItemType.Separator },
-      {
-        icon: IconTrash,
-        title: 'Delete',
-        isDestructive: true,
-        isDisabled: !canDelete,
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'delete-col', index: colIndex });
-        },
-      },
-    ];
-
-    return [...headingItems, ...baseItems, ...deleteItems];
-  }
-
-  private buildRowMenu(rowIndex: number): PopoverItemParams[] {
-    const headingItems: PopoverItemParams[] = rowIndex === 0
-      ? [
-        {
-          type: PopoverItemType.Html,
-          element: createHeadingToggle({
-            icon: IconHeaderRow,
-            label: 'Header row',
-            isActive: this.isHeadingRow(),
-            onToggle: () => {
-              this.onAction({ type: 'toggle-heading' });
-            },
-          }),
-        },
-        { type: PopoverItemType.Separator },
-      ]
-      : [];
-
-    const baseItems: PopoverItemParams[] = [
-      {
-        icon: IconInsertAbove,
-        title: 'Insert Row Above',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-row-above', index: rowIndex });
-        },
-      },
-      {
-        icon: IconInsertBelow,
-        title: 'Insert Row Below',
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'insert-row-below', index: rowIndex });
-        },
-      },
-    ];
-
-    const canDelete = this.getRowCount() > 1;
-    const deleteItems: PopoverItemParams[] = [
-      { type: PopoverItemType.Separator },
-      {
-        icon: IconTrash,
-        title: 'Delete',
-        isDestructive: true,
-        isDisabled: !canDelete,
-        closeOnActivate: true,
-        onActivate: (): void => {
-          this.onAction({ type: 'delete-row', index: rowIndex });
-        },
-      },
-    ];
-
-    return [...headingItems, ...baseItems, ...deleteItems];
-  }
 }

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

@@ -186,8 +186,8 @@ export class TableRowColDrag {
     cells.forEach(node => {
       const cellEl = node as HTMLElement;
 
-      cellEl.style.backgroundColor = '#dbeafe';
-      cellEl.style.opacity = '0.6';
+      cellEl.style.backgroundColor = '#f3f4f6';
+      cellEl.style.opacity = '0.7';
       this.dragOverlayCells.push(cellEl);
     });
   }
@@ -202,8 +202,8 @@ export class TableRowColDrag {
 
       const cellEl = cells[this.dragFromIndex] as HTMLElement;
 
-      cellEl.style.backgroundColor = '#dbeafe';
-      cellEl.style.opacity = '0.6';
+      cellEl.style.backgroundColor = '#f3f4f6';
+      cellEl.style.opacity = '0.7';
       this.dragOverlayCells.push(cellEl);
     });
   }

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

@@ -0,0 +1,225 @@
+import type { I18n } from '../../../types/api';
+import {
+  IconInsertAbove,
+  IconInsertBelow,
+  IconInsertLeft,
+  IconInsertRight,
+  IconTrash,
+  IconHeaderRow,
+  IconHeaderColumn,
+} from '../../components/icons';
+import { PopoverDesktop, PopoverItemType } from '../../components/utils/popover';
+
+import { GRIP_HOVER_SIZE } from './table-grip-visuals';
+import { createHeadingToggle } from './table-heading-toggle';
+import type { RowColAction } from './table-row-col-controls';
+
+import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import type { PopoverItemParams } from '@/types/utils/popover/popover-item';
+
+/**
+ * State for the currently active grip popover.
+ */
+export interface PopoverState {
+  popover: PopoverDesktop | null;
+  grip: HTMLElement | null;
+}
+
+/**
+ * Options for building popover menu items.
+ */
+export interface PopoverMenuOptions {
+  getColumnCount: () => number;
+  getRowCount: () => number;
+  isHeadingRow: () => boolean;
+  isHeadingColumn: () => boolean;
+  onAction: (action: RowColAction) => void;
+  i18n: I18n;
+}
+
+/**
+ * Callbacks the popover needs from the controls class.
+ */
+export interface OpenPopoverCallbacks {
+  clearHideTimeout: () => void;
+  hideAllGripsExcept: (grip: HTMLElement) => void;
+  applyActiveClasses: (grip: HTMLElement) => void;
+  applyVisibleClasses: (grip: HTMLElement) => void;
+  scheduleHideAll: () => void;
+  destroyPopover: () => void;
+  onGripPopoverClose?: () => void;
+}
+
+/**
+ * Build the popover menu items for a column grip.
+ */
+export const buildColumnMenuItems = (colIndex: number, options: PopoverMenuOptions): PopoverItemParams[] => {
+  const headingItems: PopoverItemParams[] = colIndex === 0
+    ? [
+      {
+        type: PopoverItemType.Html,
+        element: createHeadingToggle({
+          icon: IconHeaderColumn,
+          label: options.i18n.t('tools.table.headerColumn'),
+          isActive: options.isHeadingColumn(),
+          onToggle: () => {
+            options.onAction({ type: 'toggle-heading-column' });
+          },
+        }),
+      },
+      { type: PopoverItemType.Separator },
+    ]
+    : [];
+
+  const baseItems: PopoverItemParams[] = [
+    {
+      icon: IconInsertLeft,
+      title: options.i18n.t('tools.table.insertColumnLeft'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-col-left', index: colIndex });
+      },
+    },
+    {
+      icon: IconInsertRight,
+      title: options.i18n.t('tools.table.insertColumnRight'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-col-right', index: colIndex });
+      },
+    },
+  ];
+
+  const canDelete = options.getColumnCount() > 1;
+  const deleteItems: PopoverItemParams[] = [
+    { type: PopoverItemType.Separator },
+    {
+      icon: IconTrash,
+      title: options.i18n.t('tools.table.deleteColumn'),
+      isDestructive: true,
+      isDisabled: !canDelete,
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'delete-col', index: colIndex });
+      },
+    },
+  ];
+
+  return [...headingItems, ...baseItems, ...deleteItems];
+};
+
+/**
+ * Build the popover menu items for a row grip.
+ */
+export const buildRowMenuItems = (rowIndex: number, options: PopoverMenuOptions): PopoverItemParams[] => {
+  const headingItems: PopoverItemParams[] = rowIndex === 0
+    ? [
+      {
+        type: PopoverItemType.Html,
+        element: createHeadingToggle({
+          icon: IconHeaderRow,
+          label: options.i18n.t('tools.table.headerRow'),
+          isActive: options.isHeadingRow(),
+          onToggle: () => {
+            options.onAction({ type: 'toggle-heading' });
+          },
+        }),
+      },
+      { type: PopoverItemType.Separator },
+    ]
+    : [];
+
+  const baseItems: PopoverItemParams[] = [
+    {
+      icon: IconInsertAbove,
+      title: options.i18n.t('tools.table.insertRowAbove'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-row-above', index: rowIndex });
+      },
+    },
+    {
+      icon: IconInsertBelow,
+      title: options.i18n.t('tools.table.insertRowBelow'),
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'insert-row-below', index: rowIndex });
+      },
+    },
+  ];
+
+  const canDelete = options.getRowCount() > 1;
+  const deleteItems: PopoverItemParams[] = [
+    { type: PopoverItemType.Separator },
+    {
+      icon: IconTrash,
+      title: options.i18n.t('tools.table.deleteRow'),
+      isDestructive: true,
+      isDisabled: !canDelete,
+      closeOnActivate: true,
+      onActivate: (): void => {
+        options.onAction({ type: 'delete-row', index: rowIndex });
+      },
+    },
+  ];
+
+  return [...headingItems, ...baseItems, ...deleteItems];
+};
+
+/**
+ * Create a popover anchored to the given grip and prepare it for display.
+ * Returns the new state. The caller must call `popover.show()` after
+ * storing the state so that any callbacks fired during show see the
+ * updated popover reference.
+ */
+export const createGripPopover = (
+  type: 'row' | 'col',
+  index: number,
+  grips: { col: HTMLElement[]; row: HTMLElement[] },
+  menuOptions: PopoverMenuOptions,
+  callbacks: OpenPopoverCallbacks
+): PopoverState => {
+  callbacks.destroyPopover();
+  callbacks.clearHideTimeout();
+
+  const grip = type === 'col'
+    ? grips.col[index]
+    : grips.row[index];
+
+  if (!grip) {
+    return { popover: null, grip: null };
+  }
+
+  const items = type === 'col'
+    ? buildColumnMenuItems(index, menuOptions)
+    : buildRowMenuItems(index, menuOptions);
+
+  const popover = new PopoverDesktop({
+    items,
+    trigger: grip,
+    flippable: true,
+  });
+
+  popover.on(PopoverEvent.Closed, () => {
+    // The caller's destroyPopover handles nulling the shared state and
+    // calling popover.destroy(). The re-entrant Closed event is caught
+    // by the guard inside destroyPopover (checks if popover is already null).
+    callbacks.destroyPopover();
+    callbacks.applyVisibleClasses(grip);
+    callbacks.scheduleHideAll();
+    callbacks.onGripPopoverClose?.();
+  });
+
+  // Hide all other grips and make the active one blue
+  callbacks.hideAllGripsExcept(grip);
+  callbacks.applyActiveClasses(grip);
+
+  // Expand the grip to hover size so it remains visible while popover is open
+  if (type === 'col') {
+    grip.style.height = `${GRIP_HOVER_SIZE}px`;
+  } else {
+    grip.style.width = `${GRIP_HOVER_SIZE}px`;
+  }
+
+  return { popover, grip };
+};

package/src/tools/table/types.ts

@@ -37,6 +37,8 @@ export interface TableData extends BlockToolData {
   content: LegacyCellContent[][];
   /** Column widths in pixels (e.g., [200, 300, 250]). Omit for equal widths. */
   colWidths?: number[];
+  /** Original per-column width in pixels, set once at creation. New columns = initialColWidth / 2. */
+  initialColWidth?: number;
 }
 
 /**

package/src/types-internal/blok-modules.d.ts

@@ -2,6 +2,7 @@
 import { BlocksAPI } from '../components/modules/api/blocks';
 import { CaretAPI } from '../components/modules/api/caret';
 import { EventsAPI } from '../components/modules/api/events';
+import { HistoryAPI } from '../components/modules/api/history';
 import { I18nAPI } from '../components/modules/api/i18n';
 import { API } from '../components/modules/api/index';
 import { InlineToolbarAPI } from '../components/modules/api/inlineToolbar';
@@ -45,6 +46,7 @@ export interface BlokModules {
   CaretAPI: CaretAPI,
   ToolsAPI: ToolsAPI,
   EventsAPI: EventsAPI,
+  HistoryAPI: HistoryAPI,
   I18nAPI: I18nAPI,
   API: API,
   InlineToolbarAPI: InlineToolbarAPI,