@jackuait/blok 0.6.0-beta.8 → 0.6.0

package/src/components/modules/paste/handlers/base.ts

@@ -1,5 +1,8 @@
 import type { PasteEvent, PasteEventDetail } from '../../../../../types';
 import type { BlokModules } from '../../../../types-internal/blok-modules';
+import { getRestrictedTools } from '../../../../tools/table/table-restrictions';
+import { Dom } from '../../../dom';
+import { clean } from '../../../utils/sanitizer';
 import type { SanitizerConfigBuilder } from '../sanitizer-config';
 import type { ToolRegistry } from '../tool-registry';
 import type { HandlerContext, PasteData } from '../types';
@@ -65,6 +68,34 @@ export abstract class BasePasteHandler implements PasteHandler {
     return isCurrentBlockDefault && currentBlock.isEmpty;
   }
 
+  /**
+   * If we're inside a table cell and any pasted item uses a tool that can't
+   * be nested in table cells (e.g. table, header), redirect the insertion
+   * point to the parent table block. This prevents new block DOM elements
+   * from being placed inside the existing table's grid structure, which
+   * would corrupt the table's saved data.
+   */
+  private redirectToTableParentIfNeeded(data: PasteData[], BlockManager: BlokModules['BlockManager']): void {
+    const currentBlock = BlockManager.currentBlock;
+    const isInsideTableCell = currentBlock?.holder?.closest('[data-blok-table-cell-blocks]');
+    const restricted = new Set(getRestrictedTools());
+    const hasRestrictedTools = data.some(item => restricted.has(item.tool));
+
+    if (!isInsideTableCell || !hasRestrictedTools || currentBlock === undefined) {
+      return;
+    }
+
+    const tableBlockHolder = currentBlock.holder
+      .closest('[data-blok-tool="table"]')
+      ?.closest('[data-blok-element]') as HTMLElement | null;
+
+    if (!tableBlockHolder) {
+      return;
+    }
+
+    BlockManager.setCurrentBlockByChildNode(tableBlockHolder);
+  }
+
   /**
    * Insert paste data as blocks.
    */
@@ -82,7 +113,19 @@ export abstract class BasePasteHandler implements PasteHandler {
     const isMultipleItems = data.length > 1;
 
     if (isMultipleItems) {
+      this.redirectToTableParentIfNeeded(data, BlockManager);
+
       for (const [index, pasteData] of data.entries()) {
+        /**
+         * Force each pasted block into its own Yjs undo entry so that
+         * Ctrl+Z removes them one at a time.
+         *
+         * paste() wraps insert() in withAtomicOperation() which suppresses
+         * the normal stopCapturing() from currentBlockIndexValue changes.
+         * Without this, consecutive addBlock() calls within the 500ms
+         * captureTimeout get merged into a single undo entry.
+         */
+        this.Blok.YjsManager.stopCapturing();
         await this.insertBlock(pasteData, index === 0 && canReplaceCurrentBlock);
       }
 
@@ -129,7 +172,6 @@ export abstract class BasePasteHandler implements PasteHandler {
   protected async processSingleBlock(dataToInsert: PasteData, canReplaceCurrentBlock: boolean): Promise<void> {
     const { Caret, BlockManager } = this.Blok;
     const { currentBlock } = BlockManager;
-    const { Dom } = await import('../../../dom');
     const $ = Dom;
 
     if (
@@ -159,7 +201,6 @@ export abstract class BasePasteHandler implements PasteHandler {
       return;
     }
 
-    const { clean } = await import('../../../utils/sanitizer');
     const currentToolSanitizeConfig = currentBlock.tool.baseSanitizeConfig;
 
     Caret.insertContentAtCaretPosition(

package/src/components/modules/paste/handlers/html-handler.ts

@@ -107,7 +107,7 @@ export class HtmlHandler extends BasePasteHandler implements PasteHandler {
         const toolTags = this.buildToolTags(tool);
 
         const structuralSanitizeConfig = this.sanitizerBuilder.getStructuralTagsConfig(content);
-        const customConfig = Object.assign({}, structuralSanitizeConfig, toolTags, tool.baseSanitizeConfig);
+        const customConfig: SanitizerConfig = { ...structuralSanitizeConfig, ...toolTags, ...tool.baseSanitizeConfig, br: {} };
         const sanitizedContent = this.sanitizeContent(content, customConfig);
 
         if (!sanitizedContent) {

package/src/components/modules/paste/handlers/index.ts

@@ -5,4 +5,5 @@ export { BlokDataHandler } from './blok-data-handler';
 export { FilesHandler } from './files-handler';
 export { HtmlHandler } from './html-handler';
 export { PatternHandler } from './pattern-handler';
+export { TableCellsHandler } from './table-cells-handler';
 export { TextHandler } from './text-handler';

package/src/components/modules/paste/handlers/table-cells-handler.ts

@@ -0,0 +1,104 @@
+import type { BlokModules } from '../../../../types-internal/blok-modules';
+import { parseClipboardHtml } from '../../../../tools/table/table-cell-clipboard';
+import type { CellContent, LegacyCellContent } from '../../../../tools/table/types';
+import type { SanitizerConfigBuilder } from '../sanitizer-config';
+import type { ToolRegistry } from '../tool-registry';
+import type { HandlerContext } from '../types';
+
+import type { PasteHandler } from './base';
+import { BasePasteHandler } from './base';
+
+/**
+ * Handles pasting table cell clipboard data outside of a table.
+ * Creates a new Table block with the pasted cell content.
+ * Priority 90: higher than HTML (40) but lower than BlokData (100).
+ */
+export class TableCellsHandler extends BasePasteHandler implements PasteHandler {
+  constructor(
+    Blok: BlokModules,
+    toolRegistry: ToolRegistry,
+    sanitizerBuilder: SanitizerConfigBuilder,
+  ) {
+    super(Blok, toolRegistry, sanitizerBuilder);
+  }
+
+  canHandle(data: unknown): number {
+    if (typeof data !== 'string') {
+      return 0;
+    }
+
+    return parseClipboardHtml(data) !== null ? 90 : 0;
+  }
+
+  async handle(data: unknown, context: HandlerContext): Promise<boolean> {
+    if (typeof data !== 'string') {
+      return false;
+    }
+
+    const payload = parseClipboardHtml(data);
+
+    if (!payload) {
+      return false;
+    }
+
+    // If cursor is inside a table cell, let the grid paste listener handle it
+    const activeElement = document.activeElement as HTMLElement | null;
+
+    if (activeElement?.closest('[data-blok-table-cell]')) {
+      return false;
+    }
+
+    const { BlockManager, Caret } = this.Blok;
+
+    // Build table content from the clipboard payload.
+    // When a cell has color or textColor, use a CellContent object to preserve
+    // the colors — the Table tool will create paragraph blocks during its
+    // rendered() lifecycle. For cells without colors, store plain text strings
+    // which the Table tool migrates to blocks normally.
+    const content: LegacyCellContent[][] = payload.cells.map(row =>
+      row.map(cell => {
+        const text = cell.blocks.length === 0
+          ? ''
+          : cell.blocks
+            .map(b => (typeof b.data.text === 'string' ? b.data.text : ''))
+            .join(' ');
+
+        const hasColor = cell.color !== undefined;
+        const hasTextColor = cell.textColor !== undefined;
+
+        if (!hasColor && !hasTextColor) {
+          return text;
+        }
+
+        const cellContent: CellContent = { blocks: [], text };
+
+        if (hasColor) {
+          cellContent.color = cell.color;
+        }
+
+        if (hasTextColor) {
+          cellContent.textColor = cell.textColor;
+        }
+
+        return cellContent;
+      }),
+    );
+
+    const tableData = {
+      withHeadings: false,
+      withHeadingColumn: false,
+      content,
+    };
+
+    const canReplace = context.canReplaceCurrentBlock;
+    const block = BlockManager.insert({
+      tool: 'table',
+      data: tableData,
+      replace: canReplace,
+    });
+
+    Caret.setToBlock(block, Caret.positions.END);
+
+    return true;
+  }
+}

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

@@ -3,11 +3,13 @@ import { Module } from '../../__module';
 import { Dom as dom$ } from '../../dom';
 import { composeSanitizerConfig, clean } from '../../utils/sanitizer';
 
+import { preprocessGoogleDocsHtml } from './google-docs-preprocessor';
 import type { PasteHandler } from './handlers/base';
 import { BlokDataHandler } from './handlers/blok-data-handler';
 import { FilesHandler } from './handlers/files-handler';
 import { HtmlHandler } from './handlers/html-handler';
 import { PatternHandler } from './handlers/pattern-handler';
+import { TableCellsHandler } from './handlers/table-cells-handler';
 import { TextHandler } from './handlers/text-handler';
 import { SanitizerConfigBuilder } from './sanitizer-config';
 import { ToolRegistry } from './tool-registry';
@@ -44,6 +46,7 @@ export class Paste extends Module {
     // Initialize handlers in priority order (higher priority first)
     this.handlers = [
       new BlokDataHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder, this.config),
+      new TableCellsHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new FilesHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new PatternHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
       new HtmlHandler(this.Blok, this.toolRegistry, this.sanitizerBuilder),
@@ -128,7 +131,8 @@ export class Paste extends Module {
     const canReplaceCurrentBlock = Boolean(
       currentBlock &&
       currentBlock.tool.isDefault &&
-      currentBlock.isEmpty
+      currentBlock.isEmpty &&
+      !currentBlock.holder?.closest('[data-blok-table-cell-blocks]')
     );
 
     const context: HandlerContext = {
@@ -175,6 +179,10 @@ export class Paste extends Module {
       return blokData;
     }
 
+    if (handler instanceof TableCellsHandler) {
+      return rawHtmlData;
+    }
+
     if (handler instanceof FilesHandler) {
       return dataTransfer;
     }
@@ -201,7 +209,8 @@ export class Paste extends Module {
       { br: {} }
     );
 
-    const cleanData = clean(rawHtmlData, customConfig);
+    const preprocessed = preprocessGoogleDocsHtml(rawHtmlData);
+    const cleanData = clean(preprocessed, customConfig);
     const cleanDataIsHtml = dom$.isHTMLString(cleanData);
     const shouldProcessAsPlain = !cleanData.trim() || (cleanData.trim() === plainData || !cleanDataIsHtml);
 
@@ -267,6 +276,14 @@ export class Paste extends Module {
    * Check if Blok should process pasted data and pass data transfer object to handler.
    */
   private handlePasteEvent = async (event: ClipboardEvent): Promise<void> => {
+    /**
+     * If the event was already handled (e.g., by the table grid paste listener),
+     * skip processing to prevent duplicate content insertion.
+     */
+    if (event.defaultPrevented) {
+      return;
+    }
+
     const { BlockManager, Toolbar } = this.Blok;
 
     const currentBlock = BlockManager.setCurrentBlockByChildNode(event.target as HTMLElement);
@@ -288,6 +305,6 @@ export class Paste extends Module {
       await this.processDataTransfer(event.clipboardData);
     }
 
-    Toolbar.close();
+    Toolbar.moveAndOpen();
   };
 }

package/src/components/modules/readonly.ts

@@ -117,8 +117,14 @@ export class ReadOnly extends Module {
       return this.readOnlyEnabled;
     }
 
-    await this.Blok.BlockManager.clear();
-    await this.Blok.Renderer.render(savedBlocks.blocks);
+    this.Blok.Renderer.markRenderStart();
+
+    try {
+      await this.Blok.BlockManager.clear();
+      await this.Blok.Renderer.render(savedBlocks.blocks);
+    } finally {
+      this.Blok.Renderer.markRenderEnd();
+    }
 
     this.Blok.ModificationsObserver.enable();
 

package/src/components/modules/rectangleSelection.ts

@@ -611,9 +611,12 @@ export class RectangleSelection extends Module {
       };
     }
     const blockInCurrentPos = this.Blok.BlockManager.getBlockByChildNode(elementUnderMouse);
+    const rootBlock = blockInCurrentPos !== undefined
+      ? this.Blok.BlockManager.resolveToRootBlock(blockInCurrentPos)
+      : undefined;
 
-    const index = blockInCurrentPos !== undefined
-      ? this.Blok.BlockManager.blocks.findIndex((block) => block.holder === blockInCurrentPos.holder)
+    const index = rootBlock !== undefined
+      ? this.Blok.BlockManager.blocks.findIndex((block) => block.holder === rootBlock.holder)
       : undefined;
 
     return {

package/src/components/modules/renderer.ts

@@ -20,6 +20,41 @@ export class Renderer extends Module {
    */
   private detectedInputFormat: DataFormatAnalysis['format'] = 'flat';
 
+  /**
+   * Promise that resolves when an in-progress render operation completes.
+   * Used by Saver to wait for render to finish before reading blocks.
+   * null when no render is in progress.
+   */
+  public pendingRender: Promise<void> | null = null;
+
+  /**
+   * Resolve function for the current pendingRender promise.
+   * Called when the render operation is done (in finally block).
+   */
+  private resolvePendingRender: (() => void) | null = null;
+
+  /**
+   * Signals that a render operation is starting.
+   * Sets pendingRender so that Saver can await it.
+   */
+  public markRenderStart(): void {
+    this.pendingRender = new Promise<void>((resolve) => {
+      this.resolvePendingRender = resolve;
+    });
+  }
+
+  /**
+   * Signals that a render operation has completed.
+   * Resolves pendingRender so that any waiting Saver call can proceed.
+   */
+  public markRenderEnd(): void {
+    if (this.resolvePendingRender !== null) {
+      this.resolvePendingRender();
+      this.resolvePendingRender = null;
+    }
+    this.pendingRender = null;
+  }
+
   /**
    * Get the detected input format
    */

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>;
@@ -40,10 +41,52 @@ export class Saver extends Module {
   private lastSaveError?: unknown;
 
   /**
-   * Composes new chain of Promises to fire them alternatelly
+   * Stores the in-flight save promise for deduplication.
+   * If a save is already in progress, subsequent calls return the same promise.
+   */
+  private pendingSave: Promise<OutputData | undefined> | null = null;
+
+  /**
+   * Composes new chain of Promises to fire them alternatelly.
+   * Deduplicates concurrent calls — if a save is already in-flight, returns the same promise.
    * @returns {OutputData | undefined}
    */
   public async save(): Promise<OutputData | undefined> {
+    if (this.isDestroyed) {
+      return undefined;
+    }
+
+    if (this.pendingSave !== null) {
+      return this.pendingSave;
+    }
+
+    this.pendingSave = this.doSave();
+
+    try {
+      return await this.pendingSave;
+    } finally {
+      this.pendingSave = null;
+    }
+  }
+
+  /**
+   * Internal save implementation.
+   * Waits for any pending render to complete before reading blocks.
+   * @returns {OutputData | undefined}
+   */
+  private async doSave(): Promise<OutputData | undefined> {
+    // Wait for any in-progress render to complete before reading blocks
+    const pendingRender = this.Blok.Renderer?.pendingRender;
+
+    if (pendingRender !== null && pendingRender !== undefined) {
+      await pendingRender;
+    }
+
+    // Check again after awaiting — editor may have been destroyed during the wait
+    if (this.isDestroyed) {
+      return undefined;
+    }
+
     const { BlockManager, Tools } = this.Blok;
     const blocks = BlockManager.blocks;
 
@@ -75,7 +118,14 @@ export class Saver extends Module {
         this.config.sanitizer as SanitizerConfig
       );
 
-      return this.makeOutput(sanitizedData);
+      const normalizedData = normalizeInlineImages(sanitizedData);
+
+      // Check destruction one more time after async block.save() operations
+      if (this.isDestroyed) {
+        return undefined;
+      }
+
+      return this.makeOutput(normalizedData);
     } catch (error: unknown) {
       this.lastSaveError = error;
 

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

@@ -160,61 +160,69 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
      * Set isOpening flag BEFORE async operations to prevent toolbar from moving
      * while menu items are being created. This fixes a bug where hovering over a different
      * block during async getTunesItems() causes the toolbar to reposition incorrectly.
+     *
+     * Wrapped in try/catch to guarantee isOpening is always reset — if any step
+     * (getTunes, getTunesItems, PopoverClass constructor) throws, without cleanup
+     * the flag stays true and the toolbar permanently stops appearing on hover.
      */
     this.isOpening = true;
 
-    /**
-     * If block settings contains any inputs, focus will be set there,
-     * so we need to save current selection to restore it after block settings is closed
-     */
-    this.selection.save();
+    try {
+      /**
+       * If block settings contains any inputs, focus will be set there,
+       * so we need to save current selection to restore it after block settings is closed
+       */
+      this.selection.save();
 
-    /**
-     * Highlight content of a Block we are working with
-     * For multiple blocks, they should already be selected
-     */
-    if (!hasMultipleBlocksSelected) {
-      this.Blok.BlockSelection.selectBlock(block);
-      this.Blok.BlockSelection.clearCache();
-    }
+      /**
+       * Highlight content of a Block we are working with
+       * For multiple blocks, they should already be selected
+       */
+      if (!hasMultipleBlocksSelected) {
+        this.Blok.BlockSelection.selectBlock(block);
+        this.Blok.BlockSelection.clearCache();
+      }
 
-    /** Get tool's settings data - only relevant for single block selection */
-    const { toolTunes, commonTunes } = block.getTunes();
-
-    const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
-    const popoverParams: PopoverParams & { flipper?: Flipper } = {
-      searchable: false,
-      trigger: trigger || this.nodes.wrapper,
-      items: await this.getTunesItems(block, commonTunes, toolTunes),
-      scopeElement: this.Blok.API.methods.ui.nodes.redactor,
-      messages: {
-        nothingFound: this.Blok.I18n.t('popover.nothingFound'),
-        search: this.Blok.I18n.t('popover.search'),
-      },
-    };
+      /** Get tool's settings data - only relevant for single block selection */
+      const { toolTunes, commonTunes } = block.getTunes();
+
+      const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
+      const popoverParams: PopoverParams & { flipper?: Flipper } = {
+        searchable: false,
+        trigger: trigger || this.nodes.wrapper,
+        items: await this.getTunesItems(block, commonTunes, toolTunes),
+        scopeElement: this.Blok.API.methods.ui.nodes.redactor,
+        messages: {
+          nothingFound: this.Blok.I18n.t('popover.nothingFound'),
+          search: this.Blok.I18n.t('popover.search'),
+        },
+      };
 
-    if (PopoverClass === PopoverDesktop) {
-      popoverParams.flipper = this.flipperInstance;
-    }
+      if (PopoverClass === PopoverDesktop) {
+        popoverParams.flipper = this.flipperInstance;
+      }
 
-    this.popover = new PopoverClass(popoverParams);
-    this.popover.getElement().setAttribute('data-blok-testid', 'block-tunes-popover');
+      this.popover = new PopoverClass(popoverParams);
+      this.popover.getElement().setAttribute('data-blok-testid', 'block-tunes-popover');
 
-    this.popover.on(PopoverEvent.Closed, this.onPopoverClose);
+      this.popover.on(PopoverEvent.Closed, this.onPopoverClose);
 
-    /**
-     * Set opened flag AFTER popover is created to prevent race conditions
-     * where close() is called during the async getTunesItems() call
-     * when opened=true but popover is still null
-     */
-    this.opened = true;
-    this.isOpening = false; // Clear isOpening flag after popover is created
+      /**
+       * Set opened flag AFTER popover is created to prevent race conditions
+       * where close() is called during the async getTunesItems() call
+       * when opened=true but popover is still null
+       */
+      this.opened = true;
+      this.isOpening = false;
 
-    /** Tell to subscribers that block settings is opened */
-    this.eventsDispatcher.emit(this.events.opened);
+      /** Tell to subscribers that block settings is opened */
+      this.eventsDispatcher.emit(this.events.opened);
 
-    this.popover.show();
-    this.attachFlipperKeydownListener(block);
+      this.popover.show();
+      this.attachFlipperKeydownListener(block);
+    } catch {
+      this.isOpening = false;
+    }
   }
 
   /**