@beyondwork/docx-react-component 1.0.1 → 1.0.3

package/src/core/schema/text-schema.ts

@@ -0,0 +1,512 @@
+import type {
+  DocumentRootNode,
+  HyperlinkNode,
+  InlineNode,
+  OpaqueBlockNode,
+  OpaqueInlineNode,
+  ParagraphNode,
+  TextMark,
+} from "../../model/canonical-document.ts";
+
+export interface ParagraphProperties {
+  styleId?: string;
+  numbering?: ParagraphNode["numbering"];
+}
+
+export interface TextStory {
+  firstParagraph: ParagraphProperties;
+  units: StoryUnit[];
+  size: number;
+}
+
+export type StoryUnit =
+  | TextCharacterUnit
+  | TabUnit
+  | HardBreakUnit
+  | ImageUnit
+  | OpaqueInlineUnit
+  | OpaqueBlockUnit
+  | ParagraphBreakUnit;
+
+export interface TextCharacterUnit {
+  kind: "text";
+  value: string;
+  marks?: TextMark[];
+  hyperlinkHref?: string;
+}
+
+export interface TabUnit {
+  kind: "tab";
+  hyperlinkHref?: string;
+}
+
+export interface HardBreakUnit {
+  kind: "hard_break";
+  hyperlinkHref?: string;
+}
+
+export interface ImageUnit {
+  kind: "image";
+  mediaId: string;
+  altText?: string;
+}
+
+export interface OpaqueInlineUnit {
+  kind: "opaque_inline";
+  fragmentId: string;
+  warningId: string;
+}
+
+export interface OpaqueBlockUnit {
+  kind: "opaque_block";
+  fragmentId: string;
+  warningId: string;
+  nextParagraph?: ParagraphProperties;
+}
+
+export interface ParagraphBreakUnit {
+  kind: "paragraph_break";
+  nextParagraph: ParagraphProperties;
+}
+
+export function parseTextStory(content: unknown): TextStory {
+  const root = normalizeDocumentRoot(content);
+  const firstParagraphNode = root.children.find(isParagraphNode);
+  const firstParagraph = firstParagraphNode
+    ? extractParagraphProperties(firstParagraphNode)
+    : cloneParagraphProperties(EMPTY_PARAGRAPH_PROPERTIES);
+  const units: StoryUnit[] = [];
+
+  for (let index = 0; index < root.children.length; index += 1) {
+    const block = root.children[index];
+    const nextBlock = root.children[index + 1];
+
+    if (isParagraphNode(block)) {
+      units.push(...flattenInlineNodes(block.children));
+
+      if (isParagraphNode(nextBlock)) {
+        units.push({
+          kind: "paragraph_break",
+          nextParagraph: extractParagraphProperties(nextBlock),
+        });
+      }
+
+      continue;
+    }
+
+    units.push({
+      kind: "opaque_block",
+      fragmentId: block.fragmentId,
+      warningId: block.warningId,
+      ...(isParagraphNode(nextBlock)
+        ? { nextParagraph: extractParagraphProperties(nextBlock) }
+        : {}),
+    });
+  }
+
+  return {
+    firstParagraph,
+    units,
+    size: units.length,
+  };
+}
+
+export function serializeTextStory(story: TextStory): DocumentRootNode {
+  const blocks: Array<ParagraphNode | OpaqueBlockNode> = [];
+  let currentParagraph: ParagraphNode | undefined = createParagraph(story.firstParagraph);
+  let currentHyperlink: HyperlinkNode | undefined;
+  let activeTextBuffer:
+    | {
+        text: string;
+        marks?: TextMark[];
+        hyperlinkHref?: string;
+      }
+    | undefined;
+
+  const ensureCurrentParagraph = () => {
+    if (!currentParagraph) {
+      currentParagraph = createParagraph(EMPTY_PARAGRAPH_PROPERTIES);
+    }
+  };
+
+  const flushTextBuffer = () => {
+    if (!activeTextBuffer || activeTextBuffer.text.length === 0) {
+      activeTextBuffer = undefined;
+      return;
+    }
+
+    const textNode = {
+      type: "text" as const,
+      text: activeTextBuffer.text,
+      ...(activeTextBuffer.marks ? { marks: cloneMarks(activeTextBuffer.marks) } : {}),
+    };
+
+    ensureCurrentParagraph();
+
+    if (activeTextBuffer.hyperlinkHref) {
+      if (!currentHyperlink || currentHyperlink.href !== activeTextBuffer.hyperlinkHref) {
+        flushHyperlink();
+        currentHyperlink = {
+          type: "hyperlink",
+          href: activeTextBuffer.hyperlinkHref,
+          children: [],
+        };
+      }
+
+      currentHyperlink.children.push(textNode);
+    } else {
+      flushHyperlink();
+      currentParagraph!.children.push(textNode);
+    }
+
+    activeTextBuffer = undefined;
+  };
+
+  const flushHyperlink = () => {
+    if (currentHyperlink) {
+      ensureCurrentParagraph();
+      currentParagraph!.children.push(currentHyperlink);
+      currentHyperlink = undefined;
+    }
+  };
+
+  const flushParagraph = () => {
+    flushTextBuffer();
+    flushHyperlink();
+
+    if (!currentParagraph) {
+      return;
+    }
+
+    blocks.push(currentParagraph);
+    currentParagraph = undefined;
+  };
+
+  const pushInlineNode = (
+    node: Exclude<InlineNode, { type: "text" }>,
+    hyperlinkHref?: string,
+  ) => {
+    flushTextBuffer();
+    ensureCurrentParagraph();
+
+    if (hyperlinkHref) {
+      if (!currentHyperlink || currentHyperlink.href !== hyperlinkHref) {
+        flushHyperlink();
+        currentHyperlink = {
+          type: "hyperlink",
+          href: hyperlinkHref,
+          children: [],
+        };
+      }
+
+      currentHyperlink.children.push(node as HyperlinkNode["children"][number]);
+      return;
+    }
+
+    flushHyperlink();
+    currentParagraph!.children.push(node);
+  };
+
+  for (const unit of story.units) {
+    if (unit.kind === "paragraph_break") {
+      flushParagraph();
+      currentParagraph = createParagraph(unit.nextParagraph);
+      continue;
+    }
+
+    if (unit.kind === "opaque_block") {
+      flushParagraph();
+      blocks.push({
+        type: "opaque_block",
+        fragmentId: unit.fragmentId,
+        warningId: unit.warningId,
+      });
+      currentParagraph = unit.nextParagraph
+        ? createParagraph(unit.nextParagraph)
+        : undefined;
+      continue;
+    }
+
+    if (unit.kind === "text") {
+      const shouldExtendBuffer =
+        activeTextBuffer &&
+        activeTextBuffer.hyperlinkHref === unit.hyperlinkHref &&
+        haveEqualMarks(activeTextBuffer.marks, unit.marks);
+
+      if (shouldExtendBuffer && activeTextBuffer) {
+        activeTextBuffer.text += unit.value;
+      } else {
+        flushTextBuffer();
+        activeTextBuffer = {
+          text: unit.value,
+          ...(unit.marks ? { marks: cloneMarks(unit.marks) } : {}),
+          ...(unit.hyperlinkHref ? { hyperlinkHref: unit.hyperlinkHref } : {}),
+        };
+      }
+
+      continue;
+    }
+
+    switch (unit.kind) {
+      case "tab":
+        pushInlineNode({ type: "tab" }, unit.hyperlinkHref);
+        break;
+      case "hard_break":
+        pushInlineNode({ type: "hard_break" }, unit.hyperlinkHref);
+        break;
+      case "image":
+        pushInlineNode({
+          type: "image",
+          mediaId: unit.mediaId,
+          ...(unit.altText ? { altText: unit.altText } : {}),
+        });
+        break;
+      case "opaque_inline":
+        pushInlineNode({
+          type: "opaque_inline",
+          fragmentId: unit.fragmentId,
+          warningId: unit.warningId,
+        });
+        break;
+    }
+  }
+
+  flushParagraph();
+
+  if (blocks.length === 0) {
+    blocks.push(createParagraph(story.firstParagraph));
+  }
+
+  return {
+    type: "doc",
+    children: blocks,
+  };
+}
+
+export function createPlainText(story: TextStory): string {
+  return story.units
+    .map((unit) => {
+      switch (unit.kind) {
+        case "text":
+          return unit.value;
+        case "tab":
+          return "\t";
+        case "hard_break":
+          return "\n";
+        case "paragraph_break":
+          return "\n";
+        case "image":
+          return "\uFFFC";
+        case "opaque_inline":
+          return "\uFFF9";
+        case "opaque_block":
+          return "\uFFFA";
+      }
+    })
+    .join("");
+}
+
+export function cloneStoryUnit(unit: StoryUnit): StoryUnit {
+  switch (unit.kind) {
+    case "text":
+      return {
+        kind: "text",
+        value: unit.value,
+        ...(unit.marks ? { marks: cloneMarks(unit.marks) } : {}),
+        ...(unit.hyperlinkHref ? { hyperlinkHref: unit.hyperlinkHref } : {}),
+      };
+    case "tab":
+      return {
+        kind: "tab",
+        ...(unit.hyperlinkHref ? { hyperlinkHref: unit.hyperlinkHref } : {}),
+      };
+    case "hard_break":
+      return {
+        kind: "hard_break",
+        ...(unit.hyperlinkHref ? { hyperlinkHref: unit.hyperlinkHref } : {}),
+      };
+    case "image":
+      return {
+        kind: "image",
+        mediaId: unit.mediaId,
+        ...(unit.altText ? { altText: unit.altText } : {}),
+      };
+    case "opaque_inline":
+      return {
+        kind: "opaque_inline",
+        fragmentId: unit.fragmentId,
+        warningId: unit.warningId,
+      };
+    case "opaque_block":
+      return {
+        kind: "opaque_block",
+        fragmentId: unit.fragmentId,
+        warningId: unit.warningId,
+        ...(unit.nextParagraph
+          ? { nextParagraph: cloneParagraphProperties(unit.nextParagraph) }
+          : {}),
+      };
+    case "paragraph_break":
+      return {
+        kind: "paragraph_break",
+        nextParagraph: cloneParagraphProperties(unit.nextParagraph),
+      };
+  }
+}
+
+export function cloneParagraphProperties(
+  properties: ParagraphProperties,
+): ParagraphProperties {
+  return {
+    ...(properties.styleId ? { styleId: properties.styleId } : {}),
+    ...(properties.numbering
+      ? {
+          numbering: {
+            numberingInstanceId: properties.numbering.numberingInstanceId,
+            level: properties.numbering.level,
+          },
+        }
+      : {}),
+  };
+}
+
+function normalizeDocumentRoot(content: unknown): DocumentRootNode {
+  if (isDocumentRootNode(content)) {
+    return content;
+  }
+
+  if (Array.isArray(content)) {
+    return {
+      type: "doc",
+      children: content.filter(
+        (block): block is DocumentRootNode["children"][number] =>
+          isParagraphNode(block) || isOpaqueBlockNode(block),
+      ),
+    };
+  }
+
+  return {
+    type: "doc",
+    children: [createEmptyParagraph()],
+  };
+}
+
+function flattenInlineNodes(
+  nodes: ParagraphNode["children"],
+  hyperlinkHref?: string,
+): StoryUnit[] {
+  const units: StoryUnit[] = [];
+
+  for (const node of nodes) {
+    switch (node.type) {
+      case "text":
+        for (const character of Array.from(node.text)) {
+          units.push({
+            kind: "text",
+            value: character,
+            ...(node.marks ? { marks: cloneMarks(node.marks) } : {}),
+            ...(hyperlinkHref ? { hyperlinkHref } : {}),
+          });
+        }
+        break;
+      case "tab":
+        units.push({
+          kind: "tab",
+          ...(hyperlinkHref ? { hyperlinkHref } : {}),
+        });
+        break;
+      case "hard_break":
+        units.push({
+          kind: "hard_break",
+          ...(hyperlinkHref ? { hyperlinkHref } : {}),
+        });
+        break;
+      case "hyperlink":
+        units.push(...flattenInlineNodes(node.children, node.href));
+        break;
+      case "image":
+        units.push({
+          kind: "image",
+          mediaId: node.mediaId,
+          ...(node.altText ? { altText: node.altText } : {}),
+        });
+        break;
+      case "opaque_inline":
+        units.push({
+          kind: "opaque_inline",
+          fragmentId: node.fragmentId,
+          warningId: node.warningId,
+        });
+        break;
+    }
+  }
+
+  return units;
+}
+
+function extractParagraphProperties(paragraph: ParagraphNode): ParagraphProperties {
+  return {
+    ...(paragraph.styleId ? { styleId: paragraph.styleId } : {}),
+    ...(paragraph.numbering
+      ? {
+          numbering: {
+            numberingInstanceId: paragraph.numbering.numberingInstanceId,
+            level: paragraph.numbering.level,
+          },
+        }
+      : {}),
+  };
+}
+
+function createParagraph(properties: ParagraphProperties): ParagraphNode {
+  return {
+    type: "paragraph",
+    ...(properties.styleId ? { styleId: properties.styleId } : {}),
+    ...(properties.numbering
+      ? {
+          numbering: {
+            numberingInstanceId: properties.numbering.numberingInstanceId,
+            level: properties.numbering.level,
+          },
+        }
+      : {}),
+    children: [],
+  };
+}
+
+function createEmptyParagraph(): ParagraphNode {
+  return {
+    type: "paragraph",
+    children: [],
+  };
+}
+
+const EMPTY_PARAGRAPH_PROPERTIES: ParagraphProperties = {};
+
+function cloneMarks(marks: TextMark[]): TextMark[] {
+  return marks.map((mark) => ({ type: mark.type }));
+}
+
+function haveEqualMarks(left?: TextMark[], right?: TextMark[]): boolean {
+  if (!left && !right) {
+    return true;
+  }
+
+  if (!left || !right || left.length !== right.length) {
+    return false;
+  }
+
+  return left.every((mark, index) => mark.type === right[index]?.type);
+}
+
+function isDocumentRootNode(value: unknown): value is DocumentRootNode {
+  return Boolean(value) && typeof value === "object" && (value as { type?: string }).type === "doc";
+}
+
+function isParagraphNode(value: unknown): value is ParagraphNode {
+  return Boolean(value) && typeof value === "object" && (value as { type?: string }).type === "paragraph";
+}
+
+function isOpaqueBlockNode(value: unknown): value is OpaqueBlockNode {
+  return Boolean(value) && typeof value === "object" && (value as { type?: string }).type === "opaque_block";
+}

package/src/core/selection/README.md

@@ -0,0 +1,3 @@
+# Core Selection
+
+Selections, ranges, position mapping, and anchor remapping helpers belong here.