@jackuait/blok 0.16.0 → 0.17.0

package/src/tools/image/uploading-state.ts

@@ -5,6 +5,7 @@ import { tr } from './i18n';
 export interface UploadingStateOptions {
   fileName: string;
   sizeLabel?: string;
+  statusLabel?: string;
   onCancel?(): void;
   i18n?: I18nInstance;
 }
@@ -33,7 +34,7 @@ export function renderUploadingState(opts: UploadingStateOptions): UploadingStat
 
   const label = document.createElement('span');
   label.className = 'blok-image-uploading__label';
-  label.textContent = tr(opts.i18n, 'tools.image.uploadingLabel');
+  label.textContent = opts.statusLabel ?? tr(opts.i18n, 'tools.image.uploadingLabel');
 
   const name = document.createElement('span');
   name.className = 'blok-image-uploading__filename';

package/src/tools/index.ts

@@ -33,6 +33,7 @@ export { Quote } from './quote';
 export { CodeTool as Code } from './code';
 export { ImageTool as Image } from './image';
 export { FileTool as File } from './file';
+export { VideoTool as Video } from './video';
 export { ColumnList } from './column-list';
 export { Column } from './column';
 export { Columns } from './columns';
@@ -65,6 +66,7 @@ export const defaultBlockTools = {
   code: { inlineToolbar: false },
   image: {},
   file: {},
+  video: {},
   column_list: {},
   column: {},
   embed: {},

package/src/tools/link/embed/index.ts

@@ -9,7 +9,8 @@ import type {
   PatternPasteEvent,
   ToolboxConfig,
 } from '../../../../types';
-import { IconGlobe, IconLinkCopy } from '../../../components/icons';
+import type { MenuConfig } from '../../../../types/tools/menu-config';
+import { IconCopy, IconGlobe, IconLinkCopy, IconReplace } from '../../../components/icons';
 import { attachResizeHandle, type ResizeEdge } from '../../image/resizer';
 import { renderEmbedOverlay, type EmbedAlignment } from './overlay';
 import { EMBED_SERVICES, matchEmbedService, isHttpUrl, type EmbedKind } from '../registry';
@@ -589,17 +590,72 @@ export class Embed implements BlockTool {
   }
 
   private buildOverlay(): HTMLElement {
-    return renderEmbedOverlay({
+    const overlay = renderEmbedOverlay({
       alignment: this.data.alignment ?? 'center',
       captionVisible: this.isCaptionVisible(),
       source: this.data.source ?? '',
       i18n: this.api.i18n,
       onAlign: (next) => this.setAlignment(next),
       onToggleCaption: () => this.toggleCaption(),
-      onCopyLink: () => this.copyLink(),
-      onReplace: () => this.replaceSource(),
-      onDelete: () => this.deleteBlock(),
     });
+
+    // The "more" button opens the shared block-tunes popover (same as the image
+    // block); embed-specific actions are contributed via renderSettings().
+    const moreBtn = overlay.querySelector<HTMLButtonElement>('[data-action="more"]');
+
+    moreBtn?.addEventListener('click', (event) => {
+      event.stopPropagation();
+      this.openBlockSettings(moreBtn);
+    });
+
+    return overlay;
+  }
+
+  public renderSettings(): MenuConfig {
+    const i18n = this.api.i18n;
+
+    return [
+      {
+        icon: IconReplace,
+        title: i18n.t('tools.embed.replace'),
+        name: 'embed-replace',
+        closeOnActivate: true,
+        onActivate: (): void => this.replaceSource(),
+      },
+      {
+        icon: IconCopy,
+        title: i18n.t('tools.image.copyUrl'),
+        name: 'embed-copy-url',
+        closeOnActivate: true,
+        onActivate: (): void => this.copyLink(),
+      },
+    ];
+  }
+
+  private openBlockSettings(trigger?: HTMLElement): void {
+    const toolbar = (this.api as unknown as {
+      toolbar?: {
+        toggleBlockSettings?: (
+          state: boolean,
+          trigger?: HTMLElement,
+          options?: { placeLeftOfAnchor?: boolean }
+        ) => void;
+      };
+    }).toolbar;
+
+    if (!toolbar?.toggleBlockSettings) {
+      return;
+    }
+    this.root?.setAttribute('data-settings-open', 'true');
+    trigger?.setAttribute('aria-expanded', 'true');
+    const onClosed = (): void => {
+      this.root?.removeAttribute('data-settings-open');
+      trigger?.setAttribute('aria-expanded', 'false');
+      this.api.events.off('block-settings-closed', onClosed);
+    };
+
+    this.api.events.on('block-settings-closed', onClosed);
+    toolbar.toggleBlockSettings(true, trigger, { placeLeftOfAnchor: false });
   }
 
   private replaceSource(): void {
@@ -716,10 +772,4 @@ export class Embed implements BlockTool {
 
     void clip?.writeText(this.data.source ?? '');
   }
-
-  private deleteBlock(): void {
-    const blocks = (this.api as unknown as { blocks?: { delete?: (id: string) => void } }).blocks;
-
-    blocks?.delete?.(this.block.id);
-  }
 }

package/src/tools/link/embed/overlay.ts

@@ -3,11 +3,8 @@ import {
   IconImageAlignCenter,
   IconImageAlignLeft,
   IconImageAlignRight,
-  IconLink,
   IconLinkExternal,
   IconMoreHorizontal,
-  IconReplace,
-  IconTrash,
 } from '../../../components/icons';
 
 export type EmbedAlignment = 'left' | 'center' | 'right';
@@ -24,9 +21,6 @@ export interface EmbedOverlayOptions {
   i18n: EmbedOverlayI18n;
   onAlign(next: EmbedAlignment): void;
   onToggleCaption(): void;
-  onCopyLink(): void;
-  onReplace(): void;
-  onDelete(): void;
 }
 
 const ALIGN_ICON: Record<EmbedAlignment, string> = {
@@ -45,9 +39,9 @@ const ALIGN_ORDER: EmbedAlignment[] = ['left', 'center', 'right'];
 
 /**
  * Hover toolbar for an iframe embed — alignment, caption toggle, "open original"
- * and a "more" menu (replace / copy link / delete). Modeled on the image overlay but
- * scoped to the embed tool. Pure builder: it wires the provided callbacks and
- * manages only its own popover open/close state.
+ * and a "more" button. Modeled on the image overlay and scoped to the embed tool.
+ * Pure builder: it wires the provided callbacks. The "more" button only carries
+ * the trigger markup; the tool wires it to the shared block-tunes popover.
  */
 export function renderEmbedOverlay(opts: EmbedOverlayOptions): HTMLElement {
   const root = document.createElement('div');
@@ -66,7 +60,7 @@ export function renderEmbedOverlay(opts: EmbedOverlayOptions): HTMLElement {
   });
   appendOpenOriginal(root, opts);
   appendDivider(root);
-  appendMoreMenu(root, opts);
+  appendMoreButton(root, opts);
 
   return root;
 }
@@ -133,62 +127,22 @@ function appendOpenOriginal(root: HTMLElement, opts: EmbedOverlayOptions): void
   root.appendChild(anchor);
 }
 
-function appendMoreMenu(root: HTMLElement, opts: EmbedOverlayOptions): void {
-  const wrapper = document.createElement('div');
-
-  wrapper.className = 'blok-embed-toolbar__more';
-  wrapper.style.position = 'relative';
-
+/**
+ * "More options" trigger. Carries only the markup — the embed tool attaches the
+ * click handler that opens the shared block-tunes popover, so the rich menu
+ * (search, sections, shortcuts, footer) is identical to the image block's.
+ */
+function appendMoreButton(root: HTMLElement, opts: EmbedOverlayOptions): void {
   const trigger = document.createElement('button');
 
   trigger.type = 'button';
+  trigger.className = 'blok-embed-toolbar__btn';
   trigger.setAttribute('data-action', 'more');
   trigger.setAttribute('aria-label', opts.i18n.t('tools.image.moreOptions'));
   trigger.setAttribute('aria-haspopup', 'menu');
   trigger.setAttribute('aria-expanded', 'false');
   trigger.innerHTML = IconMoreHorizontal;
-  wrapper.appendChild(trigger);
-
-  const popover = document.createElement('div');
-
-  popover.setAttribute('data-role', 'more-popover');
-  popover.setAttribute('role', 'menu');
-  popover.className = 'blok-embed-toolbar__more-popover';
-  popover.hidden = true;
-
-  const toggle = bindPopover(trigger, popover);
-
-  appendMenuItem(popover, {
-    action: 'replace',
-    label: opts.i18n.t('tools.embed.replace'),
-    icon: IconReplace,
-    onClick: () => {
-      toggle(false);
-      opts.onReplace();
-    },
-  });
-  appendMenuItem(popover, {
-    action: 'copy-link',
-    label: opts.i18n.t('tools.image.copyUrl'),
-    icon: IconLink,
-    onClick: () => {
-      toggle(false);
-      opts.onCopyLink();
-    },
-  });
-  appendMenuItem(popover, {
-    action: 'delete',
-    label: opts.i18n.t('blockSettings.delete'),
-    icon: IconTrash,
-    danger: true,
-    onClick: () => {
-      toggle(false);
-      opts.onDelete();
-    },
-  });
-
-  wrapper.appendChild(popover);
-  root.appendChild(wrapper);
+  root.appendChild(trigger);
 }
 
 interface IconButtonSpec {
@@ -217,43 +171,6 @@ function appendIconButton(parent: HTMLElement, spec: IconButtonSpec): void {
   parent.appendChild(btn);
 }
 
-interface MenuItemSpec {
-  action: string;
-  label: string;
-  icon: string;
-  danger?: boolean;
-  onClick(): void;
-}
-
-function appendMenuItem(parent: HTMLElement, spec: MenuItemSpec): void {
-  const btn = document.createElement('button');
-
-  btn.type = 'button';
-  btn.setAttribute('role', 'menuitem');
-  btn.setAttribute('data-action', spec.action);
-  btn.setAttribute('aria-label', spec.label);
-  btn.className = spec.danger
-    ? 'blok-embed-toolbar__menu-item is-danger'
-    : 'blok-embed-toolbar__menu-item';
-
-  const icon = document.createElement('span');
-
-  icon.className = 'blok-embed-toolbar__menu-icon';
-  icon.setAttribute('aria-hidden', 'true');
-  icon.innerHTML = spec.icon;
-
-  const text = document.createElement('span');
-
-  text.textContent = spec.label;
-
-  btn.append(icon, text);
-  btn.addEventListener('click', (event) => {
-    event.stopPropagation();
-    spec.onClick();
-  });
-  parent.appendChild(btn);
-}
-
 function appendDivider(parent: HTMLElement): void {
   const divider = document.createElement('div');
 

package/src/tools/table/index.ts

@@ -30,6 +30,7 @@ import {
   normalizeTableData,
   populateNewCells,
   readPixelWidths,
+  rectangularizeContent,
   SCROLL_OVERFLOW_CLASSES,
   setupKeyboardNavigation,
   updateHeadingColumnStyles,
@@ -247,8 +248,43 @@ export class Table implements BlockTool {
 
     this.mountBlockHoldersInNewTbody(content, newTbody, blockHolders);
 
+    // Reconcile the <colgroup> when the column COUNT changed (delete-col /
+    // insert-col on a merged grid route through here). Only swapping <tbody>
+    // would leave a stale <col> count, so the rendered grid width and
+    // getColumnCount() would disagree with the model. Scoped to count changes
+    // so same-width rebuilds (merge/split) keep their existing <col> widths
+    // untouched (avoids resetting custom percent/pixel widths).
+    const oldColgroup = gridEl.querySelector('colgroup');
+    const newColgroup = newTable.querySelector('colgroup');
+
+    if (
+      oldColgroup
+      && newColgroup
+      && oldColgroup.querySelectorAll('col').length !== newColgroup.querySelectorAll('col').length
+    ) {
+      oldColgroup.replaceWith(newColgroup);
+    }
+
     // Replace old tbody with new
     oldTbody.replaceWith(newTbody);
+
+    // Editability backstop. splitCell empties the revealed cells (blocks: []),
+    // and mountBlockHoldersInNewTbody only re-mounts EXISTING holders — so a
+    // revealed (or merged-into-empty origin) cell would have no paragraph and
+    // be impossible to click into or type in. The initializeCells completeness
+    // sweep cannot cover this: it is skipped for merge tables and the split
+    // path never runs it. Mirror the read-only→edit fix by guaranteeing every
+    // rendered cell holds at least one editable block. Skipped in read-only
+    // (no editing surface) — merge/split are edit-only anyway. Wrapped in a
+    // structural op so the synthesized block-added events are deferred instead
+    // of being double-claimed by the cell mutation handler.
+    if (!this.readOnly) {
+      this.runTransactedStructuralOp(() => {
+        newTbody.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`).forEach(cell => {
+          this.cellBlocks?.ensureCellHasBlock(cell);
+        });
+      }, true);
+    }
   }
 
   /**
@@ -931,7 +967,7 @@ export class Table implements BlockTool {
     const hasThHeadings = rows[0]?.querySelector('th') !== null;
     const withHeadings = hasTheadHeadings || hasThHeadings;
 
-    this.initialContent = tableContent;
+    this.initialContent = rectangularizeContent(tableContent);
     this.model.setWithHeadings(withHeadings);
     this.model.setWithHeadingColumn(false);
     this.model.setColWidths(undefined);

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

@@ -378,6 +378,10 @@ export class TableCellBlocks {
   ): CellContent[][] {
     const rowElements = this.gridElement.querySelectorAll(`[${ROW_ATTR}]`);
     const normalizedContent: CellContent[][] = [];
+    // Every (row, col) the model-driven loop below describes. The completeness
+    // sweep uses this to find rendered cells the model never covered — without
+    // depending on DOM/holder state, which varies across call sites and tests.
+    const visited = new Set<string>();
 
     content.forEach((rowData, rowIndex) => {
       const row = rowElements[rowIndex];
@@ -389,6 +393,8 @@ export class TableCellBlocks {
       const normalizedRow: CellContent[] = [];
 
       rowData.forEach((cellContent, colIndex) => {
+        visited.add(`${rowIndex}:${colIndex}`);
+
         // A merge-covered cell has no rendered <td> (createGridFromModel skips
         // spanned cells). Preserve its placeholder so the rebuilt model keeps
         // the merge structure and column count — otherwise loading a saved
@@ -481,6 +487,65 @@ export class TableCellBlocks {
       normalizedContent.push(normalizedRow);
     });
 
+    // ── Model==grid completeness sweep ──────────────────────────────────
+    // The loop above is driven by the STORED model, so it only touches cells
+    // the model actually describes. When the rendered grid is WIDER (ragged
+    // rows) or has columns the model never had (empty rows that make
+    // createFlatGrid fall back to DEFAULT_COLS), those extra DOM cells get no
+    // block → zero contenteditable target → impossible to click into or type.
+    // Walk every rendered cell and synthesize a paragraph for any still-empty,
+    // non-merge cell, recording it into the returned model so save/reload stays
+    // rectangular. This is the invariant enforcer that makes the non-editable
+    // cell bug impossible regardless of HOW the model and grid widths diverged
+    // — it backstops rectangularizeContent at the consuming layer and also
+    // covers any future code path that bypasses it.
+    //
+    // Skipped during a Yjs sync replay: fabricating blocks there orphans the
+    // blocks Yjs is about to restore via separate ops (regression:
+    // table-undo-redo-orphans). That path reconciles empty cells on its own.
+    //
+    // Skipped for merge tables: their rows are already full-width via mergedInto
+    // placeholders (so the bug cannot occur), and CELL_COL_ATTR is physical- vs
+    // logical-column ambiguous under merges — driving a model write off it would
+    // corrupt colspan/rowspan/mergedInto metadata.
+    if (!this.api.blocks.isSyncingFromYjs && !this.model.hasMerges()) {
+      rowElements.forEach((row, rowIndex) => {
+        const normalizedRow = normalizedContent[rowIndex] ?? (normalizedContent[rowIndex] = []);
+        const cellElements = row.querySelectorAll<HTMLElement>(`[${CELL_ATTR}]`);
+
+        cellElements.forEach(cell => {
+          const colIndex = Number(cell.getAttribute(CELL_COL_ATTR));
+
+          if (!Number.isInteger(colIndex) || visited.has(`${rowIndex}:${colIndex}`)) {
+            return;
+          }
+
+          const container = cell.querySelector<HTMLElement>(`[${CELL_BLOCKS_ATTR}]`);
+
+          // No container → merge-covered cell (no editable target by design).
+          if (!container) {
+            return;
+          }
+
+          const block = this.api.blocks.insert('paragraph', { text: '' }, {}, this.api.blocks.getBlocksCount(), false);
+
+          container.appendChild(block.holder);
+          this.api.blocks.setBlockParent(block.id, this.tableBlockId);
+          this.stripPlaceholders(container);
+
+          normalizedRow[colIndex] = { blocks: [block.id] };
+        });
+
+        // A covered/skipped column can leave an undefined hole between filled
+        // cells; rebuild the row dense so the persisted width matches the
+        // rendered grid and no index is left undefined.
+        normalizedContent[rowIndex] = Array.from(
+          { length: normalizedRow.length },
+          (_, col) => normalizedRow[col] ?? { blocks: [] }
+        );
+      });
+    }
+
     return normalizedContent;
   }
 

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

@@ -373,6 +373,54 @@ export const mountCellBlocksReadOnly = (
 
 // ─── Data normalization ─────────────────────────────────────────────
 
+/**
+ * Pad ragged rows out to the widest row's column count with empty
+ * `{ blocks: [] }` cells, producing a rectangular grid.
+ *
+ * Older published articles (and HTML-pasted tables with rowspan/colspan) can
+ * store rows SHORTER than the widest row — e.g. a 3-column table whose later
+ * rows only carry 1–2 cells. The grid is rendered to the widest row's column
+ * count, so createGrid pads every short row out to full width in the DOM, but
+ * initializeCells() iterates the STORED row, never visiting the padded trailing
+ * cells. Those gap cells get no paragraph block → zero contenteditable target →
+ * the cell is impossible to click into or type in (observed live: KB table
+ * block DQfJHidzTi). Rectangularizing up front makes the whole edit pipeline
+ * (grid, model, initializeCells, save) see one rectangular grid so every cell
+ * is editable.
+ *
+ * Rows already at or above the max width (including merge tables, whose rows
+ * carry full-width mergedInto placeholders) are returned untouched.
+ */
+export const rectangularizeContent = (
+  content: LegacyCellContent[][],
+): LegacyCellContent[][] => {
+  const maxCols = content.reduce((max, row) => Math.max(max, row?.length ?? 0), 0);
+
+  // A null/undefined row would crash initializeCells' `rowData.forEach`, so it
+  // counts as needing work even when it is not strictly shorter than maxCols
+  // (e.g. an all-null grid where maxCols === 0). Bailing only on length checks
+  // would let those rows slip through untouched.
+  if (!content.some(row => row == null || row.length < maxCols)) {
+    return content;
+  }
+
+  return content.map(row => {
+    const cells = row ?? [];
+
+    if (cells.length >= maxCols) {
+      return cells;
+    }
+
+    const padded = [...cells];
+
+    while (padded.length < maxCols) {
+      padded.push({ blocks: [] });
+    }
+
+    return padded;
+  });
+};
+
 export const normalizeTableData = (
   data: TableData | Record<string, never>,
   config: { withHeadings?: boolean; stretched?: boolean },
@@ -389,7 +437,8 @@ export const normalizeTableData = (
   }
 
   const tableData = data as TableData;
-  const cols = tableData.content?.[0]?.length;
+  const content = rectangularizeContent(tableData.content ?? []);
+  const cols = content[0]?.length;
   const colWidths = tableData.colWidths;
   const validWidths = colWidths
     && cols
@@ -402,7 +451,7 @@ export const normalizeTableData = (
     withHeadings: tableData.withHeadings ?? config.withHeadings ?? false,
     withHeadingColumn: tableData.withHeadingColumn ?? false,
     stretched: tableData.stretched ?? config.stretched ?? false,
-    content: tableData.content ?? [],
+    content,
     colWidths: validWidths,
     initialColWidth: tableData.initialColWidth,
   };

package/src/tools/table/table-row-col-action-handler.ts

@@ -36,6 +36,15 @@ interface ActionContext {
   data: ActionData;
   cellBlocks: TableCellBlocks | null;
   blocksToDelete?: string[];
+  /**
+   * Rebuild the whole <tbody> from the current model. Used for deletes on a
+   * merged grid: the physical-index DOM delete (grid.deleteRow/deleteColumn)
+   * cannot create a <td> for a cell the model PROMOTES out of a merge (a
+   * previously-covered cell becoming standalone), leaving it non-editable with
+   * an orphaned holder. Rebuilding from the post-delete model renders every
+   * revealed cell and runs the editability backstop.
+   */
+  rebuildTableBody?: () => void;
 }
 
 interface ActionResult {
@@ -140,7 +149,14 @@ const handleDeleteRow = (
   ctx: ActionContext,
 ): ActionResult => {
   ctx.cellBlocks?.deleteBlocks(ctx.blocksToDelete ?? []);
-  ctx.grid.deleteRow(gridEl, index);
+
+  // On a merged grid the physical-index DOM delete can't render cells the model
+  // promotes out of a merge. Rebuild from the (already-updated) model instead.
+  if (ctx.data.hasMerges && ctx.rebuildTableBody) {
+    ctx.rebuildTableBody();
+  } else {
+    ctx.grid.deleteRow(gridEl, index);
+  }
 
   const newRowCount = ctx.grid.getRowCount(gridEl);
   const neighborRow = index < newRowCount ? index : index - 1;
@@ -160,7 +176,14 @@ const handleDeleteCol = (
   ctx: ActionContext,
 ): ActionResult => {
   ctx.cellBlocks?.deleteBlocks(ctx.blocksToDelete ?? []);
-  ctx.grid.deleteColumn(gridEl, index);
+
+  // See handleDeleteRow: merged grids must rebuild from the model so promoted
+  // cells render with an editable target instead of vanishing.
+  if (ctx.data.hasMerges && ctx.rebuildTableBody) {
+    ctx.rebuildTableBody();
+  } else {
+    ctx.grid.deleteColumn(gridEl, index);
+  }
 
   const colWidths = syncColWidthsAfterDeleteColumn(ctx.data.colWidths, index);
 

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

@@ -522,6 +522,10 @@ export class TableSubsystems {
       // also transform widths — passing post-mutation widths would double-apply
       // the transformation.
       const colWidthsBeforeMutation = this.host.model.colWidths;
+      // Capture BEFORE the model mutation: deleting a merge-origin row/column
+      // can remove the last merge, so a post-mutation read would miss that the
+      // delete straddled a merge and the DOM needs a full rebuild.
+      const hasMergesBeforeMutation = this.host.model.hasMerges();
 
       // Sync model structural operation before DOM changes
       const { blocksToDelete } = this.syncModelForAction(action);
@@ -536,10 +540,11 @@ export class TableSubsystems {
             withHeadings: this.host.model.withHeadings,
             withHeadingColumn: this.host.model.withHeadingColumn,
             initialColWidth: this.host.model.initialColWidth,
-            hasMerges: this.host.model.hasMerges(),
+            hasMerges: hasMergesBeforeMutation,
           },
           cellBlocks: this.host.cellBlocks,
           blocksToDelete,
+          rebuildTableBody: () => this.host.rebuildTableBody(),
         },
       );
 

package/src/tools/video/constants.ts

@@ -0,0 +1,22 @@
+export const DEFAULT_MIME_TYPES = [
+  'video/mp4',
+  'video/webm',
+  'video/ogg',
+] as const;
+
+export const DEFAULT_MAX_SIZE = 100 * 1024 * 1024; // 100 MiB
+
+export const DEFAULT_CAPTION_PLACEHOLDER = 'Write a caption…';
+
+export const MIN_WIDTH_PERCENT = 10;
+export const MAX_WIDTH_PERCENT = 100;
+
+/**
+ * Hard floor for the player's pixel width. Below this the inline controls
+ * (volume slider, timecode, scrubber, view-mode buttons) crush together, so the
+ * resize handle clamps here instead of the global 10% percent floor.
+ */
+export const MIN_WIDTH_PX = 440;
+
+/** Direct links to a playable video file. */
+export const URL_PATTERN = /^https?:\/\/\S+\.(mp4|webm|ogg|mov|m4v)(\?\S*)?$/i;