@jackuait/blok 0.6.0-beta.9 → 0.7.0-beta.1

package/src/components/modules/drag/target/DropTargetDetector.ts

@@ -138,6 +138,20 @@ export class DropTargetDetector {
       return null;
     }
 
+    /**
+     * If the target block is inside a table cell and the source block is NOT
+     * in the same cell, redirect the drop target to the table block itself.
+     * This prevents blocks from being dropped into table cells via drag & drop.
+     */
+    const targetCellContainer = targetBlock.holder.closest('[data-blok-table-cell-blocks]');
+    const sourceCellContainer = sourceBlock.holder.closest('[data-blok-table-cell-blocks]');
+    const isTargetInCell = targetCellContainer !== null;
+    const isCrossCellDrop = sourceCellContainer !== targetCellContainer;
+
+    if (isTargetInCell && isCrossCellDrop) {
+      return this.redirectToTableBlock(targetCellContainer, clientY);
+    }
+
     // Determine edge (top or bottom half of block)
     const rect = blockHolder.getBoundingClientRect();
     const isTopHalf = clientY < rect.top + rect.height / 2;
@@ -151,24 +165,29 @@ export class DropTargetDetector {
     const canUsePreviousBlock = previousBlock && !this.sourceBlocks.includes(previousBlock);
 
     if (isTopHalf && targetIndex > 0 && canUsePreviousBlock) {
-      const targetDepth = this.calculateTargetDepth(previousBlock, 'bottom');
+      const targetDepth = this.calculateTargetDepth(previousBlock, 'bottom', sourceBlock);
       return { block: previousBlock, edge: 'bottom', depth: targetDepth };
     }
 
     // First block top half, or any block bottom half
     const edge: 'top' | 'bottom' = isTopHalf ? 'top' : 'bottom';
-    const targetDepth = this.calculateTargetDepth(targetBlock, edge);
+    const targetDepth = this.calculateTargetDepth(targetBlock, edge, sourceBlock);
 
     return { block: targetBlock, edge, depth: targetDepth };
   }
 
   /**
-   * Calculates the target depth for list item nesting
+   * Calculates the target depth for list item nesting.
+   * When a sourceBlock is provided and is a list item, the depth is calculated
+   * to match what ListDepthValidator.getTargetDepthForMove will produce post-drop,
+   * ensuring the visual indicator accurately predicts the final depth.
+   *
    * @param targetBlock - Block being dropped onto
    * @param targetEdge - Edge of target ('top' or 'bottom')
+   * @param sourceBlock - Optional block being dragged (for accurate list item depth prediction)
    * @returns The target depth (0 for root level, 1+ for nested)
    */
-  calculateTargetDepth(targetBlock: Block, targetEdge: 'top' | 'bottom'): number {
+  calculateTargetDepth(targetBlock: Block, targetEdge: 'top' | 'bottom', sourceBlock?: Block): number {
     const targetIndex = this.blockManager.getBlockIndex(targetBlock);
     const dropIndex = targetEdge === 'top' ? targetIndex : targetIndex + 1;
 
@@ -184,23 +203,93 @@ export class DropTargetDetector {
       return 0;
     }
 
-    const previousDepth = this.listItemDepth.getDepth(previousBlock) ?? 0;
+    const previousDepth = this.listItemDepth.getDepth(previousBlock);
+    const previousIsListItem = previousDepth !== null;
+    const prevDepthValue = previousDepth ?? 0;
 
     // Get the block that will be immediately after the drop position
     const nextBlock = this.blockManager.getBlockByIndex(dropIndex);
-    const nextDepth = nextBlock ? (this.listItemDepth.getDepth(nextBlock) ?? 0) : 0;
+    const nextDepth = nextBlock ? this.listItemDepth.getDepth(nextBlock) : null;
+    const nextIsListItem = nextDepth !== null;
+    const nextDepthValue = nextDepth ?? 0;
+
+    // When dragging a list item, predict the exact depth ListDepthValidator will
+    // compute post-drop — so the visual indicator matches the actual result.
+    const sourceDepth = sourceBlock ? this.listItemDepth.getDepth(sourceBlock) : null;
+
+    if (sourceDepth !== null) {
+      return this.predictListItemDepth(
+        sourceDepth, prevDepthValue, previousIsListItem, nextDepthValue, nextIsListItem
+      );
+    }
+
+    // For non-list blocks (or when sourceBlock not provided), use neighbor-based
+    // depth for cosmetic indicator positioning only.
+    if (nextDepthValue > 0 && nextDepthValue <= prevDepthValue + 1) {
+      return nextDepthValue;
+    }
+
+    if (prevDepthValue > 0) {
+      return prevDepthValue;
+    }
+
+    return 0;
+  }
+
+  /**
+   * Mirrors ListDepthValidator.getTargetDepthForMove to predict the exact
+   * post-drop depth for a list item. This ensures the visual indicator
+   * shows the same depth the item will actually have after being dropped.
+   */
+  private predictListItemDepth(
+    currentDepth: number,
+    previousDepth: number,
+    previousIsListItem: boolean,
+    nextDepth: number,
+    nextIsListItem: boolean
+  ): number {
+    const maxAllowedDepth = previousIsListItem ? previousDepth + 1 : 0;
+
+    // Cap current depth at max allowed
+    if (currentDepth > maxAllowedDepth) {
+      return maxAllowedDepth;
+    }
 
-    // If next item is nested, match its depth (become sibling)
-    if (nextDepth > 0 && nextDepth <= previousDepth + 1) {
+    // Match next depth if it's deeper than current and within bounds
+    if (nextIsListItem && nextDepth > currentDepth && nextDepth <= maxAllowedDepth) {
       return nextDepth;
     }
 
-    // If previous item is nested, match its depth
-    if (previousDepth > 0) {
+    // Match previous depth if deeper than current and no next list item
+    if (previousIsListItem && !nextIsListItem && previousDepth > currentDepth && previousDepth <= maxAllowedDepth) {
       return previousDepth;
     }
 
-    return 0;
+    return currentDepth;
+  }
+
+  /**
+   * Redirect a drop target to the table block that contains the given cell container.
+   * Finds the outermost [data-blok-element] ancestor and returns it as the target.
+   *
+   * @param cellContainer - The [data-blok-table-cell-blocks] element containing the target
+   * @param clientY - Cursor Y position for edge calculation
+   * @returns Drop target pointing to the table block, or null if table block not found
+   */
+  private redirectToTableBlock(cellContainer: Element, clientY: number): DropTarget | null {
+    const tableHolder = cellContainer.closest(createSelector(DATA_ATTR.element));
+    const tableBlock = tableHolder
+      ? this.blockManager.blocks.find(b => b.holder === tableHolder)
+      : undefined;
+
+    if (!tableBlock) {
+      return null;
+    }
+
+    const tableRect = tableBlock.holder.getBoundingClientRect();
+    const isTopHalf = clientY < tableRect.top + tableRect.height / 2;
+
+    return { block: tableBlock, edge: isTopHalf ? 'top' : 'bottom', depth: 0 };
   }
 
 }

package/src/components/modules/drag/utils/drag.constants.ts

@@ -21,7 +21,7 @@ export const DRAG_CONFIG = {
  * Styles for the drag preview element
  */
 export const PREVIEW_STYLES = {
-  base: 'fixed pointer-events-none z-[10000] opacity-80 transition-none',
+  base: 'fixed pointer-events-none z-10000 opacity-80 transition-none',
   content: 'relative mx-auto max-w-content',
 } as const;
 

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/paste/google-docs-preprocessor.ts

@@ -0,0 +1,197 @@
+import { mapToNearestPresetColor } from '../../utils/color-mapping';
+
+/**
+ * Pre-process Google Docs clipboard HTML before sanitization.
+ *
+ * Google Docs wraps content in `<b id="docs-internal-guid-...">` and
+ * encodes formatting as inline styles on `<span>` elements rather than
+ * semantic tags.  The sanitizer strips `<span>` (not in the allowed
+ * config), destroying formatting.  This function converts style-based
+ * spans to `<b>`/`<i>`/`<mark>` BEFORE the sanitizer runs.
+ *
+ * @param html - raw clipboard HTML string
+ * @returns preprocessed HTML string
+ */
+export function preprocessGoogleDocsHtml(html: string): string {
+  const wrapper = document.createElement('div');
+
+  wrapper.innerHTML = html;
+
+  unwrapGoogleDocsContent(wrapper);
+  convertGoogleDocsStyles(wrapper);
+  convertTableCellParagraphs(wrapper);
+
+  return wrapper.innerHTML;
+}
+
+/**
+ * Strip Google Docs wrapper elements to expose underlying content.
+ * Google Docs wraps clipboard HTML in `<b id="docs-internal-guid-...">`.
+ * Content may be split across multiple child `<div>` elements (e.g. one
+ * per table), so all children are moved out of the wrapper.
+ */
+function unwrapGoogleDocsContent(wrapper: HTMLElement): void {
+  const googleDocsWrapper = wrapper.querySelector<HTMLElement>('b[id^="docs-internal-guid-"]');
+
+  if (!googleDocsWrapper) {
+    return;
+  }
+
+  const fragment = document.createDocumentFragment();
+
+  while (googleDocsWrapper.firstChild) {
+    fragment.appendChild(googleDocsWrapper.firstChild);
+  }
+
+  googleDocsWrapper.replaceWith(fragment);
+}
+
+/**
+ * Determine the background-color style declaration for a Google Docs element.
+ *
+ * When a background color is present, it is mapped to the nearest preset.
+ * When only a foreground color is present, an explicit `transparent` background
+ * is returned so the mark element doesn't inherit an unwanted background.
+ */
+function resolveBackgroundStyle(hasBgColor: boolean, hasColor: boolean, mappedBg: string): string {
+  if (hasBgColor) {
+    return `background-color: ${mappedBg}`;
+  }
+
+  if (hasColor) {
+    return 'background-color: transparent';
+  }
+
+  return '';
+}
+
+/**
+ * Check whether a CSS color value is the default black text color.
+ * Google Docs uses different formats: `rgb(0, 0, 0)`, `rgb(0,0,0)`, or `#000000`.
+ * Spans with only this color should not be converted to `<mark>`.
+ */
+function isDefaultBlack(color: string): boolean {
+  const normalized = color.replace(/\s/g, '');
+
+  return normalized === 'rgb(0,0,0)' || normalized === '#000000';
+}
+
+/**
+ * Convert Google Docs style-based `<span>` elements to semantic HTML tags.
+ *
+ * - `<span style="font-weight:700">` or `font-weight:bold` → `<b>`
+ * - `<span style="font-style:italic">` → `<i>`
+ * - `<span style="color:...">` → `<mark style="color: ...">`
+ * - `<span style="background-color:...">` → `<mark style="background-color: ...">`
+ *
+ * Color and bold/italic can combine: a bold red span becomes `<b><mark style="color: red;">text</mark></b>`.
+ */
+function convertGoogleDocsStyles(wrapper: HTMLElement): void {
+  for (const span of Array.from(wrapper.querySelectorAll('span[style]'))) {
+    const style = span.getAttribute('style') ?? '';
+    const isBold = /font-weight\s*:\s*(700|bold)/i.test(style);
+    const isItalic = /font-style\s*:\s*italic/i.test(style);
+
+    const colorMatch = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(style);
+    const bgMatch = /background-color\s*:\s*([^;]+)/i.exec(style);
+
+    const color = colorMatch?.[1]?.trim();
+    const bgColor = bgMatch?.[1]?.trim();
+
+    const hasColor = color !== undefined && !isDefaultBlack(color);
+    const hasBgColor = bgColor !== undefined && bgColor !== 'transparent';
+
+    if (!isBold && !isItalic && !hasColor && !hasBgColor) {
+      continue;
+    }
+
+    const mappedColor = hasColor ? mapToNearestPresetColor(color, 'text') : '';
+    const mappedBg = hasBgColor ? mapToNearestPresetColor(bgColor, 'bg') : '';
+
+    const colorStyles = [
+      hasColor ? `color: ${mappedColor}` : '',
+      resolveBackgroundStyle(hasBgColor, hasColor, mappedBg),
+    ].filter(Boolean).join('; ');
+
+    const inner = colorStyles
+      ? `<mark style="${colorStyles};">${span.innerHTML}</mark>`
+      : span.innerHTML;
+
+    const italic = isItalic ? `<i>${inner}</i>` : inner;
+    const wrapped = isBold ? `<b>${italic}</b>` : italic;
+
+    span.replaceWith(document.createRange().createContextualFragment(wrapped));
+  }
+
+  convertAnchorColorStyles(wrapper);
+}
+
+/**
+ * Convert color/background-color styles on `<a>` elements to `<mark>` tags.
+ *
+ * Google Docs sometimes puts background-color directly on the `<a>` element.
+ * The sanitizer only allows `href`/`target`/`rel` on `<a>`, so inline styles
+ * are stripped — losing the background.  This moves color styles into a
+ * `<mark>` wrapping the link content before sanitization runs.
+ */
+function convertAnchorColorStyles(wrapper: HTMLElement): void {
+  for (const anchor of Array.from(wrapper.querySelectorAll('a[style]'))) {
+    const style = anchor.getAttribute('style') ?? '';
+
+    const colorMatch = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(style);
+    const bgMatch = /background-color\s*:\s*([^;]+)/i.exec(style);
+
+    const color = colorMatch?.[1]?.trim();
+    const bgColor = bgMatch?.[1]?.trim();
+
+    const hasColor = color !== undefined && !isDefaultBlack(color) && color !== 'inherit';
+    const hasBgColor = bgColor !== undefined && bgColor !== 'transparent' && bgColor !== 'inherit';
+
+    if (!hasColor && !hasBgColor) {
+      continue;
+    }
+
+    const mappedColor = hasColor ? mapToNearestPresetColor(color, 'text') : '';
+    const mappedBg = hasBgColor ? mapToNearestPresetColor(bgColor, 'bg') : '';
+
+    const colorStyles = [
+      hasColor ? `color: ${mappedColor}` : '',
+      resolveBackgroundStyle(hasBgColor, hasColor, mappedBg),
+    ].filter(Boolean).join('; ');
+
+    const el = anchor as HTMLElement;
+
+    el.innerHTML = `<mark style="${colorStyles};">${el.innerHTML}</mark>`;
+    el.style.removeProperty('color');
+    el.style.removeProperty('background-color');
+  }
+}
+
+/**
+ * Convert `<p>` boundaries to `<br>` line breaks inside table cells.
+ *
+ * Google Docs wraps each line in a cell as a separate `<p>`.  The sanitizer
+ * strips `<p>` (not in the allowed config), losing line breaks.  Converting
+ * to `<br>` preserves them since `<br>` IS in the config (`{ br: {} }`).
+ *
+ * Only targets `<td>` and `<th>` elements — top-level `<p>` tags are left
+ * intact so the paste pipeline can split them into separate blocks.
+ */
+function convertTableCellParagraphs(wrapper: HTMLElement): void {
+  for (const cell of Array.from(wrapper.querySelectorAll('td, th'))) {
+    const paragraphs = cell.querySelectorAll('p');
+
+    if (paragraphs.length === 0) {
+      continue;
+    }
+
+    for (const p of Array.from(paragraphs)) {
+      const fragment = document.createRange().createContextualFragment(p.innerHTML + '<br>');
+
+      p.replaceWith(fragment);
+    }
+
+    // Remove trailing <br> from the cell
+    cell.innerHTML = cell.innerHTML.replace(/(<br\s*\/?>|\s)+$/i, '');
+  }
+}