@harbour-enterprises/superdoc 1.4.0-next.1 → 1.4.0-next.2

package/dist/superdoc.umd.js

@@ -24064,7 +24064,7 @@
   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";
-  const normalizeTargetPath = (targetPath = "") => {
+  const normalizeTargetPath$1 = (targetPath = "") => {
     if (!targetPath) return targetPath;
     const trimmed = targetPath.replace(/^\/+/, "");
     if (trimmed.startsWith("word/")) return trimmed;
@@ -24223,7 +24223,14 @@
     }
     const stretch = blipFill?.elements.find((el) => el.name === "a:stretch");
     const fillRect = stretch?.elements.find((el) => el.name === "a:fillRect");
+    const srcRect = blipFill?.elements.find((el) => el.name === "a:srcRect");
+    const srcRectAttrs = srcRect?.attributes || {};
+    const srcRectHasNegativeValues = ["l", "t", "r", "b"].some((attr) => {
+      const val = srcRectAttrs[attr];
+      return val != null && parseFloat(val) < 0;
+    });
     const shouldStretch = Boolean(stretch && fillRect);
+    const shouldCover = shouldStretch && !srcRectHasNegativeValues;
     const spPr = picture.elements.find((el) => el.name === "pic:spPr");
     if (spPr) {
       const xfrm = spPr.elements.find((el) => el.name === "a:xfrm");
@@ -24252,7 +24259,7 @@
     }
     const { attributes: relAttributes } = rel;
     const targetPath = relAttributes["Target"];
-    const path2 = normalizeTargetPath(targetPath);
+    const path2 = normalizeTargetPath$1(targetPath);
     const extension = path2.substring(path2.lastIndexOf(".") + 1);
     let finalSrc = path2;
     let finalExtension = extension;
@@ -24300,7 +24307,7 @@
         wrapText: wrap2.attrs.wrapText
       } : {},
       wrapTopAndBottom: wrap2.type === "TopAndBottom",
-      shouldStretch,
+      shouldCover,
       originalPadding: {
         distT: attributes["distT"],
         distB: attributes["distB"],
@@ -24493,7 +24500,7 @@
       const { elements } = relationships || [];
       const rel = elements?.find((el) => el.attributes["Id"] === rEmbed);
       if (!rel) return null;
-      const targetPath = normalizeTargetPath(rel.attributes?.["Target"]);
+      const targetPath = normalizeTargetPath$1(rel.attributes?.["Target"]);
       const path2 = targetPath;
       const nvPicPr = pic.elements?.find((el) => el.name === "pic:nvPicPr");
       const cNvPr = nvPicPr?.elements?.find((el) => el.name === "pic:cNvPr");
@@ -34987,6 +34994,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       if (!node2 || typeof node2.type !== "string") return;
       const type = node2.type;
       const preservableNodeName = PRESERVABLE_INLINE_XML_NAMES[type];
+      if (type === "image" && node2.attrs?.isAnchor) {
+        result.push(node2);
+        return;
+      }
       if (!INLINE_TYPES.has(type)) {
         result.push(node2);
       } else if (preservableNodeName) {
@@ -35180,6 +35191,137 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     return style2;
   }
+  function handleShapeImageImport({ params: params2, pict }) {
+    const shape = pict.elements?.find((el) => el.name === "v:shape");
+    if (!shape) return null;
+    const imagedata = shape.elements?.find((el) => el.name === "v:imagedata");
+    if (!imagedata) return null;
+    const { docx, filename } = params2;
+    const shapeAttrs = shape.attributes || {};
+    const imagedataAttrs = imagedata.attributes || {};
+    const rId = imagedataAttrs["r:id"];
+    if (!rId) {
+      console.warn("v:imagedata missing r:id attribute");
+      return null;
+    }
+    const currentFile = filename || "document.xml";
+    let rels = docx[`word/_rels/${currentFile}.rels`];
+    if (!rels) rels = docx[`word/_rels/document.xml.rels`];
+    const relationships = rels?.elements?.find((el) => el.name === "Relationships");
+    const { elements } = relationships || [];
+    const rel = elements?.find((el) => el.attributes["Id"] === rId);
+    if (!rel) {
+      console.warn(`Relationship not found for r:id="${rId}"`);
+      return null;
+    }
+    const targetPath = rel.attributes["Target"];
+    const normalizedPath = normalizeTargetPath(targetPath);
+    const style2 = shapeAttrs.style || "";
+    const styleObj = parseVmlStyle(style2);
+    const width = styleObj.width || "100px";
+    const height = styleObj.height || "100px";
+    const position2 = {
+      type: styleObj.position || "absolute",
+      marginLeft: styleObj["margin-left"] || "0",
+      marginTop: styleObj["margin-top"] || "0"
+    };
+    const zIndex = styleObj["z-index"] ? parseInt(styleObj["z-index"], 10) : void 0;
+    const hPosition = styleObj["mso-position-horizontal"] || "center";
+    const vPosition = styleObj["mso-position-vertical"] || "center";
+    const hRelativeTo = styleObj["mso-position-horizontal-relative"] || "margin";
+    const vRelativeTo = styleObj["mso-position-vertical-relative"] || "margin";
+    const gain = imagedataAttrs["gain"];
+    const blacklevel = imagedataAttrs["blacklevel"];
+    const title = imagedataAttrs["o:title"] || "Watermark";
+    const imageNode = {
+      type: "image",
+      attrs: {
+        src: normalizedPath,
+        alt: title,
+        extension: normalizedPath.substring(normalizedPath.lastIndexOf(".") + 1),
+        title,
+        rId,
+        // Store VML-specific attributes for round-trip
+        vmlWatermark: true,
+        vmlStyle: style2,
+        vmlAttributes: shapeAttrs,
+        vmlImagedata: imagedataAttrs,
+        // Positioning
+        isAnchor: true,
+        inline: false,
+        wrap: {
+          type: "None",
+          attrs: {
+            behindDoc: Number.isFinite(zIndex) ? zIndex < 0 : true
+          }
+        },
+        anchorData: {
+          hRelativeFrom: hRelativeTo,
+          vRelativeFrom: vRelativeTo,
+          alignH: hPosition,
+          alignV: vPosition
+        },
+        // Size
+        size: {
+          width: convertToPixels(width),
+          height: convertToPixels(height)
+        },
+        marginOffset: {
+          horizontal: convertToPixels(position2.marginLeft),
+          top: convertToPixels(position2.marginTop)
+        },
+        // Image adjustments
+        ...gain && { gain },
+        ...blacklevel && { blacklevel }
+      }
+    };
+    return imageNode;
+  }
+  function normalizeTargetPath(targetPath = "") {
+    if (!targetPath) return targetPath;
+    const trimmed = targetPath.replace(/^\/+/, "");
+    if (trimmed.startsWith("word/")) return trimmed;
+    if (trimmed.startsWith("media/")) return `word/${trimmed}`;
+    return `word/${trimmed}`;
+  }
+  function parseVmlStyle(style2) {
+    const result = {};
+    if (!style2) return result;
+    const declarations = style2.split(";").filter((s2) => s2.trim());
+    for (const decl of declarations) {
+      const [prop, value] = decl.split(":").map((s2) => s2.trim());
+      if (prop && value) {
+        result[prop] = value;
+      }
+    }
+    return result;
+  }
+  function convertToPixels(value) {
+    if (typeof value === "number") return value;
+    if (!value || typeof value !== "string") return 0;
+    const match = value.match(/^([\d.]+)([a-z%]+)?$/i);
+    if (!match) return 0;
+    const num = parseFloat(match[1]);
+    const unit = match[2] || "px";
+    switch (unit.toLowerCase()) {
+      case "px":
+        return num;
+      case "pt":
+        return num * (96 / 72);
+      // 1pt = 1/72 inch, 96 DPI
+      case "in":
+        return num * 96;
+      case "cm":
+        return num * (96 / 2.54);
+      case "mm":
+        return num * (96 / 25.4);
+      case "pc":
+        return num * 16;
+      // 1pc = 12pt
+      default:
+        return num;
+    }
+  }
   function pictNodeTypeStrategy(node2) {
     const shape = node2.elements?.find((el) => el.name === "v:shape");
     const group = node2.elements?.find((el) => el.name === "v:group");
@@ -35198,6 +35340,10 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       if (textbox) {
         return { type: "shapeContainer", handler: handleShapeTextboxImport };
       }
+      const imagedata = shape.elements?.find((el) => el.name === "v:imagedata");
+      if (imagedata) {
+        return { type: "image", handler: handleShapeImageImport };
+      }
     }
     return { type: "unknown", handler: null };
   }
@@ -35296,8 +35442,116 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     };
     return wrapTextInRun(pict);
   }
+  function translateVmlWatermark(params2) {
+    const { node: node2 } = params2;
+    const { attrs } = node2;
+    if (attrs.vmlAttributes && attrs.vmlImagedata) {
+      const shape2 = {
+        name: "v:shape",
+        attributes: attrs.vmlAttributes,
+        elements: [
+          {
+            name: "v:imagedata",
+            attributes: {
+              ...attrs.vmlImagedata,
+              "r:id": attrs.rId
+            }
+          }
+        ]
+      };
+      const pict2 = {
+        name: "w:pict",
+        attributes: {
+          "w14:anchorId": generateRandomSigned32BitIntStrId()
+        },
+        elements: [shape2]
+      };
+      const par2 = {
+        name: "w:p",
+        elements: [wrapTextInRun(pict2)]
+      };
+      return par2;
+    }
+    const style2 = buildVmlStyle(attrs);
+    const shape = {
+      name: "v:shape",
+      attributes: {
+        id: `WordPictureWatermark${generateRandomSigned32BitIntStrId().replace("-", "")}`,
+        "o:spid": `_x0000_s${Math.floor(Math.random() * 1e4)}`,
+        type: "#_x0000_t75",
+        style: style2,
+        "o:allowincell": "f"
+      },
+      elements: [
+        {
+          name: "v:imagedata",
+          attributes: {
+            "r:id": attrs.rId,
+            "o:title": attrs.title || attrs.alt || "Watermark",
+            ...attrs.gain && { gain: attrs.gain },
+            ...attrs.blacklevel && { blacklevel: attrs.blacklevel }
+          }
+        }
+      ]
+    };
+    const pict = {
+      name: "w:pict",
+      attributes: {
+        "w14:anchorId": generateRandomSigned32BitIntStrId()
+      },
+      elements: [shape]
+    };
+    const par = {
+      name: "w:p",
+      elements: [wrapTextInRun(pict)]
+    };
+    return par;
+  }
+  function buildVmlStyle(attrs) {
+    const styles = [];
+    styles.push("position:absolute");
+    if (attrs.size) {
+      if (attrs.size.width) {
+        styles.push(`width:${convertToPt(attrs.size.width)}pt`);
+      }
+      if (attrs.size.height) {
+        styles.push(`height:${convertToPt(attrs.size.height)}pt`);
+      }
+    }
+    if (attrs.marginOffset) {
+      if (attrs.marginOffset.horizontal !== void 0) {
+        styles.push(`margin-left:${convertToPt(attrs.marginOffset.horizontal)}pt`);
+      }
+      if (attrs.marginOffset.top !== void 0) {
+        styles.push(`margin-top:${convertToPt(attrs.marginOffset.top)}pt`);
+      }
+    }
+    if (attrs.wrap?.attrs?.behindDoc) {
+      styles.push("z-index:-251653120");
+    }
+    if (attrs.anchorData) {
+      if (attrs.anchorData.alignH) {
+        styles.push(`mso-position-horizontal:${attrs.anchorData.alignH}`);
+      }
+      if (attrs.anchorData.alignV) {
+        styles.push(`mso-position-vertical:${attrs.anchorData.alignV}`);
+      }
+      if (attrs.anchorData.hRelativeFrom) {
+        styles.push(`mso-position-horizontal-relative:${attrs.anchorData.hRelativeFrom}`);
+      }
+      if (attrs.anchorData.vRelativeFrom) {
+        styles.push(`mso-position-vertical-relative:${attrs.anchorData.vRelativeFrom}`);
+      }
+    }
+    styles.push("mso-width-percent:0");
+    styles.push("mso-height-percent:0");
+    return styles.join(";");
+  }
+  function convertToPt(pixels) {
+    return pixels * 72 / 96;
+  }
   const XML_NODE_NAME = "w:pict";
-  const SD_NODE_NAME = ["shapeContainer", "contentBlock"];
+  const SD_NODE_NAME = ["shapeContainer", "contentBlock", "image"];
   const validXmlAttributes = [];
   function encode$1(params2) {
     const { node: node2, pNode } = params2.extraParams;
@@ -35321,6 +35575,12 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       shapeContainer: () => translateShapeContainer(params2),
       shapeTextbox: () => translateShapeTextbox(params2),
       contentBlock: () => translateContentBlock(params2),
+      image: () => {
+        if (node2.attrs?.vmlWatermark) {
+          return translateVmlWatermark(params2);
+        }
+        return null;
+      },
       default: () => null
     };
     const decoder = types2[node2.type] ?? types2.default;
@@ -36436,7 +36696,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     static getStoredSuperdocVersion(docx) {
       return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
     }
-    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.4.0-next.1") {
+    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.4.0-next.2") {
       return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version2, false);
     }
     /**
@@ -62252,7 +62512,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return false;
     }
   };
-  const summaryVersion = "1.4.0-next.1";
+  const summaryVersion = "1.4.0-next.2";
   const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
   const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
   function mapAttributes(attrs) {
@@ -64885,7 +65145,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * Process collaboration migrations
      */
     processCollaborationMigrations() {
-      console.debug("[checkVersionMigrations] Current editor version", "1.4.0-next.1");
+      console.debug("[checkVersionMigrations] Current editor version", "1.4.0-next.2");
       if (!this.options.ydoc) return;
       const metaMap = this.options.ydoc.getMap("meta");
       let docVersion = metaMap.get("version");
@@ -70619,6 +70879,9 @@ ${l}
           imgEl.style.width = "100%";
           imgEl.style.height = "100%";
           imgEl.style.objectFit = block.objectFit ?? "contain";
+          if (block.objectFit === "cover") {
+            imgEl.style.objectPosition = "left top";
+          }
           imgEl.style.display = "block";
           imageWrapper.appendChild(imgEl);
           content2.appendChild(imageWrapper);
@@ -70648,6 +70911,9 @@ ${l}
             img2.style.width = "100%";
             img2.style.height = "100%";
             img2.style.objectFit = block.objectFit ?? "contain";
+            if (block.objectFit === "cover") {
+              img2.style.objectPosition = "left top";
+            }
             drawingInner.appendChild(img2);
           } else if (renderDrawingContent) {
             const drawingContent = renderDrawingContent(block);
@@ -73220,7 +73486,7 @@ ${l}
         if (fragment.pmEnd != null) {
           fragmentEl.dataset.pmEnd = String(fragment.pmEnd);
         }
-        if (fragment.metadata) {
+        if (fragment.metadata && !block.attrs?.vmlWatermark) {
           fragmentEl.setAttribute("data-image-metadata", JSON.stringify(fragment.metadata));
         }
         const img2 = this.doc.createElement("img");
@@ -73231,7 +73497,28 @@ ${l}
         img2.style.width = "100%";
         img2.style.height = "100%";
         img2.style.objectFit = block.objectFit ?? "contain";
+        if (block.objectFit === "cover") {
+          img2.style.objectPosition = "left top";
+        }
         img2.style.display = block.display === "inline" ? "inline-block" : "block";
+        const filters = [];
+        if (block.gain != null || block.blacklevel != null) {
+          if (block.gain && typeof block.gain === "string" && block.gain.endsWith("f")) {
+            const contrast = Math.max(0, parseInt(block.gain) / 65536);
+            if (contrast > 0) {
+              filters.push(`contrast(${contrast})`);
+            }
+          }
+          if (block.blacklevel && typeof block.blacklevel === "string" && block.blacklevel.endsWith("f")) {
+            const brightness = Math.max(0, 1 + parseInt(block.blacklevel) / 327 / 100) + 0.5;
+            if (brightness > 0) {
+              filters.push(`brightness(${brightness})`);
+            }
+          }
+          if (filters.length > 0) {
+            img2.style.filter = filters.join(" ");
+          }
+        }
         fragmentEl.appendChild(img2);
         return fragmentEl;
       } catch (error) {
@@ -73311,6 +73598,9 @@ ${l}
       img2.style.width = "100%";
       img2.style.height = "100%";
       img2.style.objectFit = drawing.objectFit ?? "contain";
+      if (drawing.objectFit === "cover") {
+        img2.style.objectPosition = "left top";
+      }
       img2.style.display = "block";
       return img2;
     }
@@ -78059,13 +78349,8 @@ ${l}
     let baseX;
     let availableWidth;
     if (relativeFrom === "page") {
-      if (columns.count === 1) {
-        baseX = contentLeft;
-        availableWidth = contentWidth;
-      } else {
-        baseX = 0;
-        availableWidth = pageWidth != null ? pageWidth : contentWidth;
-      }
+      baseX = 0;
+      availableWidth = pageWidth != null ? pageWidth : contentWidth + marginLeft + marginRight;
     } else if (relativeFrom === "margin") {
       baseX = contentLeft;
       availableWidth = contentWidth;
@@ -79554,7 +79839,9 @@ ${l}
       if (!isImage && !isDrawing) continue;
       const drawingBlock = block;
       const drawingMeasure = measure;
-      if (!drawingBlock.anchor?.isAnchored) continue;
+      if (!drawingBlock.anchor?.isAnchored) {
+        continue;
+      }
       if (isPageRelativeAnchor(drawingBlock)) {
         result.push({ block: drawingBlock, measure: drawingMeasure });
       }
@@ -92650,8 +92937,9 @@ ${l}
     const isInline2 = normalizedWrap?.type === "Inline" || typeof attrs.inline === "boolean" && attrs.inline;
     const display = explicitDisplay === "inline" || explicitDisplay === "block" ? explicitDisplay : isInline2 ? "inline" : "block";
     const explicitObjectFit = typeof attrs.objectFit === "string" ? attrs.objectFit : void 0;
+    const shouldCover = attrs.shouldCover === true;
     const isAnchor = anchor?.isAnchored ?? (typeof attrs.isAnchor === "boolean" ? attrs.isAnchor : false);
-    const objectFit = isAllowedObjectFit(explicitObjectFit) ? explicitObjectFit : display === "inline" ? "scale-down" : isAnchor ? "contain" : "contain";
+    const objectFit = isAllowedObjectFit(explicitObjectFit) ? explicitObjectFit : shouldCover ? "cover" : display === "inline" ? "scale-down" : isAnchor ? "contain" : "contain";
     return {
       kind: "image",
       id: nextBlockId("image"),
@@ -92666,7 +92954,10 @@ ${l}
       margin: toBoxSpacing(attrs.marginOffset),
       anchor,
       wrap: normalizedWrap,
-      attrs: attrsWithPm
+      attrs: attrsWithPm,
+      // VML image adjustments for watermark effects
+      gain: typeof attrs.gain === "string" || typeof attrs.gain === "number" ? attrs.gain : void 0,
+      blacklevel: typeof attrs.blacklevel === "string" || typeof attrs.blacklevel === "number" ? attrs.blacklevel : void 0
     };
   }
   function handleImageNode(node2, context) {
@@ -96616,11 +96907,13 @@ ${l}
     const intrinsic = getIntrinsicImageSize(block, constraints.maxWidth);
     const isBlockBehindDoc = block.anchor?.behindDoc;
     const isBlockWrapBehindDoc = block.wrap?.type === "None" && block.wrap?.behindDoc;
-    const bypassWidthConstraint = isBlockBehindDoc || isBlockWrapBehindDoc;
+    const isPageRelativeAnchor2 = block.anchor?.isAnchored && (block.anchor?.hRelativeFrom === "page" || block.anchor?.hRelativeFrom === "margin");
+    const bypassWidthConstraint = isBlockBehindDoc || isBlockWrapBehindDoc || isPageRelativeAnchor2;
     const isWidthConstraintBypassed = bypassWidthConstraint || constraints.maxWidth <= 0;
     const maxWidth = isWidthConstraintBypassed ? intrinsic.width : constraints.maxWidth;
     const hasNegativeVerticalPosition = block.anchor?.isAnchored && (typeof block.anchor?.offsetV === "number" && block.anchor.offsetV < 0 || typeof block.margin?.top === "number" && block.margin.top < 0);
-    const maxHeight = hasNegativeVerticalPosition || !constraints.maxHeight || constraints.maxHeight <= 0 ? Infinity : constraints.maxHeight;
+    const shouldBypassHeightConstraint = hasNegativeVerticalPosition || block.objectFit === "cover";
+    const maxHeight = shouldBypassHeightConstraint || !constraints.maxHeight || constraints.maxHeight <= 0 ? Infinity : constraints.maxHeight;
     const widthScale = maxWidth / intrinsic.width;
     const heightScale = maxHeight / intrinsic.height;
     const scale = Math.min(1, widthScale, heightScale);
@@ -111235,18 +111528,18 @@ ${l}
         // Used during DOCX export to restore the original metafile format.
         originalExtension: { rendered: false },
         originalSrc: { rendered: false },
-        shouldStretch: {
+        shouldCover: {
           default: false,
           rendered: false
         },
         size: {
           default: {},
-          renderDOM: ({ size: size2, shouldStretch }) => {
+          renderDOM: ({ size: size2, shouldCover }) => {
             let style2 = "";
             let { width, height } = size2 ?? {};
             if (width) style2 += `width: ${width}px;`;
-            if (height && shouldStretch) {
-              style2 += `height: ${height}px; object-fit: fill;`;
+            if (height && shouldCover) {
+              style2 += `height: ${height}px; object-fit: cover; object-position: left top;`;
             } else if (height) style2 += "height: auto;";
             return { style: style2 };
           }
@@ -119405,6 +119698,9 @@ ${l}
           if (!node2 || !nodeNames.includes(node2.type.name)) {
             return DecorationSet.empty;
           }
+          if (node2.attrs?.vmlWatermark === true) {
+            return DecorationSet.empty;
+          }
           const decorations = [];
           if (nodeNames.includes(selection.node?.type.name)) {
             decorations.push(
@@ -119487,6 +119783,7 @@ ${l}
       const pos = Number.parseInt(wrapper.getAttribute("data-pos"), 10);
       const node2 = view.state.doc.nodeAt(pos);
       if (!nodeNames.includes(node2?.type.name)) return;
+      if (node2?.attrs?.vmlWatermark === true) return;
       currentWrapper = wrapper;
       resizeContainer = document.createElement("div");
       resizeContainer.className = "sd-editor-resize-container";
@@ -144773,7 +145070,7 @@ ${reason}`);
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "1.4.0-next.1";
+      this.version = "1.4.0-next.2";
       this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
       this.superdocId = config2.superdocId || v4();
       this.colors = this.config.colors;