@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

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

@@ -191,6 +191,7 @@ export class BlockOperations {
       replace = false,
       tunes,
       skipYjsSync = false,
+      appendToWorkingArea = false,
     } = options;
 
     const targetIndex = index ?? this.currentBlockIndex + (replace ? 0 : 1);
@@ -235,7 +236,7 @@ export class BlockOperations {
       });
     }
 
-    blocksStore.insert(targetIndex, block, replace);
+    blocksStore.insert(targetIndex, block, replace, appendToWorkingArea);
 
     /**
      * Force call of didMutated event on Block insertion
@@ -298,7 +299,7 @@ export class BlockOperations {
   public insertAtEnd(blocksStore: BlocksStore): Block {
     this.currentBlockIndexValue = this.repository.length - 1;
 
-    return this.insert({}, blocksStore);
+    return this.insert({ appendToWorkingArea: true }, blocksStore);
   }
 
   /**

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

@@ -48,6 +48,8 @@ export interface InsertBlockOptions {
   tunes?: { [name: string]: BlockTuneData };
   /** Skip syncing to Yjs (caller handles sync separately) */
   skipYjsSync?: boolean;
+  /** When true, append block to workingArea instead of positioning relative to adjacent blocks */
+  appendToWorkingArea?: boolean;
 }
 
 /**
@@ -105,7 +107,7 @@ export interface ConvertBlockOptions {
  */
 export type BlocksStore = Blocks & {
   [index: number]: Block | undefined;
-  insert(index: number, block: Block, replace?: boolean): void;
+  insert(index: number, block: Block, replace?: boolean, appendToWorkingArea?: boolean): void;
   remove(index: number): void;
   move(toIndex: number, fromIndex: number, skipDOM?: boolean): void;
 };

package/src/components/modules/blockManager/yjs-sync.ts

@@ -43,6 +43,10 @@ export interface SyncHandlers {
   updateIndentation: (block: Block) => void;
   /** Called to replace a block at a specific index with a new block instance */
   replaceBlock: (index: number, newBlock: Block) => void;
+  /** Called when a block is removed during undo/redo (before DOM removal) */
+  onBlockRemoved: (block: Block, index: number) => void;
+  /** Called when a block is added during undo/redo (after insertion) */
+  onBlockAdded: (block: Block, index: number) => void;
 }
 
 /**
@@ -273,10 +277,12 @@ export class BlockYjsSync {
         bindEventsImmediately: true,
       });
 
-      // Insert into blocks store at correct position - caller must handle this
-      // This is a limitation - we need the blocksStore.insert method
       this.blocksStore.insert(targetIndex, block);
 
+      // Emit block-added event so listeners (e.g., TableCellBlocks) can
+      // claim the block for the correct cell during undo/redo
+      this.handlers.onBlockAdded(block, targetIndex);
+
       // Apply indentation if needed
       if (parentId !== undefined) {
         this.handlers.updateIndentation(block);
@@ -300,6 +306,10 @@ export class BlockYjsSync {
       return;
     }
 
+    // Emit block-removed event BEFORE removal so listeners can inspect
+    // the block's DOM position (e.g., which table cell it's in)
+    this.handlers.onBlockRemoved(block, index);
+
     // Remove from DOM
     this.blocksStore.remove(index);
 

package/src/components/modules/index.ts

@@ -1,6 +1,7 @@
 import { BlocksAPI } from './api/blocks';
 import { CaretAPI } from './api/caret';
 import { EventsAPI } from './api/events';
+import { HistoryAPI } from './api/history';
 import { I18nAPI } from './api/i18n';
 import { API } from './api/index';
 import { InlineToolbarAPI } from './api/inlineToolbar';
@@ -44,6 +45,7 @@ export {
   BlocksAPI,
   CaretAPI,
   EventsAPI,
+  HistoryAPI,
   I18nAPI,
   API,
   InlineToolbarAPI,
@@ -91,6 +93,7 @@ export const Modules = {
   BlocksAPI,
   CaretAPI,
   EventsAPI,
+  HistoryAPI,
   I18nAPI,
   API,
   InlineToolbarAPI,

package/src/components/modules/normalizeInlineImages.ts

@@ -0,0 +1,263 @@
+import { generateBlockId } from '../utils/id-generator';
+
+/**
+ * Minimal block shape expected by the normalizer.
+ * Matches the SaverValidatedData shape from the saver pipeline.
+ */
+interface NormalizableBlock {
+  id?: string;
+  tool?: string;
+  data?: Record<string, unknown>;
+  isValid: boolean;
+  parentId?: string | null;
+  contentIds?: string[];
+  tunes?: Record<string, unknown>;
+  time?: number;
+}
+
+/**
+ * Shape of a table cell within the table's content data.
+ */
+interface TableCell {
+  blocks: string[];
+}
+
+/**
+ * Tracking info for a paragraph whose inline images need extraction.
+ */
+interface ExtractionInfo {
+  parentTableId: string;
+  imgSrcs: string[];
+  cleanedText: string;
+}
+
+/**
+ * Regex to match <img> tags and capture their src attribute.
+ * Handles both single and double quotes around src value.
+ */
+const IMG_TAG_REGEX = /<img\s+[^>]*src=["']([^"']+)["'][^>]*>/g;
+
+/**
+ * Normalizes inline images in table cell paragraphs by extracting `<img>` tags
+ * into standalone image blocks.
+ *
+ * For each paragraph block whose parent is a table:
+ * 1. Extracts all `<img>` tags from the paragraph's text
+ * 2. Creates a new image block for each extracted `<img>`
+ * 3. Removes the `<img>` tags from the paragraph text
+ * 4. Inserts the new image block IDs before the paragraph in the table cell's blocks array
+ * 5. Adds the new image block IDs to the table's contentIds
+ *
+ * @param blocks - array of saved block data
+ * @returns new array with inline images extracted into standalone blocks
+ */
+export const normalizeInlineImages = <T extends NormalizableBlock>(blocks: T[]): T[] => {
+  /**
+   * Build a lookup of block id → block for quick parent resolution.
+   */
+  const blockById = new Map<string, T>();
+
+  for (const block of blocks) {
+    if (block.id !== undefined) {
+      blockById.set(block.id, block);
+    }
+  }
+
+  /**
+   * Check if there are any table blocks at all. If not, return input unchanged.
+   */
+  const hasTable = blocks.some((b) => b.tool === 'table');
+
+  if (!hasTable) {
+    return blocks;
+  }
+
+  const extractionMap = new Map<string, ExtractionInfo>();
+
+  for (const block of blocks) {
+    if (block.tool !== 'paragraph' || block.parentId === undefined || block.parentId === null) {
+      continue;
+    }
+
+    const parent = blockById.get(block.parentId);
+
+    if (parent === undefined || parent.tool !== 'table') {
+      continue;
+    }
+
+    const text = block.data?.text;
+
+    if (typeof text !== 'string') {
+      continue;
+    }
+
+    const imgSrcs = Array.from(text.matchAll(IMG_TAG_REGEX), (m) => m[1]);
+
+    if (imgSrcs.length === 0) {
+      continue;
+    }
+
+    /**
+     * Remove all <img> tags from text.
+     */
+    IMG_TAG_REGEX.lastIndex = 0;
+    const cleanedText = text.replace(IMG_TAG_REGEX, '');
+
+    if (block.id !== undefined) {
+      extractionMap.set(block.id, {
+        parentTableId: block.parentId,
+        imgSrcs,
+        cleanedText,
+      });
+    }
+  }
+
+  /**
+   * If no paragraphs need extraction, return input unchanged.
+   */
+  if (extractionMap.size === 0) {
+    return blocks;
+  }
+
+  /**
+   * Generate image block IDs and build new image blocks.
+   * Maps paragraph id → array of new image block entries.
+   */
+  const newImageBlocksPerParagraph = new Map<string, T[]>();
+
+  for (const [paragraphId, info] of extractionMap) {
+    const imageBlocks: T[] = [];
+
+    for (const src of info.imgSrcs) {
+      const imageBlock = {
+        id: generateBlockId(),
+        tool: 'image',
+        data: { url: src },
+        isValid: true,
+        parentId: info.parentTableId,
+      } as unknown as T;
+
+      imageBlocks.push(imageBlock);
+    }
+
+    newImageBlocksPerParagraph.set(paragraphId, imageBlocks);
+  }
+
+  /**
+   * Clone table blocks and update their content/contentIds with new image block references.
+   */
+  const updatedTableIds = new Set<string>();
+
+  for (const info of extractionMap.values()) {
+    updatedTableIds.add(info.parentTableId);
+  }
+
+  const clonedTables = new Map<string, T>();
+
+  for (const tableId of updatedTableIds) {
+    const original = blockById.get(tableId);
+
+    if (original === undefined) {
+      continue;
+    }
+
+    const cloned = { ...original };
+    const originalData = original.data as { content: TableCell[][] } | undefined;
+
+    if (originalData?.content !== undefined) {
+      /**
+       * Deep clone the content array so we can mutate cell blocks arrays.
+       */
+      const clonedContent: TableCell[][] = originalData.content.map(
+        (row) => row.map((cell) => ({ ...cell, blocks: [...cell.blocks] }))
+      );
+
+      cloned.data = { ...original.data, content: clonedContent };
+    }
+
+    cloned.contentIds = original.contentIds !== undefined ? [...original.contentIds] : [];
+    clonedTables.set(tableId, cloned);
+  }
+
+  /**
+   * Update cloned table cell blocks arrays and contentIds.
+   */
+  for (const [paragraphId, imageBlocks] of newImageBlocksPerParagraph) {
+    const info = extractionMap.get(paragraphId);
+
+    if (info === undefined) {
+      continue;
+    }
+
+    const clonedTable = clonedTables.get(info.parentTableId);
+
+    if (clonedTable === undefined) {
+      continue;
+    }
+
+    const tableData = clonedTable.data as { content: TableCell[][] } | undefined;
+
+    if (tableData?.content === undefined) {
+      continue;
+    }
+
+    const imageBlockIds = imageBlocks.map((b) => b.id ?? '');
+
+    /**
+     * Find the cell containing this paragraph and insert image IDs before the paragraph.
+     */
+    tableData.content.flat().forEach((cell) => {
+      const paragraphIndex = cell.blocks.indexOf(paragraphId);
+
+      if (paragraphIndex !== -1) {
+        cell.blocks.splice(paragraphIndex, 0, ...imageBlockIds);
+      }
+    });
+
+    /**
+     * Add image block IDs to the table's contentIds.
+     */
+    if (clonedTable.contentIds !== undefined) {
+      clonedTable.contentIds.push(...imageBlockIds);
+    }
+  }
+
+  /**
+   * Build the result array:
+   * - Replace table blocks with cloned versions
+   * - Replace paragraph blocks with cleaned text versions
+   * - Insert image blocks before their source paragraph
+   */
+  const result: T[] = [];
+
+  for (const block of blocks) {
+    /**
+     * If this is a table that was updated, use the cloned version.
+     */
+    if (block.id !== undefined && clonedTables.has(block.id)) {
+      result.push(clonedTables.get(block.id) as T);
+      continue;
+    }
+
+    /**
+     * If this is a paragraph with images to extract, insert image blocks before it
+     * and update its text.
+     */
+    if (block.id !== undefined && extractionMap.has(block.id)) {
+      result.push(...(newImageBlocksPerParagraph.get(block.id) ?? []));
+
+      const info = extractionMap.get(block.id);
+      const updatedParagraph = {
+        ...block,
+        data: { ...block.data, text: info?.cleanedText ?? '' },
+      };
+
+      result.push(updatedParagraph);
+      continue;
+    }
+
+    result.push(block);
+  }
+
+  return result;
+};

package/src/components/modules/readonly.ts

@@ -125,6 +125,17 @@ export class ReadOnly extends Module {
     return this.readOnlyEnabled;
   }
 
+  /**
+   * Set read-only mode to the specified boolean state
+   * Unlike toggle(), this method requires a parameter and does not have default toggle behavior
+   * Call all Modules `toggleReadOnly` method and re-render Blok
+   * @param state - read-only state to set (required)
+   * @returns the new read-only state
+   */
+  public async set(state: boolean): Promise<boolean> {
+    return this.toggle(state);
+  }
+
   /**
    * Throws an error about tools which don't support read-only mode
    */

package/src/components/modules/rectangleSelection.ts

@@ -140,11 +140,14 @@ export class RectangleSelection extends Module {
     const pointerX = pageX - scrollLeft;
 
     /**
-     * Check if pointer is within editor's horizontal bounds.
+     * Check if pointer is within the content area's horizontal bounds.
      * This determines whether we should close the toolbar when starting selection.
-     * Clicks outside the horizontal bounds (to the left or right) should NOT close the toolbar.
+     * Clicks outside the content area (to the left or right, in the margin/toolbar zone)
+     * should NOT close the toolbar. Uses UI.contentRect which queries the first block's
+     * content element and caches the result.
      */
-    const withinEditorHorizontally = pointerX >= editorRect.left && pointerX <= editorRect.right;
+    const contentRect = this.Blok.UI.contentRect;
+    const withinEditorHorizontally = pointerX >= contentRect.left && pointerX <= contentRect.right;
 
     const elemWhereSelectionStart = document.elementFromPoint(pageX - scrollLeft, pointerY);
 
@@ -224,6 +227,19 @@ export class RectangleSelection extends Module {
     this.isRectSelectionActivated = false;
   }
 
+  /**
+   * Cancel active rectangle selection.
+   * Used when another selection system (e.g., table cell selection) takes priority.
+   */
+  public cancelActiveSelection(): void {
+    if (!this.mousedown && !this.isRectSelectionActivated) {
+      return;
+    }
+
+    this.clearSelection();
+    this.endSelection();
+  }
+
   /**
    * Sets Module necessary event handlers
    */

package/src/components/modules/saver.ts

@@ -12,6 +12,7 @@ import type { Block } from '../block';
 import { getBlokVersion, isEmpty, isObject, log, logLabeled } from '../utils';
 import { collapseToLegacy, shouldCollapseToLegacy } from '../utils/data-model-transform';
 import { sanitizeBlocks } from '../utils/sanitizer';
+import { normalizeInlineImages } from './normalizeInlineImages';
 
 type SaverValidatedData = ValidatedData & {
   tunes?: Record<string, BlockTuneData>;
@@ -75,7 +76,9 @@ export class Saver extends Module {
         this.config.sanitizer as SanitizerConfig
       );
 
-      return this.makeOutput(sanitizedData);
+      const normalizedData = normalizeInlineImages(sanitizedData);
+
+      return this.makeOutput(normalizedData);
     } catch (error: unknown) {
       this.lastSaveError = error;
 
@@ -125,7 +128,9 @@ export class Saver extends Module {
     const extractedBlocks: OutputData['blocks'] = [];
 
     allExtractedData.forEach(({ id, tool, data, tunes, isValid, parentId, contentIds }) => {
-      if (!isValid) {
+      const hasParent = parentId !== undefined && parentId !== null;
+
+      if (!isValid && !hasParent) {
         log(`Block «${tool}» skipped because saved data is invalid`);
 
         return;
@@ -151,7 +156,6 @@ export class Saver extends Module {
       }
 
       const isTunesEmpty = tunes === undefined || isEmpty(tunes);
-      const hasParent = parentId !== undefined && parentId !== null;
       const hasContent = contentIds !== undefined && contentIds.length > 0;
 
       const output: OutputData['blocks'][number] = {

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

@@ -5,7 +5,7 @@ import { BlockAPI } from '../../block/api';
 import { Dom as $ } from '../../dom';
 import { BlockSettingsClosed, BlockSettingsOpened, BlokMobileLayoutToggled } from '../../events';
 import { Flipper } from '../../flipper';
-import { IconReplace, IconCross } from '../../icons';
+import { IconReplace, IconTrash } from '../../icons';
 import { SelectionUtils } from '../../selection/index';
 import type { BlockToolAdapter } from '../../tools/block';
 import { isMobileScreen, keyCodes } from '../../utils';
@@ -187,7 +187,6 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
       trigger: trigger || this.nodes.wrapper,
       items: await this.getTunesItems(block, commonTunes, toolTunes),
       scopeElement: this.Blok.API.methods.ui.nodes.redactor,
-      width: 'auto',
       messages: {
         nothingFound: this.Blok.I18n.t('popover.nothingFound'),
         search: this.Blok.I18n.t('popover.search'),
@@ -375,9 +374,10 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
       items.push(...commonTunes);
     } else {
       items.push({
-        icon: IconCross,
+        icon: IconTrash,
         title: this.Blok.I18n.t('blockSettings.delete'),
         name: 'delete',
+        isDestructive: true,
         closeOnActivate: true,
         onActivate: () => {
           const { BlockManager, Caret, Toolbar } = this.Blok;

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

@@ -85,6 +85,13 @@ export class Toolbar extends Module<ToolbarNodes> {
    */
   private explicitlyClosed: boolean = false;
 
+  /**
+   * Flag to track if the current hovered block was resolved from a table cell block.
+   * When true, the toolbar suppresses plus button, settings toggler, and
+   * prevents overriding the current block when the toolbox opens.
+   */
+  private hoveredBlockIsFromTableCell: boolean = false;
+
   /**
    * Toolbox class instance
    * It will be created in requestIdleCallback so it can be null in some period of time
@@ -215,8 +222,10 @@ export class Toolbar extends Module<ToolbarNodes> {
 
         /**
          * Set current block to cover the case when the Toolbar showed near hovered Block but caret is set to another Block.
+         * Skip this when the hovered block was resolved from a table cell, so the toolbox
+         * can detect the original cell block and hide restricted tools (e.g., table, header).
          */
-        if (this.hoveredBlock) {
+        if (this.hoveredBlock && !this.hoveredBlockIsFromTableCell) {
           this.Blok.BlockManager.currentBlock = this.hoveredBlock;
         }
 
@@ -320,21 +329,20 @@ export class Toolbar extends Module<ToolbarNodes> {
     /**
      * If no one Block selected as a Current
      */
-    const targetBlock = block ?? this.Blok.BlockManager.currentBlock;
+    const unresolvedBlock = block ?? this.Blok.BlockManager.currentBlock;
 
-    if (!targetBlock) {
+    if (!unresolvedBlock) {
       return;
     }
 
     /**
-     * Don't show toolbar for blocks inside table cells.
-     * Uses the DOM attribute directly to avoid cross-module dependency on the table tool.
+     * Track whether the original block is inside a table cell.
+     * Check the DOM directly rather than relying on resolution success,
+     * so that the flag is correct even when resolution falls back to the original block.
      */
-    if (targetBlock.holder.closest('[data-blok-table-cell-blocks]')) {
-      this.close();
+    this.hoveredBlockIsFromTableCell = unresolvedBlock.holder.closest('[data-blok-table-cell-blocks]') !== null;
 
-      return;
-    }
+    const targetBlock = this.resolveTableCellBlock(unresolvedBlock);
 
     /** Clean up draggable on previous block if any */
     if (this.hoveredBlock && this.hoveredBlock !== targetBlock) {
@@ -353,6 +361,19 @@ export class Toolbar extends Module<ToolbarNodes> {
       return;
     }
 
+    /**
+     * Suppress toolbar buttons when the block is inside a table cell.
+     * The toolbar still positions itself for toolbox/slash-search purposes,
+     * but plus button and settings toggler remain hidden.
+     */
+    const displayValue = this.hoveredBlockIsFromTableCell ? 'none' : '';
+
+    plusButton.style.display = displayValue;
+
+    if (settingsToggler) {
+      settingsToggler.style.display = displayValue;
+    }
+
     const targetBlockHolder = targetBlock.holder;
     const { isMobile } = this.Blok.UI;
 
@@ -458,12 +479,22 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.positioner.setHoveredTarget(null); // No target for multi-block selection
     this.positioner.resetCachedPosition(); // Reset cached position when moving to a new block
 
-    const { wrapper, plusButton } = this.nodes;
+    const { wrapper, plusButton, settingsToggler } = this.nodes;
 
     if (!wrapper || !plusButton) {
       return;
     }
 
+    /**
+     * Restore plus button and settings toggler visibility for multi-block selection,
+     * in case they were hidden for table cell blocks.
+     */
+    plusButton.style.display = '';
+
+    if (settingsToggler) {
+      settingsToggler.style.display = '';
+    }
+
     const targetBlockHolder = targetBlock.holder;
 
     const toolbarY = this.positioner.calculateToolbarY(
@@ -478,9 +509,6 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.positioner.moveToY(this.nodes, toolbarY);
     targetBlockHolder.appendChild(wrapper);
 
-    /** Set up draggable on the target block using the settings toggler as drag handle */
-    const { settingsToggler } = this.nodes;
-
     if (settingsToggler && !this.Blok.ReadOnly.isEnabled) {
       targetBlock.setupDraggable(settingsToggler, this.Blok.DragManager);
     }
@@ -523,18 +551,24 @@ export class Toolbar extends Module<ToolbarNodes> {
      * to prevent toolbar from reopening on subsequent block-hovered events
      */
     this.hoveredBlock = null;
+    this.hoveredBlockIsFromTableCell = false;
     // Only set explicitlyClosed if not explicitly disabled (e.g., when called from toolbox after block insertion)
     if (options?.setExplicitlyClosed !== false) {
       this.explicitlyClosed = true;
     }
 
     /**
-     * Restore plus button visibility in case it was hidden by other interactions
+     * Restore plus button and settings toggler visibility
+     * in case they were hidden for table cell blocks
      */
     if (this.nodes.plusButton) {
       this.nodes.plusButton.style.display = '';
     }
 
+    if (this.nodes.settingsToggler) {
+      this.nodes.settingsToggler.style.display = '';
+    }
+
     /**
      * Reset the content offset transform
      */
@@ -562,6 +596,30 @@ export class Toolbar extends Module<ToolbarNodes> {
     this.explicitlyClosed = false;
   }
 
+  /**
+   * If the block is inside a table cell, resolve to the parent table block.
+   * This ensures the toolbar shows for the table when clicking/focusing inside cells.
+   * Uses the DOM attribute directly to avoid cross-module dependency on the table tool.
+   *
+   * @param block - the block to resolve
+   * @returns the parent table block if inside a cell, the original block otherwise
+   */
+  private resolveTableCellBlock(block: Block): Block {
+    const cellBlocksContainer = block.holder.closest('[data-blok-table-cell-blocks]');
+
+    if (!cellBlocksContainer) {
+      return block;
+    }
+
+    const tableBlockHolder = cellBlocksContainer.closest('[data-blok-testid="block-wrapper"]');
+
+    if (!tableBlockHolder) {
+      return block;
+    }
+
+    return this.Blok.BlockManager.getBlockByChildNode(tableBlockHolder) ?? block;
+  }
+
   /**
    * Reset the Toolbar position to prevent DOM height growth, for example after blocks deletion
    */