@beyondwork/docx-react-component 1.0.11 → 1.0.13

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

@@ -20,6 +20,23 @@ import { toggleMark } from "prosemirror-commands";
 import type { Command } from "prosemirror-state";
 import type { MarkType, Schema } from "prosemirror-model";
 
+import type {
+  FormattingAlignment,
+  FormattingStateSnapshot,
+  PersistedEditorSnapshot,
+  RuntimeRenderSnapshot,
+  SurfaceBlockSnapshot,
+  SurfaceInlineSegment,
+} from "../../api/public-types";
+import type {
+  BlockNode,
+  DocumentRootNode,
+  InlineNode,
+  ParagraphNode,
+  TextMark,
+  TextNode,
+} from "../../model/canonical-document.ts";
+
 // ---------------------------------------------------------------------------
 // Toggle commands (boolean marks – no attrs)
 // ---------------------------------------------------------------------------
@@ -159,3 +176,728 @@ export function isMarkActive(schema: Schema, markName: keyof typeof schema.marks
   });
   return active;
 }
+
+type CanonicalDocumentEnvelope = PersistedEditorSnapshot["canonicalDocument"];
+type ParagraphSurfaceBlock = Extract<SurfaceBlockSnapshot, { kind: "paragraph" }>;
+type ToggleFormattingMark =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "strikethrough"
+  | "superscript"
+  | "subscript";
+type FormattingOperation =
+  | { type: "toggle"; mark: ToggleFormattingMark }
+  | { type: "set-font-family"; fontFamily: string | null }
+  | { type: "set-font-size"; size: number | null }
+  | { type: "set-text-color"; color: string | null }
+  | { type: "set-highlight-color"; color: string | null }
+  | { type: "set-alignment"; alignment: FormattingAlignment }
+  | { type: "indent" }
+  | { type: "outdent" };
+
+export interface FormattingMutationResult {
+  document: CanonicalDocumentEnvelope;
+  selection: RuntimeRenderSnapshot["selection"];
+  changed: boolean;
+}
+
+const DEFAULT_FORMATTING_STATE: FormattingStateSnapshot = {
+  bold: false,
+  italic: false,
+  underline: false,
+  strikethrough: false,
+  superscript: false,
+  subscript: false,
+};
+
+const INDENT_STEP_TWIPS = 720;
+
+export function getFormattingStateFromRenderSnapshot(
+  snapshot: RuntimeRenderSnapshot,
+): FormattingStateSnapshot {
+  const surface = snapshot.surface;
+  if (!surface) {
+    return { ...DEFAULT_FORMATTING_STATE };
+  }
+
+  const paragraphs = collectParagraphSurfaces(surface.blocks).filter((paragraph) =>
+    selectionTouchesRange(
+      snapshot.selection.anchor,
+      snapshot.selection.head,
+      paragraph.from,
+      paragraph.to,
+    ),
+  );
+  const textSegments = collectFormattingTextSegments(paragraphs, snapshot.selection);
+
+  return {
+    bold: textSegments.length > 0
+      ? textSegments.every((segment) => segmentHasMark(segment, "bold"))
+      : false,
+    italic: textSegments.length > 0
+      ? textSegments.every((segment) => segmentHasMark(segment, "italic"))
+      : false,
+    underline: textSegments.length > 0
+      ? textSegments.every((segment) => segmentHasMark(segment, "underline"))
+      : false,
+    strikethrough: textSegments.length > 0
+      ? textSegments.every((segment) => segmentHasMark(segment, "strikethrough"))
+      : false,
+    superscript: textSegments.length > 0
+      ? textSegments.every((segment) => segmentHasMark(segment, "superscript"))
+      : false,
+    subscript: textSegments.length > 0
+      ? textSegments.every((segment) => segmentHasMark(segment, "subscript"))
+      : false,
+    fontFamily: getConsistentValue(textSegments, (segment) => segment.markAttrs?.fontFamily),
+    fontSize: getConsistentValue(textSegments, (segment) => {
+      const size = segment.markAttrs?.fontSize;
+      return typeof size === "number" ? size / 2 : undefined;
+    }),
+    textColor: getConsistentValue(textSegments, (segment) =>
+      toPublicColor(segment.markAttrs?.textColor),
+    ),
+    highlightColor: getConsistentValue(
+      textSegments,
+      (segment) => toPublicColor(segment.markAttrs?.backgroundColor) ?? null,
+      {
+        emptyFallback: null,
+      },
+    ),
+    alignment: getConsistentValue(paragraphs, (paragraph) =>
+      toPublicAlignment(paragraph.alignment),
+    ),
+  };
+}
+
+export function applyFormattingOperationToDocument(
+  document: CanonicalDocumentEnvelope,
+  snapshot: RuntimeRenderSnapshot,
+  operation: FormattingOperation,
+): FormattingMutationResult {
+  const surface = snapshot.surface;
+  if (!surface) {
+    return {
+      document,
+      selection: snapshot.selection,
+      changed: false,
+    };
+  }
+
+  const nextDocument = structuredClone(document);
+  const root = nextDocument.content as DocumentRootNode;
+  let changed = false;
+  const selectionFrom = Math.min(snapshot.selection.anchor, snapshot.selection.head);
+  const selectionTo = Math.max(snapshot.selection.anchor, snapshot.selection.head);
+
+  if (operation.type === "set-alignment" || operation.type === "indent" || operation.type === "outdent") {
+    visitParagraphBindings(root.children, surface.blocks, (paragraph, paragraphSurface) => {
+      if (
+        !selectionTouchesRange(
+          snapshot.selection.anchor,
+          snapshot.selection.head,
+          paragraphSurface.from,
+          paragraphSurface.to,
+        )
+      ) {
+        return;
+      }
+
+      const paragraphChanged =
+        operation.type === "set-alignment"
+          ? applyAlignment(paragraph, operation.alignment)
+          : applyIndentation(paragraph, operation.type === "indent" ? 1 : -1);
+      changed = changed || paragraphChanged;
+    });
+
+    return {
+      document: changed ? nextDocument : document,
+      selection: snapshot.selection,
+      changed,
+    };
+  }
+
+  if (selectionFrom === selectionTo) {
+    return {
+      document,
+      selection: snapshot.selection,
+      changed: false,
+    };
+  }
+
+  const nextMarks = resolveMarkUpdater(snapshot, operation);
+
+  visitParagraphBindings(root.children, surface.blocks, (paragraph, paragraphSurface) => {
+    if (
+      !rangesOverlap(
+        selectionFrom,
+        selectionTo,
+        paragraphSurface.from,
+        paragraphSurface.to,
+      )
+    ) {
+      return;
+    }
+
+    const transformed = transformInlineNodes(
+      paragraph.children,
+      paragraphSurface.from,
+      selectionFrom,
+      selectionTo,
+      nextMarks,
+    );
+    if (!transformed.changed) {
+      return;
+    }
+
+    paragraph.children = transformed.nodes;
+    changed = true;
+  });
+
+  return {
+    document: changed ? nextDocument : document,
+    selection: snapshot.selection,
+    changed,
+  };
+}
+
+function resolveMarkUpdater(
+  snapshot: RuntimeRenderSnapshot,
+  operation: Exclude<
+    FormattingOperation,
+    { type: "set-alignment" } | { type: "indent" } | { type: "outdent" }
+  >,
+): (marks?: TextMark[]) => TextMark[] | undefined {
+  const formatting = getFormattingStateFromRenderSnapshot(snapshot);
+
+  switch (operation.type) {
+    case "toggle":
+      return (marks) => toggleMarks(marks, operation.mark, !formatting[operation.mark]);
+    case "set-font-family":
+      return (marks) => setMarkValue(marks, "fontFamily", sanitizeFontFamily(operation.fontFamily));
+    case "set-font-size":
+      return (marks) => setMarkValue(marks, "fontSize", sanitizeFontSize(operation.size));
+    case "set-text-color":
+      return (marks) => setMarkValue(marks, "textColor", sanitizeColor(operation.color));
+    case "set-highlight-color":
+      return (marks) => setMarkValue(marks, "backgroundColor", sanitizeColor(operation.color));
+  }
+}
+
+function applyAlignment(
+  paragraph: ParagraphNode,
+  alignment: FormattingAlignment,
+): boolean {
+  const nextAlignment = alignment === "justify" ? "both" : alignment;
+  if (paragraph.alignment === nextAlignment) {
+    return false;
+  }
+
+  paragraph.alignment = nextAlignment;
+  return true;
+}
+
+function applyIndentation(paragraph: ParagraphNode, delta: -1 | 1): boolean {
+  if (paragraph.numbering) {
+    const nextLevel = clamp(paragraph.numbering.level + delta, 0, 8);
+    if (nextLevel === paragraph.numbering.level) {
+      return false;
+    }
+
+    paragraph.numbering = {
+      ...paragraph.numbering,
+      level: nextLevel,
+    };
+    return true;
+  }
+
+  const currentLeft = paragraph.indentation?.left ?? 0;
+  const nextLeft = Math.max(0, currentLeft + delta * INDENT_STEP_TWIPS);
+  if (nextLeft === currentLeft) {
+    return false;
+  }
+
+  const nextIndentation = {
+    ...(paragraph.indentation ?? {}),
+  };
+  if (nextLeft > 0) {
+    nextIndentation.left = nextLeft;
+    paragraph.indentation = nextIndentation;
+  } else if (paragraph.indentation) {
+    delete nextIndentation.left;
+    paragraph.indentation =
+      Object.keys(nextIndentation).length > 0 ? nextIndentation : undefined;
+  }
+
+  return true;
+}
+
+function collectParagraphSurfaces(
+  blocks: SurfaceBlockSnapshot[],
+  output: ParagraphSurfaceBlock[] = [],
+): ParagraphSurfaceBlock[] {
+  for (const block of blocks) {
+    if (block.kind === "paragraph") {
+      output.push(block);
+      continue;
+    }
+
+    if (block.kind === "table") {
+      for (const row of block.rows) {
+        for (const cell of row.cells) {
+          collectParagraphSurfaces(cell.content, output);
+        }
+      }
+      continue;
+    }
+
+    if (block.kind === "sdt_block") {
+      collectParagraphSurfaces(block.children, output);
+    }
+  }
+
+  return output;
+}
+
+function collectFormattingTextSegments(
+  paragraphs: ParagraphSurfaceBlock[],
+  selection: RuntimeRenderSnapshot["selection"],
+): Array<Extract<SurfaceInlineSegment, { kind: "text" }>> {
+  const caret = selection.anchor;
+  const isCollapsed = selection.isCollapsed;
+  const selectionFrom = Math.min(selection.anchor, selection.head);
+  const selectionTo = Math.max(selection.anchor, selection.head);
+  const segments: Array<Extract<SurfaceInlineSegment, { kind: "text" }>> = [];
+
+  for (const paragraph of paragraphs) {
+    for (const segment of paragraph.segments) {
+      if (segment.kind !== "text") {
+        continue;
+      }
+
+      if (
+        isCollapsed
+          ? segmentContainsCaret(segment, caret)
+          : rangesOverlap(selectionFrom, selectionTo, segment.from, segment.to)
+      ) {
+        segments.push(segment);
+      }
+    }
+  }
+
+  if (!isCollapsed || segments.length > 0) {
+    return segments;
+  }
+
+  for (const paragraph of paragraphs) {
+    const fallback = paragraph.segments.find(
+      (segment): segment is Extract<SurfaceInlineSegment, { kind: "text" }> =>
+        segment.kind === "text" && segment.to === caret,
+    );
+    if (fallback) {
+      return [fallback];
+    }
+  }
+
+  return [];
+}
+
+function segmentContainsCaret(
+  segment: Extract<SurfaceInlineSegment, { kind: "text" }>,
+  caret: number,
+): boolean {
+  return (
+    segment.from <= caret &&
+    (caret < segment.to || (segment.to === caret && segment.to > segment.from))
+  );
+}
+
+function segmentHasMark(
+  segment: Extract<SurfaceInlineSegment, { kind: "text" }>,
+  mark: ToggleFormattingMark,
+): boolean {
+  const marks = segment.marks ?? [];
+  if (mark === "superscript") {
+    return marks.includes("superscript");
+  }
+  if (mark === "subscript") {
+    return marks.includes("subscript");
+  }
+  return marks.includes(mark);
+}
+
+function getConsistentValue<TItem, TValue>(
+  items: readonly TItem[],
+  getter: (item: TItem) => TValue,
+  options: {
+    emptyFallback?: TValue;
+  } = {},
+): TValue | undefined {
+  if (items.length === 0) {
+    return options.emptyFallback;
+  }
+
+  let value: TValue | undefined = undefined;
+  let initialized = false;
+
+  for (const item of items) {
+    const next = getter(item);
+    if (!initialized) {
+      value = next;
+      initialized = true;
+      continue;
+    }
+
+    if (next !== value) {
+      return undefined;
+    }
+  }
+
+  return value;
+}
+
+function visitParagraphBindings(
+  blocks: BlockNode[],
+  surfaceBlocks: SurfaceBlockSnapshot[],
+  visitor: (paragraph: ParagraphNode, surface: ParagraphSurfaceBlock) => void,
+): void {
+  for (let index = 0; index < Math.min(blocks.length, surfaceBlocks.length); index += 1) {
+    const block = blocks[index];
+    const surface = surfaceBlocks[index];
+    if (!block || !surface) {
+      continue;
+    }
+
+    if (block.type === "paragraph" && surface.kind === "paragraph") {
+      visitor(block, surface);
+      continue;
+    }
+
+    if (block.type === "table" && surface.kind === "table") {
+      for (let rowIndex = 0; rowIndex < Math.min(block.rows.length, surface.rows.length); rowIndex += 1) {
+        const row = block.rows[rowIndex];
+        const surfaceRow = surface.rows[rowIndex];
+        if (!row || !surfaceRow) {
+          continue;
+        }
+
+        for (
+          let cellIndex = 0;
+          cellIndex < Math.min(row.cells.length, surfaceRow.cells.length);
+          cellIndex += 1
+        ) {
+          const cell = row.cells[cellIndex];
+          const surfaceCell = surfaceRow.cells[cellIndex];
+          if (!cell || !surfaceCell) {
+            continue;
+          }
+
+          visitParagraphBindings(cell.children, surfaceCell.content, visitor);
+        }
+      }
+      continue;
+    }
+
+    if (block.type === "sdt" && surface.kind === "sdt_block") {
+      visitParagraphBindings(block.children, surface.children, visitor);
+    }
+  }
+}
+
+function transformInlineNodes(
+  nodes: InlineNode[],
+  start: number,
+  selectionFrom: number,
+  selectionTo: number,
+  updateMarks: (marks?: TextMark[]) => TextMark[] | undefined,
+): { nodes: InlineNode[]; changed: boolean; nextPosition: number } {
+  let changed = false;
+  let position = start;
+  const nextNodes: InlineNode[] = [];
+
+  for (const node of nodes) {
+    if (node.type === "text") {
+      const transformed = transformTextNode(
+        node,
+        position,
+        selectionFrom,
+        selectionTo,
+        updateMarks,
+      );
+      nextNodes.push(...transformed.nodes);
+      position = transformed.nextPosition;
+      changed = changed || transformed.changed;
+      continue;
+    }
+
+    if (node.type === "hyperlink") {
+      const transformed = transformInlineNodes(
+        node.children as InlineNode[],
+        position,
+        selectionFrom,
+        selectionTo,
+        updateMarks,
+      );
+      nextNodes.push(
+        transformed.changed
+          ? {
+              ...node,
+              children: transformed.nodes as typeof node.children,
+            }
+          : node,
+      );
+      position = transformed.nextPosition;
+      changed = changed || transformed.changed;
+      continue;
+    }
+
+    nextNodes.push(node);
+    position += inlineNodeLength(node);
+  }
+
+  return {
+    nodes: nextNodes,
+    changed,
+    nextPosition: position,
+  };
+}
+
+function transformTextNode(
+  node: TextNode,
+  start: number,
+  selectionFrom: number,
+  selectionTo: number,
+  updateMarks: (marks?: TextMark[]) => TextMark[] | undefined,
+): { nodes: TextNode[]; changed: boolean; nextPosition: number } {
+  const characters = Array.from(node.text);
+  const end = start + characters.length;
+  const overlapFrom = Math.max(selectionFrom, start);
+  const overlapTo = Math.min(selectionTo, end);
+
+  if (overlapFrom >= overlapTo) {
+    return {
+      nodes: [node],
+      changed: false,
+      nextPosition: end,
+    };
+  }
+
+  const localFrom = overlapFrom - start;
+  const localTo = overlapTo - start;
+  const nextNodes: TextNode[] = [];
+
+  if (localFrom > 0) {
+    nextNodes.push(createTextNode(characters.slice(0, localFrom).join(""), node.marks));
+  }
+
+  const transformedMarks = updateMarks(node.marks);
+  nextNodes.push(
+    createTextNode(characters.slice(localFrom, localTo).join(""), transformedMarks),
+  );
+
+  if (localTo < characters.length) {
+    nextNodes.push(createTextNode(characters.slice(localTo).join(""), node.marks));
+  }
+
+  return {
+    nodes: nextNodes.filter((candidate) => candidate.text.length > 0),
+    changed: !marksEqual(node.marks, transformedMarks) || localFrom > 0 || localTo < characters.length,
+    nextPosition: end,
+  };
+}
+
+function createTextNode(text: string, marks?: TextMark[]): TextNode {
+  return {
+    type: "text",
+    text,
+    ...(marks && marks.length > 0 ? { marks: cloneMarks(marks) } : {}),
+  };
+}
+
+function toggleMarks(
+  marks: TextMark[] | undefined,
+  mark: ToggleFormattingMark,
+  enabled: boolean,
+): TextMark[] | undefined {
+  const nextMarks = cloneMarks(marks);
+
+  if (mark === "superscript" || mark === "subscript") {
+    const filtered: TextMark[] = nextMarks.filter((candidate) => candidate.type !== "position");
+    if (enabled) {
+      filtered.push({
+        type: "position",
+        val: mark === "superscript" ? 1 : -1,
+      });
+    }
+    return filtered.length > 0 ? filtered : undefined;
+  }
+
+  const filtered = nextMarks.filter((candidate) => candidate.type !== mark);
+  if (enabled) {
+    filtered.push({ type: mark });
+  }
+  return filtered.length > 0 ? filtered : undefined;
+}
+
+function setMarkValue(
+  marks: TextMark[] | undefined,
+  markType: "fontFamily" | "fontSize" | "textColor" | "backgroundColor",
+  value: string | number | null,
+): TextMark[] | undefined {
+  const nextMarks = cloneMarks(marks).filter((candidate) => {
+    if (markType === "backgroundColor") {
+      return candidate.type !== "backgroundColor";
+    }
+    return candidate.type !== markType;
+  });
+
+  if (value !== null) {
+    switch (markType) {
+      case "fontFamily":
+        nextMarks.push({ type: "fontFamily", val: value as string });
+        break;
+      case "fontSize":
+        nextMarks.push({ type: "fontSize", val: value as number });
+        break;
+      case "textColor":
+        nextMarks.push({ type: "textColor", color: value as string });
+        break;
+      case "backgroundColor":
+        nextMarks.push({ type: "backgroundColor", color: value as string });
+        break;
+    }
+  }
+
+  return nextMarks.length > 0 ? nextMarks : undefined;
+}
+
+function cloneMarks(marks?: TextMark[]): TextMark[] {
+  return marks ? marks.map((mark) => ({ ...mark })) : [];
+}
+
+function marksEqual(left?: TextMark[], right?: TextMark[]): boolean {
+  if (!left?.length && !right?.length) {
+    return true;
+  }
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((mark, index) => JSON.stringify(mark) === JSON.stringify(right[index]));
+}
+
+function inlineNodeLength(node: InlineNode): number {
+  switch (node.type) {
+    case "text":
+      return Array.from(node.text).length;
+    case "hyperlink":
+      return node.children.reduce< number >(
+        (total, child) => total + inlineNodeLength(child as InlineNode),
+        0,
+      );
+    case "hard_break":
+    case "column_break":
+    case "tab":
+    case "symbol":
+    case "image":
+    case "opaque_inline":
+    case "footnote_ref":
+    case "chart_preview":
+    case "smartart_preview":
+    case "shape":
+    case "wordart":
+    case "vml_shape":
+      return 1;
+    case "field":
+      return node.children.reduce<number>(
+        (total, child) => total + inlineNodeLength(child as InlineNode),
+        0,
+      );
+    case "bookmark_start":
+    case "bookmark_end":
+      return 0;
+  }
+}
+
+function toPublicAlignment(
+  alignment: ParagraphNode["alignment"] | undefined,
+): FormattingAlignment | undefined {
+  switch (alignment) {
+    case "both":
+    case "distribute":
+      return "justify";
+    case "left":
+    case "center":
+    case "right":
+      return alignment;
+    default:
+      return undefined;
+  }
+}
+
+function toPublicColor(color: string | undefined): string | undefined {
+  if (!color) {
+    return undefined;
+  }
+
+  return /^[0-9A-F]{3,8}$/iu.test(color)
+    ? `#${color.toUpperCase()}`
+    : color;
+}
+
+function sanitizeFontFamily(fontFamily: string | null): string | null {
+  const normalized = fontFamily?.trim();
+  return normalized ? normalized : null;
+}
+
+function sanitizeFontSize(size: number | null): number | null {
+  if (typeof size !== "number" || !Number.isFinite(size) || size <= 0) {
+    return null;
+  }
+
+  return Math.round(size * 2);
+}
+
+function sanitizeColor(color: string | null): string | null {
+  const normalized = color?.trim();
+  if (!normalized) {
+    return null;
+  }
+
+  const raw = normalized.startsWith("#") ? normalized.slice(1) : normalized;
+  return /^[0-9A-F]{3,8}$/iu.test(raw) ? raw.toUpperCase() : null;
+}
+
+function selectionTouchesRange(
+  anchor: number,
+  head: number,
+  rangeFrom: number,
+  rangeTo: number,
+): boolean {
+  const selectionFrom = Math.min(anchor, head);
+  const selectionTo = Math.max(anchor, head);
+  if (selectionFrom === selectionTo) {
+    return selectionFrom >= rangeFrom && selectionFrom <= rangeTo;
+  }
+  return rangesOverlap(selectionFrom, selectionTo, rangeFrom, rangeTo);
+}
+
+function rangesOverlap(
+  leftFrom: number,
+  leftTo: number,
+  rightFrom: number,
+  rightTo: number,
+): boolean {
+  if (leftFrom === leftTo) {
+    return leftFrom >= rightFrom && leftFrom <= rightTo;
+  }
+  if (rightFrom === rightTo) {
+    return rightFrom >= leftFrom && rightFrom <= leftTo;
+  }
+  return leftFrom < rightTo && leftTo > rightFrom;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}