@jackuait/blok 0.6.0-beta.9 → 0.6.0

package/src/components/modules/yjs/undo-history.ts

@@ -171,8 +171,16 @@ export class UndoHistory {
       }
 
       if (event.type === 'undo' && this.caretUndoStack.length > 0) {
-        // Update the 'after' position of the most recent undo entry
         const lastEntry = this.caretUndoStack[this.caretUndoStack.length - 1];
+
+        // Backfill the 'before' position if the initial capture failed
+        // (e.g., for table cell paragraphs where the debounced selectionchange
+        // hadn't set currentBlock yet when the first character was typed)
+        if (lastEntry.before === null && this.pendingCaretBefore !== null) {
+          lastEntry.before = this.pendingCaretBefore;
+        }
+
+        // Update the 'after' position of the most recent undo entry
         lastEntry.after = this.captureCaretSnapshot();
       }
 
@@ -195,6 +203,12 @@ export class UndoHistory {
    * Restores caret position after the undo operation.
    */
   public undo(): void {
+    // Save scroll position before DOM manipulation. Removing focused elements
+    // from the DOM (e.g., undoing an Enter in a table cell removes cell paragraph
+    // blocks) can cause the browser to scroll to the top. We restore scroll after
+    // caret restoration to catch cases where the referenced block no longer exists.
+    const savedScrollY = window.scrollY;
+
     // Check if the last operation was a move (or group of moves)
     const lastMoveGroup = this.moveUndoStack.pop();
 
@@ -212,6 +226,7 @@ export class UndoHistory {
       const caretEntry = this.caretUndoStack.pop();
 
       this.pushCaretAndRestore(caretEntry, this.caretRedoStack, 'before');
+      this.restoreScrollIfJumped(savedScrollY);
 
       return;
     }
@@ -223,6 +238,7 @@ export class UndoHistory {
     const caretEntry = this.caretUndoStack.pop();
 
     this.pushCaretAndRestore(caretEntry, this.caretRedoStack, 'before');
+    this.restoreScrollIfJumped(savedScrollY);
   }
 
   /**
@@ -231,6 +247,9 @@ export class UndoHistory {
    * Restores caret position after the redo operation.
    */
   public redo(): void {
+    // Save scroll position before DOM manipulation (same rationale as undo).
+    const savedScrollY = window.scrollY;
+
     // Check if the last undone operation was a move (or group of moves)
     const lastMoveGroup = this.moveRedoStack.pop();
 
@@ -247,6 +266,7 @@ export class UndoHistory {
       const caretEntry = this.caretRedoStack.pop();
 
       this.pushCaretAndRestore(caretEntry, this.caretUndoStack, 'after');
+      this.restoreScrollIfJumped(savedScrollY);
 
       return;
     }
@@ -258,6 +278,7 @@ export class UndoHistory {
     const caretEntry = this.caretRedoStack.pop();
 
     this.pushCaretAndRestore(caretEntry, this.caretUndoStack, 'after');
+    this.restoreScrollIfJumped(savedScrollY);
   }
 
   /**
@@ -273,7 +294,17 @@ export class UndoHistory {
     }
 
     stack.push(entry);
-    this.restoreCaretSnapshot(position === 'before' ? entry.before : entry.after);
+
+    // Use the requested position, falling back to the other one when the
+    // requested snapshot wasn't captured (e.g., the debounced selectionchange
+    // hadn't set currentBlock for table cell paragraphs).
+    // The fallback offset will be clamped to the actual text length by the
+    // caret restore logic, so the caret ends up at a reasonable position.
+    const snapshot = position === 'before'
+      ? entry.before ?? entry.after
+      : entry.after ?? entry.before;
+
+    this.restoreCaretSnapshot(snapshot);
   }
 
   /**
@@ -418,18 +449,30 @@ export class UndoHistory {
     }
 
     const { BlockManager } = this.blok;
-    const currentBlock = BlockManager.currentBlock;
+
+    // If currentBlock is not set (e.g., debounced selectionchange hasn't fired yet
+    // for nested blocks like table cell paragraphs), resolve it from the selection.
+    const currentBlock = BlockManager.currentBlock ?? (() => {
+      const anchorNode = window.getSelection()?.anchorNode;
+
+      if (anchorNode !== null && anchorNode !== undefined) {
+        return BlockManager.setCurrentBlockByChildNode(anchorNode);
+      }
+
+      return undefined;
+    })();
 
     if (currentBlock === undefined) {
       return null;
     }
 
     const currentInput = currentBlock.currentInput;
+    const offset = currentInput !== undefined ? getCaretOffset(currentInput) : 0;
 
     return {
       blockId: currentBlock.id,
       inputIndex: currentBlock.currentInputIndex,
-      offset: currentInput !== undefined ? getCaretOffset(currentInput) : 0,
+      offset,
     };
   }
 
@@ -461,14 +504,27 @@ export class UndoHistory {
     lastEntry.after = this.captureCaretSnapshot();
   }
 
+  /**
+   * Restore scroll position if it jumped far from the original position.
+   * This catches cases where caret restoration focused a distant block
+   * (e.g., the referenced block was removed during undo and the fallback
+   * set focus to the first block at the top of the article).
+   */
+  private restoreScrollIfJumped(savedScrollY: number): void {
+    if (Math.abs(window.scrollY - savedScrollY) > window.innerHeight) {
+      window.scrollTo(0, savedScrollY);
+    }
+  }
+
   /**
    * Restore caret position from a snapshot.
-   * Handles edge cases: null snapshot, deleted block, invalid input index.
-   * @param snapshot - CaretSnapshot to restore, or null to clear selection
+   * Handles edge cases: null snapshot, deleted block, invalid input index,
+   * and disconnected inputs (e.g., after table DOM rebuild during undo).
    */
   private restoreCaretSnapshot(snapshot: CaretSnapshot | null): void {
     if (snapshot === null) {
-      window.getSelection()?.removeAllRanges();
+      // No snapshot available — preserve whatever focus state exists after the
+      // DOM update rather than actively destroying the selection.
       return;
     }
 
@@ -488,12 +544,35 @@ export class UndoHistory {
     // Get the specific input within the block
     const input = block.inputs[snapshot.inputIndex];
 
-    if (input !== undefined) {
+    if (input !== undefined && input.isConnected) {
       Caret.setToInput(input, Caret.positions.DEFAULT, snapshot.offset);
-    } else {
-      // Input doesn't exist anymore, fall back to block start
-      Caret.setToBlock(block, Caret.positions.START);
+      return;
+    }
+
+    // Input is disconnected or doesn't exist (e.g., the block was removed from
+    // a table cell during undo but still exists in BlockManager). Try to find
+    // a connected sibling block in the same parent context.
+    if (block.parentId != null) {
+      const lastConnectedSibling = BlockManager.blocks
+        .filter(b => b.parentId === block.parentId && b.id !== block.id && b.inputs.length > 0 && b.inputs[0].isConnected)
+        .at(-1);
+
+      if (lastConnectedSibling !== undefined) {
+        Caret.setToBlock(lastConnectedSibling, Caret.positions.END);
+        return;
+      }
+
+      // No connected siblings — try the parent block itself
+      const parentBlock = BlockManager.getBlockById(block.parentId);
+
+      if (parentBlock !== undefined) {
+        Caret.setToBlock(parentBlock, Caret.positions.START);
+        return;
+      }
     }
+
+    // Fall back to block start
+    Caret.setToBlock(block, Caret.positions.START);
   }
 
   /**

package/src/components/selection/fake-background/shadows.ts

@@ -195,7 +195,7 @@ export class FakeBackgroundShadows {
   /**
    * Calculates bottom extension for a line, accounting for gap to next line
    * The bottom extension fills the gap up to where the next line's top extension begins
-   * This prevents overlap: line N's bottom shadow meets line N+1's top shadow exactly
+   * This prevents overlap: line N's bottom shadow-sm meets line N+1's top shadow exactly
    * @param baseExtension - the base extension value
    * @param isLastLine - whether this is the last line
    * @param lineGroups - grouped line rectangles

package/src/components/shared/color-picker.ts

@@ -0,0 +1,211 @@
+import type { I18n } from '../../../types/api';
+import { parseColor } from '../utils/color-mapping';
+import { twMerge } from '../utils/tw';
+import { COLOR_PRESETS } from './color-presets';
+
+/**
+ * Compare two CSS color strings for equality by their parsed RGB tuples.
+ * Handles hex vs rgb() format mismatches (e.g. '#d44c47' vs 'rgb(212, 76, 71)').
+ */
+function colorsEqual(a: string, b: string): boolean {
+  if (a === b) {
+    return true;
+  }
+
+  const rgbA = parseColor(a);
+  const rgbB = parseColor(b);
+
+  if (rgbA === null || rgbB === null) {
+    return false;
+  }
+
+  return rgbA[0] === rgbB[0] && rgbA[1] === rgbB[1] && rgbA[2] === rgbB[2];
+}
+
+/**
+ * Describes one tab in the color picker (e.g. "Text" or "Background")
+ */
+export interface ColorPickerMode {
+  key: string;
+  labelKey: string;
+  presetField: 'text' | 'bg';
+}
+
+/**
+ * Options for the shared color picker factory
+ */
+export interface ColorPickerOptions {
+  i18n: I18n;
+  modes: [ColorPickerMode, ColorPickerMode];
+  defaultModeIndex?: number;
+  testIdPrefix: string;
+  onColorSelect: (color: string | null, modeKey: string) => void;
+}
+
+/**
+ * Handle returned by createColorPicker with the DOM element and control methods
+ */
+export interface ColorPickerHandle {
+  element: HTMLDivElement;
+  /**
+   * Set the currently active color for visual indication on the matching swatch.
+   * Pass null to clear any active indicator.
+   * @param color - CSS color value or null to clear
+   * @param modeKey - The mode key (e.g. 'color', 'background-color') to match the correct preset field
+   */
+  setActiveColor: (color: string | null, modeKey: string) => void;
+  /**
+   * Reset the picker state (tab index) back to defaultModeIndex.
+   * Call this when the picker is reopened to ensure consistent initial state.
+   */
+  reset: () => void;
+}
+
+/**
+ * Base Tailwind classes shared by tab buttons
+ */
+const TAB_BASE_CLASSES = 'flex-1 py-1.5 text-xs text-center rounded-md cursor-pointer border-none transition-colors';
+
+/**
+ * Neutral background for text-mode swatches so they render as visible buttons
+ */
+const SWATCH_NEUTRAL_BG = '#f7f7f5';
+
+/**
+ * Creates a color picker element with two tabs (e.g. Text / Background),
+ * a 5-column swatch grid, and a "Default" reset button.
+ *
+ * Shared between the marker inline tool and the table cell color popover.
+ */
+export function createColorPicker(options: ColorPickerOptions): ColorPickerHandle {
+  const { i18n, modes, testIdPrefix, onColorSelect } = options;
+  const defaultModeIndex = options.defaultModeIndex ?? 0;
+  const state = { modeIndex: defaultModeIndex, activeColor: null as string | null };
+
+  const wrapper = document.createElement('div');
+
+  wrapper.setAttribute('data-blok-testid', `${testIdPrefix}-picker`);
+  wrapper.className = 'flex flex-col gap-2 p-2';
+
+  /**
+   * Tab row
+   */
+  const tabRow = document.createElement('div');
+
+  tabRow.className = 'flex gap-0.5 mb-0.5';
+
+  const tabButtons: HTMLButtonElement[] = [];
+
+  modes.forEach((mode, modeIndex) => {
+    const tab = document.createElement('button');
+
+    tab.setAttribute('data-blok-testid', `${testIdPrefix}-tab-${mode.key}`);
+    tab.textContent = i18n.t(mode.labelKey);
+    tab.addEventListener('click', () => {
+      state.modeIndex = modeIndex;
+      updateTabs();
+      renderSwatches();
+    });
+    tabButtons.push(tab);
+    tabRow.appendChild(tab);
+  });
+
+  const updateTabs = (): void => {
+    for (const [index, button] of tabButtons.entries()) {
+      button.className = twMerge(
+        TAB_BASE_CLASSES,
+        index === state.modeIndex ? 'bg-item-hover-bg font-medium' : 'bg-transparent hover:bg-item-hover-bg/50'
+      );
+    }
+  };
+
+  /**
+   * Color grid
+   */
+  const grid = document.createElement('div');
+
+  grid.setAttribute('data-blok-testid', `${testIdPrefix}-grid`);
+  grid.className = 'grid grid-cols-5 gap-1.5';
+
+  const renderSwatches = (): void => {
+    grid.innerHTML = '';
+
+    const currentMode = modes[state.modeIndex];
+
+    for (const preset of COLOR_PRESETS) {
+      const swatch = document.createElement('button');
+      const swatchColor = currentMode.presetField === 'text' ? preset.text : preset.bg;
+      const isActive = state.activeColor !== null && colorsEqual(swatchColor, state.activeColor);
+
+      swatch.setAttribute('data-blok-testid', `${testIdPrefix}-swatch-${preset.name}`);
+      swatch.className = twMerge(
+        'w-8 h-8 rounded-md cursor-pointer border-none',
+        'flex items-center justify-center text-sm font-semibold',
+        'transition-shadow ring-inset hover:ring-2 hover:ring-black/10',
+        isActive && 'ring-2 ring-black/30'
+      );
+      swatch.textContent = 'A';
+
+      if (currentMode.presetField === 'text') {
+        swatch.style.color = preset.text;
+        swatch.style.backgroundColor = SWATCH_NEUTRAL_BG;
+      } else {
+        swatch.style.color = '';
+        swatch.style.backgroundColor = preset.bg;
+      }
+
+      swatch.addEventListener('click', () => {
+        onColorSelect(swatchColor, currentMode.key);
+      });
+      grid.appendChild(swatch);
+    }
+  };
+
+  /**
+   * Default button
+   */
+  const defaultBtn = document.createElement('button');
+
+  defaultBtn.setAttribute('data-blok-testid', `${testIdPrefix}-default-btn`);
+  defaultBtn.className = twMerge(
+    'w-full py-1.5 text-xs text-center rounded-md cursor-pointer',
+    'bg-transparent border-none hover:bg-item-hover-bg',
+    'mt-0.5 transition-colors'
+  );
+  defaultBtn.textContent = i18n.t('tools.marker.default');
+  defaultBtn.addEventListener('click', () => {
+    onColorSelect(null, modes[state.modeIndex].key);
+  });
+
+  /**
+   * Assemble
+   */
+  updateTabs();
+  renderSwatches();
+
+  wrapper.appendChild(tabRow);
+  wrapper.appendChild(grid);
+  wrapper.appendChild(defaultBtn);
+
+  return {
+    element: wrapper,
+    setActiveColor: (color: string | null, modeKey: string) => {
+      state.activeColor = color;
+
+      const matchingIndex = modes.findIndex((m) => m.key === modeKey);
+
+      if (matchingIndex !== -1) {
+        state.modeIndex = matchingIndex;
+        updateTabs();
+      }
+
+      renderSwatches();
+    },
+    reset: () => {
+      state.modeIndex = defaultModeIndex;
+      state.activeColor = null;
+      updateTabs();
+      renderSwatches();
+    },
+  };
+}

package/src/components/shared/color-presets.ts

@@ -0,0 +1,25 @@
+/**
+ * Shared color preset used across marker and table cell color pickers.
+ */
+export interface ColorPreset {
+  name: string;
+  text: string;
+  bg: string;
+}
+
+/**
+ * Ten Notion-style color presets.
+ * `text` is used for foreground (text-color mode), `bg` for background swatches.
+ */
+export const COLOR_PRESETS: ColorPreset[] = [
+  { name: 'gray', text: '#787774', bg: '#f1f1ef' },
+  { name: 'brown', text: '#9f6b53', bg: '#f4eeee' },
+  { name: 'orange', text: '#d9730d', bg: '#fbecdd' },
+  { name: 'yellow', text: '#cb9b00', bg: '#fbf3db' },
+  { name: 'green', text: '#448361', bg: '#edf3ec' },
+  { name: 'teal', text: '#2b9a8f', bg: '#e4f5f3' },
+  { name: 'blue', text: '#337ea9', bg: '#e7f3f8' },
+  { name: 'purple', text: '#9065b0', bg: '#f6f3f9' },
+  { name: 'pink', text: '#c14c8a', bg: '#f9f0f5' },
+  { name: 'red', text: '#d44c47', bg: '#fdebec' },
+];

package/src/components/ui/toolbox.ts

@@ -1,4 +1,4 @@
-import { RESTRICTED_TOOLS } from '../../tools/table/table-restrictions';
+import { getRestrictedTools } from '../../tools/table/table-restrictions';
 import { Dom } from '../dom';
 import { BlokMobileLayoutToggled } from '../events';
 import { SelectionUtils } from '../selection';
@@ -388,22 +388,30 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
   /**
    * Toggles hidden state for all popover items belonging to restricted tools.
-   * Handles tools like header that have multiple entries with custom names (header-1, header-2, etc.)
-   * by matching item names that equal or start with a restricted tool name.
+   * Matches by tool registration name so that tools with custom entry names
+   * (e.g., list tool with entries named bulleted-list, numbered-list, check-list)
+   * are correctly restricted.
    */
   private toggleRestrictedToolsHidden(isHidden: boolean): void {
-    for (const item of this.toolboxItemsToBeDisplayed) {
-      if (!('name' in item) || item.name === undefined) {
+    const restrictedTools = getRestrictedTools();
+
+    for (const tool of this.toolsToBeDisplayed) {
+      if (!restrictedTools.includes(tool.name)) {
+        continue;
+      }
+
+      const toolboxEntries = tool.toolbox;
+
+      if (!toolboxEntries) {
         continue;
       }
 
-      const { name } = item;
-      const isRestricted = RESTRICTED_TOOLS.some(
-        restricted => name === restricted || name.startsWith(`${restricted}-`)
-      );
+      const entries = Array.isArray(toolboxEntries) ? toolboxEntries : [toolboxEntries];
+
+      for (const entry of entries) {
+        const entryName = entry.name ?? tool.name;
 
-      if (isRestricted) {
-        this.popover?.toggleItemHiddenByName(name, isHidden);
+        this.popover?.toggleItemHiddenByName(entryName, isHidden);
       }
     }
   }