@jackuait/blok 0.6.0-beta.13 → 0.6.0-beta.14

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

@@ -1,5 +1,6 @@
 import type { I18n } from '../../../types/api';
-import { IconCross } from '../../components/icons';
+import { IconCopy, IconCross } from '../../components/icons';
+import { MODIFIER_KEY } from '../../components/constants';
 import { PopoverDesktop } from '../../components/utils/popover';
 import { twMerge } from '../../components/utils/tw';
 
@@ -59,6 +60,8 @@ interface CellSelectionOptions {
   onClearContent?: (cells: HTMLElement[]) => void;
   onCopy?: (cells: HTMLElement[], clipboardData: DataTransfer) => void;
   onCut?: (cells: HTMLElement[], clipboardData: DataTransfer) => void;
+  onCopyViaButton?: (cells: HTMLElement[]) => void;
+  isPopoverOpen?: () => boolean;
   i18n: I18n;
 }
 
@@ -79,6 +82,8 @@ export class TableCellSelection {
 
   private onCopy: ((cells: HTMLElement[], clipboardData: DataTransfer) => void) | undefined;
   private onCut: ((cells: HTMLElement[], clipboardData: DataTransfer) => void) | undefined;
+  private onCopyViaButton: ((cells: HTMLElement[]) => void) | undefined;
+  private isPopoverOpen: (() => boolean) | undefined;
 
   private boundPointerDown: (e: PointerEvent) => void;
   private boundPointerMove: (e: PointerEvent) => void;
@@ -96,6 +101,8 @@ export class TableCellSelection {
     this.onClearContent = options.onClearContent;
     this.onCopy = options.onCopy;
     this.onCut = options.onCut;
+    this.onCopyViaButton = options.onCopyViaButton;
+    this.isPopoverOpen = options.isPopoverOpen;
     this.i18n = options.i18n;
     this.grid.style.position = 'relative';
 
@@ -296,6 +303,13 @@ export class TableCellSelection {
       return;
     }
 
+    // Don't clear while a grip popover is open — clicking a popover
+    // action fires pointerdown before the click handler that performs
+    // the action and re-establishes the selection.
+    if (this.isPopoverOpen?.()) {
+      return;
+    }
+
     document.removeEventListener('pointerdown', this.boundClearSelection);
     this.clearSelection();
   }
@@ -518,10 +532,22 @@ export class TableCellSelection {
 
     this.expandPill();
 
+    const copyShortcut = MODIFIER_KEY === 'Meta' ? '⌘C' : 'Ctrl+C';
+
     const items: PopoverItemParams[] = [
+      {
+        icon: IconCopy,
+        title: this.i18n.t('tools.table.copySelection'),
+        secondaryLabel: copyShortcut,
+        closeOnActivate: true,
+        onActivate: (): void => {
+          this.onCopyViaButton?.([...this.selectedCells]);
+        },
+      },
       {
         icon: IconCross,
         title: this.i18n.t('tools.table.clearSelection'),
+        secondaryLabel: 'Del',
         closeOnActivate: true,
         onActivate: (): void => {
           this.onClearContent?.([...this.selectedCells]);

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

@@ -310,6 +310,15 @@ export const mountCellBlocksReadOnly = (
 
         container.appendChild(block.holder);
       }
+
+      // Strip placeholder attributes so paragraphs inside table cells
+      // don't show standalone-paragraph placeholders in readonly mode.
+      container.querySelectorAll<HTMLElement>('[data-blok-placeholder-active]').forEach(el => {
+        el.removeAttribute('data-blok-placeholder-active');
+      });
+      container.querySelectorAll<HTMLElement>('[data-placeholder]').forEach(el => {
+        el.removeAttribute('data-placeholder');
+      });
     });
   });
 };
@@ -368,7 +377,7 @@ export const setupKeyboardNavigation = (
   });
 };
 
-export const SCROLL_OVERFLOW_CLASSES = ['overflow-x-auto', 'pt-[9px]', 'pl-[9px]'];
+export const SCROLL_OVERFLOW_CLASSES = ['overflow-x-auto', 'overflow-y-hidden'];
 
 export const enableScrollOverflow = (element: HTMLDivElement | null): void => {
   element?.classList.add(...SCROLL_OVERFLOW_CLASSES);
@@ -376,13 +385,7 @@ export const enableScrollOverflow = (element: HTMLDivElement | null): void => {
 
 // ─── Heading styles ─────────────────────────────────────────────────
 
-export const updateHeadingStyles = (element: HTMLDivElement | null, withHeadings: boolean): void => {
-  if (!element) {
-    return;
-  }
-
-  const gridEl = element.firstElementChild as HTMLElement;
-
+export const updateHeadingStyles = (gridEl: HTMLElement | null, withHeadings: boolean): void => {
   if (!gridEl) {
     return;
   }
@@ -398,13 +401,7 @@ export const updateHeadingStyles = (element: HTMLDivElement | null, withHeadings
   }
 };
 
-export const updateHeadingColumnStyles = (element: HTMLDivElement | null, withHeadingColumn: boolean): void => {
-  if (!element) {
-    return;
-  }
-
-  const gridEl = element.firstElementChild as HTMLElement;
-
+export const updateHeadingColumnStyles = (gridEl: HTMLElement | null, withHeadingColumn: boolean): void => {
   if (!gridEl) {
     return;
   }

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

@@ -33,6 +33,8 @@ export type RowColAction =
 
 export interface TableRowColControlsOptions {
   grid: HTMLElement;
+  overlay?: HTMLElement;
+  scrollContainer?: HTMLElement;
   getColumnCount: () => number;
   getRowCount: () => number;
   isHeadingRow: () => boolean;
@@ -83,6 +85,8 @@ const GRIP_ACTIVE_CLASSES = [
  */
 export class TableRowColControls {
   private grid: HTMLElement;
+  private overlay: HTMLElement | undefined;
+  private scrollContainer: HTMLElement | undefined;
   private getColumnCount: () => number;
   private getRowCount: () => number;
   private isHeadingRow: () => boolean;
@@ -108,9 +112,12 @@ export class TableRowColControls {
   private boundMouseOver: (e: MouseEvent) => void;
   private boundMouseLeave: (e: MouseEvent) => void;
   private boundPointerDown: (e: PointerEvent) => void;
+  private boundScrollHandler: (() => void) | null = null;
 
   constructor(options: TableRowColControlsOptions) {
     this.grid = options.grid;
+    this.overlay = options.overlay;
+    this.scrollContainer = options.scrollContainer;
     this.getColumnCount = options.getColumnCount;
     this.getRowCount = options.getRowCount;
     this.isHeadingRow = options.isHeadingRow;
@@ -177,13 +184,29 @@ export class TableRowColControls {
     document.addEventListener('pointerdown', this.boundUnlockGrip);
   }
 
-  private handleUnlockGrip(): void {
+  private handleUnlockGrip(e: PointerEvent): void {
     document.removeEventListener('pointerdown', this.boundUnlockGrip);
 
     if (this.lockedGrip) {
       this.applyIdleClasses(this.lockedGrip);
       this.lockedGrip = null;
     }
+
+    // Re-evaluate grip visibility: the preceding mouseover was blocked
+    // by isGripInteractionLocked(). Check if pointer is over a table cell.
+    const target = e.target instanceof HTMLElement ? e.target : null;
+    const cell = target?.closest<HTMLElement>(`[${CELL_ATTR}]`);
+
+    if (cell) {
+      const position = this.getCellPosition(cell);
+
+      if (position) {
+        this.clearHideTimeout();
+        this.showColGrip(position.col);
+        this.showRowGrip(position.row);
+        this.isInsideTable = true;
+      }
+    }
   }
 
   private unlockGrip(): void {
@@ -191,6 +214,10 @@ export class TableRowColControls {
     this.lockedGrip = null;
   }
 
+  public get isPopoverOpen(): boolean {
+    return this.popoverState.popover !== null;
+  }
+
   public destroy(): void {
     this.destroyPopover();
     this.unlockGrip();
@@ -204,28 +231,45 @@ export class TableRowColControls {
   private createGrips(): void {
     const colCount = this.getColumnCount();
     const rowCount = this.getRowCount();
+    const gripContainer = this.overlay ?? this.grid;
 
     Array.from({ length: colCount }).forEach((_, i) => {
       const grip = this.createGripElement('col', i);
 
       this.colGrips.push(grip);
-      this.grid.appendChild(grip);
+      gripContainer.appendChild(grip);
     });
 
     Array.from({ length: rowCount }).forEach((_, i) => {
       const grip = this.createGripElement('row', i);
 
       this.rowGrips.push(grip);
-      this.grid.appendChild(grip);
+      gripContainer.appendChild(grip);
     });
 
     this.positionGrips();
     this.observeRowHeights();
+    this.attachScrollListener();
+  }
+
+  private attachScrollListener(): void {
+    if (this.overlay && this.scrollContainer) {
+      this.boundScrollHandler = () => this.positionGrips();
+      this.scrollContainer.addEventListener('scroll', this.boundScrollHandler);
+    }
+  }
+
+  private detachScrollListener(): void {
+    if (this.boundScrollHandler && this.scrollContainer) {
+      this.scrollContainer.removeEventListener('scroll', this.boundScrollHandler);
+      this.boundScrollHandler = null;
+    }
   }
 
   private destroyGrips(): void {
     this.rowResizeObserver?.disconnect();
     this.rowResizeObserver = null;
+    this.detachScrollListener();
     this.colGrips.forEach(g => g.remove());
     this.rowGrips.forEach(g => g.remove());
     this.colGrips = [];
@@ -256,13 +300,20 @@ export class TableRowColControls {
 
     grip.addEventListener('pointerdown', this.boundPointerDown);
     grip.addEventListener('mouseenter', () => {
+      if (this.overlay) {
+        this.clearHideTimeout();
+      }
       if (!this.isGripInteractionLocked()) {
         expandGrip(grip, type);
       }
     });
     grip.addEventListener('mouseleave', () => {
-      if (!this.isGripInteractionLocked()) {
-        collapseGrip(grip, type, pillSize);
+      if (this.isGripInteractionLocked()) {
+        return;
+      }
+      collapseGrip(grip, type, pillSize);
+      if (this.overlay) {
+        this.scheduleHideAll();
       }
     });
 
@@ -282,6 +333,12 @@ export class TableRowColControls {
     }
 
     const edges = getCumulativeColEdges(this.grid);
+    const scrollLeft = this.overlay && this.scrollContainer
+      ? this.scrollContainer.scrollLeft
+      : 0;
+    const containerWidth = this.overlay && this.scrollContainer
+      ? this.scrollContainer.clientWidth
+      : Infinity;
 
     this.colGrips.forEach((grip, i) => {
       if (i + 1 >= edges.length) {
@@ -289,10 +346,16 @@ export class TableRowColControls {
       }
 
       const centerX = (edges[i] + edges[i + 1]) / 2;
+      const adjustedX = centerX - scrollLeft;
       const style = grip.style;
 
       style.top = `${-BORDER_WIDTH / 2}px`;
-      style.left = `${centerX}px`;
+      style.left = `${adjustedX}px`;
+
+      // Hide grips scrolled out of the visible area
+      if (this.overlay) {
+        style.visibility = (adjustedX < 0 || adjustedX > containerWidth) ? 'hidden' : '';
+      }
     });
 
     this.rowGrips.forEach((grip, i) => {

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-gradient-to-r',
+  'from-white/80',
+  'to-transparent',
+];
+
+const RIGHT_HAZE_CLASSES = [
+  'right-5',
+  'bg-gradient-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);
+    }
+  }
+}