@jackuait/blok 0.7.3-beta.3 → 0.7.3

package/src/components/inline-tools/inline-tool-marker.ts

@@ -15,6 +15,8 @@ import {
 } from './utils/formatting-range-utils';
 import { createColorPicker } from '../shared/color-picker';
 import type { ColorPickerHandle } from '../shared/color-picker';
+import { colorVarName } from '../shared/color-presets';
+import { mapToNearestPresetName } from '../utils/color-mapping';
 
 /**
  * Color mode type — either text color or background color
@@ -122,6 +124,16 @@ export class MarkerInlineTool implements InlineTool {
    */
   private colorMode: ColorMode = 'color';
 
+  /**
+   * Active text color for bar indicator (null = default/none)
+   */
+  private activeTextColor: string | null = null;
+
+  /**
+   * Active background color for bar indicator (null = default/none)
+   */
+  private activeBgColor: string | null = null;
+
   /**
    * The color picker handle with element and control methods
    */
@@ -138,7 +150,6 @@ export class MarkerInlineTool implements InlineTool {
     this.picker = createColorPicker({
       i18n: this.i18n,
       testIdPrefix: 'marker',
-      defaultModeIndex: 0,
       modes: [
         { key: 'color', labelKey: 'tools.marker.textColor', presetField: 'text' },
         { key: 'background-color', labelKey: 'tools.marker.background', presetField: 'bg' },
@@ -151,6 +162,16 @@ export class MarkerInlineTool implements InlineTool {
         } else {
           this.removeColor(this.colorMode);
         }
+
+        if (modeKey === 'color') {
+          this.activeTextColor = color;
+        } else {
+          this.activeBgColor = color;
+        }
+
+        this.picker.setActiveColor(color, modeKey);
+        this.updateToolbarColors(this.activeTextColor, this.activeBgColor);
+
         this.selection.setFakeBackground();
         this.selection.save();
       },
@@ -172,12 +193,18 @@ export class MarkerInlineTool implements InlineTool {
         }
 
         const range = selection.getRangeAt(0);
+        const formatted = isRangeFormatted(range, isMarkTag, { ignoreWhitespace: true });
+
+        if (formatted) {
+          const colors = this.detectBothSelectionColors(range);
+
+          this.updateToolbarColors(colors.text, colors.bg);
+        }
 
-        return isRangeFormatted(range, isMarkTag, { ignoreWhitespace: true });
+        return formatted;
       },
       children: {
         hideChevron: true,
-        width: '200px',
         items: [
           {
             type: PopoverItemType.Html,
@@ -214,6 +241,8 @@ export class MarkerInlineTool implements InlineTool {
       return;
     }
 
+    const resolvedValue = this.resolveToVar(value, mode);
+
     /**
      * Check if the entire selection is already inside a single mark element
      */
@@ -232,7 +261,7 @@ export class MarkerInlineTool implements InlineTool {
         range.compareBoundaryPoints(Range.END_TO_END, markRange) >= 0;
 
       if (coversAll) {
-        existingMark.style.setProperty(mode, value);
+        existingMark.style.setProperty(mode, resolvedValue);
         this.ensureTransparentBg(existingMark);
 
         return;
@@ -242,7 +271,7 @@ export class MarkerInlineTool implements InlineTool {
        * Partial selection: split the mark around the selection
        * so the new color applies only to the selected text
        */
-      this.splitMarkAroundRange(existingMark, range, mode, value);
+      this.splitMarkAroundRange(existingMark, range, mode, resolvedValue);
 
       return;
     }
@@ -260,7 +289,7 @@ export class MarkerInlineTool implements InlineTool {
 
     const mark = document.createElement('mark');
 
-    mark.style.setProperty(mode, value);
+    mark.style.setProperty(mode, resolvedValue);
     this.ensureTransparentBg(mark);
     mark.appendChild(range.extractContents());
     range.insertNode(mark);
@@ -314,6 +343,13 @@ export class MarkerInlineTool implements InlineTool {
       ? ancestorEl.closest('mark')?.parentElement ?? ancestorEl
       : ancestorEl;
 
+    /**
+     * Split any marks that extend beyond the selection boundaries so that
+     * the removal only affects the selected portion, not the entire mark.
+     * (Mirrors the same call in applyColor().)
+     */
+    this.splitMarksAtBoundaries(range);
+
     const markAncestors = collectFormattingAncestors(range, isMarkTag);
 
     for (const mark of markAncestors) {
@@ -362,18 +398,77 @@ export class MarkerInlineTool implements InlineTool {
    * and detect the current selection's color to highlight the active swatch.
    */
   private onPickerOpen(): void {
+    this.activeTextColor = null;
+    this.activeBgColor = null;
+
     this.picker.reset();
 
-    const activeColor = this.detectSelectionColor();
+    const colors = this.detectBothSelectionComputedColors();
 
-    if (activeColor) {
-      this.picker.setActiveColor(activeColor.value, activeColor.mode);
+    if (colors.text !== null) {
+      this.picker.setActiveColor(colors.text, 'color');
+      this.activeTextColor = colors.text;
     }
 
+    if (colors.bg !== null) {
+      this.picker.setActiveColor(colors.bg, 'background-color');
+      this.activeBgColor = colors.bg;
+    }
+
+    this.updateToolbarColors(this.activeTextColor, this.activeBgColor);
+
     this.selection.setFakeBackground();
     this.selection.save();
   }
 
+  /**
+   * Update the color indicator on the inline toolbar marker button.
+   * Background color is applied via SVG rect fill so it stays clipped to the rounded square.
+   * Button background-color is set to transparent to suppress active-state Tailwind selectors.
+   * @param textColor - CSS color value for the icon/text, or null to reset
+   * @param bgColor - CSS color value for the button background, or null to reset
+   */
+  private updateToolbarColors(textColor: string | null, bgColor: string | null): void {
+    const btn = document.querySelector<HTMLElement>('[data-blok-item-name="marker"]');
+
+    if (!btn) {
+      return;
+    }
+
+    if (textColor !== null) {
+      btn.style.setProperty('color', textColor);
+    } else if (bgColor !== null) {
+      // Suppress active-state blue (text-icon-active-text) when only a background color is set.
+      btn.style.setProperty('color', 'var(--blok-text-primary)');
+    } else {
+      btn.style.removeProperty('color');
+    }
+
+    const rect = btn.querySelector<SVGRectElement>('svg rect');
+
+    if (bgColor !== null) {
+      // Fill the SVG rect so the color is clipped to the rounded square shape.
+      // Transparent on the button suppresses active-state bg-icon-active-bg.
+      if (rect) {
+        rect.style.fill = bgColor;
+      }
+      btn.style.setProperty('background-color', 'transparent');
+    } else if (textColor !== null) {
+      // Use a neutral fill when only text color is applied so that:
+      // (a) the active-state blue (data-blok-popover-item-active:bg-icon-active-bg) is suppressed, and
+      // (b) light text colors remain visible regardless of the toolbar's own background.
+      if (rect) {
+        rect.style.fill = 'var(--blok-swatch-neutral-bg)';
+      }
+      btn.style.setProperty('background-color', 'transparent');
+    } else {
+      if (rect) {
+        rect.style.fill = '';
+      }
+      btn.style.removeProperty('background-color');
+    }
+  }
+
   /**
    * Called when the picker popover closes — clean up selection state
    */
@@ -388,36 +483,67 @@ export class MarkerInlineTool implements InlineTool {
   }
 
   /**
-   * Detect the color of the current selection's mark element.
-   * Returns the first color mode found (text color preferred over background).
+   * Detect both text and background colors from the mark at the start of a range.
+   * Uses the raw inline style value directly. CSS variables are passed through and
+   * resolve correctly in a real browser; resolved rgb values are used as-is.
+   * @param range - The selection range to inspect
    */
-  private detectSelectionColor(): { value: string; mode: string } | null {
+  private detectBothSelectionColors(range: Range): { text: string | null; bg: string | null } {
+    const mark = findMarkElement(range.startContainer);
+
+    if (!mark) {
+      return { text: null, bg: null };
+    }
+
+    const pickRaw = (prop: string): string | null => {
+      const raw = mark.style.getPropertyValue(prop);
+
+      return raw && raw !== 'transparent' ? raw : null;
+    };
+
+    return {
+      text: pickRaw('color'),
+      bg: pickRaw('background-color'),
+    };
+  }
+
+  /**
+   * Detect both text and background colors from the current selection's mark element
+   * using computed values (resolves CSS variables via getComputedStyle).
+   * Used by onPickerOpen() to highlight the correct swatches in both picker sections.
+   */
+  private detectBothSelectionComputedColors(): { text: string | null; bg: string | null } {
     const selection = window.getSelection();
 
     if (!selection || selection.rangeCount === 0) {
-      return null;
+      return { text: null, bg: null };
     }
 
     const range = selection.getRangeAt(0);
     const mark = findMarkElement(range.startContainer);
 
     if (!mark) {
-      return null;
+      return { text: null, bg: null };
     }
 
-    const textColor = mark.style.getPropertyValue('color');
+    const computedStyle = window.getComputedStyle(mark);
 
-    if (textColor && textColor !== 'transparent') {
-      return { value: textColor, mode: 'color' };
-    }
+    const resolveColor = (prop: string): string | null => {
+      const raw = mark.style.getPropertyValue(prop);
 
-    const bgColor = mark.style.getPropertyValue('background-color');
+      if (!raw || raw === 'transparent') {
+        return null;
+      }
 
-    if (bgColor && bgColor !== 'transparent') {
-      return { value: bgColor, mode: 'background-color' };
-    }
+      const computed = computedStyle.getPropertyValue(prop);
 
-    return null;
+      return computed && computed !== 'transparent' ? computed : null;
+    };
+
+    return {
+      text: resolveColor('color'),
+      bg: resolveColor('background-color'),
+    };
   }
 
   /**
@@ -745,4 +871,21 @@ export class MarkerInlineTool implements InlineTool {
       mark.style.setProperty('background-color', 'transparent');
     }
   }
+
+  /**
+   * Translate a raw hex color value to its CSS custom property equivalent.
+   * If the value is already a CSS var or cannot be mapped, returns it unchanged.
+   * @param value - CSS color value from the picker
+   * @param mode - 'color' or 'background-color'
+   */
+  private resolveToVar(value: string, mode: ColorMode): string {
+    if (value.startsWith('var(')) {
+      return value;
+    }
+
+    const presetMode = mode === 'color' ? 'text' : 'bg';
+    const name = mapToNearestPresetName(value, presetMode);
+
+    return name !== null ? colorVarName(name, presetMode) : value;
+  }
 }

package/src/components/inline-tools/utils/formatting-range-utils.ts

@@ -27,8 +27,17 @@ const nodeIntersectsRange = (range: Range, node: Node): boolean => {
  * @param range - The range to iterate within
  */
 export const createRangeTextWalker = (range: Range): TreeWalker => {
+  // When commonAncestorContainer is a text node, it has no descendants —
+  // the TreeWalker would find nothing. Use the parent element as root so
+  // the text node itself is reachable as a child. The nodeIntersectsRange
+  // filter still restricts results to nodes within the range.
+  const container = range.commonAncestorContainer;
+  const root = container.nodeType === Node.TEXT_NODE
+    ? (container.parentNode ?? container)
+    : container;
+
   return document.createTreeWalker(
-    range.commonAncestorContainer,
+    root,
     NodeFilter.SHOW_TEXT,
     {
       acceptNode: (node) => {

package/src/components/modules/blockManager/blockManager.ts

@@ -922,9 +922,9 @@ export class BlockManager extends Module {
   /**
    * Move a block to a new index
    */
-  public move(toIndex: number, fromIndex: number = this.currentBlockIndex, skipDOM = false): void {
+  public move(toIndex: number, fromIndex: number = this.currentBlockIndex, skipDOM = false, skipMovedHook = false): void {
     this._currentBlockIndex = this.operations.currentBlockIndexValue;
-    this.operations.move(toIndex, fromIndex, skipDOM, this.blocksStore);
+    this.operations.move(toIndex, fromIndex, skipDOM, this.blocksStore, skipMovedHook);
     this._currentBlockIndex = this.operations.currentBlockIndexValue;
   }
 

package/src/components/modules/blockManager/operations.ts

@@ -613,7 +613,7 @@ export class BlockOperations {
    * @param skipDOM - If true, do not manipulate DOM
    * @param blocksStore - The blocks store to modify
    */
-  public move(toIndex: number, fromIndex: number, skipDOM: boolean, blocksStore: BlocksStore): void {
+  public move(toIndex: number, fromIndex: number, skipDOM: boolean, blocksStore: BlocksStore, skipMovedHook = false): void {
     // Make sure indexes are valid and within a valid range
     if (isNaN(toIndex) || isNaN(fromIndex)) {
       log(`Warning during 'move' call: incorrect indices provided.`, 'warn');
@@ -642,7 +642,7 @@ export class BlockOperations {
     this.suppressStopCapturing = true;
     try {
       /** Move up current Block */
-      blocksStore.move(toIndex, fromIndex, skipDOM);
+      blocksStore.move(toIndex, fromIndex, skipDOM, skipMovedHook);
 
       /**
        * After the move, the moved block may be at a different index than toIndex

package/src/components/modules/blockManager/repository.ts

@@ -117,21 +117,13 @@ export class BlockRepository {
       return undefined;
     }
 
-    const nodes = this.blocksStore.nodes;
-
     const firstLevelBlock = normalizedElement.closest(createSelector(DATA_ATTR.element));
 
     if (!firstLevelBlock) {
       return undefined;
     }
 
-    const index = nodes.indexOf(firstLevelBlock as HTMLElement);
-
-    if (index >= 0) {
-      return this.blocksStore[index];
-    }
-
-    return undefined;
+    return this.blocks.find((block) => block.holder === firstLevelBlock);
   }
 
   /**

package/src/components/modules/blockManager/types.ts

@@ -109,5 +109,5 @@ export type BlocksStore = Blocks & {
   [index: number]: Block | undefined;
   insert(index: number, block: Block, replace?: boolean, appendToWorkingArea?: boolean): void;
   remove(index: number): void;
-  move(toIndex: number, fromIndex: number, skipDOM?: boolean): void;
+  move(toIndex: number, fromIndex: number, skipDOM?: boolean, skipMovedHook?: boolean): void;
 };

package/src/components/modules/drag/operations/DragOperations.ts

@@ -2,6 +2,7 @@
  * DragOperations - Handles move and duplicate operations for drag and drop
  */
 
+import { BlockToolAPI } from '../../../block';
 import type { Block } from '../../../block';
 
 export interface SavedBlockData {
@@ -22,7 +23,7 @@ export interface DuplicateResult {
 export interface BlockManagerAdapter {
   getBlockIndex(block: Block): number;
   getBlockByIndex(index: number): Block | undefined;
-  move(toIndex: number, fromIndex: number, needToFocus: boolean): void;
+  move(toIndex: number, fromIndex: number, needToFocus: boolean, skipMovedHook?: boolean): void;
   insert(config: {
     tool: string;
     data: Record<string, unknown>;
@@ -269,25 +270,55 @@ export class DragOperations {
 
   /**
    * Moves blocks down (to a higher index)
+   *
+   * Blocks are processed in reverse order so each lands at its exact final position
+   * without index-shifting side-effects. The `moved()` lifecycle hook is suppressed
+   * during the loop because depth-validators in list items read neighbour depths from
+   * the DOM — in intermediate states those neighbours haven't arrived yet, causing
+   * depths to be incorrectly capped. After all blocks are in place the hooks are
+   * re-triggered in document order (parent → children) so each block sees correct
+   * neighbours when it validates.
    */
   private moveBlocksDown(sortedBlocks: Block[], insertIndex: number): void {
-    // When moving down, start with insertIndex - 1 and decrement for each block
-    // This ensures blocks maintain their relative order
+    const originalIndices = new Map<Block, number>();
+
+    sortedBlocks.forEach(block => {
+      originalIndices.set(block, this.blockManager.getBlockIndex(block));
+    });
+
     const reversedBlocks = [...sortedBlocks].reverse();
 
     reversedBlocks.forEach((block, index) => {
       const currentIndex = this.blockManager.getBlockIndex(block);
       const targetPosition = insertIndex - 1 - index;
 
-      this.blockManager.move(targetPosition, currentIndex, false);
+      this.blockManager.move(targetPosition, currentIndex, false, true);
+    });
+
+    sortedBlocks.forEach(block => {
+      block.call(BlockToolAPI.MOVED, {
+        fromIndex: originalIndices.get(block) ?? 0,
+        toIndex: this.blockManager.getBlockIndex(block),
+        isGroupMove: true,
+      });
     });
   }
 
   /**
    * Moves blocks up (to a lower index)
+   *
+   * Forward order is used so parent blocks arrive at their target before children,
+   * giving depth-validators the correct predecessor. The `moved()` hook is still
+   * suppressed during the loop and re-triggered afterward for symmetry with
+   * `moveBlocksDown` and to guard against any edge-cases in future reordering.
    */
   private moveBlocksUp(sortedBlocks: Block[], baseInsertIndex: number): void {
-    // Track how many blocks we've inserted to adjust the target index
+    const originalIndices = new Map<Block, number>();
+
+    sortedBlocks.forEach(block => {
+      originalIndices.set(block, this.blockManager.getBlockIndex(block));
+    });
+
     sortedBlocks.forEach((block, index) => {
       const currentIndex = this.blockManager.getBlockIndex(block);
       const targetIndex = baseInsertIndex + index;
@@ -296,7 +327,15 @@ export class DragOperations {
         return;
       }
 
-      this.blockManager.move(targetIndex, currentIndex, false);
+      this.blockManager.move(targetIndex, currentIndex, false, true);
+    });
+
+    sortedBlocks.forEach(block => {
+      block.call(BlockToolAPI.MOVED, {
+        fromIndex: originalIndices.get(block) ?? 0,
+        toIndex: this.blockManager.getBlockIndex(block),
+        isGroupMove: true,
+      });
     });
   }
 }

package/src/components/modules/paste/google-docs-preprocessor.ts

@@ -84,6 +84,42 @@ function isDefaultBlack(color: string): boolean {
   return normalized === 'rgb(0,0,0)' || normalized === '#000000';
 }
 
+/**
+ * Compute the relative luminance of a CSS color value (rgb() or hex format).
+ * Returns a value in [0, 1], or -1 if the format is unrecognized.
+ * Uses simplified linear luminance (no gamma correction), adequate for
+ * threshold comparisons at this scale.
+ */
+function computeRelativeLuminance(color: string): number {
+  const normalized = color.replace(/\s/g, '').toLowerCase();
+
+  const rgbMatch = /^rgb\((\d+),(\d+),(\d+)\)$/.exec(normalized);
+
+  if (rgbMatch) {
+    const r = parseInt(rgbMatch[1], 10) / 255;
+    const g = parseInt(rgbMatch[2], 10) / 255;
+    const b = parseInt(rgbMatch[3], 10) / 255;
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+
+  const hexMatch = /^#([0-9a-f]{6}|[0-9a-f]{3})$/.exec(normalized);
+
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    const expand = hex.length === 3
+      ? [hex[0] + hex[0], hex[1] + hex[1], hex[2] + hex[2]]
+      : [hex.substring(0, 2), hex.substring(2, 4), hex.substring(4, 6)];
+    const r = parseInt(expand[0], 16) / 255;
+    const g = parseInt(expand[1], 16) / 255;
+    const b = parseInt(expand[2], 16) / 255;
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  }
+
+  return -1;
+}
+
 /**
  * Check whether a CSS background-color value is the default white page background.
  * When the browser natively copies from a contenteditable, it adds computed styles
@@ -96,6 +132,35 @@ function isDefaultWhiteBackground(bgColor: string): boolean {
   return normalized === 'rgb(255,255,255)' || normalized === '#ffffff' || normalized === 'white';
 }
 
+/**
+ * Check whether a CSS background-color value is a near-black (dark mode page) background.
+ * When the browser natively copies from a contenteditable in dark mode, it adds computed
+ * styles including the resolved dark page background (e.g. rgb(25, 25, 24) for Blok's
+ * #191918 dark background). These should not be treated as intentional marker formatting.
+ *
+ * Uses relative luminance < 0.12, which is below all Blok dark background presets
+ * (~18% minimum lightness for #2f2f2f) while catching typical dark page backgrounds.
+ */
+function isDefaultDarkBackground(bgColor: string): boolean {
+  const luminance = computeRelativeLuminance(bgColor);
+
+  return luminance >= 0 && luminance < 0.12;
+}
+
+/**
+ * Check whether a CSS color value is a near-white (dark mode default text) color.
+ * When the browser natively copies from a contenteditable in dark mode, it includes
+ * the resolved light page text color (e.g. rgb(226, 224, 220) for Blok's #e2e0dc
+ * default text). These should not be treated as intentional marker formatting for
+ * non-Google-Docs content.
+ *
+ * Uses relative luminance > 0.75, which is above all Blok text presets while
+ * catching typical dark mode default text colors.
+ */
+function isDefaultLightText(color: string): boolean {
+  return computeRelativeLuminance(color) > 0.75;
+}
+
 /**
  * Optionally wrap innerHTML in a `<mark>` with mapped color styles.
  * Returns the original content unchanged when no color formatting is needed.
@@ -145,10 +210,12 @@ function convertSpanToSemanticHtml(span: Element, isGoogleDocs: boolean): string
   const color = colorMatch?.[1]?.trim();
   const bgColor = bgMatch?.[1]?.trim();
 
-  const hasColor = color !== undefined && !isDefaultBlack(color);
+  const hasColor = isGoogleDocs
+    ? color !== undefined && !isDefaultBlack(color)
+    : color !== undefined && !isDefaultBlack(color) && !isDefaultLightText(color);
   const hasBgColor = isGoogleDocs
     ? bgColor !== undefined && bgColor !== 'transparent'
-    : bgColor !== undefined && bgColor !== 'transparent' && !isDefaultWhiteBackground(bgColor);
+    : bgColor !== undefined && bgColor !== 'transparent' && !isDefaultWhiteBackground(bgColor) && !isDefaultDarkBackground(bgColor);
 
   if (!isBold && !isItalic && !hasColor && !hasBgColor) {
     return null;