@beyondwork/docx-react-component 1.0.11 → 1.0.13

package/src/core/commands/image-commands.ts

@@ -8,7 +8,11 @@ import {
 import { createSelectionSnapshot, type CanonicalDocumentEnvelope, type SelectionSnapshot } from "../state/editor-state.ts";
 import { TextTransactionError } from "../state/text-transaction.ts";
 import type { TransactionMapping } from "../selection/mapping.ts";
-import type { MediaItem } from "../../model/canonical-document.ts";
+import type { MediaItem, ParagraphNode } from "../../model/canonical-document.ts";
+import {
+  replaceParagraphScope,
+  resolveParagraphScope,
+} from "./structural-helpers.ts";
 
 export interface ImageCommandContext {
   timestamp: string;
@@ -33,7 +37,85 @@ export interface InsertImageResult {
 export function insertImage(
   document: CanonicalDocumentEnvelope,
   selection: SelectionSnapshot,
-  data: Uint8Array | string,
+  _data: Uint8Array | string,
+  mimeType: string,
+  _width?: number,
+  _height?: number,
+  context: ImageCommandContext = { timestamp: new Date().toISOString() },
+): InsertImageResult {
+  const scope = resolveParagraphScope(document, selection);
+  if (!scope) {
+    throw new TextTransactionError(
+      "unsupported_content",
+      "Image insertion is only supported when the selection stays within one paragraph-backed scope.",
+    );
+  }
+
+  const localDocument: CanonicalDocumentEnvelope = {
+    ...document,
+    content: {
+      type: "doc",
+      children: [scope.paragraph],
+    },
+  };
+  const localSelection = createSelectionSnapshot(
+    selection.anchor - scope.paragraphStart,
+    selection.head - scope.paragraphStart,
+  );
+  const localResult = insertImageIntoParagraph(
+    localDocument,
+    localSelection,
+    _data,
+    mimeType,
+    _width,
+    _height,
+    context,
+  );
+  const nextDocument = replaceParagraphScope(
+    {
+      ...document,
+      media: localResult.document.media,
+    },
+    scope,
+    [
+      {
+        ...scope.paragraph,
+        children:
+          localResult.document.content.type === "doc"
+            ? (localResult.document.content.children.find(
+                (block): block is ParagraphNode => block.type === "paragraph",
+              )?.children ?? scope.paragraph.children)
+            : scope.paragraph.children,
+      },
+    ],
+  );
+
+  return {
+    ...localResult,
+    document: {
+      ...nextDocument,
+      updatedAt: context.timestamp,
+      media: localResult.document.media,
+    },
+    selection: createSelectionSnapshot(
+      localResult.selection.anchor + scope.paragraphStart,
+      localResult.selection.head + scope.paragraphStart,
+    ),
+    mapping: {
+      ...localResult.mapping,
+      steps: localResult.mapping.steps.map((step) => ({
+        ...step,
+        from: step.from + scope.paragraphStart,
+        to: step.to + scope.paragraphStart,
+      })),
+    },
+  };
+}
+
+function insertImageIntoParagraph(
+  document: CanonicalDocumentEnvelope,
+  selection: SelectionSnapshot,
+  _data: Uint8Array | string,
   mimeType: string,
   width?: number,
   height?: number,

package/src/core/commands/structural-helpers.ts

@@ -0,0 +1,309 @@
+import {
+  createSelectionSnapshot,
+  type CanonicalDocumentEnvelope,
+  type SelectionSnapshot,
+} from "../state/editor-state.ts";
+import type { TransactionMapping } from "../selection/mapping.ts";
+import type {
+  DocumentRootNode,
+  ParagraphNode,
+  TableCellNode,
+  TableNode,
+  TableRowNode,
+} from "../../model/canonical-document.ts";
+import { createEditorSurfaceSnapshot } from "../../runtime/surface-projection.ts";
+
+export interface TopLevelParagraphScope {
+  kind: "top-level";
+  blockIndex: number;
+  paragraph: ParagraphNode;
+  paragraphStart: number;
+}
+
+export interface TableParagraphScope {
+  kind: "table-cell";
+  tableBlockIndex: number;
+  rowIndex: number;
+  cellIndex: number;
+  childIndex: number;
+  paragraph: ParagraphNode;
+  paragraphStart: number;
+}
+
+export type ParagraphScope = TopLevelParagraphScope | TableParagraphScope;
+
+export interface StructuralMutationResult {
+  changed: boolean;
+  document: CanonicalDocumentEnvelope;
+  selection: SelectionSnapshot;
+  mapping?: TransactionMapping;
+}
+
+const DEFAULT_TABLE_COLUMN_WIDTH = 2400;
+
+export function createNoopStructuralMutation(
+  document: CanonicalDocumentEnvelope,
+  selection: SelectionSnapshot,
+): StructuralMutationResult {
+  return {
+    changed: false,
+    document,
+    selection,
+  };
+}
+
+export function resolveParagraphScope(
+  document: CanonicalDocumentEnvelope,
+  selection: SelectionSnapshot,
+): ParagraphScope | null {
+  const root = asDocumentRoot(document);
+  if (!root) {
+    return null;
+  }
+
+  const surface = createEditorSurfaceSnapshot(document, selection);
+  const selectionFrom = Math.min(selection.anchor, selection.head);
+  const selectionTo = Math.max(selection.anchor, selection.head);
+
+  for (let blockIndex = 0; blockIndex < root.children.length; blockIndex += 1) {
+    const block = root.children[blockIndex];
+    const surfaceBlock = surface.blocks[blockIndex];
+
+    if (!surfaceBlock) {
+      continue;
+    }
+
+    if (
+      block.type === "paragraph" &&
+      surfaceBlock.kind === "paragraph" &&
+      selectionWithinRange(selectionFrom, selectionTo, surfaceBlock.from, surfaceBlock.to)
+    ) {
+      return {
+        kind: "top-level",
+        blockIndex,
+        paragraph: cloneParagraph(block),
+        paragraphStart: surfaceBlock.from,
+      };
+    }
+
+    if (block.type !== "table" || surfaceBlock.kind !== "table") {
+      continue;
+    }
+
+    for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex += 1) {
+      const row = block.rows[rowIndex];
+      const surfaceRow = surfaceBlock.rows[rowIndex];
+      if (!surfaceRow) {
+        continue;
+      }
+
+      for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex += 1) {
+        const cell = row.cells[cellIndex];
+        const surfaceCell = surfaceRow.cells[cellIndex];
+        if (!surfaceCell) {
+          continue;
+        }
+
+        for (let childIndex = 0; childIndex < cell.children.length; childIndex += 1) {
+          const child = cell.children[childIndex];
+          const surfaceChild = surfaceCell.content[childIndex];
+          if (
+            child?.type === "paragraph" &&
+            surfaceChild?.kind === "paragraph" &&
+            selectionWithinRange(selectionFrom, selectionTo, surfaceChild.from, surfaceChild.to)
+          ) {
+            return {
+              kind: "table-cell",
+              tableBlockIndex: blockIndex,
+              rowIndex,
+              cellIndex,
+              childIndex,
+              paragraph: cloneParagraph(child),
+              paragraphStart: surfaceChild.from,
+            };
+          }
+        }
+      }
+    }
+  }
+
+  return null;
+}
+
+export function replaceParagraphScope(
+  document: CanonicalDocumentEnvelope,
+  scope: ParagraphScope,
+  replacementParagraphs: ParagraphNode[],
+): CanonicalDocumentEnvelope {
+  const root = asDocumentRoot(document);
+  if (!root) {
+    return document;
+  }
+
+  const nextRoot: DocumentRootNode =
+    scope.kind === "top-level"
+      ? {
+          ...root,
+          children: [
+            ...root.children.slice(0, scope.blockIndex),
+            ...replacementParagraphs,
+            ...root.children.slice(scope.blockIndex + 1),
+          ],
+        }
+      : {
+          ...root,
+          children: root.children.map((child, blockIndex) => {
+            if (blockIndex !== scope.tableBlockIndex || child.type !== "table") {
+              return child;
+            }
+
+            return {
+              ...child,
+              rows: child.rows.map((row, rowIndex) => {
+                if (rowIndex !== scope.rowIndex) {
+                  return row;
+                }
+
+                return {
+                  ...row,
+                  cells: row.cells.map((cell, cellIndex) => {
+                    if (cellIndex !== scope.cellIndex) {
+                      return cell;
+                    }
+
+                    return {
+                      ...cell,
+                      children: [
+                        ...cell.children.slice(0, scope.childIndex),
+                        ...replacementParagraphs,
+                        ...cell.children.slice(scope.childIndex + 1),
+                      ],
+                    };
+                  }),
+                };
+              }),
+            };
+          }),
+        };
+
+  return {
+    ...document,
+    content: nextRoot,
+  };
+}
+
+export function createEmptyParagraph(): ParagraphNode {
+  return {
+    type: "paragraph",
+    children: [],
+  };
+}
+
+export function createInsertedTableBlock(
+  rows: number,
+  columns: number,
+  styleId?: string,
+): TableNode {
+  const safeRows = Math.max(1, Math.floor(rows));
+  const safeColumns = Math.max(1, Math.floor(columns));
+  const nextRows: TableRowNode[] = [];
+
+  for (let rowIndex = 0; rowIndex < safeRows; rowIndex += 1) {
+    const cells: TableCellNode[] = [];
+    for (let columnIndex = 0; columnIndex < safeColumns; columnIndex += 1) {
+      cells.push({
+        type: "table_cell",
+        children: [createEmptyParagraph()],
+      });
+    }
+    nextRows.push({
+      type: "table_row",
+      cells,
+    });
+  }
+
+  return {
+    type: "table",
+    ...(styleId ? { styleId } : {}),
+    gridColumns: Array.from({ length: safeColumns }, () => DEFAULT_TABLE_COLUMN_WIDTH),
+    rows: nextRows,
+  };
+}
+
+export function resolveInsertedTableStyleId(
+  document: CanonicalDocumentEnvelope,
+): string | undefined {
+  const styles = document.styles?.tables;
+  if (!styles || typeof styles !== "object") {
+    return undefined;
+  }
+  return "TableGrid" in styles ? "TableGrid" : undefined;
+}
+
+export function findTableCellParagraphSelection(
+  document: CanonicalDocumentEnvelope,
+  tableBlockIndex: number,
+  rowIndex: number,
+  cellIndex: number,
+): SelectionSnapshot | null {
+  const surface = createEditorSurfaceSnapshot(document, createSelectionSnapshot(0, 0));
+  const tableBlock = surface.blocks[tableBlockIndex];
+  if (!tableBlock || tableBlock.kind !== "table") {
+    return null;
+  }
+
+  const paragraph = tableBlock.rows[rowIndex]?.cells[cellIndex]?.content.find(
+    (block) => block.kind === "paragraph",
+  );
+  if (!paragraph || paragraph.kind !== "paragraph") {
+    return null;
+  }
+
+  return createSelectionSnapshot(paragraph.from, paragraph.from);
+}
+
+export function findTopLevelParagraphSelectionNearBlock(
+  document: CanonicalDocumentEnvelope,
+  preferredBlockIndex: number,
+): SelectionSnapshot | null {
+  const surface = createEditorSurfaceSnapshot(document, createSelectionSnapshot(0, 0));
+
+  for (let index = preferredBlockIndex; index < surface.blocks.length; index += 1) {
+    const block = surface.blocks[index];
+    if (block?.kind === "paragraph") {
+      return createSelectionSnapshot(block.from, block.from);
+    }
+  }
+
+  for (let index = Math.min(preferredBlockIndex - 1, surface.blocks.length - 1); index >= 0; index -= 1) {
+    const block = surface.blocks[index];
+    if (block?.kind === "paragraph") {
+      return createSelectionSnapshot(block.from, block.from);
+    }
+  }
+
+  return null;
+}
+
+function asDocumentRoot(
+  document: CanonicalDocumentEnvelope,
+): DocumentRootNode | null {
+  const root = document.content;
+  if (!root || root.type !== "doc" || !Array.isArray(root.children)) {
+    return null;
+  }
+  return root;
+}
+
+function selectionWithinRange(
+  selectionFrom: number,
+  selectionTo: number,
+  rangeFrom: number,
+  rangeTo: number,
+): boolean {
+  return selectionFrom >= rangeFrom && selectionTo <= rangeTo;
+}
+
+function cloneParagraph(paragraph: ParagraphNode): ParagraphNode {
+  return structuredClone(paragraph) as ParagraphNode;
+}