fix: prevent duplicate compatibility text boxes (#476)

Author: jan-kubica

.changeset/quiet-textboxes-rest.md

@@ -0,0 +1,5 @@
+---
+"@stll/folio-core": patch
+---
+
+Prevent compatibility text boxes from being duplicated during document saves.

packages/core/src/docx/paragraphTextBoxEnrichment.ts

@@ -383,7 +383,14 @@ const scanRunForTextBoxDrawings = (xmlRun: XmlElement): TextBoxRunScan => {
     }
     if (name === "pict") {
       if (findDeep(el, "v", "textbox")) {
-        vmlTextBoxes.push(el);
+        // An image-backed VML container is preserved as one raw drawing by
+        // runParser. Adding an editable text-box shape here would serialize a
+        // second representation beside that raw replay on every save.
+        if (findDeep(el, "v", "imagedata")) {
+          hasNonTextBoxContent = true;
+        } else {
+          vmlTextBoxes.push(el);
+        }
       } else {
         hasNonTextBoxContent = true;
       }

packages/core/src/docx/runParser.ts

@@ -57,6 +57,7 @@ import {
 } from "./parserEnums";
 import { parseShapeFromDrawing, shouldPreserveRawShapeDrawing } from "./shapeParser";
 import type { StyleMap } from "./styleParser";
+import { isTextBoxDrawing } from "./textBoxParser";
 import { parseVmlImageContent } from "./vmlImageParser";
 import { resolveThemeFontRef } from "./themeParser";
 import { requiresXmlSpacePreserve } from "./textWhitespace";
@@ -1022,6 +1023,11 @@ function parseRunContents(
         const alternateChildren = getChildElements(child);
         const choiceEl = alternateChildren.find((el) => getLocalName(el.name) === "Choice");
         const fallbackEl = alternateChildren.find((el) => getLocalName(el.name) === "Fallback");
+        const choiceTextBoxDrawing = choiceEl
+          ? getChildElements(choiceEl).find(
+              (element) => getLocalName(element.name) === "drawing" && isTextBoxDrawing(element),
+            )
+          : undefined;
 
         const groupedChoiceDrawing = choiceEl
           ? getChildElements(choiceEl).find(
@@ -1042,9 +1048,10 @@ function parseRunContents(
         const fallbackPict = fallbackEl
           ? getChildElements(fallbackEl).find((el) => getLocalName(el.name) === "pict")
           : undefined;
-        const fallbackVml = fallbackPict
-          ? parseVmlImageContent(fallbackPict, rels, media, rootXmlns)
-          : null;
+        const fallbackVml =
+          fallbackPict && !choiceTextBoxDrawing
+            ? parseVmlImageContent(fallbackPict, rels, media, rootXmlns)
+            : null;
         if (fallbackVml?.image.src) {
           fallbackVml.rawXml = elementToXml(cloneWithXmlnsDeclarations(child, rootXmlns));
           contents.push(fallbackVml);

packages/core/src/docx/textBoxDrawingOwnership.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test } from "bun:test";
+import JSZip from "jszip";
+
+import { parseDocx } from "./parser";
+import { createEmptyDocx, repackDocx } from "./rezip";
+
+const XML_DECLARATION = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
+const IMAGE_RELATIONSHIP_TYPE =
+  "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image";
+
+const textBoxDrawing = (text: string): string => `
+  <w:drawing>
+    <wp:anchor simplePos="0" relativeHeight="1" behindDoc="0" locked="0" layoutInCell="1" allowOverlap="1">
+      <wp:simplePos x="0" y="0"/>
+      <wp:positionH relativeFrom="column"><wp:posOffset>0</wp:posOffset></wp:positionH>
+      <wp:positionV relativeFrom="paragraph"><wp:posOffset>0</wp:posOffset></wp:positionV>
+      <wp:extent cx="1828800" cy="914400"/>
+      <wp:wrapSquare wrapText="bothSides"/>
+      <wp:docPr id="1" name="Text box"/>
+      <a:graphic>
+        <a:graphicData uri="http://schemas.microsoft.com/office/word/2010/wordprocessingShape">
+          <wps:wsp>
+            <wps:spPr>
+              <a:xfrm><a:off x="0" y="0"/><a:ext cx="1828800" cy="914400"/></a:xfrm>
+              <a:prstGeom prst="rect"><a:avLst/></a:prstGeom>
+            </wps:spPr>
+            <wps:txbx>
+              <w:txbxContent><w:p><w:r><w:t>${text}</w:t></w:r></w:p></w:txbxContent>
+            </wps:txbx>
+            <wps:bodyPr/>
+          </wps:wsp>
+        </a:graphicData>
+      </a:graphic>
+    </wp:anchor>
+  </w:drawing>`;
+
+const documentXml = (runContent: string): string => `${XML_DECLARATION}
+<w:document
+  xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main"
+  xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
+  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+  xmlns:v="urn:schemas-microsoft-com:vml"
+  xmlns:wp="http://schemas.openxmlformats.org/drawingml/2006/wordprocessingDrawing"
+  xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
+  xmlns:wps="http://schemas.microsoft.com/office/word/2010/wordprocessingShape">
+  <w:body><w:p><w:r>${runContent}</w:r></w:p><w:sectPr/></w:body>
+</w:document>`;
+
+const buildDocx = async (runContent: string, includeImage = false): Promise<ArrayBuffer> => {
+  const zip = await JSZip.loadAsync(await createEmptyDocx());
+  zip.file("word/document.xml", documentXml(runContent));
+
+  if (includeImage) {
+    const relsPath = "word/_rels/document.xml.rels";
+    const relationships = await zip.file(relsPath)!.async("text");
+    zip.file(
+      relsPath,
+      relationships.replace(
+        "</Relationships>",
+        `<Relationship Id="rIdImage" Type="${IMAGE_RELATIONSHIP_TYPE}" Target="media/preview.png"/></Relationships>`,
+      ),
+    );
+    zip.file("word/media/preview.png", new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]));
+  }
+
+  return zip.generateAsync({ type: "arraybuffer" });
+};
+
+type ParsedDocx = Awaited<ReturnType<typeof parseDocx>>;
+
+const bodyDrawingTypes = ({ package: { document } }: ParsedDocx): string[] =>
+  document.content.flatMap((block) =>
+    block.type === "paragraph"
+      ? block.content.flatMap((content) =>
+          content.type === "run" ? content.content.map(({ type }) => type) : [],
+        )
+      : [],
+  );
+
+const savedDocumentXml = async (buffer: ArrayBuffer): Promise<string> => {
+  const zip = await JSZip.loadAsync(buffer);
+  return zip.file("word/document.xml")!.async("text");
+};
+
+describe("text-box drawing ownership", () => {
+  test("a modern AlternateContent text box owns its VML fallback exactly once", async () => {
+    const source = await buildDocx(`
+      <mc:AlternateContent>
+        <mc:Choice Requires="wps">${textBoxDrawing("Editable text")}</mc:Choice>
+        <mc:Fallback>
+          <w:pict>
+            <v:rect style="width:2in;height:1in">
+              <v:textbox><w:txbxContent><w:p><w:r><w:t>Fallback text</w:t></w:r></w:p></w:txbxContent></v:textbox>
+            </v:rect>
+          </w:pict>
+        </mc:Fallback>
+      </mc:AlternateContent>`);
+    const parsed = await parseDocx(source, { preloadFonts: false });
+
+    expect(bodyDrawingTypes(parsed)).toEqual(["shape"]);
+
+    const saved = await repackDocx(parsed, { updateModifiedDate: false });
+    const reopened = await parseDocx(saved, { preloadFonts: false });
+    expect(bodyDrawingTypes(reopened)).toEqual(["shape"]);
+    expect((await savedDocumentXml(saved)).match(/<w:drawing(?:\s|>)/gu)).toHaveLength(1);
+  });
+
+  test("an image-backed VML text-box container stays one raw drawing", async () => {
+    const source = await buildDocx(
+      `<w:pict>
+        <v:shape style="width:2in;height:1in">
+          <v:imagedata r:id="rIdImage"/>
+          <v:textbox><w:txbxContent><w:p><w:r><w:t>Legacy overlay</w:t></w:r></w:p></w:txbxContent></v:textbox>
+        </v:shape>
+      </w:pict>`,
+      true,
+    );
+    const parsed = await parseDocx(source, { preloadFonts: false });
+
+    expect(bodyDrawingTypes(parsed)).toEqual(["drawing"]);
+
+    const saved = await repackDocx(parsed, { updateModifiedDate: false });
+    const reopened = await parseDocx(saved, { preloadFonts: false });
+    expect(bodyDrawingTypes(reopened)).toEqual(["drawing"]);
+    const savedXml = await savedDocumentXml(saved);
+    expect(savedXml.match(/<w:pict(?:\s|>)/gu)).toHaveLength(1);
+    expect(savedXml).not.toContain("<w:drawing");
+  });
+});

packages/core/src/docx/vmlImageParser.ts

@@ -38,6 +38,7 @@ import {
   elementToXml,
   findAllDeep,
   findChild,
+  findDeep,
   getChildElements,
   getAttribute,
   getLocalName,
@@ -234,6 +235,12 @@ const parseStandaloneShapePreview = (
   shape: XmlElement,
   rootXmlns: Record<string, string>,
 ): DrawingContent | null => {
+  // A VML text box is an editable document shape, not a preview image. Its
+  // content is owned by paragraphTextBoxEnrichment; rendering it here as a
+  // synthetic SVG would materialize the same OOXML object twice.
+  if (findDeep(shape, "v", "textbox")) {
+    return null;
+  }
   const style = parseStyleAttr(getAttribute(shape, null, "style"));
   const widthPx = cssLengthToPx(style["width"]);
   const heightPx = cssLengthToPx(style["height"]);
@@ -271,6 +278,9 @@ const parseGroupPreview = (
     .slice(0, MAX_VML_PREVIEW_SHAPES)
     .map((child) => {
       const localName = getLocalName(child.name ?? "");
+      if (findDeep(child, "v", "textbox")) {
+        return "";
+      }
       if (localName === "line") {
         const from = coordinatePair(getAttribute(child, null, "from"));
         const to = coordinatePair(getAttribute(child, null, "to"));