@jackuait/blok 0.7.3-beta.4 → 0.8.0

package/src/components/modules/paste/handlers/blok-data-handler.ts

@@ -127,9 +127,19 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
   }
 
   /**
-   * Insert Blok JSON blocks.
-   * After inserting all blocks, restores parent-child hierarchy using an ID mapping
-   * (pasted blocks receive new IDs, so original IDs are mapped to new block instances).
+   * Insert Blok JSON blocks using a two-pass approach:
+   *
+   * Pass 1 — child blocks (those whose parentId is within the pasted set) are
+   * inserted first.  They receive new IDs, which are recorded in a map.
+   *
+   * Pass 2 — root/container blocks (e.g. tables) are inserted with their data
+   * remapped so that any old child-block ID references are replaced by the new
+   * IDs from Pass 1.  This prevents container tools (TableCellBlocks) from
+   * resolving old IDs that still exist in the editor and stealing blocks from
+   * the original table.
+   *
+   * After both passes the parent-child hierarchy is re-established using the
+   * accumulated old→new ID mapping.
    */
   private insertBlokBlocks(
     blocks: BlokClipboardBlock[],
@@ -142,31 +152,70 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
       this.config.sanitizer
     );
 
+    // Capture replace intent before any insertions move the current block pointer.
+    const shouldReplaceFirst =
+      canReplace &&
+      Boolean(BlockManager.currentBlock?.tool.isDefault) &&
+      Boolean(BlockManager.currentBlock?.isEmpty);
+
+    // Set of old IDs present in this paste, used to identify parent-child pairs.
+    const pastedOldIds = new Set(blocks.map(b => b.id));
+
+    type Entry = { sanitized: (typeof sanitizedBlocks)[number]; original: BlokClipboardBlock };
+    const children: Entry[] = [];
+    const roots: Entry[] = [];
+
+    sanitizedBlocks.forEach((sanitizedBlock, i) => {
+      const original = blocks[i];
+
+      if (original === undefined) {
+        return;
+      }
+
+      const isChild =
+        original.parentId !== undefined &&
+        original.parentId !== null &&
+        pastedOldIds.has(original.parentId);
+
+      (isChild ? children : roots).push({ sanitized: sanitizedBlock, original });
+    });
+
     /**
      * Map from original (old) block ID to the newly inserted Block instance.
-     * Used after insertion to re-establish parent-child relationships.
+     * Used to remap data and restore hierarchy after both passes.
      */
     const oldIdToEntry = new Map<string, { newBlock: Block; original: BlokClipboardBlock }>();
 
-    sanitizedBlocks.forEach((sanitizedBlock, i) => {
-      const { tool, data } = sanitizedBlock;
-      const needToReplaceCurrentBlock = i === 0 &&
-        canReplace &&
-        Boolean(BlockManager.currentBlock?.tool.isDefault) &&
-        Boolean(BlockManager.currentBlock?.isEmpty);
+    // Pass 1: insert children first so they exist with new IDs before the parent.
+    children.forEach(({ sanitized, original }) => {
+      const block = BlockManager.insert({ tool: sanitized.tool, data: sanitized.data });
 
-      const block = BlockManager.insert({
-        tool,
-        data,
-        replace: needToReplaceCurrentBlock,
-      });
+      oldIdToEntry.set(original.id, { newBlock: block, original });
+      Caret.setToBlock(block, Caret.positions.END);
+    });
 
-      const originalBlock = blocks[i];
+    // Build old→new string map for remapping ID references inside parent data.
+    const oldIdToNewId = new Map<string, string>();
 
-      if (originalBlock !== undefined) {
-        oldIdToEntry.set(originalBlock.id, { newBlock: block, original: originalBlock });
-      }
+    for (const [oldId, { newBlock }] of oldIdToEntry) {
+      oldIdToNewId.set(oldId, newBlock.id);
+    }
 
+    // Pass 2: insert root blocks with child IDs remapped in their data.
+    // Skip replace when children were pre-inserted to avoid replacing a
+    // just-inserted child paragraph rather than the original empty block.
+    roots.forEach(({ sanitized, original }, idx) => {
+      const remappedData = oldIdToNewId.size > 0
+        ? remapIds(sanitized.data, oldIdToNewId) as typeof sanitized.data
+        : sanitized.data;
+
+      const block = BlockManager.insert({
+        tool: sanitized.tool,
+        data: remappedData,
+        replace: idx === 0 && shouldReplaceFirst && children.length === 0,
+      });
+
+      oldIdToEntry.set(original.id, { newBlock: block, original });
       Caret.setToBlock(block, Caret.positions.END);
     });
 
@@ -193,3 +242,31 @@ export class BlokDataHandler extends BasePasteHandler implements PasteHandler {
     }
   }
 }
+
+/**
+ * Recursively walks `value` and replaces any string found as a key in `idMap`
+ * with its mapped value.  Used to remap old block IDs to new IDs within a
+ * tool's data object before insertion, so that container blocks (e.g. tables)
+ * reference the correct newly-inserted child block IDs.
+ */
+function remapIds(value: unknown, idMap: Map<string, string>): unknown {
+  if (typeof value === 'string') {
+    return idMap.get(value) ?? value;
+  }
+
+  if (Array.isArray(value)) {
+    return value.map(item => remapIds(item, idMap));
+  }
+
+  if (value !== null && typeof value === 'object') {
+    const result: Record<string, unknown> = {};
+
+    for (const [k, v] of Object.entries(value as Record<string, unknown>)) {
+      result[k] = remapIds(v, idMap);
+    }
+
+    return result;
+  }
+
+  return value;
+}

package/src/components/modules/rectangleSelection.ts

@@ -65,6 +65,13 @@ export class RectangleSelection extends Module {
    */
   private mousedown = false;
 
+  /**
+   * Set when mousedown starts from a contentEditable element that is within the
+   * editor's horizontal content bounds.  Prevents the toolbar from re-opening via
+   * the BlockHovered event while the user is dragging.  Cleared on mouseup.
+   */
+  private mouseDownWithinBoundsFromContentEditable = false;
+
   /**
    *  Is scrolling now
    */
@@ -213,6 +220,7 @@ export class RectangleSelection extends Module {
    */
   public endSelection(): void {
     this.mousedown = false;
+    this.mouseDownWithinBoundsFromContentEditable = false;
     this.startX = 0;
     this.startY = 0;
     this.anchorBlockIndex = null;
@@ -229,6 +237,18 @@ export class RectangleSelection extends Module {
     return this.isRectSelectionActivated || this.mousedown;
   }
 
+  /**
+   * Returns true when the user pressed down a mouse button within the editor's horizontal
+   * content bounds, even if the click originated on a contentEditable element (in which
+   * case rubber-band selection is not started but the toolbar is still closed).
+   *
+   * Used by the Toolbar module to suppress toolbar reopening while the user is dragging
+   * inside the editor content area.
+   */
+  public get isMouseDownWithinBounds(): boolean {
+    return this.mouseDownWithinBoundsFromContentEditable;
+  }
+
   /**
    * Mark that selection is end
    */
@@ -305,6 +325,24 @@ export class RectangleSelection extends Module {
 
     if (!startedFromContentEditable) {
       this.startSelection(mouseEvent.pageX, mouseEvent.pageY, mouseEvent.shiftKey);
+
+      return;
+    }
+
+    /**
+     * When dragging starts from a contentEditable element, track whether the
+     * pointer is within the editor's horizontal content bounds.
+     * On the first subsequent mousemove (i.e. when the user actually drags rather
+     * than just clicking), the toolbar will be closed and hover-based reopening
+     * will be suppressed while the mouse button is held.
+     */
+    const scrollLeft = this.getScrollLeft();
+    const pointerX = mouseEvent.pageX - scrollLeft;
+    const contentRect = this.Blok.UI.contentRect;
+    const withinEditorHorizontally = pointerX >= contentRect.left && pointerX <= contentRect.right;
+
+    if (withinEditorHorizontally) {
+      this.mouseDownWithinBoundsFromContentEditable = true;
     }
   }
 
@@ -313,6 +351,16 @@ export class RectangleSelection extends Module {
    * @param {MouseEvent} mouseEvent - mouse event payload
    */
   private processMouseMove(mouseEvent: MouseEvent): void {
+    /**
+     * When the user clicked inside a contentEditable element within the editor's
+     * horizontal bounds and is now dragging, close the toolbar on the first move.
+     * We defer this to mousemove (rather than mousedown) so that a plain click
+     * does not accidentally close the toolbar.
+     */
+    if (this.mouseDownWithinBoundsFromContentEditable) {
+      this.Blok.Toolbar.close();
+    }
+
     this.changingRectangle(mouseEvent);
     this.scrollByZones(mouseEvent.clientY);
   }

package/src/components/modules/renderer.ts

@@ -10,6 +10,7 @@ import {
   shouldExpandToHierarchical,
   type DataFormatAnalysis,
 } from '../utils/data-model-transform';
+import { migrateMarkColors } from '../utils/color-migration';
 
 /**
  * Module that responsible for rendering Blocks on blok initialization
@@ -157,6 +158,7 @@ export class Renderer extends Module {
          * Insert batch of Blocks
          */
         BlockManager.insertMany(blocks);
+        migrateMarkColors(this.Blok.UI.nodes.redactor);
       }
 
       /**

package/src/components/modules/toolbar/blockSettings.ts

@@ -396,7 +396,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
         title: this.Blok.I18n.t('popover.convertTo'),
         children: {
           items: convertToItems,
-          width: '200px',
+          minWidth: '200px',
         },
       });
       items.push({

package/src/components/modules/toolbar/index.ts

@@ -140,6 +140,7 @@ export class Toolbar extends Module<ToolbarNodes> {
       {
         getToolboxOpened: () => this.toolbox.opened ?? false,
         openToolbox: () => this.toolbox.open(),
+        openToolboxWithoutSlash: () => this.toolbox.openWithoutSlash(),
         closeToolbox: () => this.toolbox.close(),
         moveAndOpenToolbar: (block, target) => this.moveAndOpen(block, target),
       }
@@ -202,6 +203,7 @@ export class Toolbar extends Module<ToolbarNodes> {
     opened: boolean | undefined; // undefined is for the case when Toolbox is not initialized yet
     close: () => void;
     open: () => void;
+    openWithoutSlash: () => void;
     toggle: () => void;
     hasFocus: () => boolean | undefined;
     } {
@@ -210,6 +212,25 @@ export class Toolbar extends Module<ToolbarNodes> {
       close: () => {
         this.toolboxInstance?.close();
       },
+      openWithoutSlash: () => {
+        if (this.toolboxInstance === null) {
+          log('toolbox.openWithoutSlash() called before initialization is finished', 'warn');
+
+          return;
+        }
+
+        if (this.hoveredBlock && !this.hoveredBlockIsFromTableCell) {
+          const currentBlock = this.Blok.BlockManager.currentBlock;
+          const isCurrentBlockInsideTableCell = currentBlock !== undefined
+            && currentBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
+
+          if (!isCurrentBlockInsideTableCell) {
+            this.Blok.BlockManager.currentBlock = this.hoveredBlock;
+          }
+        }
+
+        this.toolboxInstance.open(false);
+      },
       open: () => {
         /**
          * If Toolbox is not initialized yet, do nothing
@@ -988,9 +1009,12 @@ export class Toolbar extends Module<ToolbarNodes> {
        */
       this.eventsDispatcher.on(BlockHovered, (data) => {
         /**
-         * Do not move toolbar during drag or rectangle selection operations
+         * Do not move toolbar during drag, rectangle selection, or when the user
+         * started a mouse-drag from within the editor's content area (even if the
+         * drag originated on a contentEditable element, i.e. rubber-band is not
+         * activated but the toolbar was closed and should stay closed).
          */
-        if (this.Blok.DragManager.isDragging || this.Blok.RectangleSelection.isRectActivated()) {
+        if (this.Blok.DragManager.isDragging || this.Blok.RectangleSelection.isRectActivated() || this.Blok.RectangleSelection.isMouseDownWithinBounds) {
           return;
         }
 

package/src/components/modules/toolbar/plus-button.ts

@@ -27,10 +27,15 @@ export class PlusButtonHandler {
   private getToolboxOpened: () => boolean;
 
   /**
-   * Callback to open the toolbox
+   * Callback to open the toolbox in slash-search mode
    */
   private openToolbox: () => void;
 
+  /**
+   * Callback to open the toolbox in no-slash mode (used when clicking the plus button)
+   */
+  private openToolboxWithoutSlash: () => void;
+
   /**
    * Callback to close the toolbox
    */
@@ -50,6 +55,7 @@ export class PlusButtonHandler {
     callbacks: {
       getToolboxOpened: () => boolean;
       openToolbox: () => void;
+      openToolboxWithoutSlash: () => void;
       closeToolbox: () => void;
       moveAndOpenToolbar: (block?: Block | null, target?: Element | null) => void;
     }
@@ -57,6 +63,7 @@ export class PlusButtonHandler {
     this.getBlok = getBlok;
     this.getToolboxOpened = callbacks.getToolboxOpened;
     this.openToolbox = callbacks.openToolbox;
+    this.openToolboxWithoutSlash = callbacks.openToolboxWithoutSlash;
     this.closeToolbox = callbacks.closeToolbox;
     this.moveAndOpenToolbar = callbacks.moveAndOpenToolbar;
   }
@@ -196,14 +203,17 @@ export class PlusButtonHandler {
       hoveredBlock?.holder.after(targetBlock.holder);
     }
 
-    // Insert "/" or position caret after existing one
+    // Position caret and open toolbox
     if (startsWithSlash) {
+      // Block already has "/" - keep slash-search mode, position after the slash
       Caret.setToBlock(targetBlock, Caret.positions.DEFAULT, 1);
+      this.moveAndOpenToolbar(targetBlock);
+      this.openToolbox();
     } else {
+      // New empty block - open toolbox directly without inserting "/"
       Caret.setToBlock(targetBlock, Caret.positions.START);
-      Caret.insertContentAtCaretPosition('/');
+      this.moveAndOpenToolbar(targetBlock);
+      this.openToolboxWithoutSlash();
     }
-    this.moveAndOpenToolbar(targetBlock);
-    this.openToolbox();
   }
 }

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

@@ -119,18 +119,17 @@ export class FakeBackgroundManager {
    * Unwraps the highlight spans and restores the selection
    */
   removeFakeBackground(): void {
-    // Always clean up any orphaned fake background elements in the DOM
-    // This handles cleanup after undo/redo operations that may restore fake background elements
-    this.removeOrphanedFakeBackgroundElements();
-
-    if (!this.selectionUtils.isFakeBackgroundEnabled) {
-      return;
+    if (this.selectionUtils.isFakeBackgroundEnabled) {
+      // Remove highlight spans first while they still exist in the DOM,
+      // so that removeHighlightSpans() can reconstruct savedSelectionRange
+      // as a text-node-based range before the spans are gone.
+      this.removeHighlightSpans();
+      this.selectionUtils.isFakeBackgroundEnabled = false;
     }
 
-    // Remove the highlight spans
-    this.removeHighlightSpans();
-
-    this.selectionUtils.isFakeBackgroundEnabled = false;
+    // Clean up any remaining/orphaned fake background elements
+    // (handles undo/redo restoring spans, backwards compat, etc.)
+    this.removeOrphanedFakeBackgroundElements();
   }
 
   /**