@beyondwork/docx-react-component 1.0.0 → 1.0.2

package/test/README.md

@@ -1,16 +0,0 @@
-# Tests
-
-Prefer fixture-driven tests for import/export, review mapping, preservation, and compatibility-critical logic.
-
-Wave 0 keeps the test tree intentionally light:
-
-- `fixtures/docx/`
-  Permanent regression corpus for round-trip, preservation, comment, revision, list, table, and package-integrity scenarios.
-- `../services/react-word-editor/lib/harness-config.test.mjs`
-  Durable unit proof that the Wave 0 harness scaffold still exposes the expected build order and validation panels.
-
-When implementation waves start landing code:
-
-- favor fixture-driven proofs over UI-only snapshots
-- name fixture IDs and expected support classes explicitly
-- keep importer, exporter, preservation, and review-mapping tests separate so failures point to the owning subsystem

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

@@ -1,285 +0,0 @@
-/**
- * Tests for formatting-commands.ts
- *
- * Each test builds a minimal ProseMirror state against the editorSchema,
- * applies a command over a text selection, and asserts that the expected
- * marks or node attrs are present in the resulting doc.
- *
- * These are unit tests of pure ProseMirror state transforms; no DOM or
- * browser environment is needed.
- */
-
-import assert from "node:assert/strict";
-import test from "node:test";
-
-import { EditorState, TextSelection } from "prosemirror-state";
-import { editorSchema } from "../../src/ui-tailwind/editor-surface/pm-schema.ts";
-import {
-  makeToggleBold,
-  makeToggleItalic,
-  makeToggleUnderline,
-  makeToggleStrikethrough,
-  makeToggleSuperscript,
-  makeToggleSubscript,
-  makeToggleSmallCaps,
-  makeToggleAllCaps,
-  makeSetFontFamily,
-  makeSetFontSize,
-  makeSetTextColor,
-  makeSetHighlight,
-  makeSetAlignment,
-  isMarkActive,
-} from "../../src/core/commands/formatting-commands.ts";
-
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Create a state with a single paragraph containing `text`.
- * The selection spans the full text (from=1, to=1+text.length).
- */
-function stateWithText(text: string): EditorState {
-  const paragraph = editorSchema.nodes.paragraph.create(
-    null,
-    editorSchema.text(text),
-  );
-  const doc = editorSchema.nodes.doc.create(null, [paragraph]);
-  const state = EditorState.create({
-    doc,
-    schema: editorSchema,
-  });
-  // Select all text (pos 1 to 1+text.length)
-  const selection = TextSelection.create(doc, 1, 1 + text.length);
-  return state.apply(state.tr.setSelection(selection));
-}
-
-/**
- * Apply a command and return the next state. Throws if dispatch is never called.
- */
-function applyCommand(
-  state: EditorState,
-  cmd: (state: EditorState, dispatch?: (tr: import("prosemirror-state").Transaction) => void) => boolean,
-): EditorState {
-  let nextState: EditorState | undefined;
-  const dispatched = cmd(state, (tr) => {
-    nextState = state.apply(tr);
-  });
-  assert.ok(dispatched, "command returned false (not applicable)");
-  assert.ok(nextState, "command did not dispatch a transaction");
-  return nextState!;
-}
-
-// ---------------------------------------------------------------------------
-// Toggle mark tests
-// ---------------------------------------------------------------------------
-
-test("makeToggleBold adds bold mark to selection", () => {
-  const state = stateWithText("Hello");
-  const next = applyCommand(state, makeToggleBold(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.bold.isInSet(textNode.marks), "bold mark expected");
-});
-
-test("makeToggleBold removes bold when already active", () => {
-  const state = stateWithText("Hello");
-  const withBold = applyCommand(state, makeToggleBold(editorSchema));
-  const withoutBold = applyCommand(withBold, makeToggleBold(editorSchema));
-
-  const textNode = withoutBold.doc.firstChild!.firstChild!;
-  assert.ok(!editorSchema.marks.bold.isInSet(textNode.marks), "bold mark should be removed");
-});
-
-test("makeToggleItalic adds italic mark", () => {
-  const state = stateWithText("World");
-  const next = applyCommand(state, makeToggleItalic(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.italic.isInSet(textNode.marks));
-});
-
-test("makeToggleUnderline adds underline mark", () => {
-  const state = stateWithText("Underlined");
-  const next = applyCommand(state, makeToggleUnderline(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.underline.isInSet(textNode.marks));
-});
-
-test("makeToggleStrikethrough adds strikethrough mark", () => {
-  const state = stateWithText("Struck");
-  const next = applyCommand(state, makeToggleStrikethrough(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.strikethrough.isInSet(textNode.marks));
-});
-
-test("makeToggleSuperscript adds superscript mark", () => {
-  const state = stateWithText("Sup");
-  const next = applyCommand(state, makeToggleSuperscript(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.superscript.isInSet(textNode.marks));
-});
-
-test("makeToggleSubscript adds subscript mark", () => {
-  const state = stateWithText("Sub");
-  const next = applyCommand(state, makeToggleSubscript(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.subscript.isInSet(textNode.marks));
-});
-
-test("superscript and subscript are mutually exclusive", () => {
-  const state = stateWithText("Exclusive");
-  const withSup = applyCommand(state, makeToggleSuperscript(editorSchema));
-
-  // Check superscript is active
-  const supText = withSup.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.superscript.isInSet(supText.marks));
-  assert.ok(!editorSchema.marks.subscript.isInSet(supText.marks));
-
-  // Toggle subscript — should remove superscript and add subscript
-  const withSub = applyCommand(withSup, makeToggleSubscript(editorSchema));
-  const subText = withSub.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.subscript.isInSet(subText.marks));
-  assert.ok(!editorSchema.marks.superscript.isInSet(subText.marks));
-});
-
-test("makeToggleSmallCaps adds small_caps mark", () => {
-  const state = stateWithText("SmallCaps");
-  const next = applyCommand(state, makeToggleSmallCaps(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.small_caps.isInSet(textNode.marks));
-});
-
-test("makeToggleAllCaps adds all_caps mark", () => {
-  const state = stateWithText("AllCaps");
-  const next = applyCommand(state, makeToggleAllCaps(editorSchema));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  assert.ok(editorSchema.marks.all_caps.isInSet(textNode.marks));
-});
-
-// ---------------------------------------------------------------------------
-// Value-bearing mark tests
-// ---------------------------------------------------------------------------
-
-test("makeSetFontFamily applies font_family mark with correct attr", () => {
-  const state = stateWithText("Fonted");
-  const next = applyCommand(state, makeSetFontFamily(editorSchema, "Arial"));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  const mark = editorSchema.marks.font_family.isInSet(textNode.marks);
-  assert.ok(mark, "font_family mark expected");
-  assert.equal(mark!.attrs.family, "Arial");
-});
-
-test("makeSetFontFamily removes font_family mark when null", () => {
-  const state = stateWithText("Fonted");
-  const withFont = applyCommand(state, makeSetFontFamily(editorSchema, "Arial"));
-  const withoutFont = applyCommand(withFont, makeSetFontFamily(editorSchema, null));
-
-  const textNode = withoutFont.doc.firstChild!.firstChild!;
-  assert.ok(!editorSchema.marks.font_family.isInSet(textNode.marks));
-});
-
-test("makeSetFontSize applies font_size mark with correct attr", () => {
-  const state = stateWithText("Sized");
-  const next = applyCommand(state, makeSetFontSize(editorSchema, 14));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  const mark = editorSchema.marks.font_size.isInSet(textNode.marks);
-  assert.ok(mark, "font_size mark expected");
-  assert.equal(mark!.attrs.size, 14);
-});
-
-test("makeSetTextColor applies text_color mark with correct attr", () => {
-  const state = stateWithText("Colored");
-  const next = applyCommand(state, makeSetTextColor(editorSchema, "#ff0000"));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  const mark = editorSchema.marks.text_color.isInSet(textNode.marks);
-  assert.ok(mark, "text_color mark expected");
-  assert.equal(mark!.attrs.color, "#ff0000");
-});
-
-test("makeSetHighlight applies highlight mark with correct color", () => {
-  const state = stateWithText("Highlighted");
-  const next = applyCommand(state, makeSetHighlight(editorSchema, "yellow"));
-
-  const textNode = next.doc.firstChild!.firstChild!;
-  const mark = editorSchema.marks.highlight.isInSet(textNode.marks);
-  assert.ok(mark, "highlight mark expected");
-  assert.equal(mark!.attrs.color, "yellow");
-});
-
-test("makeSetHighlight removes highlight mark when null", () => {
-  const state = stateWithText("Highlighted");
-  const withHL = applyCommand(state, makeSetHighlight(editorSchema, "yellow"));
-  const withoutHL = applyCommand(withHL, makeSetHighlight(editorSchema, null));
-
-  const textNode = withoutHL.doc.firstChild!.firstChild!;
-  assert.ok(!editorSchema.marks.highlight.isInSet(textNode.marks));
-});
-
-// ---------------------------------------------------------------------------
-// Paragraph alignment
-// ---------------------------------------------------------------------------
-
-test("makeSetAlignment sets alignment attr on paragraph", () => {
-  const state = stateWithText("Aligned");
-  const next = applyCommand(state, makeSetAlignment(editorSchema, "center"));
-
-  const paraNode = next.doc.firstChild!;
-  assert.equal(paraNode.attrs.alignment, "center");
-});
-
-test("makeSetAlignment supports all four alignment values", () => {
-  for (const alignment of ["left", "center", "right", "justify"] as const) {
-    const state = stateWithText("Text");
-    const next = applyCommand(state, makeSetAlignment(editorSchema, alignment));
-    assert.equal(next.doc.firstChild!.attrs.alignment, alignment);
-  }
-});
-
-test("makeSetAlignment clears alignment when passed null", () => {
-  const state = stateWithText("Text");
-  const withAlignment = applyCommand(state, makeSetAlignment(editorSchema, "right"));
-  const cleared = applyCommand(withAlignment, makeSetAlignment(editorSchema, null));
-
-  assert.equal(cleared.doc.firstChild!.attrs.alignment, null);
-});
-
-// ---------------------------------------------------------------------------
-// isMarkActive helper
-// ---------------------------------------------------------------------------
-
-test("isMarkActive returns true when mark covers entire selection", () => {
-  const state = stateWithText("Active");
-  const withBold = applyCommand(state, makeToggleBold(editorSchema));
-
-  assert.ok(isMarkActive(editorSchema, "bold", withBold));
-});
-
-test("isMarkActive returns false when no mark is applied", () => {
-  const state = stateWithText("Inactive");
-  assert.ok(!isMarkActive(editorSchema, "bold", state));
-});
-
-// ---------------------------------------------------------------------------
-// Command returns false for collapsed selection (set-value marks)
-// ---------------------------------------------------------------------------
-
-test("makeSetFontFamily returns false for collapsed selection", () => {
-  // stateWithText selects all; create a collapsed selection instead
-  const paragraph = editorSchema.nodes.paragraph.create(null, editorSchema.text("Hello"));
-  const doc = editorSchema.nodes.doc.create(null, [paragraph]);
-  const state = EditorState.create({ doc, schema: editorSchema });
-  // Default selection is at the start (collapsed)
-
-  const result = makeSetFontFamily(editorSchema, "Arial")(state, () => {});
-  assert.ok(!result, "should return false for collapsed selection");
-});

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

@@ -1,298 +0,0 @@
-/**
- * Tests for image-commands.ts
- *
- * Verifies that insertImage:
- * - registers the new MediaItem in the document's media catalog
- * - inserts an image story unit at the selection position
- * - emits the correct mapping step
- * - advances the caret to after the image
- * - rejects insertions that cross protected content
- * - maps MIME types to expected file extensions
- */
-
-import assert from "node:assert/strict";
-import test from "node:test";
-
-import { insertImage } from "../../src/core/commands/image-commands.ts";
-import {
-  createSelectionSnapshot,
-  type CanonicalDocumentEnvelope,
-} from "../../src/core/state/editor-state.ts";
-import { TextTransactionError } from "../../src/core/state/text-transaction.ts";
-import { parseTextStory } from "../../src/core/schema/text-schema.ts";
-
-const TIMESTAMP = "2026-03-26T09:00:00.000Z";
-
-function createDocument(
-  blocks: Array<
-    | { type: "paragraph"; children: Array<Record<string, unknown>> }
-    | { type: "opaque_block"; fragmentId: string; warningId: string }
-  >,
-): CanonicalDocumentEnvelope {
-  return {
-    schemaVersion: "cds/1.0.0",
-    docId: "doc-1",
-    createdAt: TIMESTAMP,
-    updatedAt: TIMESTAMP,
-    metadata: {},
-    styles: {},
-    numbering: {},
-    media: {},
-    content: {
-      type: "doc",
-      children: blocks,
-    },
-    review: {
-      comments: {},
-      revisions: {},
-    },
-    preservation: {},
-    diagnostics: {},
-  } as unknown as CanonicalDocumentEnvelope;
-}
-
-// ---------------------------------------------------------------------------
-// Media catalog registration
-// ---------------------------------------------------------------------------
-
-test("insertImage registers a MediaItem in the document media catalog", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "Hello" }] },
-  ]);
-  const selection = createSelectionSnapshot(5, 5);
-
-  const result = insertImage(document, selection, new Uint8Array([0x89, 0x50, 0x4e, 0x47]), "image/png", 800, 600, {
-    timestamp: TIMESTAMP,
-    altText: "A screenshot",
-  });
-
-  assert.ok(result.mediaId.startsWith("media:img-"), "mediaId prefix is media:img-");
-
-  const media = result.document.media as { items: Record<string, unknown> };
-  assert.ok(result.mediaId in media.items, "new mediaId must appear in the catalog");
-
-  const item = media.items[result.mediaId] as {
-    mediaId: string;
-    contentType: string;
-    altText: string;
-    packagePartName: string;
-  };
-  assert.equal(item.mediaId, result.mediaId);
-  assert.equal(item.contentType, "image/png");
-  assert.equal(item.altText, "A screenshot");
-  assert.ok(item.packagePartName.endsWith(".png"), "packagePartName ends with .png");
-});
-
-test("insertImage preserves existing media items in the catalog", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "A" }] },
-  ]);
-  const afterFirst = insertImage(document, createSelectionSnapshot(0, 0), new Uint8Array(), "image/jpeg", undefined, undefined, {
-    timestamp: "2026-03-26T09:00:00.000Z",
-  });
-  const afterSecond = insertImage(afterFirst.document, createSelectionSnapshot(0, 0), new Uint8Array(), "image/gif", undefined, undefined, {
-    timestamp: "2026-03-26T09:00:01.000Z",
-  });
-
-  const media = afterSecond.document.media as { items: Record<string, unknown> };
-  assert.ok(afterFirst.mediaId in media.items, "first mediaId is preserved");
-  assert.ok(afterSecond.mediaId in media.items, "second mediaId is present");
-  assert.equal(Object.keys(media.items).length, 2);
-});
-
-// ---------------------------------------------------------------------------
-// Story unit insertion
-// ---------------------------------------------------------------------------
-
-test("insertImage inserts an image unit at the selection position", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "Hello" }] },
-  ]);
-  const selection = createSelectionSnapshot(5, 5);
-
-  const result = insertImage(document, selection, new Uint8Array(), "image/png", undefined, undefined, {
-    timestamp: TIMESTAMP,
-    altText: "Banner",
-  });
-
-  const story = parseTextStory(result.document.content);
-  const unit = story.units[5];
-  assert.ok(unit, "unit at index 5 must exist");
-  assert.equal(unit.kind, "image");
-  if (unit.kind === "image") {
-    assert.equal(unit.mediaId, result.mediaId);
-    assert.equal(unit.altText, "Banner");
-  }
-});
-
-test("insertImage replaces the selected range with a single image unit", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "Hello World" }] },
-  ]);
-  // Select "Hello" (positions 0-5)
-  const selection = createSelectionSnapshot(0, 5);
-
-  const result = insertImage(document, selection, new Uint8Array(), "image/png");
-
-  const story = parseTextStory(result.document.content);
-  // Image should be at position 0, followed by " World"
-  assert.equal(story.units[0]?.kind, "image", "first unit is the inserted image");
-  // " World" characters follow
-  const textAfter = story.units.slice(1, 7).map((u) => (u.kind === "text" ? u.value : "")).join("");
-  assert.equal(textAfter, " World");
-});
-
-test("insertImage without altText omits altText from the image unit", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "X" }] },
-  ]);
-  const result = insertImage(document, createSelectionSnapshot(0, 0), new Uint8Array(), "image/png");
-  const story = parseTextStory(result.document.content);
-  const unit = story.units[0];
-  assert.ok(unit?.kind === "image");
-  assert.equal(unit.altText, undefined, "altText should be undefined when not supplied");
-});
-
-// ---------------------------------------------------------------------------
-// Caret and mapping
-// ---------------------------------------------------------------------------
-
-test("insertImage advances the caret to directly after the inserted image", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "ABC" }] },
-  ]);
-  const result = insertImage(document, createSelectionSnapshot(1, 1), new Uint8Array(), "image/png");
-
-  assert.equal(result.selection.anchor, 2, "caret is at position 2 (after the image)");
-  assert.equal(result.selection.head, 2);
-  assert.ok(result.selection.isCollapsed, "selection is collapsed after insertion");
-});
-
-test("insertImage emits a mapping step with the correct from, to, and insertSize", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "Test" }] },
-  ]);
-  const result = insertImage(document, createSelectionSnapshot(2, 4), new Uint8Array(), "image/png");
-
-  assert.deepEqual(result.mapping.steps, [{ from: 2, to: 4, insertSize: 1 }]);
-});
-
-// ---------------------------------------------------------------------------
-// MIME type to extension mapping
-// ---------------------------------------------------------------------------
-
-test("insertImage assigns the correct file extension for common MIME types", () => {
-  const cases = [
-    { mime: "image/png", ext: ".png" },
-    { mime: "image/jpeg", ext: ".jpg" },
-    { mime: "image/jpg", ext: ".jpg" },
-    { mime: "image/gif", ext: ".gif" },
-    { mime: "image/webp", ext: ".webp" },
-    { mime: "image/svg+xml", ext: ".svg" },
-    { mime: "image/bmp", ext: ".bmp" },
-  ];
-
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "X" }] },
-  ]);
-
-  for (const { mime, ext } of cases) {
-    const result = insertImage(
-      document,
-      createSelectionSnapshot(0, 0),
-      new Uint8Array(),
-      mime,
-      undefined,
-      undefined,
-      { timestamp: TIMESTAMP },
-    );
-    const media = result.document.media as { items: Record<string, { packagePartName: string }> };
-    const item = media.items[result.mediaId];
-    assert.ok(
-      item?.packagePartName.endsWith(ext),
-      `${mime} should produce extension ${ext}, got ${item?.packagePartName}`,
-    );
-  }
-});
-
-test("insertImage uses .bin extension for unknown MIME types", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "X" }] },
-  ]);
-  const result = insertImage(
-    document,
-    createSelectionSnapshot(0, 0),
-    new Uint8Array(),
-    "image/tiff",
-    undefined,
-    undefined,
-    { timestamp: TIMESTAMP },
-  );
-  const media = result.document.media as { items: Record<string, { packagePartName: string }> };
-  const item = media.items[result.mediaId];
-  assert.ok(item?.packagePartName.endsWith(".bin"), "unknown MIME type should use .bin extension");
-});
-
-// ---------------------------------------------------------------------------
-// Protected content rejection
-// ---------------------------------------------------------------------------
-
-test("insertImage rejects insertion range that crosses an opaque_inline unit", () => {
-  const document = createDocument([
-    {
-      type: "paragraph",
-      children: [
-        { type: "text", text: "A" },
-        { type: "opaque_inline", fragmentId: "fragment:1", warningId: "warning:1" },
-        { type: "text", text: "B" },
-      ],
-    },
-  ]);
-
-  assert.throws(
-    () => insertImage(document, createSelectionSnapshot(0, 2), new Uint8Array(), "image/png"),
-    (error: unknown) =>
-      error instanceof TextTransactionError && error.code === "unsupported_content",
-    "should throw TextTransactionError with unsupported_content code",
-  );
-});
-
-test("insertImage rejects insertion at an existing image position", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "A" }] },
-  ]);
-  // Insert first image
-  const first = insertImage(
-    document,
-    createSelectionSnapshot(0, 0),
-    new Uint8Array(),
-    "image/png",
-    undefined,
-    undefined,
-    { timestamp: TIMESTAMP },
-  );
-  // Try to replace the existing image (at position 0) with a new one
-  assert.throws(
-    () =>
-      insertImage(first.document, createSelectionSnapshot(0, 1), new Uint8Array(), "image/png"),
-    (error: unknown) =>
-      error instanceof TextTransactionError && error.code === "unsupported_content",
-    "should throw when range crosses an existing image unit",
-  );
-});
-
-// ---------------------------------------------------------------------------
-// updatedAt timestamp
-// ---------------------------------------------------------------------------
-
-test("insertImage propagates the context timestamp to document.updatedAt", () => {
-  const document = createDocument([
-    { type: "paragraph", children: [{ type: "text", text: "A" }] },
-  ]);
-  const ts = "2026-04-01T12:00:00.000Z";
-  const result = insertImage(document, createSelectionSnapshot(0, 0), new Uint8Array(), "image/png", undefined, undefined, {
-    timestamp: ts,
-  });
-
-  assert.equal(result.document.updatedAt, ts);
-});