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

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/toolbar/index.ts

@@ -526,13 +526,14 @@ 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 the block's actual marginLeft directly — when content is left-aligned
+     * (marginLeft: 0), toolbar actions will extend into the editor's left gutter
+     * via negative positioning (right: 100%), which is the expected behavior.
      */
     if (blockContentElement && this.nodes.content) {
       const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
-      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
 
-      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+      this.nodes.content.style.marginLeft = `${blockMarginLeft}px`;
     }
   }
 
@@ -654,13 +655,11 @@ 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.
      */
     if (blockContentElement && this.nodes.content) {
       const blockMarginLeft = parseFloat(getComputedStyle(blockContentElement).marginLeft) || 0;
-      const actionsWidth = this.nodes.actions?.offsetWidth ?? 0;
 
-      this.nodes.content.style.marginLeft = `${Math.max(blockMarginLeft, actionsWidth)}px`;
+      this.nodes.content.style.marginLeft = `${blockMarginLeft}px`;
     }
   }
 

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) {

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

@@ -1053,7 +1053,11 @@ export class TableCellBlocks {
   }
 
   /**
-   * Delete blocks by their IDs (in reverse index order to avoid shifting issues)
+   * Delete blocks by their IDs (in reverse index order to avoid shifting issues).
+   * Preserves scroll position because api.blocks.delete() is async — its internal
+   * `await` defers Caret.setToBlock() to microtasks that run AFTER this method returns,
+   * causing unwanted page jumps via element.focus() and window.scrollBy().
+   * We use Promise.all().then() to schedule the scroll restore after all those microtasks.
    */
   public deleteBlocks(blockIds: string[]): void {
     const blockIndices = blockIds
@@ -1061,8 +1065,14 @@ export class TableCellBlocks {
       .filter((index): index is number => index !== undefined)
       .sort((a, b) => b - a);
 
-    blockIndices.forEach(index => {
-      void this.api.blocks.delete(index);
+    const savedScrollY = window.scrollY;
+
+    const deletePromises = blockIndices.map(index => this.api.blocks.delete(index));
+
+    void Promise.all(deletePromises).then(() => {
+      if (window.scrollY !== savedScrollY) {
+        window.scrollTo(0, savedScrollY);
+      }
     });
   }