@harbour-enterprises/superdoc 0.29.0-next.13 → 0.29.0-next.15

package/dist/superdoc.umd.js

@@ -28454,6 +28454,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   }
   const DRAWING_XML_TAG = "w:drawing";
   const SHAPE_URI = "http://schemas.microsoft.com/office/word/2010/wordprocessingShape";
+  const GROUP_URI = "http://schemas.microsoft.com/office/word/2010/wordprocessingGroup";
   function handleImageNode(node2, params2, isAnchor) {
     const { docx, filename } = params2;
     const { attributes } = node2;
@@ -28571,7 +28572,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const graphic = node2.elements.find((el) => el.name === "a:graphic");
     const graphicData = graphic?.elements.find((el) => el.name === "a:graphicData");
     const { uri: uri2 } = graphicData?.attributes || {};
-    if (!!uri2 && uri2 === SHAPE_URI) {
+    if (uri2 === SHAPE_URI) {
       const shapeMarginOffset = {
         left: positionHValue,
         horizontal: positionHValue,
@@ -28579,6 +28580,14 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       };
       return handleShapeDrawing(params2, node2, graphicData, size2, padding, shapeMarginOffset);
     }
+    if (uri2 === GROUP_URI) {
+      const shapeMarginOffset = {
+        left: positionHValue,
+        horizontal: positionHValue,
+        top: positionVValue
+      };
+      return handleShapeGroup(params2, node2, graphicData, size2, padding, shapeMarginOffset);
+    }
     const picture = graphicData?.elements.find((el) => el.name === "pic:pic");
     if (!picture || !picture.elements) return null;
     const blipFill = picture.elements.find((el) => el.name === "pic:blipFill");
@@ -28668,6 +28677,114 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     return buildShapePlaceholder(node2, size2, padding, marginOffset, "textbox");
   };
+  const handleShapeGroup = (params2, node2, graphicData, size2, padding, marginOffset) => {
+    const wgp = graphicData.elements.find((el) => el.name === "wpg:wgp");
+    if (!wgp) {
+      return buildShapePlaceholder(node2, size2, padding, marginOffset, "group");
+    }
+    const grpSpPr = wgp.elements.find((el) => el.name === "wpg:grpSpPr");
+    const xfrm = grpSpPr?.elements?.find((el) => el.name === "a:xfrm");
+    const groupTransform = {};
+    if (xfrm) {
+      const off2 = xfrm.elements?.find((el) => el.name === "a:off");
+      const ext = xfrm.elements?.find((el) => el.name === "a:ext");
+      const chOff = xfrm.elements?.find((el) => el.name === "a:chOff");
+      const chExt = xfrm.elements?.find((el) => el.name === "a:chExt");
+      if (off2) {
+        groupTransform.x = emuToPixels(off2.attributes?.["x"] || 0);
+        groupTransform.y = emuToPixels(off2.attributes?.["y"] || 0);
+      }
+      if (ext) {
+        groupTransform.width = emuToPixels(ext.attributes?.["cx"] || 0);
+        groupTransform.height = emuToPixels(ext.attributes?.["cy"] || 0);
+      }
+      if (chOff) {
+        groupTransform.childX = emuToPixels(chOff.attributes?.["x"] || 0);
+        groupTransform.childY = emuToPixels(chOff.attributes?.["y"] || 0);
+        groupTransform.childOriginXEmu = parseFloat(chOff.attributes?.["x"] || 0);
+        groupTransform.childOriginYEmu = parseFloat(chOff.attributes?.["y"] || 0);
+      }
+      if (chExt) {
+        groupTransform.childWidth = emuToPixels(chExt.attributes?.["cx"] || 0);
+        groupTransform.childHeight = emuToPixels(chExt.attributes?.["cy"] || 0);
+      }
+    }
+    const childShapes = wgp.elements.filter((el) => el.name === "wps:wsp");
+    const shapes = childShapes.map((wsp) => {
+      const spPr = wsp.elements?.find((el) => el.name === "wps:spPr");
+      if (!spPr) return null;
+      const prstGeom = spPr.elements?.find((el) => el.name === "a:prstGeom");
+      const shapeKind = prstGeom?.attributes?.["prst"];
+      const shapeXfrm = spPr.elements?.find((el) => el.name === "a:xfrm");
+      const shapeOff = shapeXfrm?.elements?.find((el) => el.name === "a:off");
+      const shapeExt = shapeXfrm?.elements?.find((el) => el.name === "a:ext");
+      const rawX = shapeOff?.attributes?.["x"] ? parseFloat(shapeOff.attributes["x"]) : 0;
+      const rawY = shapeOff?.attributes?.["y"] ? parseFloat(shapeOff.attributes["y"]) : 0;
+      const rawWidth = shapeExt?.attributes?.["cx"] ? parseFloat(shapeExt.attributes["cx"]) : 914400;
+      const rawHeight = shapeExt?.attributes?.["cy"] ? parseFloat(shapeExt.attributes["cy"]) : 914400;
+      let x2, y2, width, height;
+      if (groupTransform.childWidth && groupTransform.childHeight) {
+        const scaleX = groupTransform.width / groupTransform.childWidth;
+        const scaleY = groupTransform.height / groupTransform.childHeight;
+        const childOriginX = groupTransform.childOriginXEmu || 0;
+        const childOriginY = groupTransform.childOriginYEmu || 0;
+        x2 = groupTransform.x + emuToPixels((rawX - childOriginX) * scaleX);
+        y2 = groupTransform.y + emuToPixels((rawY - childOriginY) * scaleY);
+        width = emuToPixels(rawWidth * scaleX);
+        height = emuToPixels(rawHeight * scaleY);
+      } else {
+        x2 = emuToPixels(rawX);
+        y2 = emuToPixels(rawY);
+        width = emuToPixels(rawWidth);
+        height = emuToPixels(rawHeight);
+      }
+      const rotation = shapeXfrm?.attributes?.["rot"] ? rotToDegrees(shapeXfrm.attributes["rot"]) : 0;
+      const flipH = shapeXfrm?.attributes?.["flipH"] === "1";
+      const flipV = shapeXfrm?.attributes?.["flipV"] === "1";
+      const style2 = wsp.elements?.find((el) => el.name === "wps:style");
+      const fillColor = extractFillColor(spPr, style2);
+      const strokeColor = extractStrokeColor(spPr, style2);
+      const strokeWidth = extractStrokeWidth(spPr);
+      const cNvPr = wsp.elements?.find((el) => el.name === "wps:cNvPr");
+      const shapeId = cNvPr?.attributes?.["id"];
+      const shapeName = cNvPr?.attributes?.["name"];
+      return {
+        shapeType: "vectorShape",
+        attrs: {
+          kind: shapeKind,
+          x: x2,
+          y: y2,
+          width,
+          height,
+          rotation,
+          flipH,
+          flipV,
+          fillColor,
+          strokeColor,
+          strokeWidth,
+          shapeId,
+          shapeName
+        }
+      };
+    }).filter(Boolean);
+    const schemaAttrs = {};
+    const drawingNode = params2.nodes?.[0];
+    if (drawingNode?.name === DRAWING_XML_TAG) {
+      schemaAttrs.drawingContent = drawingNode;
+    }
+    const result = {
+      type: "shapeGroup",
+      attrs: {
+        ...schemaAttrs,
+        groupTransform,
+        shapes,
+        size: size2,
+        padding,
+        marginOffset
+      }
+    };
+    return result;
+  };
   const getRectangleShape = (params2, node2) => {
     const schemaAttrs = {};
     const [drawingNode] = params2.nodes;
@@ -29110,6 +29227,30 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     };
     return wrapTextInRun(alternateContent);
   }
+  function translateShapeGroup(params2) {
+    const { node: node2 } = params2;
+    const { drawingContent } = node2.attrs;
+    if (drawingContent) {
+      const drawing = {
+        name: "w:drawing",
+        elements: [...drawingContent.elements || []]
+      };
+      const choice = {
+        name: "mc:Choice",
+        attributes: { Requires: "wpg" },
+        elements: [drawing]
+      };
+      const alternateContent = {
+        name: "mc:AlternateContent",
+        elements: [choice]
+      };
+      return wrapTextInRun(alternateContent);
+    }
+    return wrapTextInRun({
+      name: "w:drawing",
+      elements: []
+    });
+  }
   function translateAnchorNode(params2) {
     const { attrs } = params2.node;
     const anchorElements = [];
@@ -29273,11 +29414,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     };
   }
   const XML_NODE_NAME$f = "wp:anchor";
-  const SD_NODE_NAME$c = ["image"];
+  const SD_NODE_NAME$c = ["image", "shapeGroup", "vectorShape", "contentBlock"];
   const validXmlAttributes$a = ["distT", "distB", "distL", "distR"].map((xmlName) => createAttributeHandler(xmlName));
   function encode$l(params2) {
     const { node: node2 } = params2.extraParams;
-    if (!node2 || !node2.type) {
+    if (!node2 || !node2.name) {
       return null;
     }
     return handleAnchorNode(params2);
@@ -29314,11 +29455,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     };
   }
   const XML_NODE_NAME$e = "wp:inline";
-  const SD_NODE_NAME$b = ["image"];
+  const SD_NODE_NAME$b = ["image", "shapeGroup", "vectorShape", "contentBlock"];
   const validXmlAttributes$9 = ["distT", "distB", "distL", "distR"].map((xmlName) => createAttributeHandler(xmlName));
   function encode$k(params2) {
     const { node: node2 } = params2.extraParams;
-    if (!node2 || !node2.type) {
+    if (!node2 || !node2.name) {
       return null;
     }
     return handleInlineNode(params2);
@@ -32739,6 +32880,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   };
   const SUPPORTED_ALTERNATE_CONTENT_REQUIRES = /* @__PURE__ */ new Set([
     "wps",
+    "wpg",
     "wp14",
     "w14",
     "w15",
@@ -34399,6 +34541,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       shapeTextbox: translator,
       contentBlock: translator,
       vectorShape: translateVectorShape,
+      shapeGroup: translateShapeGroup,
       structuredContent: translator$r,
       structuredContentBlock: translator$r,
       documentPartObject: translator$r,
@@ -35411,7 +35554,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const currentId = attributes.Id || "";
       attributes.Target = attributes?.Target?.replace(/&/g, "&");
       const existingTarget = existingRelationships.find((el) => el.attributes.Target === attributes.Target);
-      attributes.Target?.startsWith("media/");
       const isNewHyperlink = attributes.Type === HYPERLINK_RELATIONSHIP_TYPE && currentId.length > 6;
       const isNewHeadFoot = (attributes.Type === HEADER_RELATIONSHIP_TYPE || attributes.Type === FOOTER_RELATIONSHIP_TYPE) && currentId.length > 6;
       const hasSeenId = currentId && seenIds.has(currentId);
@@ -35640,7 +35782,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     static getStoredSuperdocVersion(docx) {
       return _SuperConverter2.getStoredCustomProperty(docx, "SuperdocVersion");
     }
-    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "0.29.0-next.13") {
+    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "0.29.0-next.15") {
       return _SuperConverter2.setStoredCustomProperty(docx, "SuperdocVersion", version2, false);
     }
     /**
@@ -61570,7 +61712,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         { default: remarkStringify2 },
         { default: remarkGfm2 }
       ] = await Promise.all([
-        Promise.resolve().then(() => indexP_HoYQ4L),
+        Promise.resolve().then(() => indexX0B8ORNX),
         Promise.resolve().then(() => indexDRCvimau),
         Promise.resolve().then(() => indexC_x_N6Uh),
         Promise.resolve().then(() => indexD_sWOSiG),
@@ -61788,7 +61930,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * @returns {Object | void} Migration results
      */
     processCollaborationMigrations() {
-      console.debug("[checkVersionMigrations] Current editor version", "0.29.0-next.13");
+      console.debug("[checkVersionMigrations] Current editor version", "0.29.0-next.15");
       if (!this.options.ydoc) return;
       const metaMap = this.options.ydoc.getMap("meta");
       let docVersion = metaMap.get("version");
@@ -77847,6 +77989,255 @@ ${l}
       };
     }
   });
+  class ShapeGroupView {
+    constructor(props) {
+      __publicField$1(this, "node");
+      __publicField$1(this, "view");
+      __publicField$1(this, "getPos");
+      __publicField$1(this, "decorations");
+      __publicField$1(this, "innerDecorations");
+      __publicField$1(this, "editor");
+      __publicField$1(this, "extension");
+      __publicField$1(this, "htmlAttributes");
+      __publicField$1(this, "root");
+      this.node = props.node;
+      this.view = props.editor.view;
+      this.getPos = props.getPos;
+      this.decorations = props.decorations;
+      this.innerDecorations = props.innerDecorations;
+      this.editor = props.editor;
+      this.extension = props.extension;
+      this.htmlAttributes = props.htmlAttributes;
+      this.mount();
+    }
+    mount() {
+      this.buildView();
+    }
+    get dom() {
+      return this.root;
+    }
+    get contentDOM() {
+      return null;
+    }
+    createElement() {
+      const attrs = this.node.attrs;
+      const { groupTransform, shapes, size: size2 } = attrs;
+      const container = document.createElement("div");
+      container.classList.add("sd-shape-group");
+      container.setAttribute("data-shape-group", "");
+      const width = size2?.width || groupTransform?.width || 300;
+      const height = size2?.height || groupTransform?.height || 200;
+      container.style.width = `${width}px`;
+      container.style.height = `${height}px`;
+      container.style.position = "relative";
+      container.style.display = "inline-block";
+      const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg2.setAttribute("version", "1.1");
+      svg2.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+      svg2.setAttribute("width", width.toString());
+      svg2.setAttribute("height", height.toString());
+      svg2.setAttribute("viewBox", `0 0 ${width} ${height}`);
+      svg2.style.display = "block";
+      if (shapes && Array.isArray(shapes)) {
+        shapes.forEach((shape) => {
+          if (shape.shapeType === "vectorShape") {
+            const shapeElement = this.createShapeElement(shape, groupTransform);
+            if (shapeElement) {
+              svg2.appendChild(shapeElement);
+            }
+          }
+        });
+      }
+      container.appendChild(svg2);
+      return { element: container };
+    }
+    createShapeElement(shape, groupTransform) {
+      const attrs = shape.attrs;
+      if (!attrs) return null;
+      const x2 = attrs.x || 0;
+      const y2 = attrs.y || 0;
+      const width = attrs.width || 100;
+      const height = attrs.height || 100;
+      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      const transforms = [];
+      transforms.push(`translate(${x2}, ${y2})`);
+      if (attrs.rotation !== 0) {
+        transforms.push(`rotate(${attrs.rotation} ${width / 2} ${height / 2})`);
+      }
+      if (attrs.flipH) {
+        transforms.push(`scale(-1, 1) translate(${-width}, 0)`);
+      }
+      if (attrs.flipV) {
+        transforms.push(`scale(1, -1) translate(0, ${-height})`);
+      }
+      if (transforms.length > 0) {
+        g.setAttribute("transform", transforms.join(" "));
+      }
+      const shapeKind = attrs.kind || "rect";
+      const fillColor = attrs.fillColor || "#5b9bd5";
+      const strokeColor = attrs.strokeColor || "#000000";
+      const strokeWidth = attrs.strokeWidth || 1;
+      try {
+        const svgContent = k({
+          preset: shapeKind,
+          styleOverrides: {
+            fill: fillColor || "none",
+            stroke: strokeColor || "none",
+            strokeWidth: strokeWidth || 0
+          },
+          width,
+          height
+        });
+        if (svgContent) {
+          const tempDiv = document.createElement("div");
+          tempDiv.innerHTML = svgContent;
+          const svgElement = tempDiv.querySelector("svg");
+          if (svgElement) {
+            Array.from(svgElement.children).forEach((child) => {
+              const clonedChild = child.cloneNode(true);
+              if (clonedChild.tagName === "ellipse") {
+                clonedChild.setAttribute("cx", (width / 2).toString());
+                clonedChild.setAttribute("cy", (height / 2).toString());
+                clonedChild.setAttribute("rx", (width / 2).toString());
+                clonedChild.setAttribute("ry", (height / 2).toString());
+              } else if (clonedChild.tagName === "circle") {
+                if (width !== height) {
+                  const ellipse = document.createElementNS("http://www.w3.org/2000/svg", "ellipse");
+                  ellipse.setAttribute("cx", (width / 2).toString());
+                  ellipse.setAttribute("cy", (height / 2).toString());
+                  ellipse.setAttribute("rx", (width / 2).toString());
+                  ellipse.setAttribute("ry", (height / 2).toString());
+                  Array.from(clonedChild.attributes).forEach((attr) => {
+                    if (!["cx", "cy", "r"].includes(attr.name)) {
+                      ellipse.setAttribute(attr.name, attr.value);
+                    }
+                  });
+                  g.appendChild(ellipse);
+                  return;
+                } else {
+                  clonedChild.setAttribute("cx", (width / 2).toString());
+                  clonedChild.setAttribute("cy", (height / 2).toString());
+                  clonedChild.setAttribute("r", (width / 2).toString());
+                }
+              } else if (clonedChild.tagName === "rect") {
+                clonedChild.setAttribute("width", width.toString());
+                clonedChild.setAttribute("height", height.toString());
+              } else if (clonedChild.tagName === "path" && svgElement.hasAttribute("viewBox")) {
+                const viewBox = svgElement.getAttribute("viewBox").split(" ").map(Number);
+                if (viewBox.length === 4) {
+                  const [, , vbWidth, vbHeight] = viewBox;
+                  const scaleX = width / vbWidth;
+                  const scaleY = height / vbHeight;
+                  if (scaleX !== 1 || scaleY !== 1) {
+                    const pathTransform = `scale(${scaleX}, ${scaleY})`;
+                    const existingTransform = clonedChild.getAttribute("transform");
+                    clonedChild.setAttribute(
+                      "transform",
+                      existingTransform ? `${existingTransform} ${pathTransform}` : pathTransform
+                    );
+                  }
+                }
+              } else if (clonedChild.hasAttribute("width")) {
+                clonedChild.setAttribute("width", width.toString());
+              }
+              if (clonedChild.hasAttribute("height") && clonedChild.tagName !== "ellipse") {
+                clonedChild.setAttribute("height", height.toString());
+              }
+              g.appendChild(clonedChild);
+            });
+          }
+        }
+      } catch (error) {
+        console.warn("Failed to generate shape SVG:", error);
+        const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+        rect.setAttribute("width", width.toString());
+        rect.setAttribute("height", height.toString());
+        rect.setAttribute("fill", fillColor);
+        rect.setAttribute("stroke", strokeColor);
+        rect.setAttribute("stroke-width", strokeWidth.toString());
+        g.appendChild(rect);
+      }
+      return g;
+    }
+    buildView() {
+      const { element: element2 } = this.createElement();
+      this.root = element2;
+    }
+    update() {
+      return false;
+    }
+  }
+  const ShapeGroup = Node$1.create({
+    name: "shapeGroup",
+    group: "inline",
+    inline: true,
+    atom: true,
+    addOptions() {
+      return {
+        htmlAttributes: {
+          contenteditable: false
+        }
+      };
+    },
+    addAttributes() {
+      return {
+        groupTransform: {
+          default: {},
+          renderDOM: () => ({})
+        },
+        shapes: {
+          default: [],
+          renderDOM: () => ({})
+        },
+        size: {
+          default: null,
+          renderDOM: (attrs) => {
+            if (!attrs.size) return {};
+            const sizeData = {};
+            if (attrs.size.width) sizeData["data-width"] = attrs.size.width;
+            if (attrs.size.height) sizeData["data-height"] = attrs.size.height;
+            return sizeData;
+          }
+        },
+        padding: {
+          default: null,
+          renderDOM: (attrs) => {
+            if (!attrs.padding) return {};
+            const paddingData = {};
+            if (attrs.padding.top != null) paddingData["data-padding-top"] = attrs.padding.top;
+            if (attrs.padding.right != null) paddingData["data-padding-right"] = attrs.padding.right;
+            if (attrs.padding.bottom != null) paddingData["data-padding-bottom"] = attrs.padding.bottom;
+            if (attrs.padding.left != null) paddingData["data-padding-left"] = attrs.padding.left;
+            return paddingData;
+          }
+        },
+        marginOffset: {
+          default: null,
+          renderDOM: (attrs) => {
+            if (!attrs.marginOffset) return {};
+            const offsetData = {};
+            if (attrs.marginOffset.horizontal != null) offsetData["data-offset-x"] = attrs.marginOffset.horizontal;
+            if (attrs.marginOffset.top != null) offsetData["data-offset-y"] = attrs.marginOffset.top;
+            return offsetData;
+          }
+        },
+        drawingContent: {
+          rendered: false
+        }
+      };
+    },
+    parseDOM() {
+      return false;
+    },
+    renderDOM({ htmlAttributes }) {
+      return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-shape-group": "" })];
+    },
+    addNodeView() {
+      return (props) => {
+        return new ShapeGroupView({ ...props });
+      };
+    }
+  });
   const TextStyle = Mark.create({
     name: "textStyle",
     addOptions() {
@@ -84087,6 +84478,7 @@ ${l}
     }
   }
   const TextContentCache = /* @__PURE__ */ new WeakMap();
+  const transparentInlineNodes = /* @__PURE__ */ new Set(["run", "bookmarkStart"]);
   function textContent(node2) {
     let cached = TextContentCache.get(node2);
     if (cached) return cached;
@@ -84095,7 +84487,7 @@ ${l}
       let child = node2.child(i2);
       if (child.isText) content2 += child.text;
       else if (child.isLeaf) content2 += "";
-      else if (child.type && child.type.name === "run") content2 += textContent(child);
+      else if (child.type && transparentInlineNodes.has(child.type.name)) content2 += textContent(child);
       else content2 += " " + textContent(child) + " ";
     }
     TextContentCache.set(node2, content2);
@@ -84146,7 +84538,6 @@ ${l}
     }
     return start2 + node2.content.size;
   }
-  const transparentInlineNodes = /* @__PURE__ */ new Set(["run"]);
   function scanTextblocks(node2, from2, to, f2, nodeStart = 0) {
     const isTransparentInline = node2.inlineContent && node2.type && transparentInlineNodes.has(node2.type.name);
     if (node2.inlineContent && !isTransparentInline) {
@@ -84744,7 +85135,8 @@ ${l}
       NodeResizer,
       CustomSelection,
       TextTransform,
-      VectorShape
+      VectorShape,
+      ShapeGroup
     ];
   };
   const sanitizeNumber = (value, defaultNumber) => {
@@ -117769,7 +118161,7 @@ ${style2}
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "0.29.0-next.13";
+      this.version = "0.29.0-next.15";
       this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
       this.superdocId = config2.superdocId || v4();
       this.colors = this.config.colors;
@@ -120169,7 +120561,7 @@ ${style2}
       value && typeof value === "object" && "byteLength" in value && "byteOffset" in value
     );
   }
-  const indexP_HoYQ4L = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  const indexX0B8ORNX = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
     unified
   }, Symbol.toStringTag, { value: "Module" }));