@jackuait/blok 0.10.0-beta.15 → 0.10.0-beta.17

package/src/cli/commands/convert-html/sanitizer.ts

@@ -40,6 +40,33 @@ export function sanitize(wrapper: HTMLElement): void {
   sanitizeNode(wrapper);
 }
 
+/**
+ * Unwrap a disallowed element: move its children before it, remove it,
+ * and return any element children so they can be re-queued for processing.
+ */
+function unwrapElement(el: HTMLElement): ChildNode[] {
+  const grandchildren = Array.from(el.childNodes);
+
+  for (const gc of grandchildren) {
+    el.before(gc);
+  }
+  el.remove();
+
+  return grandchildren.filter((gc) => gc.nodeType === gc.ELEMENT_NODE);
+}
+
+/**
+ * Strip attributes from an element that are not in the allowed set.
+ * When `allowedAttrs` is `true`, all attributes are removed.
+ */
+function stripAttributes(el: HTMLElement, allowedAttrs: Set<string> | true): void {
+  for (const attr of Array.from(el.attributes)) {
+    if (allowedAttrs === true || !allowedAttrs.has(attr.name)) {
+      el.removeAttribute(attr.name);
+    }
+  }
+}
+
 function sanitizeNode(node: Node): void {
   // Use a live-like approach: collect children, then process each.
   // When a child is unwrapped its grandchildren are inserted in place and
@@ -52,43 +79,15 @@ function sanitizeNode(node: Node): void {
     }
 
     const el = child as HTMLElement;
-    const tag = el.tagName;
-    const allowedAttrs = ALLOWED[tag];
+    const allowedAttrs = ALLOWED[el.tagName];
 
     if (allowedAttrs === undefined) {
-      // Unwrap: move children to the parent, then remove this element.
-      const grandchildren = Array.from(el.childNodes);
-
-      for (const gc of grandchildren) {
-        el.before(gc);
-      }
-
-      el.remove();
-
-      // Push the moved grandchildren onto the queue so they are evaluated
-      // for unwrapping / attribute-stripping in the same parent context.
-      for (const gc of grandchildren) {
-        if (gc.nodeType === gc.ELEMENT_NODE) {
-          queue.push(gc);
-        }
-      }
-    } else {
-      // Strip disallowed attributes.
-      if (allowedAttrs !== true) {
-        for (const attr of Array.from(el.attributes)) {
-          if (!allowedAttrs.has(attr.name)) {
-            el.removeAttribute(attr.name);
-          }
-        }
-      } else {
-        // true means no attributes allowed — strip all.
-        for (const attr of Array.from(el.attributes)) {
-          el.removeAttribute(attr.name);
-        }
-      }
-
-      // Recurse into children.
-      sanitizeNode(el);
+      // Unwrap disallowed tag and re-queue its element children.
+      queue.push(...unwrapElement(el));
+      continue;
     }
+
+    stripAttributes(el, allowedAttrs);
+    sanitizeNode(el);
   }
 }

package/src/cli/index.ts

@@ -5,6 +5,7 @@ const HELP_TEXT = `Usage: blok-cli [options]
 
 Options:
   --convert-html       Convert legacy HTML from stdin to Blok JSON (stdout)
+  --convert-gdocs      Convert Google Docs HTML from stdin to Blok JSON (stdout)
   --migration          Output the EditorJS to Blok migration guide (LLM-friendly)
   --output <file>      Write output to a file instead of stdout
   --help               Show this help message
@@ -12,6 +13,8 @@ Options:
 Examples:
   npx @jackuait/blok-cli --convert-html < article.html
   npx @jackuait/blok-cli --convert-html < article.html --output article.json
+  npx @jackuait/blok-cli --convert-gdocs < gdocs-export.html
+  npx @jackuait/blok-cli --convert-gdocs < gdocs-export.html --output doc.json
   npx @jackuait/blok-cli --migration
   npx @jackuait/blok-cli --migration | pbcopy
   npx @jackuait/blok-cli --migration --output migration-guide.md
@@ -29,6 +32,13 @@ const parseArgs = (argv: string[]): { command: string | null; output?: string }
     return { command: 'convert-html', output };
   }
 
+  if (argv.includes('--convert-gdocs')) {
+    const outputIndex = argv.indexOf('--output');
+    const output = outputIndex !== -1 ? argv[outputIndex + 1] : undefined;
+
+    return { command: 'convert-gdocs', output };
+  }
+
   if (argv.includes('--migration')) {
     const outputIndex = argv.indexOf('--output');
     const output = outputIndex !== -1 ? argv[outputIndex + 1] : undefined;
@@ -44,7 +54,7 @@ export const run = async (argv: string[], version: string): Promise<void> => {
 
   switch (command) {
     case 'convert-html': {
-      const jsdom = await import('jsdom') as { JSDOM: new (html: string) => { window: typeof globalThis } };
+      const jsdom = await import('jsdom');
       const dom = new jsdom.JSDOM('');
 
       globalThis.DOMParser = dom.window.DOMParser;
@@ -58,6 +68,22 @@ export const run = async (argv: string[], version: string): Promise<void> => {
       writeOutput(json, output);
       break;
     }
+    case 'convert-gdocs': {
+      const jsdom = await import('jsdom');
+      const dom = new jsdom.JSDOM('');
+
+      globalThis.DOMParser = dom.window.DOMParser;
+      globalThis.Node = dom.window.Node;
+      (globalThis as Record<string, unknown>).document = dom.window.document;
+
+      const { convertGdocs } = await import('./commands/convert-gdocs/index');
+      const fs = await import('node:fs');
+      const html = fs.readFileSync('/dev/stdin', 'utf-8');
+      const json = convertGdocs(html);
+
+      writeOutput(json, output);
+      break;
+    }
     case 'migration': {
       const content = getMigrationDoc(version);
 

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -344,6 +344,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       // Previous sibling exists in the same parent — fall through to merge/remove logic
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the start of the first input in a table cell, Backspace should be a no-op
+     * rather than merging the previous cell's last block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * Backspace at the start of the first Block should do nothing
      */
@@ -447,6 +456,15 @@ export class KeyboardNavigation extends BlockEventComposer {
       return;
     }
 
+    /**
+     * Don't merge across table cell boundaries.
+     * When the caret is at the end of the last input in a table cell, Delete should be a no-op
+     * rather than merging the next cell's first block into the current cell.
+     */
+    if (this.isCurrentBlockInsideTableCell) {
+      return;
+    }
+
     /**
      * If next Block is empty, it should be removed just like a character
      */

package/src/components/modules/rectangleSelection.ts

@@ -72,6 +72,14 @@ export class RectangleSelection extends Module {
    */
   private mouseDownWithinBoundsFromContentEditable = false;
 
+  /**
+   * Set when the user mousedowns in a position that should eventually close the toolbar
+   * if a drag begins, but NOT immediately (to avoid interfering with button clicks like
+   * the plus button). The toolbar is closed on the first mousemove after mousedown.
+   * Cleared on mouseup / endSelection.
+   */
+  private pendingToolbarClose = false;
+
   /**
    *  Is scrolling now
    */
@@ -187,7 +195,7 @@ export class RectangleSelection extends Module {
 
     const selectorsToAvoid = [
       createSelector(DATA_ATTR.elementContent),
-      createSelector(DATA_ATTR.toolbar),
+      createSelector(DATA_ATTR.settingsToggler),
       createSelector(DATA_ATTR.popover),
       INLINE_TOOLBAR_INTERFACE_SELECTOR,
     ];
@@ -202,12 +210,13 @@ export class RectangleSelection extends Module {
     }
 
     /**
-     * Hide the toolbar immediately so it does not obstruct drag selection.
-     * Only close the toolbar if the selection starts within the horizontal bounds of the editor.
-     * This allows rectangle selection to start from outside (e.g., left margin) without closing the toolbar.
+     * Schedule toolbar close for the first mousemove (i.e. when the user actually drags).
+     * Deferring prevents a plain click (e.g. on the plus button) from accidentally closing
+     * the toolbar before its own click handler fires.
+     * Only close if starting within the horizontal bounds of the editor.
      */
     if (withinEditorHorizontally) {
-      this.Blok.Toolbar.close();
+      this.pendingToolbarClose = true;
     }
 
     this.mousedown = true;
@@ -221,6 +230,7 @@ export class RectangleSelection extends Module {
   public endSelection(): void {
     this.mousedown = false;
     this.mouseDownWithinBoundsFromContentEditable = false;
+    this.pendingToolbarClose = false;
     this.startX = 0;
     this.startY = 0;
     this.anchorBlockIndex = null;
@@ -361,6 +371,16 @@ export class RectangleSelection extends Module {
       this.Blok.Toolbar.close();
     }
 
+    /**
+     * Close the toolbar on the first actual drag movement after a mousedown
+     * that was scheduled to close it. Using mousemove instead of mousedown ensures
+     * plain button clicks (e.g. the plus button) don't close the toolbar prematurely.
+     */
+    if (this.pendingToolbarClose) {
+      this.pendingToolbarClose = false;
+      this.Blok.Toolbar.close();
+    }
+
     this.changingRectangle(mouseEvent);
     this.scrollByZones(mouseEvent.clientY);
   }

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

@@ -427,8 +427,11 @@ export class Toolbar extends Module<ToolbarNodes> {
      */
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.isFirstChildOfCallout(targetBlock);
+    const isCalloutBlock = targetBlock.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    // Hide plus button for callout blocks and their first children to avoid
+    // overlap with the callout emoji icon in the left padding area.
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
@@ -519,6 +522,7 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     if (hasLeftEdgeInteraction && this.nodes.actions) {
       this.nodes.actions.style.pointerEvents = 'none';
+      this.restoreSettingsTogglerForLeftEdgeBlock(targetBlock);
     }
 
     /**
@@ -526,7 +530,9 @@ export class Toolbar extends Module<ToolbarNodes> {
      * so toolbar buttons align with the block content edge, even when
      * consumer CSS overrides the block content's margin.
      *
-     * Runs after open() so the toolbar is visible and actions have correct offsetWidth.
+     * Uses Math.max to guarantee the actions container (positioned via right:100%)
+     * never extends beyond the left edge of the viewport, which would make the
+      * drag handle unreachable by pointer events.
      */
     if (blockContentElement && this.nodes.content) {
       const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
@@ -654,7 +660,7 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     /**
      * Sync toolbar content wrapper's margin with the block content element.
-     * Runs after open() so the toolbar is visible and actions have correct offsetWidth.
+     * Clamp to actionsWidth so actions never extend beyond the left viewport edge.
      */
     if (blockContentElement && this.nodes.content) {
       const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
@@ -852,14 +858,48 @@ export class Toolbar extends Module<ToolbarNodes> {
 
     const focusIsInsideCell = this.isFocusInsideTableCell();
     const isCalloutFirstChild = this.hoveredBlock !== null && this.isFirstChildOfCallout(this.hoveredBlock);
+    const isCalloutBlock = this.hoveredBlock?.name === 'callout';
 
-    plusButton.style.display = isCalloutFirstChild ? 'none' : '';
+    plusButton.style.display = (isCalloutFirstChild || isCalloutBlock) ? 'none' : '';
 
     if (settingsToggler) {
       settingsToggler.style.display = (focusIsInsideCell || isCalloutFirstChild) ? 'none' : '';
     }
   }
 
+  /**
+   * Re-enables pointer-events on the settings toggler (and callout drag zone) after
+   * the actions container has been set to pointer-events: none for left-edge blocks.
+   *
+   * For callout blocks: also wires the dedicated drag zone as the drag handle and
+   * re-enables the settings toggler so the settings menu remains accessible.
+   * The emoji button (at x=32px) no longer overlaps the actions zone (x=[0,29px])
+   * because the callout uses pl-8 (32px) left padding.
+   *
+   * For all other left-edge blocks (toggle, header with arrow): simply re-enables the
+   * settings toggler so it continues to function as the drag handle.
+   */
+  private restoreSettingsTogglerForLeftEdgeBlock(targetBlock: Block): void {
+    if (targetBlock.name === 'callout') {
+      if (this.nodes.settingsToggler) {
+        this.nodes.settingsToggler.style.pointerEvents = 'auto';
+      }
+
+      const calloutDragZone = targetBlock.holder.querySelector<HTMLElement>('[data-callout-drag-zone]');
+
+      if (calloutDragZone) {
+        calloutDragZone.style.pointerEvents = 'auto';
+        targetBlock.setupDraggable(calloutDragZone, this.Blok.DragManager);
+      }
+
+      return;
+    }
+
+    if (this.nodes.settingsToggler) {
+      this.nodes.settingsToggler.style.pointerEvents = 'auto';
+    }
+  }
+
   /**
    * If the block is inside a table cell, resolve to the parent table block.
    * This ensures the toolbar shows for the table when clicking/focusing inside cells.

package/src/tools/callout/constants.ts

@@ -25,7 +25,8 @@ export const EMOJI_CATEGORY_FLAGS_KEY = 'tools.callout.emojiCategoryFlags';
 export const DEFAULT_EMOJI = '💡';
 
 // CSS — Tailwind classes
-export const WRAPPER_STYLES = 'rounded-xl px-4 py-[5px] my-1 flex items-start gap-2';
+export const WRAPPER_STYLES = 'rounded-xl pl-8 pr-4 py-[5px] my-1 flex items-start gap-2 relative';
 // h-[38px] = py-[7px]×2 + 1.5rem×1 = 14+24; explicit height prevents platform-specific emoji font metrics from inflating the button
 export const EMOJI_BUTTON_STYLES = 'text-[1.5rem] leading-[1] cursor-pointer bg-transparent border-0 px-0 py-[7px] h-[38px] flex-shrink-0 select-none';
 export const CHILDREN_STYLES = 'flex-1 min-w-0';
+export const DRAG_ZONE_STYLES = 'absolute left-0 top-0 h-full cursor-grab select-none';

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

@@ -6,12 +6,14 @@ 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 {
@@ -51,5 +53,13 @@ export function buildCalloutDOM(options: BuildCalloutDOMOptions): CalloutDOMRefs
   wrapper.appendChild(emojiButton);
   wrapper.appendChild(childContainer);
 
-  return { wrapper, emojiButton, 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 };
 }

package/src/tools/callout/index.ts

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

package/src/tools/table/index.ts

@@ -54,6 +54,7 @@ import type { PendingHighlight } from './table-row-col-action-handler';
 import { TableRowColControls } from './table-row-col-controls';
 import type { RowColAction } from './table-row-col-controls';
 import { registerAdditionalRestrictedTools } from './table-restrictions';
+import { TableCornerDrag } from './table-corner-drag';
 import { TableScrollHaze } from './table-scroll-haze';
 import type { CellPlacement, ClipboardBlockData, LegacyCellContent, TableCellsClipboard, TableData, TableConfig } from './types';
 import { isCellWithBlocks } from './types';
@@ -94,6 +95,7 @@ export class Table implements BlockTool {
   private rowColControls: TableRowColControls | null = null;
   private cellBlocks: TableCellBlocks | null = null;
   private cellSelection: TableCellSelection | null = null;
+  private cornerDrag: TableCornerDrag | null = null;
   private scrollHaze: TableScrollHaze | null = null;
   private element: HTMLDivElement | null = null;
   private gridElement: HTMLElement | null = null;
@@ -196,6 +198,8 @@ export class Table implements BlockTool {
     this.resize = null;
     this.addControls?.destroy();
     this.addControls = null;
+    this.cornerDrag?.destroy();
+    this.cornerDrag = null;
     this.rowColControls?.destroy();
     this.rowColControls = null;
     this.cellSelection?.destroy();
@@ -333,6 +337,7 @@ export class Table implements BlockTool {
   private initSubsystems(gridEl: HTMLElement): void {
     this.initResize(gridEl);
     this.initAddControls(gridEl);
+    this.initCornerDrag(gridEl);
     this.initRowColControls(gridEl);
     this.initCellSelection(gridEl);
     this.initGridPasteListener(gridEl);
@@ -989,6 +994,10 @@ export class Table implements BlockTool {
       wrapper: this.element,
       grid: gridEl,
       i18n: this.api.i18n,
+      getTableSize: () => ({
+        rows: this.model.rows,
+        cols: this.model.cols,
+      }),
       getNewColumnWidth: () => {
         const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
 
@@ -1129,6 +1138,131 @@ export class Table implements BlockTool {
     }
   }
 
+  private initCornerDrag(gridEl: HTMLElement): void {
+    this.cornerDrag?.destroy();
+
+    if (!this.element) {
+      return;
+    }
+
+    this.cornerDrag = new TableCornerDrag({
+      wrapper: this.element,
+      gridEl,
+      onAddRow: () => {
+        this.runStructuralOp(() => {
+          this.grid.addRow(gridEl);
+          this.model.addRow();
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+        });
+      },
+      onAddColumn: () => {
+        this.runStructuralOp(() => {
+          const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
+          const halfWidth = this.model.initialColWidth !== undefined
+            ? Math.round((this.model.initialColWidth / 2) * 100) / 100
+            : computeHalfAvgWidth(colWidths);
+          const newWidths = [...colWidths, halfWidth];
+
+          this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+          this.model.addColumn(undefined, halfWidth);
+          this.model.setColWidths(newWidths);
+          applyPixelWidths(gridEl, newWidths);
+          enableScrollOverflow(this.ensureScrollContainer());
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+        });
+      },
+      onRemoveLastRow: () => {
+        this.runStructuralOp(() => {
+          const rowCount = this.grid.getRowCount(gridEl);
+
+          if (rowCount <= 1) {
+            return;
+          }
+
+          const { blocksToDelete } = this.model.deleteRow(rowCount - 1);
+
+          this.cellBlocks?.deleteBlocks(blocksToDelete);
+          this.grid.deleteRow(gridEl, rowCount - 1);
+        });
+      },
+      onRemoveLastColumn: () => {
+        this.runStructuralOp(() => {
+          const colCount = this.grid.getColumnCount(gridEl);
+
+          if (colCount <= 1) {
+            return;
+          }
+
+          const { blocksToDelete } = this.model.deleteColumn(colCount - 1);
+
+          this.cellBlocks?.deleteBlocks(blocksToDelete);
+          this.grid.deleteColumn(gridEl, colCount - 1);
+
+          const updatedWidths = this.model.colWidths;
+
+          if (updatedWidths) {
+            applyPixelWidths(gridEl, updatedWidths);
+          }
+        });
+      },
+      onDragStart: () => {
+        if (this.resize) {
+          this.resize.enabled = false;
+        }
+        this.rowColControls?.hideAllGrips();
+        this.rowColControls?.setGripsDisplay(false);
+        this.addControls?.setDisplay(false);
+      },
+      onDragEnd: () => {
+        this.initResize(gridEl);
+        this.rowColControls?.refresh();
+        this.addControls?.setDisplay(true);
+        this.addControls?.syncRowButtonWidth();
+      },
+      getTableSize: () => {
+        return { rows: this.model.rows, cols: this.model.cols };
+      },
+      canRemoveLastRow: () => {
+        return this.model.rows > 1 && isRowEmpty(gridEl, this.model.rows - 1);
+      },
+      canRemoveLastColumn: () => {
+        return this.model.cols > 1 && isColumnEmpty(gridEl, this.model.cols - 1);
+      },
+      onClickAdd: () => {
+        this.runTransactedStructuralOp(() => {
+          // Add row
+          this.grid.addRow(gridEl);
+          this.model.addRow();
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingStyles(this.gridElement, this.model.withHeadings);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+
+          // Add column
+          const colWidths = this.model.colWidths ?? readPixelWidths(gridEl);
+          const halfWidth = this.model.initialColWidth !== undefined
+            ? Math.round((this.model.initialColWidth / 2) * 100) / 100
+            : computeHalfAvgWidth(colWidths);
+          const newWidths = [...colWidths, halfWidth];
+
+          this.grid.addColumn(gridEl, undefined, colWidths, halfWidth);
+          this.model.addColumn(undefined, halfWidth);
+          this.model.setColWidths(newWidths);
+          applyPixelWidths(gridEl, newWidths);
+          populateNewCells(gridEl, this.cellBlocks);
+          updateHeadingColumnStyles(this.gridElement, this.model.withHeadingColumn);
+
+          // Refresh subsystems
+          this.initResize(gridEl);
+          this.rowColControls?.refresh();
+          this.addControls?.syncRowButtonWidth();
+        });
+      },
+    });
+  }
+
   private initRowColControls(gridEl: HTMLElement): void {
     this.rowColControls?.destroy();
 
@@ -1152,6 +1286,7 @@ export class Table implements BlockTool {
         }
 
         this.addControls?.setDisplay(!isDragging);
+        this.cornerDrag?.setDisplay(!isDragging);
 
         if (isDragging) {
           this.api.toolbar.close({ setExplicitlyClosed: false });
@@ -1531,6 +1666,7 @@ export class Table implements BlockTool {
         }
 
         this.addControls?.setInteractive(!hasSelection);
+        this.cornerDrag?.setInteractive(!hasSelection);
         this.rowColControls?.setGripsDisplay(!hasSelection);
       },
       onSelectionRangeChange: () => {

package/src/tools/table/table-add-controls.ts

@@ -1,7 +1,7 @@
 import type { I18n } from '../../../types/api';
 import { IconPlus } from '../../components/icons';
 import { createTooltipContent } from '../../components/modules/toolbar/tooltip';
-import { hide as hideTooltip, onHover } from '../../components/utils/tooltip';
+import { hide as hideTooltip, onHover, show as showTooltip } from '../../components/utils/tooltip';
 import { twMerge } from '../../components/utils/tw';
 
 const ADD_ROW_ATTR = 'data-blok-table-add-row';
@@ -56,6 +56,7 @@ interface TableAddControlsOptions {
   onDragAddCol: () => void;
   onDragRemoveCol: () => void;
   onDragEnd: () => void;
+  getTableSize: () => { rows: number; cols: number };
   /** Returns the pixel width of a newly added column, used as the drag unit size. */
   getNewColumnWidth?: () => number;
 }
@@ -94,6 +95,7 @@ export class TableAddControls {
   private boundPointerCancel: (e: PointerEvent) => void;
   private boundRowPointerDown: (e: PointerEvent) => void;
   private boundColPointerDown: (e: PointerEvent) => void;
+  private getTableSize: () => { rows: number; cols: number };
   private getNewColumnWidth: (() => number) | undefined;
   private scrollContainer: HTMLElement | null = null;
   private boundScrollHandler: (() => void) | null = null;
@@ -112,6 +114,7 @@ export class TableAddControls {
     this.onDragAddCol = options.onDragAddCol;
     this.onDragRemoveCol = options.onDragRemoveCol;
     this.onDragEnd = options.onDragEnd;
+    this.getTableSize = options.getTableSize;
     this.getNewColumnWidth = options.getNewColumnWidth;
     this.boundMouseMove = this.handleMouseMove.bind(this);
     this.boundDocumentMouseMove = this.handleDocumentMouseMove.bind(this);
@@ -324,6 +327,20 @@ export class TableAddControls {
     this.addColBtn.remove();
   }
 
+  private showDimensionTooltip(): void {
+    if (!this.dragState) {
+      return;
+    }
+
+    const size = this.getTableSize();
+    const target = this.dragState.axis === 'row' ? this.addRowBtn : this.addColBtn;
+    const opts = this.dragState.axis === 'row'
+      ? { placement: 'bottom' as const, marginTop: -16 }
+      : { placement: 'bottom' as const };
+
+    showTooltip(target, `${size.cols}\u00D7${size.rows}`, opts);
+  }
+
   private handlePointerDown(axis: 'row' | 'col', e: PointerEvent): void {
     e.preventDefault();
 
@@ -380,8 +397,18 @@ export class TableAddControls {
     if (Math.abs(delta) > DRAG_THRESHOLD && !this.dragState.didDrag) {
       this.dragState.didDrag = true;
       document.body.style.cursor = axis === 'row' ? 'row-resize' : 'col-resize';
-      hideTooltip();
+      this.showDimensionTooltip();
       this.onDragStart();
+
+      return;
+    }
+
+    if (this.dragState.didDrag) {
+      this.showDimensionTooltip();
+    }
+
+    if (this.dragState.didDrag) {
+      this.showDimensionTooltip();
     }
   }
 
@@ -400,6 +427,7 @@ export class TableAddControls {
     target.removeEventListener('pointercancel', this.boundPointerCancel);
 
     document.body.style.cursor = '';
+    hideTooltip();
     this.dragState = null;
 
     if (!didDrag) {
@@ -431,6 +459,7 @@ export class TableAddControls {
     target.removeEventListener('pointercancel', this.boundPointerCancel);
 
     document.body.style.cursor = '';
+    hideTooltip();
     this.dragState = null;
 
     if (didDrag) {