@beyondwork/docx-react-component 1.0.1 → 1.0.3

package/src/io/ooxml/parse-shapes.ts

@@ -0,0 +1,271 @@
+/**
+ * parse-shapes.ts
+ *
+ * Parses shape-related OOXML content:
+ * - wps:wsp (WordprocessingShape) from w:drawing — rendered as bordered div with text
+ * - WordArt — wps:wsp with text-geometry preset (prst starts with "text")
+ * - VML shapes (v:shape, v:rect, v:textbox) from w:pict — legacy pre-2007 content
+ *
+ * These content types are rendered as read-only previews. The original XML is
+ * preserved in the canonical node's rawXml field for lossless round-trip export.
+ */
+
+const WPS_SHAPE_GRAPHIC_URI =
+  "http://schemas.microsoft.com/office/word/2010/wordprocessingShape";
+
+export interface ParsedWpsShape {
+  type: "shape";
+  /** Extracted text content from wps:txbx for display. */
+  text?: string;
+  /** DrawML geometry preset, e.g. "rect", "roundRect". */
+  geometry?: string;
+  /** Original drawing XML for lossless round-trip export. */
+  rawXml: string;
+}
+
+export interface ParsedWordArt {
+  type: "wordart";
+  /** Extracted text. */
+  text: string;
+  /** DrawML geometry preset, e.g. "textWave", "textCurve". */
+  geometry?: string;
+  /** Original drawing XML for lossless round-trip export. */
+  rawXml: string;
+}
+
+export interface ParsedVmlShape {
+  type: "vml_shape";
+  /** Shape type identifier, e.g. "#_x0000_t202" for a text box. */
+  shapeType?: string;
+  /** Extracted text from v:textbox content. */
+  text?: string;
+  /** Original w:pict XML for lossless round-trip export. */
+  rawXml: string;
+}
+
+export type ParsedShape = ParsedWpsShape | ParsedWordArt | ParsedVmlShape;
+
+/**
+ * Attempt to parse a w:drawing XML fragment as a wps:wsp shape or WordArt.
+ *
+ * Returns null if the drawing does not contain a WPS shape.
+ */
+export function parseShapeXml(drawingXml: string): ParsedWpsShape | ParsedWordArt | null {
+  const root = parseXml(drawingXml);
+  const graphicData = findFirstDescendant(root, "graphicData");
+  if (!graphicData) return null;
+
+  const uri = graphicData.attributes.uri ?? "";
+  if (uri !== WPS_SHAPE_GRAPHIC_URI) return null;
+
+  const wsp = findFirstDescendant(root, "wsp");
+  if (!wsp) return null;
+
+  // Extract geometry preset
+  const spPr = findFirstChild(wsp, "spPr");
+  const prstGeom = spPr ? findFirstDescendant(spPr, "prstGeom") : null;
+  const prst = prstGeom?.attributes.prst ?? prstGeom?.attributes["prst"] ?? undefined;
+
+  // Extract text from wps:txbx > w:txbxContent
+  const txbx = findFirstChild(wsp, "txbx");
+  const txbxContent = txbx ? findFirstDescendant(txbx, "txbxContent") : null;
+  const text = txbxContent ? extractAllText(txbxContent).trim() || undefined : undefined;
+
+  // WordArt detection: geometry preset names that start with "text"
+  if (prst && /^text/i.test(prst)) {
+    return {
+      type: "wordart",
+      text: text ?? "",
+      ...(prst ? { geometry: prst } : {}),
+      rawXml: drawingXml,
+    };
+  }
+
+  return {
+    type: "shape",
+    ...(text ? { text } : {}),
+    ...(prst ? { geometry: prst } : {}),
+    rawXml: drawingXml,
+  };
+}
+
+/**
+ * Attempt to parse a w:pict XML fragment as one or more VML shapes.
+ *
+ * Returns null if the pict element contains no recognised VML shapes.
+ * Returns the first recognised VML shape found.
+ */
+export function parseVmlXml(pictXml: string): ParsedVmlShape | null {
+  const root = parseXml(pictXml);
+
+  // Look for v:shape, v:rect, v:textbox at any depth
+  const vShape = findFirstDescendant(root, "shape");
+  const vRect = findFirstDescendant(root, "rect");
+  const vTextbox = findFirstDescendant(root, "textbox");
+
+  const vmlNode = vShape ?? vRect ?? vTextbox;
+  if (!vmlNode) return null;
+
+  const shapeType =
+    vShape?.attributes.type ??
+    vShape?.attributes["type"] ??
+    undefined;
+
+  // Extract text from v:textbox or nested w:txbxContent
+  let text: string | undefined;
+  const textboxNode = findFirstDescendant(vmlNode, "textbox") ?? (localName(vmlNode.name) === "textbox" ? vmlNode : null);
+  if (textboxNode) {
+    const txbxContent = findFirstDescendant(textboxNode, "txbxContent");
+    if (txbxContent) {
+      text = extractAllText(txbxContent).trim() || undefined;
+    } else {
+      text = extractAllText(textboxNode).trim() || undefined;
+    }
+  }
+
+  return {
+    type: "vml_shape",
+    ...(shapeType ? { shapeType } : {}),
+    ...(text ? { text } : {}),
+    rawXml: pictXml,
+  };
+}
+
+// ---- Text extraction helpers ----
+
+function extractAllText(node: XmlElementNode): string {
+  return node.children
+    .map((child) => {
+      if (child.type === "text") return child.text;
+      // Only collect from w:t elements
+      if (child.type === "element" && localName(child.name) === "t") {
+        return extractAllText(child);
+      }
+      return extractAllText(child);
+    })
+    .join("");
+}
+
+// ---- Minimal XML parser (local, self-contained) ----
+
+interface XmlElementNode {
+  type: "element";
+  name: string;
+  attributes: Record<string, string>;
+  children: XmlNode[];
+}
+
+interface XmlTextNode {
+  type: "text";
+  text: string;
+}
+
+type XmlNode = XmlElementNode | XmlTextNode;
+
+function findFirstChild(node: XmlElementNode, local: string): XmlElementNode | undefined {
+  for (const child of node.children) {
+    if (child.type === "element" && localName(child.name) === local) return child;
+  }
+  return 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 localName(name: string): string {
+  const i = name.indexOf(":");
+  return i >= 0 ? name.slice(i + 1) : name;
+}
+
+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 = 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);
+      stack.pop();
+      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;
+  }
+
+  return root;
+}
+
+function parseTag(tagBody: string): { name: string; attributes: Record<string, string> } {
+  let cursor = 0;
+  while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) cursor++;
+  const nameStart = cursor;
+  while (cursor < tagBody.length && !/\s/.test(tagBody[cursor] ?? "")) cursor++;
+  const name = tagBody.slice(nameStart, cursor);
+  const attributes: Record<string, string> = {};
+
+  while (cursor < tagBody.length) {
+    while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) cursor++;
+    if (cursor >= tagBody.length) break;
+    const keyStart = cursor;
+    while (cursor < tagBody.length && !/[\s=]/.test(tagBody[cursor] ?? "")) cursor++;
+    const key = tagBody.slice(keyStart, cursor);
+    while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) cursor++;
+    if (tagBody[cursor] !== "=") { attributes[key] = ""; continue; }
+    cursor++;
+    while (cursor < tagBody.length && /\s/.test(tagBody[cursor] ?? "")) cursor++;
+    const quote = tagBody[cursor];
+    if (quote !== `"` && quote !== `'`) break;
+    cursor++;
+    const valueStart = cursor;
+    while (cursor < tagBody.length && tagBody[cursor] !== quote) cursor++;
+    attributes[key] = tagBody.slice(valueStart, cursor);
+    cursor++;
+  }
+
+  return { name, attributes };
+}
+
+function findTagEnd(xml: string, start: number): number {
+  let cursor = start + 1;
+  let quote: string | null = null;
+  while (cursor < xml.length) {
+    const c = xml[cursor];
+    if (quote) { if (c === quote) quote = null; cursor++; continue; }
+    if (c === `"` || c === `'`) { quote = c; cursor++; continue; }
+    if (c === ">") return cursor;
+    cursor++;
+  }
+  return xml.length - 1;
+}