@beyondwork/docx-react-component 1.0.29 → 1.0.31

package/src/io/ooxml/parse-inline-media.ts

@@ -0,0 +1,461 @@
+import type { OpcRelationship } from "./part-manifest.ts";
+import { normalizePartPath, resolveRelationshipTarget } from "./part-manifest.ts";
+
+export interface InlineMediaPart {
+  path: string;
+  contentType: string;
+}
+
+export interface ParsedInlineMedia {
+  type: "image";
+  mediaId: string;
+  relationshipId: string;
+  packagePartName: string;
+  contentType?: string;
+  filename: string;
+  altText?: string;
+  widthEmu?: number;
+  heightEmu?: number;
+  display?: "inline" | "floating";
+  floating?: {
+    horizontalPosition?: {
+      relativeFrom?: string;
+      align?: string;
+      offset?: number;
+    };
+    verticalPosition?: {
+      relativeFrom?: string;
+      align?: string;
+      offset?: number;
+    };
+    wrap?: "none" | "square" | "tight" | "through" | "topAndBottom";
+    behindDoc?: boolean;
+    layoutInCell?: boolean;
+    allowOverlap?: boolean;
+  };
+}
+
+interface XmlElementNode {
+  type: "element";
+  name: string;
+  attributes: Record<string, string>;
+  children: XmlNode[];
+}
+
+interface XmlTextNode {
+  type: "text";
+  text: string;
+}
+
+type XmlNode = XmlElementNode | XmlTextNode;
+
+export function parseInlineMediaXml(
+  xml: string,
+  relationships: readonly OpcRelationship[],
+  mediaParts: ReadonlyMap<string, InlineMediaPart> = new Map(),
+  sourcePartPath = "/word/document.xml",
+): ParsedInlineMedia[] {
+  const root = parseXml(xml);
+  const relationshipMap = new Map(relationships.map((relationship) => [relationship.id, relationship]));
+  const drawings = findDescendants(root, "drawing");
+  const media: ParsedInlineMedia[] = [];
+
+  for (const drawing of drawings) {
+    const inline = findFirstDescendant(drawing, "inline");
+    const anchor = findFirstDescendant(drawing, "anchor");
+    const container = anchor ?? inline;
+    const blip = findFirstDescendant(drawing, "blip");
+    if (!container || !blip) {
+      continue;
+    }
+
+    const relationshipId = blip.attributes["r:embed"] ?? blip.attributes.embed;
+    if (!relationshipId) {
+      continue;
+    }
+
+    const relationship = relationshipMap.get(relationshipId);
+    if (!relationship || !relationship.type.endsWith("/image")) {
+      continue;
+    }
+
+    const packagePartName = normalizePartPath(
+      resolveRelationshipTarget(sourcePartPath, relationship),
+    );
+    const mediaPart = mediaParts.get(packagePartName);
+    const docProperties = findFirstDescendant(container, "docPr");
+    const altText = readAltText(docProperties);
+    const floating = anchor ? readFloatingProperties(anchor) : undefined;
+
+    // Read extent dimensions (wp:extent cx/cy in EMUs)
+    const extent = findDrawingExtent(container);
+    const widthEmu = extent ? readEmuAttribute(extent, "cx") : undefined;
+    const heightEmu = extent ? readEmuAttribute(extent, "cy") : undefined;
+
+    media.push({
+      type: "image",
+      mediaId: `media:${packagePartName.slice(1)}`,
+      relationshipId,
+      packagePartName,
+      ...(mediaPart ? { contentType: mediaPart.contentType } : {}),
+      filename: packagePartName.slice(packagePartName.lastIndexOf("/") + 1),
+      ...(altText ? { altText } : {}),
+      ...(widthEmu !== undefined ? { widthEmu } : {}),
+      ...(heightEmu !== undefined ? { heightEmu } : {}),
+      ...(anchor ? { display: "floating" as const } : {}),
+      ...(floating ? { floating } : {}),
+    });
+  }
+
+  return media;
+}
+
+function findDrawingExtent(node: XmlElementNode): XmlElementNode | undefined {
+  const wordProcessingExtent = findFirstDescendant(node, "extent");
+  if (wordProcessingExtent) {
+    return wordProcessingExtent;
+  }
+
+  const transform = findFirstDescendant(node, "xfrm");
+  if (!transform) {
+    return undefined;
+  }
+
+  return findFirstDescendant(transform, "ext");
+}
+
+function readFloatingProperties(
+  node: XmlElementNode,
+): NonNullable<ParsedInlineMedia["floating"]> | undefined {
+  const horizontalPosition = findFirstDescendant(node, "positionH");
+  const verticalPosition = findFirstDescendant(node, "positionV");
+  const wrap =
+    findFirstDescendant(node, "wrapNone") ??
+    findFirstDescendant(node, "wrapSquare") ??
+    findFirstDescendant(node, "wrapTight") ??
+    findFirstDescendant(node, "wrapThrough") ??
+    findFirstDescendant(node, "wrapTopAndBottom");
+
+  const properties: NonNullable<ParsedInlineMedia["floating"]> = {};
+  const horizontalAxis = readAxisPosition(horizontalPosition);
+  const verticalAxis = readAxisPosition(verticalPosition);
+  if (horizontalAxis) {
+    properties.horizontalPosition = horizontalAxis;
+  }
+  if (verticalAxis) {
+    properties.verticalPosition = verticalAxis;
+  }
+  if (wrap) {
+    const wrapName = localName(wrap.name);
+    properties.wrap =
+      wrapName === "wrapSquare"
+        ? "square"
+        : wrapName === "wrapTight"
+          ? "tight"
+          : wrapName === "wrapThrough"
+            ? "through"
+            : wrapName === "wrapTopAndBottom"
+              ? "topAndBottom"
+              : "none";
+  }
+
+  properties.behindDoc = readBooleanAttribute(node, "behindDoc");
+  properties.layoutInCell = readBooleanAttribute(node, "layoutInCell");
+  properties.allowOverlap = readBooleanAttribute(node, "allowOverlap");
+
+  return Object.values(properties).some((value) => value !== undefined) ? properties : undefined;
+}
+
+function readAxisPosition(
+  node: XmlElementNode | undefined,
+): NonNullable<NonNullable<ParsedInlineMedia["floating"]>["horizontalPosition"]> | undefined {
+  if (!node) {
+    return undefined;
+  }
+
+  const align = findFirstDescendant(node, "align");
+  const posOffset = findFirstDescendant(node, "posOffset");
+  const position: NonNullable<NonNullable<ParsedInlineMedia["floating"]>["horizontalPosition"]> = {
+    ...(readOptionalAttribute(node, "relativeFrom") ? { relativeFrom: readOptionalAttribute(node, "relativeFrom") } : {}),
+    ...(align && extractText(align).trim() ? { align: extractText(align).trim() } : {}),
+  };
+
+  if (posOffset) {
+    const offset = Number.parseInt(extractText(posOffset).trim(), 10);
+    if (Number.isFinite(offset)) {
+      position.offset = offset;
+    }
+  }
+
+  return Object.keys(position).length > 0 ? position : undefined;
+}
+
+function readAltText(node: XmlElementNode | undefined): string | undefined {
+  if (!node) {
+    return undefined;
+  }
+
+  const description = node.attributes.descr?.trim();
+  if (description) {
+    return description;
+  }
+
+  const title = node.attributes.title?.trim();
+  if (title) {
+    return title;
+  }
+
+  const name = node.attributes.name?.trim();
+  return name || undefined;
+}
+
+function findFirstDescendant(node: XmlElementNode, local: string): XmlElementNode | undefined {
+  for (const child of node.children) {
+    if (child.type !== "element") {
+      continue;
+    }
+
+    if (localName(child.name) === local) {
+      return child;
+    }
+
+    const nested = findFirstDescendant(child, local);
+    if (nested) {
+      return nested;
+    }
+  }
+
+  return undefined;
+}
+
+function findDescendants(node: XmlElementNode, local: string): XmlElementNode[] {
+  const results: XmlElementNode[] = [];
+
+  for (const child of node.children) {
+    if (child.type !== "element") {
+      continue;
+    }
+
+    if (localName(child.name) === local) {
+      results.push(child);
+    }
+
+    results.push(...findDescendants(child, local));
+  }
+
+  return results;
+}
+
+function localName(name: string): string {
+  const separatorIndex = name.indexOf(":");
+  return separatorIndex >= 0 ? name.slice(separatorIndex + 1) : name;
+}
+
+function extractText(node: XmlElementNode): string {
+  return node.children.map((child) => child.type === "text" ? child.text : extractText(child)).join("");
+}
+
+function readOptionalAttribute(node: XmlElementNode, name: string): string | undefined {
+  return node.attributes[`wp:${name}`]
+    ?? node.attributes[`w:${name}`]
+    ?? node.attributes[name];
+}
+
+function readEmuAttribute(node: XmlElementNode, name: string): number | undefined {
+  const value = node.attributes[name] ?? node.attributes[`wp:${name}`];
+  if (value === undefined) return undefined;
+  const parsed = Number.parseInt(value, 10);
+  return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
+}
+
+function readBooleanAttribute(node: XmlElementNode, name: string): boolean | undefined {
+  const value = readOptionalAttribute(node, name);
+  if (value === undefined) {
+    return undefined;
+  }
+  return value !== "0" && value !== "false" && value !== "off";
+}
+
+function parseXml(xml: string): XmlElementNode {
+  const root: XmlElementNode = {
+    type: "element",
+    name: "__root__",
+    attributes: {},
+    children: [],
+  };
+  const stack: XmlElementNode[] = [root];
+  let cursor = 0;
+
+  while (cursor < xml.length) {
+    if (xml.startsWith("<!--", cursor)) {
+      const end = xml.indexOf("-->", cursor);
+      cursor = end >= 0 ? end + 3 : xml.length;
+      continue;
+    }
+
+    if (xml.startsWith("<?", cursor)) {
+      const end = xml.indexOf("?>", cursor);
+      cursor = end >= 0 ? end + 2 : xml.length;
+      continue;
+    }
+
+    if (xml[cursor] !== "<") {
+      const nextTag = xml.indexOf("<", cursor);
+      const end = nextTag >= 0 ? nextTag : xml.length;
+      const text = decodeXmlEntities(xml.slice(cursor, end));
+      if (text.length > 0) {
+        stack[stack.length - 1]?.children.push({ type: "text", text });
+      }
+      cursor = end;
+      continue;
+    }
+
+    if (xml[cursor + 1] === "/") {
+      const end = xml.indexOf(">", cursor);
+      const current = stack.pop();
+      const name = xml.slice(cursor + 2, end).trim();
+      if (!current || localName(current.name) !== localName(name)) {
+        throw new Error(`Malformed XML: unexpected closing tag </${name}>.`);
+      }
+      cursor = end + 1;
+      continue;
+    }
+
+    const tagEnd = findTagEnd(xml, cursor);
+    const tagBody = xml.slice(cursor + 1, tagEnd);
+    const selfClosing = /\/\s*$/.test(tagBody);
+    const { name, attributes } = parseTag(tagBody.replace(/\/\s*$/, "").trim());
+    const element: XmlElementNode = {
+      type: "element",
+      name,
+      attributes,
+      children: [],
+    };
+    stack[stack.length - 1]?.children.push(element);
+
+    if (!selfClosing) {
+      stack.push(element);
+    }
+
+    cursor = tagEnd + 1;
+  }
+
+  if (stack.length !== 1) {
+    throw new Error("Malformed XML: unclosed element.");
+  }
+
+  return root;
+}
+
+function parseTag(tagBody: string): { name: string; attributes: Record<string, string> } {
+  let cursor = 0;
+  while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) {
+    cursor += 1;
+  }
+
+  const nameStart = cursor;
+  while (cursor < tagBody.length && !/\s/.test(tagBody[cursor] ?? "")) {
+    cursor += 1;
+  }
+  const name = tagBody.slice(nameStart, cursor);
+  const attributes: Record<string, string> = {};
+
+  while (cursor < tagBody.length) {
+    while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) {
+      cursor += 1;
+    }
+    if (cursor >= tagBody.length) {
+      break;
+    }
+
+    const keyStart = cursor;
+    while (cursor < tagBody.length && !/[\s=]/.test(tagBody[cursor] ?? "")) {
+      cursor += 1;
+    }
+    const key = tagBody.slice(keyStart, cursor);
+
+    while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) {
+      cursor += 1;
+    }
+
+    if (tagBody[cursor] !== "=") {
+      attributes[key] = "";
+      continue;
+    }
+    cursor += 1;
+
+    while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) {
+      cursor += 1;
+    }
+
+    const quote = tagBody[cursor];
+    if (quote !== `"` && quote !== `'`) {
+      throw new Error(`Malformed XML attribute ${key}.`);
+    }
+    cursor += 1;
+
+    const valueStart = cursor;
+    while (cursor < tagBody.length && tagBody[cursor] !== quote) {
+      cursor += 1;
+    }
+    attributes[key] = decodeXmlEntities(tagBody.slice(valueStart, cursor));
+    cursor += 1;
+  }
+
+  return { name, attributes };
+}
+
+function findTagEnd(xml: string, start: number): number {
+  let cursor = start + 1;
+  let quote: string | null = null;
+
+  while (cursor < xml.length) {
+    const current = xml[cursor];
+    if (quote) {
+      if (current === quote) {
+        quote = null;
+      }
+      cursor += 1;
+      continue;
+    }
+
+    if (current === `"` || current === `'`) {
+      quote = current;
+      cursor += 1;
+      continue;
+    }
+
+    if (current === ">") {
+      return cursor;
+    }
+
+    cursor += 1;
+  }
+
+  throw new Error("Malformed XML: missing >.");
+}
+
+function decodeXmlEntities(value: string): string {
+  return value.replace(/&(#x[0-9a-fA-F]+|#\d+|amp|lt|gt|quot|apos);/g, (match, entity) => {
+    switch (entity) {
+      case "amp":
+        return "&";
+      case "lt":
+        return "<";
+      case "gt":
+        return ">";
+      case "quot":
+        return `"`;
+      case "apos":
+        return "'";
+      default:
+        if (entity.startsWith("#x")) {
+          return String.fromCodePoint(Number.parseInt(entity.slice(2), 16));
+        }
+        if (entity.startsWith("#")) {
+          return String.fromCodePoint(Number.parseInt(entity.slice(1), 10));
+        }
+        return match;
+    }
+  });
+}