@harbour-enterprises/superdoc 1.3.1-next.3 → 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.3.1-next.3") {
+    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.3.1-next.3";
+  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.3.1-next.3");
+      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 });
       }
@@ -88612,7 +88899,13 @@ ${l}
     const result = {};
     if (spacing.before != null) result.before = pxToPt(spacing.before);
     if (spacing.after != null) result.after = pxToPt(spacing.after);
-    if (spacing.line != null) result.line = pxToPt(spacing.line);
+    if (spacing.line != null) {
+      if (spacing.lineRule === "auto" && spacing.line > 0 && spacing.line <= MAX_AUTO_LINE_MULTIPLIER) {
+        result.line = spacing.line;
+      } else {
+        result.line = pxToPt(spacing.line);
+      }
+    }
     if (spacing.lineRule) result.lineRule = spacing.lineRule;
     return result;
   };
@@ -88636,8 +88929,13 @@ ${l}
         if (after != null) result.after = after;
       }
       if (rawSpacing.line != null) {
-        const line = ptToPx(spacing.line);
-        if (line != null) result.line = line;
+        const isAutoMultiplier = spacing.lineRule === "auto" && spacing.line != null && spacing.line > 0 && spacing.line <= MAX_AUTO_LINE_MULTIPLIER;
+        if (isAutoMultiplier) {
+          result.line = spacing.line;
+        } else {
+          const line = ptToPx(spacing.line);
+          if (line != null) result.line = line;
+        }
         if (spacing.lineRule) result.lineRule = spacing.lineRule;
       }
     }
@@ -88717,7 +89015,7 @@ ${l}
       if (value > 0 && value <= MAX_AUTO_LINE_MULTIPLIER) {
         return value;
       }
-      return twipsToPx$1(value);
+      return value / 240;
     }
     return twipsToPx$1(value);
   };
@@ -92639,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"),
@@ -92655,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) {
@@ -96605,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);
@@ -96858,7 +97162,8 @@ ${l}
       return baseLineHeight;
     }
     const raw = spacing.line;
-    const treatAsMultiplier = (spacing.lineRule === "auto" || spacing.lineRule == null) && raw > 0 && raw <= 10;
+    const isAuto = spacing.lineRule === "auto";
+    const treatAsMultiplier = (isAuto || spacing.lineRule == null) && raw > 0 && (isAuto || raw <= 10);
     if (treatAsMultiplier) {
       return raw * baseLineHeight;
     }
@@ -97205,6 +97510,8 @@ ${l}
         debugLabel: options.layoutEngineOptions?.debugLabel,
         layoutMode: options.layoutEngineOptions?.layoutMode ?? "vertical",
         trackedChanges: options.layoutEngineOptions?.trackedChanges,
+        emitCommentPositionsInViewing: options.layoutEngineOptions?.emitCommentPositionsInViewing,
+        enableCommentsInViewing: options.layoutEngineOptions?.enableCommentsInViewing,
         presence: validatedPresence
       };
       this.#trackedChangesOverrides = options.layoutEngineOptions?.trackedChanges;
@@ -97793,6 +98100,33 @@ ${l}
         this.#scheduleRerender();
       }
     }
+    /**
+     * Update viewing-mode comment rendering behavior and re-render if needed.
+     *
+     * @param options - Viewing mode comment options.
+     */
+    setViewingCommentOptions(options = {}) {
+      if (options !== void 0 && (typeof options !== "object" || options === null || Array.isArray(options))) {
+        throw new TypeError("[PresentationEditor] setViewingCommentOptions expects an object or undefined");
+      }
+      let hasChanges = false;
+      if (typeof options.emitCommentPositionsInViewing === "boolean") {
+        if (this.#layoutOptions.emitCommentPositionsInViewing !== options.emitCommentPositionsInViewing) {
+          this.#layoutOptions.emitCommentPositionsInViewing = options.emitCommentPositionsInViewing;
+          hasChanges = true;
+        }
+      }
+      if (typeof options.enableCommentsInViewing === "boolean") {
+        if (this.#layoutOptions.enableCommentsInViewing !== options.enableCommentsInViewing) {
+          this.#layoutOptions.enableCommentsInViewing = options.enableCommentsInViewing;
+          hasChanges = true;
+        }
+      }
+      if (hasChanges) {
+        this.#pendingDocChange = true;
+        this.#scheduleRerender();
+      }
+    }
     /**
      * Toggle the custom context menu at runtime to respect host-level guardrails.
      */
@@ -100145,7 +100479,7 @@ ${l}
           } : void 0;
           const atomNodeTypes = getAtomNodeTypes(this.#editor?.schema ?? null);
           const positionMap2 = this.#editor?.state?.doc && docJson ? buildPositionMapFromPmDoc(this.#editor.state.doc, docJson) : null;
-          const commentsEnabled = this.#documentMode !== "viewing";
+          const commentsEnabled = this.#documentMode !== "viewing" || this.#layoutOptions.enableCommentsInViewing === true;
           const result = toFlowBlocks(docJson, {
             mediaFiles: this.#editor?.storage?.image?.media,
             emitSectionBreaks: true,
@@ -100285,7 +100619,8 @@ ${l}
         const payload = { layout, blocks: blocks2, measures, metrics };
         this.emit("layoutUpdated", payload);
         this.emit("paginationUpdate", payload);
-        if (this.#documentMode !== "viewing") {
+        const allowViewingCommentPositions = this.#layoutOptions.emitCommentPositionsInViewing === true;
+        if (this.#documentMode !== "viewing" || allowViewingCommentPositions) {
           const commentPositions = this.#collectCommentPositions();
           const positionKeys = Object.keys(commentPositions);
           if (positionKeys.length > 0) {
@@ -111193,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 };
           }
@@ -119363,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(
@@ -119445,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";
@@ -141442,6 +141781,11 @@ ${reason}`);
       allowResolve: true,
       showResolved: false
     });
+    const viewingVisibility = reactive({
+      documentMode: "editing",
+      commentsVisible: false,
+      trackChangesVisible: false
+    });
     const isDebugging = false;
     const debounceTimers = {};
     const COMMENT_EVENTS = comments_module_events;
@@ -141468,6 +141812,7 @@ ${reason}`);
     const isFloatingCommentsReady = ref(false);
     const generalCommentIds = ref([]);
     const pendingComment = ref(null);
+    const isViewingMode = computed(() => viewingVisibility.documentMode === "viewing");
     const init2 = (config2 = {}) => {
       const updatedConfig = { ...commentsConfig, ...config2 };
       Object.assign(commentsConfig, updatedConfig);
@@ -141480,6 +141825,17 @@ ${reason}`);
       if (id === void 0 || id === null) return null;
       return commentsList.value.find((c2) => c2.commentId == id || c2.importedId == id);
     };
+    const getThreadParent = (comment2) => {
+      if (!comment2?.parentCommentId) return comment2;
+      return getComment(comment2.parentCommentId);
+    };
+    const isThreadVisible = (comment2) => {
+      if (!isViewingMode.value) return true;
+      const parent = getThreadParent(comment2);
+      if (!parent && comment2?.parentCommentId) return false;
+      const isTrackedChange = Boolean(parent?.trackedChange);
+      return isTrackedChange ? viewingVisibility.trackChangesVisible : viewingVisibility.commentsVisible;
+    };
     const setActiveComment = (superdoc, id) => {
       if (id === void 0 || id === null) {
         activeComment.value = null;
@@ -141581,6 +141937,7 @@ ${reason}`);
       const resolvedComments = [];
       const childCommentMap = /* @__PURE__ */ new Map();
       commentsList.value.forEach((comment2) => {
+        if (!isThreadVisible(comment2)) return;
         if (comment2.resolvedTime) {
           resolvedComments.push(comment2);
         } else if (!comment2.parentCommentId && !comment2.resolvedTime) {
@@ -141789,6 +142146,17 @@ ${reason}`);
       });
       return comments;
     });
+    const setViewingVisibility = ({ documentMode, commentsVisible, trackChangesVisible } = {}) => {
+      if (typeof documentMode === "string") {
+        viewingVisibility.documentMode = documentMode;
+      }
+      if (typeof commentsVisible === "boolean") {
+        viewingVisibility.commentsVisible = commentsVisible;
+      }
+      if (typeof trackChangesVisible === "boolean") {
+        viewingVisibility.trackChangesVisible = trackChangesVisible;
+      }
+    };
     const normalizeCommentForEditor = (node2) => {
       if (!node2 || typeof node2 !== "object") return node2;
       const cloneMarks = (marks) => Array.isArray(marks) ? marks.filter(Boolean).map((mark2) => ({
@@ -141868,6 +142236,7 @@ ${reason}`);
       getFloatingComments,
       // Actions
       init: init2,
+      setViewingVisibility,
       getComment,
       setActiveComment,
       getCommentLocation,
@@ -142857,7 +143226,7 @@ ${reason}`);
       const superdocStore = useSuperdocStore();
       const commentsStore = useCommentsStore();
       const { COMMENT_EVENTS } = commentsStore;
-      const { documentsWithConverations, activeComment, floatingCommentsOffset, commentsList } = storeToRefs(commentsStore);
+      const { documentsWithConverations, activeComment, floatingCommentsOffset, getGroupedComments } = storeToRefs(commentsStore);
       const { documents, activeZoom } = storeToRefs(superdocStore);
       const { proxy } = getCurrentInstance();
       const emit2 = __emit;
@@ -142919,7 +143288,7 @@ ${reason}`);
         emit2("highlight-click", comment2);
       };
       const getCurrentComments = computed(() => {
-        return commentsList.value.filter((c2) => !c2.parentCommentId).filter((c2) => c2.selection && c2.selection.selectionBounds?.top).filter((c2) => !c2.resolvedTime).filter((c2) => c2.selection?.source !== "super-editor");
+        return getGroupedComments.value?.parentComments.filter((c2) => c2.selection && c2.selection.selectionBounds?.top).filter((c2) => !c2.resolvedTime).filter((c2) => c2.selection?.source !== "super-editor");
       });
       watch(activeComment, (newVal) => {
         if (!newVal) return;
@@ -142947,7 +143316,7 @@ ${reason}`);
       };
     }
   };
-  const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-d019784c"]]);
+  const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-7d21d613"]]);
   const _hoisted_1$9 = { class: "sidebar-container calculation-container" };
   const _hoisted_2$3 = ["id"];
   const _sfc_main$a = {
@@ -143789,6 +144158,16 @@ ${reason}`);
       const { isHighContrastMode: isHighContrastMode2 } = useHighContrastMode();
       const { uiFontFamily } = useUiFontFamily();
       const isViewingMode = () => proxy?.$superdoc?.config?.documentMode === "viewing";
+      const isViewingCommentsVisible = computed(
+        () => isViewingMode() && proxy?.$superdoc?.config?.comments?.visible === true
+      );
+      const isViewingTrackChangesVisible = computed(
+        () => isViewingMode() && proxy?.$superdoc?.config?.trackChanges?.visible === true
+      );
+      const shouldRenderCommentsInViewing = computed(() => {
+        if (!isViewingMode()) return true;
+        return isViewingCommentsVisible.value || isViewingTrackChangesVisible.value;
+      });
       const commentsModuleConfig = computed(() => {
         const config2 = modules.comments;
         if (config2 === false || config2 == null) return null;
@@ -143883,7 +144262,7 @@ ${reason}`);
           const commentsConfig = proxy.$superdoc.config.modules?.comments;
           if (!commentsConfig || commentsConfig === false) return;
           if (!positions || Object.keys(positions).length === 0) return;
-          if (isViewingMode()) {
+          if (!shouldRenderCommentsInViewing.value) {
             commentsStore.clearEditorCommentPositions?.();
             return;
           }
@@ -144078,7 +144457,9 @@ ${reason}`);
           layoutEngineOptions: useLayoutEngine ? {
             ...proxy.$superdoc.config.layoutEngineOptions || {},
             debugLabel: proxy.$superdoc.config.layoutEngineOptions?.debugLabel ?? doc2.name ?? doc2.id,
-            zoom: (activeZoom.value ?? 100) / 100
+            zoom: (activeZoom.value ?? 100) / 100,
+            emitCommentPositionsInViewing: isViewingMode() && shouldRenderCommentsInViewing.value,
+            enableCommentsInViewing: isViewingCommentsVisible.value
           } : void 0,
           permissionResolver: (payload = {}) => proxy.$superdoc.canPerformPermission({
             role: proxy.$superdoc.config.role,
@@ -144091,7 +144472,7 @@ ${reason}`);
       const onEditorCommentLocationsUpdate = (doc2, { allCommentIds: activeThreadId, allCommentPositions } = {}) => {
         const commentsConfig = proxy.$superdoc.config.modules?.comments;
         if (!commentsConfig || commentsConfig === false) return;
-        if (isViewingMode()) {
+        if (!shouldRenderCommentsInViewing.value) {
           commentsStore.clearEditorCommentPositions?.();
           return;
         }
@@ -144150,7 +144531,7 @@ ${reason}`);
       };
       const isCommentsEnabled = computed(() => Boolean(commentsModuleConfig.value));
       const showCommentsSidebar = computed(() => {
-        if (isViewingMode()) return false;
+        if (!shouldRenderCommentsInViewing.value) return false;
         return pendingComment.value || getFloatingComments.value?.length > 0 && isReady.value && layers.value && isCommentsEnabled.value && !isCommentsListVisible.value;
       });
       const showToolsFloatingMenu = computed(() => {
@@ -144492,7 +144873,7 @@ ${reason}`);
       };
     }
   };
-  const App = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-5196811d"]]);
+  const App = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-78737564"]]);
   const createSuperdocVueApp = () => {
     const app = createApp(App);
     const pinia = createPinia();
@@ -144598,6 +144979,8 @@ ${reason}`);
       title: "SuperDoc",
       conversations: [],
       isInternal: false,
+      comments: { visible: false },
+      trackChanges: { visible: false },
       // toolbar config
       toolbar: null,
       // Optional DOM element to render the toolbar in
@@ -144647,6 +145030,16 @@ ${reason}`);
         ...this.config,
         ...config2
       };
+      if (!this.config.comments || typeof this.config.comments !== "object") {
+        this.config.comments = { visible: false };
+      } else if (typeof this.config.comments.visible !== "boolean") {
+        this.config.comments.visible = false;
+      }
+      if (!this.config.trackChanges || typeof this.config.trackChanges !== "object") {
+        this.config.trackChanges = { visible: false };
+      } else if (typeof this.config.trackChanges.visible !== "boolean") {
+        this.config.trackChanges.visible = false;
+      }
       const incomingUser = this.config.user;
       if (!incomingUser || typeof incomingUser !== "object") {
         this.config.user = { ...DEFAULT_USER };
@@ -144664,9 +145057,10 @@ ${reason}`);
       }
       if (!this.config.layoutEngineOptions.trackedChanges) {
         const isViewingMode = this.config.documentMode === "viewing";
+        const viewingTrackedChangesVisible = isViewingMode && this.config.trackChanges?.visible === true;
         this.config.layoutEngineOptions.trackedChanges = {
-          mode: isViewingMode ? "final" : "review",
-          enabled: !isViewingMode
+          mode: isViewingMode ? viewingTrackedChangesVisible ? "review" : "original" : "review",
+          enabled: true
         };
       }
       this.config.modules = this.config.modules || {};
@@ -144676,7 +145070,7 @@ ${reason}`);
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "1.3.1-next.3";
+      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;
@@ -144813,6 +145207,7 @@ ${reason}`);
       this.superdocStore.init(this.config);
       const commentsModuleConfig = this.config.modules.comments;
       this.commentsStore.init(commentsModuleConfig && commentsModuleConfig !== false ? commentsModuleConfig : {});
+      this.#syncViewingVisibility();
     }
     #initListeners() {
       this.on("editorBeforeCreate", this.config.onEditorBeforeCreate);
@@ -145114,6 +145509,7 @@ ${reason}`);
       if (!type) return;
       type = type.toLowerCase();
       this.config.documentMode = type;
+      this.#syncViewingVisibility();
       const types2 = {
         viewing: () => this.#setModeViewing(),
         editing: () => this.#setModeEditing(),
@@ -145193,10 +145589,20 @@ ${reason}`);
     }
     #setModeViewing() {
       this.toolbar.activeEditor = null;
-      this.setTrackedChangesPreferences({ mode: "original", enabled: true });
-      this.commentsStore?.clearEditorCommentPositions?.();
+      const commentsVisible = this.config.comments?.visible === true;
+      const trackChangesVisible = this.config.trackChanges?.visible === true;
+      this.setTrackedChangesPreferences(
+        trackChangesVisible ? { mode: "review", enabled: true } : { mode: "original", enabled: true }
+      );
+      if (!commentsVisible && !trackChangesVisible) {
+        this.commentsStore?.clearEditorCommentPositions?.();
+      }
       this.superdocStore.documents.forEach((doc2) => {
-        doc2.removeComments();
+        if (commentsVisible || trackChangesVisible) {
+          doc2.restoreComments();
+        } else {
+          doc2.removeComments();
+        }
         this.#applyDocumentMode(doc2, "viewing");
       });
       if (this.toolbar) {
@@ -145204,6 +145610,31 @@ ${reason}`);
         this.toolbar.updateToolbarState();
       }
     }
+    #syncViewingVisibility() {
+      const commentsVisible = this.config.comments?.visible === true;
+      const trackChangesVisible = this.config.trackChanges?.visible === true;
+      const isViewingMode = this.config.documentMode === "viewing";
+      const shouldRenderCommentsInViewing = commentsVisible || trackChangesVisible;
+      if (this.commentsStore?.setViewingVisibility) {
+        this.commentsStore.setViewingVisibility({
+          documentMode: this.config.documentMode,
+          commentsVisible,
+          trackChangesVisible
+        });
+      }
+      const docs = this.superdocStore?.documents;
+      if (Array.isArray(docs) && docs.length > 0) {
+        docs.forEach((doc2) => {
+          const presentationEditor = typeof doc2.getPresentationEditor === "function" ? doc2.getPresentationEditor() : null;
+          if (presentationEditor?.setViewingCommentOptions) {
+            presentationEditor.setViewingCommentOptions({
+              emitCommentPositionsInViewing: isViewingMode && shouldRenderCommentsInViewing,
+              enableCommentsInViewing: isViewingMode && commentsVisible
+            });
+          }
+        });
+      }
+    }
     /**
      * Search for text or regex in the active editor
      * @param {string | RegExp} text The text or regex to search for