@beyondwork/docx-react-component 1.0.19 → 1.0.20

package/src/io/ooxml/parse-headers-footers.ts

@@ -3,12 +3,18 @@ import type {
   FootnoteRefNode,
   HeaderFooterVariant,
   InlineNode,
+  ParagraphIndentation,
   ParagraphNode,
+  ParagraphSpacing,
+  TabStop,
   TableCellNode,
   TableNode,
   TableRowNode,
   TextMark,
 } from "../../model/canonical-document.ts";
+import { resolveHighlightColor } from "./highlight-colors.ts";
+import { classifyFieldInstruction } from "./parse-fields.ts";
+import { parseShapeXml, parseVmlXml } from "./parse-shapes.ts";
 
 // ---- Public types ----
 
@@ -30,15 +36,21 @@ interface XmlElementNode {
   name: string;
   attributes: Record<string, string>;
   children: XmlNode[];
+  start: number;
+  end: number;
 }
 
 interface XmlTextNode {
   type: "text";
   text: string;
+  start: number;
+  end: number;
 }
 
 type XmlNode = XmlElementNode | XmlTextNode;
 
+let currentSourceXml = "";
+
 // ---- Public API ----
 
 /**
@@ -137,8 +149,9 @@ function extractSectPrRefs(
 
       if (relationshipId) {
         // Avoid duplicates (multiple sectPr may reference same header)
+        const dedupeKey = `${kind}:${variant}:${relationshipId}`;
         const alreadyAdded = refs.some(
-          (ref) => ref.relationshipId === relationshipId && ref.kind === kind,
+          (ref) => `${ref.kind}:${ref.variant}:${ref.relationshipId}` === dedupeKey,
         );
         if (!alreadyAdded) {
           refs.push({ variant, relationshipId, kind, sectionIndex });
@@ -189,6 +202,7 @@ function parseHdrFtrXml(
           type: "opaque_block",
           fragmentId: "fragment:hdrftr-tbl",
           warningId: "warning:hdrftr-opaque-table",
+          rawXml: serializeElementToXml(child),
         });
       }
     } else {
@@ -197,6 +211,7 @@ function parseHdrFtrXml(
         type: "opaque_block",
         fragmentId: "fragment:hdrftr-opaque",
         warningId: "warning:hdrftr-opaque-block",
+        rawXml: serializeElementToXml(child),
       });
     }
   }
@@ -207,7 +222,15 @@ function parseHdrFtrXml(
 function parseParagraphElement(pElement: XmlElementNode): ParagraphNode {
   let styleId: string | undefined;
   let alignment: ParagraphNode["alignment"];
+  let spacing: ParagraphNode["spacing"];
+  let indentation: ParagraphNode["indentation"];
+  let tabStops: ParagraphNode["tabStops"];
   const children: InlineNode[] = [];
+  let activeComplexField: {
+    instruction: string;
+    children: Array<Extract<InlineNode, { type: "text" | "hard_break" | "tab" }>>;
+    mode: "instruction" | "result";
+  } | null = null;
 
   for (const child of pElement.children) {
     if (child.type !== "element") {
@@ -224,25 +247,121 @@ function parseParagraphElement(pElement: XmlElementNode): ParagraphNode {
       if (jcVal === "left" || jcVal === "center" || jcVal === "right" || jcVal === "both" || jcVal === "distribute") {
         alignment = jcVal;
       }
+      spacing = readParagraphSpacing(child);
+      indentation = readParagraphIndentation(child);
+      tabStops = readParagraphTabStops(child);
     } else if (name === "r") {
-      children.push(...parseRunElement(child));
+      activeComplexField = appendRunNodes(child, children, activeComplexField);
     } else if (name === "hyperlink") {
       children.push(parseHyperlinkElement(child));
     } else if (name === "bookmarkStart" || name === "bookmarkEnd") {
       children.push(parseBookmarkElement(child));
     } else if (name === "fldSimple") {
+      if (activeComplexField && activeComplexField.instruction.trim().length > 0) {
+        children.push({
+          type: "field",
+          fieldType: "complex",
+          instruction: activeComplexField.instruction,
+          children: activeComplexField.children,
+        });
+        activeComplexField = null;
+      }
       pushFieldNode(children, child, "simple");
     }
   }
 
+  if (activeComplexField && activeComplexField.instruction.trim().length > 0) {
+    children.push({
+      type: "field",
+      fieldType: "complex",
+      instruction: activeComplexField.instruction,
+      children: activeComplexField.children,
+    });
+  }
+
   return {
     type: "paragraph",
     ...(styleId ? { styleId } : {}),
     ...(alignment ? { alignment } : {}),
+    ...(spacing ? { spacing } : {}),
+    ...(indentation ? { indentation } : {}),
+    ...(tabStops && tabStops.length > 0 ? { tabStops } : {}),
     children,
   };
 }
 
+function appendRunNodes(
+  rElement: XmlElementNode,
+  nodes: InlineNode[],
+  activeComplexField: {
+    instruction: string;
+    children: Array<Extract<InlineNode, { type: "text" | "hard_break" | "tab" }>>;
+    mode: "instruction" | "result";
+  } | null,
+): {
+  instruction: string;
+  children: Array<Extract<InlineNode, { type: "text" | "hard_break" | "tab" }>>;
+  mode: "instruction" | "result";
+} | null {
+  const marks: TextMark[] = parseRunProperties(rElement);
+
+  for (const child of rElement.children) {
+    if (child.type !== "element") {
+      continue;
+    }
+
+    const name = localName(child.name);
+    if (name === "fldChar") {
+      const fldType = child.attributes["w:fldCharType"] ?? child.attributes.fldCharType;
+      if (fldType === "begin") {
+        activeComplexField = { instruction: "", children: [], mode: "instruction" };
+      } else if (fldType === "separate" && activeComplexField) {
+        activeComplexField.mode = "result";
+      } else if (fldType === "end" && activeComplexField) {
+        if (activeComplexField.instruction.trim().length > 0) {
+          nodes.push({
+            type: "field",
+            fieldType: "complex",
+            instruction: activeComplexField.instruction,
+            children: activeComplexField.children,
+          });
+        }
+        activeComplexField = null;
+      }
+      continue;
+    }
+
+    if (name === "instrText") {
+      if (activeComplexField) {
+        activeComplexField.instruction += extractTextContent(child);
+      } else {
+        pushFieldNode(nodes, child, "complex");
+      }
+      continue;
+    }
+
+    const inlineNode = parseRunChildNode(child, marks);
+    if (!inlineNode) {
+      continue;
+    }
+
+    if (activeComplexField?.mode === "result") {
+      if (
+        inlineNode.type === "text" ||
+        inlineNode.type === "hard_break" ||
+        inlineNode.type === "tab"
+      ) {
+        activeComplexField.children.push(inlineNode);
+      }
+      continue;
+    }
+
+    nodes.push(inlineNode);
+  }
+
+  return activeComplexField;
+}
+
 function parseRunElement(rElement: XmlElementNode): InlineNode[] {
   const nodes: InlineNode[] = [];
   const marks: TextMark[] = parseRunProperties(rElement);
@@ -293,12 +412,136 @@ function parseRunElement(rElement: XmlElementNode): InlineNode[] {
       nodes.push(parseBookmarkElement(child));
     } else if (name === "instrText") {
       pushFieldNode(nodes, child, "complex");
+    } else if (name === "drawing") {
+      const drawingXml = currentSourceXml.slice(child.start, child.end);
+      const shapeResult = parseShapeXml(drawingXml);
+      if (shapeResult) {
+        nodes.push(shapeResult);
+      }
+    } else if (name === "pict") {
+      const pictXml = currentSourceXml.slice(child.start, child.end);
+      const vmlResult = parseVmlXml(pictXml);
+      if (vmlResult) {
+        nodes.push(vmlResult);
+      }
+    } else if (name === "AlternateContent") {
+      const drawingNode = findFirstDescendant(child, "drawing");
+      if (drawingNode) {
+        const drawingXml = currentSourceXml.slice(drawingNode.start, drawingNode.end);
+        const shapeResult = parseShapeXml(drawingXml);
+        if (shapeResult) {
+          nodes.push({
+            ...shapeResult,
+            rawXml: currentSourceXml.slice(child.start, child.end),
+          });
+          continue;
+        }
+      }
+      const pictNode = findFirstDescendant(child, "pict");
+      if (pictNode) {
+        const pictXml = currentSourceXml.slice(pictNode.start, pictNode.end);
+        const vmlResult = parseVmlXml(pictXml);
+        if (vmlResult) {
+          nodes.push({
+            ...vmlResult,
+            rawXml: currentSourceXml.slice(child.start, child.end),
+          });
+        }
+      }
     }
   }
 
   return nodes;
 }
 
+function parseRunChildNode(
+  child: XmlElementNode,
+  marks: TextMark[],
+): InlineNode | null {
+  const name = localName(child.name);
+
+  if (name === "t") {
+    const text = extractTextContent(child);
+    if (text.length > 0) {
+      return {
+        type: "text",
+        text,
+        ...(marks.length > 0 ? { marks } : {}),
+      };
+    }
+    return null;
+  }
+  if (name === "br") {
+    return { type: "hard_break" };
+  }
+  if (name === "tab") {
+    return { type: "tab" };
+  }
+  if (name === "footnoteReference") {
+    const noteId =
+      child.attributes["w:id"] ?? child.attributes.id ?? "";
+    if (noteId) {
+      const ref: FootnoteRefNode = {
+        type: "footnote_ref",
+        noteId,
+        noteKind: "footnote",
+      };
+      return ref;
+    }
+    return null;
+  }
+  if (name === "endnoteReference") {
+    const noteId =
+      child.attributes["w:id"] ?? child.attributes.id ?? "";
+    if (noteId) {
+      const ref: FootnoteRefNode = {
+        type: "footnote_ref",
+        noteId,
+        noteKind: "endnote",
+      };
+      return ref;
+    }
+    return null;
+  }
+  if (name === "bookmarkStart" || name === "bookmarkEnd") {
+    return parseBookmarkElement(child);
+  }
+  if (name === "drawing") {
+    const drawingXml = currentSourceXml.slice(child.start, child.end);
+    return parseShapeXml(drawingXml);
+  }
+  if (name === "pict") {
+    const pictXml = currentSourceXml.slice(child.start, child.end);
+    return parseVmlXml(pictXml);
+  }
+  if (name === "AlternateContent") {
+    const drawingNode = findFirstDescendant(child, "drawing");
+    if (drawingNode) {
+      const drawingXml = currentSourceXml.slice(drawingNode.start, drawingNode.end);
+      const shapeResult = parseShapeXml(drawingXml);
+      if (shapeResult) {
+        return {
+          ...shapeResult,
+          rawXml: currentSourceXml.slice(child.start, child.end),
+        };
+      }
+    }
+    const pictNode = findFirstDescendant(child, "pict");
+    if (pictNode) {
+      const pictXml = currentSourceXml.slice(pictNode.start, pictNode.end);
+      const vmlResult = parseVmlXml(pictXml);
+      if (vmlResult) {
+        return {
+          ...vmlResult,
+          rawXml: currentSourceXml.slice(child.start, child.end),
+        };
+      }
+    }
+  }
+
+  return null;
+}
+
 function parseHyperlinkElement(element: XmlElementNode): Extract<InlineNode, { type: "hyperlink" }> {
   const href = element.attributes["w:anchor"]
     ? `#${element.attributes["w:anchor"]}`
@@ -408,12 +651,144 @@ function parseRunProperties(rElement: XmlElementNode): TextMark[] {
           marks.push({ type: "doubleStrikethrough" });
         }
         break;
+      case "rFonts": {
+        const family =
+          child.attributes["w:ascii"] ??
+          child.attributes["w:hAnsi"] ??
+          child.attributes.ascii ??
+          child.attributes.hAnsi;
+        if (family) {
+          marks.push({ type: "fontFamily", val: family });
+        }
+        break;
+      }
+      case "sz": {
+        const szVal = child.attributes["w:val"] ?? child.attributes.val;
+        if (szVal) {
+          const size = Number.parseInt(szVal, 10);
+          if (Number.isFinite(size) && size > 0) {
+            marks.push({ type: "fontSize", val: size });
+          }
+        }
+        break;
+      }
+      case "color": {
+        const colorVal = child.attributes["w:val"] ?? child.attributes.val;
+        if (colorVal && colorVal !== "auto") {
+          marks.push({ type: "textColor", color: colorVal });
+        }
+        break;
+      }
+      case "shd": {
+        const fill = child.attributes["w:fill"] ?? child.attributes.fill;
+        if (fill && fill !== "auto") {
+          marks.push({ type: "backgroundColor", color: fill });
+        }
+        break;
+      }
+      case "highlight": {
+        const resolvedHighlight = resolveHighlightColor(
+          child.attributes["w:val"] ?? child.attributes.val,
+        );
+        if (resolvedHighlight) {
+          marks.push({
+            type: "highlight",
+            color: resolvedHighlight.color,
+            val: resolvedHighlight.val,
+          });
+        }
+        break;
+      }
+      case "smallCaps":
+        if (val !== "0" && val !== "false") {
+          marks.push({ type: "smallCaps" });
+        }
+        break;
+      case "caps":
+        if (val !== "0" && val !== "false") {
+          marks.push({ type: "allCaps" });
+        }
+        break;
     }
   }
 
   return marks;
 }
 
+function readParagraphSpacing(pPr: XmlElementNode): ParagraphSpacing | undefined {
+  const spacingNode = findChildElementOptional(pPr, "spacing");
+  if (!spacingNode) return undefined;
+  const result: ParagraphSpacing = {};
+  const before = spacingNode.attributes["w:before"] ?? spacingNode.attributes.before;
+  if (before) result.before = Number.parseInt(before, 10);
+  const after = spacingNode.attributes["w:after"] ?? spacingNode.attributes.after;
+  if (after) result.after = Number.parseInt(after, 10);
+  const line = spacingNode.attributes["w:line"] ?? spacingNode.attributes.line;
+  if (line) result.line = Number.parseInt(line, 10);
+  const lineRule = spacingNode.attributes["w:lineRule"] ?? spacingNode.attributes.lineRule;
+  if (lineRule === "auto" || lineRule === "exact" || lineRule === "atLeast") {
+    result.lineRule = lineRule;
+  }
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+function readParagraphIndentation(pPr: XmlElementNode): ParagraphIndentation | undefined {
+  const indNode = findChildElementOptional(pPr, "ind");
+  if (!indNode) return undefined;
+  const result: ParagraphIndentation = {};
+  const left = indNode.attributes["w:left"] ?? indNode.attributes.left;
+  if (left) result.left = Number.parseInt(left, 10);
+  const right = indNode.attributes["w:right"] ?? indNode.attributes.right;
+  if (right) result.right = Number.parseInt(right, 10);
+  const firstLine = indNode.attributes["w:firstLine"] ?? indNode.attributes.firstLine;
+  if (firstLine) result.firstLine = Number.parseInt(firstLine, 10);
+  const hanging = indNode.attributes["w:hanging"] ?? indNode.attributes.hanging;
+  if (hanging) result.hanging = Number.parseInt(hanging, 10);
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
+function readParagraphTabStops(pPr: XmlElementNode): TabStop[] | undefined {
+  const tabsNode = findChildElementOptional(pPr, "tabs");
+  if (!tabsNode) return undefined;
+
+  const tabStops: TabStop[] = [];
+  for (const child of tabsNode.children) {
+    if (child.type !== "element" || localName(child.name) !== "tab") continue;
+    const pos = child.attributes["w:pos"] ?? child.attributes.pos;
+    const val = (child.attributes["w:val"] ?? child.attributes.val ?? "left").toLowerCase();
+    const leader = (child.attributes["w:leader"] ?? child.attributes.leader ?? "none").toLowerCase();
+
+    if (pos === undefined) continue;
+    const position = Number.parseInt(pos, 10);
+    if (!Number.isFinite(position)) continue;
+
+    const align = (["left", "center", "right", "decimal", "bar", "clear"] as const).includes(
+      val as "left" | "center" | "right" | "decimal" | "bar" | "clear",
+    )
+      ? (val as TabStop["align"])
+      : "left";
+
+    const leaderValue =
+      leader === "none" ||
+      leader === "dot" ||
+      leader === "hyphen" ||
+      leader === "underscore" ||
+      leader === "heavy"
+        ? (leader as Exclude<TabStop["leader"], "middleDot">)
+        : leader === "middledot"
+          ? "middleDot"
+          : undefined;
+
+    tabStops.push({
+      position,
+      align,
+      ...(leaderValue && leaderValue !== "none" ? { leader: leaderValue } : {}),
+    });
+  }
+
+  return tabStops.length > 0 ? tabStops : undefined;
+}
+
 function extractTextContent(tElement: XmlElementNode): string {
   let text = "";
   for (const child of tElement.children) {
@@ -434,6 +809,23 @@ function findChildElementOptional(
   );
 }
 
+function findFirstDescendant(
+  node: XmlElementNode,
+  childLocalName: string,
+): XmlElementNode | undefined {
+  for (const child of node.children) {
+    if (child.type !== "element") continue;
+    if (localName(child.name) === childLocalName) {
+      return child;
+    }
+    const nested = findFirstDescendant(child, childLocalName);
+    if (nested) {
+      return nested;
+    }
+  }
+  return undefined;
+}
+
 function localName(name: string): string {
   const separatorIndex = name.indexOf(":");
   return separatorIndex >= 0 ? name.slice(separatorIndex + 1) : name;
@@ -456,9 +848,6 @@ const RISKY_TABLE_ELEMENT_NAMES = new Set([
   "rPrChange",
   "pPrChange",
   "sectPrChange",
-  "fldSimple",
-  "fldChar",
-  "instrText",
   "sdt",
   "customXml",
 ]);
@@ -473,9 +862,23 @@ function containsRiskyElement(element: XmlElementNode): boolean {
       continue;
     }
     const name = localName(child.name);
+    if (name === "fldSimple" || name === "instrText") {
+      const instruction =
+        child.attributes["w:instr"] ??
+        child.attributes.instr ??
+        extractTextContent(child);
+      const classification = classifyFieldInstruction(instruction);
+      if (!isSafeSecondaryStoryFieldFamily(classification.family)) {
+        return true;
+      }
+      continue;
+    }
     if (RISKY_TABLE_ELEMENT_NAMES.has(name)) {
       return true;
     }
+    if (name === "fldChar") {
+      continue;
+    }
     // Nested tables remain risky
     if (name === "tbl") {
       return true;
@@ -487,6 +890,17 @@ function containsRiskyElement(element: XmlElementNode): boolean {
   return false;
 }
 
+function isSafeSecondaryStoryFieldFamily(family: string): boolean {
+  return (
+    family === "REF" ||
+    family === "PAGEREF" ||
+    family === "NOTEREF" ||
+    family === "TOC" ||
+    family === "PAGE" ||
+    family === "NUMPAGES"
+  );
+}
+
 function parseSimpleTableElement(tblElement: XmlElementNode): TableNode {
   let gridColumns: number[] = [];
   const rows: TableRowNode[] = [];
@@ -625,11 +1039,14 @@ function escapeXmlText(text: string): string {
 // ---- Minimal XML parser (same pattern as parse-numbering.ts) ----
 
 function parseXml(xml: string): XmlElementNode {
+  currentSourceXml = xml;
   const root: XmlElementNode = {
     type: "element",
     name: "__root__",
     attributes: {},
     children: [],
+    start: 0,
+    end: xml.length,
   };
   const stack: XmlElementNode[] = [root];
   let cursor = 0;
@@ -653,6 +1070,8 @@ function parseXml(xml: string): XmlElementNode {
       stack[stack.length - 1]?.children.push({
         type: "text",
         text: xml.slice(cursor + 9, textEnd),
+        start: cursor,
+        end: end >= 0 ? end + 3 : xml.length,
       });
       cursor = end >= 0 ? end + 3 : xml.length;
       continue;
@@ -663,7 +1082,7 @@ function parseXml(xml: string): XmlElementNode {
       const end = nextTag >= 0 ? nextTag : xml.length;
       const text = decodeXmlEntities(xml.slice(cursor, end));
       if (text.trim().length > 0 || (text.length > 0 && stack.length > 1)) {
-        stack[stack.length - 1]?.children.push({ type: "text", text });
+        stack[stack.length - 1]?.children.push({ type: "text", text, start: cursor, end });
       }
       cursor = end;
       continue;
@@ -675,7 +1094,10 @@ function parseXml(xml: string): XmlElementNode {
       if (end < 0) {
         break;
       }
-      stack.pop();
+      const current = stack.pop();
+      if (current) {
+        current.end = end + 1;
+      }
       cursor = end + 1;
       continue;
     }
@@ -702,6 +1124,8 @@ function parseXml(xml: string): XmlElementNode {
       name: tagName,
       attributes,
       children: [],
+      start: cursor,
+      end: tagEnd + 1,
     };
 
     stack[stack.length - 1]?.children.push(element);

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

@@ -88,7 +88,7 @@ export function parseInlineMediaXml(
     const floating = anchor ? readFloatingProperties(anchor) : undefined;
 
     // Read extent dimensions (wp:extent cx/cy in EMUs)
-    const extent = findFirstDescendant(container, "extent");
+    const extent = findDrawingExtent(container);
     const widthEmu = extent ? readEmuAttribute(extent, "cx") : undefined;
     const heightEmu = extent ? readEmuAttribute(extent, "cy") : undefined;
 
@@ -110,6 +110,20 @@ export function parseInlineMediaXml(
   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 {