@harbour-enterprises/superdoc 1.3.1-next.3 → 1.4.0-next.2

package/dist/chunks/{SuperConverter-p1tQGIew.cjs → SuperConverter-Dy4wkQEB.cjs}

@@ -19027,7 +19027,7 @@ function isMetafileExtension(extension) {
 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;
@@ -19186,7 +19186,14 @@ function handleImageNode(node, params, isAnchor) {
   }
   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");
@@ -19215,7 +19222,7 @@ function handleImageNode(node, params, isAnchor) {
   }
   const { attributes: relAttributes } = rel;
   const targetPath = relAttributes["Target"];
-  const path = normalizeTargetPath(targetPath);
+  const path = normalizeTargetPath$1(targetPath);
   const extension = path.substring(path.lastIndexOf(".") + 1);
   let finalSrc = path;
   let finalExtension = extension;
@@ -19263,7 +19270,7 @@ function handleImageNode(node, params, isAnchor) {
       wrapText: wrap2.attrs.wrapText
     } : {},
     wrapTopAndBottom: wrap2.type === "TopAndBottom",
-    shouldStretch,
+    shouldCover,
     originalPadding: {
       distT: attributes["distT"],
       distB: attributes["distB"],
@@ -19456,7 +19463,7 @@ const handleShapeGroup = (params, node, graphicData, size, padding, marginOffset
     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 path = targetPath;
     const nvPicPr = pic.elements?.find((el) => el.name === "pic:nvPicPr");
     const cNvPr = nvPicPr?.elements?.find((el) => el.name === "pic:cNvPr");
@@ -29560,6 +29567,10 @@ function filterOutRootInlineNodes(content = []) {
     if (!node || typeof node.type !== "string") return;
     const type = node.type;
     const preservableNodeName = PRESERVABLE_INLINE_XML_NAMES[type];
+    if (type === "image" && node.attrs?.isAnchor) {
+      result.push(node);
+      return;
+    }
     if (!INLINE_TYPES.has(type)) {
       result.push(node);
     } else if (preservableNodeName) {
@@ -29753,6 +29764,137 @@ function buildStyles(styleObject) {
   }
   return style;
 }
+function handleShapeImageImport({ params, 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 } = params;
+  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 style = shapeAttrs.style || "";
+  const styleObj = parseVmlStyle(style);
+  const width = styleObj.width || "100px";
+  const height = styleObj.height || "100px";
+  const position = {
+    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: style,
+      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(position.marginLeft),
+        top: convertToPixels(position.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(style) {
+  const result = {};
+  if (!style) return result;
+  const declarations = style.split(";").filter((s) => s.trim());
+  for (const decl of declarations) {
+    const [prop, value] = decl.split(":").map((s) => s.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(node) {
   const shape = node.elements?.find((el) => el.name === "v:shape");
   const group = node.elements?.find((el) => el.name === "v:group");
@@ -29771,6 +29913,10 @@ function pictNodeTypeStrategy(node) {
     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 };
 }
@@ -29869,8 +30015,116 @@ function translateVRectContentBlock(params) {
   };
   return wrapTextInRun(pict);
 }
+function translateVmlWatermark(params) {
+  const { node } = params;
+  const { attrs } = node;
+  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 style = 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,
+      "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(params) {
   const { node, pNode } = params.extraParams;
@@ -29894,6 +30148,12 @@ function decode(params) {
     shapeContainer: () => translateShapeContainer(params),
     shapeTextbox: () => translateShapeTextbox(params),
     contentBlock: () => translateContentBlock(params),
+    image: () => {
+      if (node.attrs?.vmlWatermark) {
+        return translateVmlWatermark(params);
+      }
+      return null;
+    },
     default: () => null
   };
   const decoder = types[node.type] ?? types.default;
@@ -31009,7 +31269,7 @@ class SuperConverter {
   static getStoredSuperdocVersion(docx) {
     return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
   }
-  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.3.1-next.3") {
+  static setStoredSuperdocVersion(docx = this.convertedXml, version = "1.4.0-next.2") {
     return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version, false);
   }
   /**

package/dist/chunks/{index-DXSUcHli.es.js → index-D246eEeJ.es.js}

@@ -1,5 +1,5 @@
-import { B as BIT8, M as MAX_SAFE_INTEGER, c as create, a as BITS7, u as utf8TextDecoder, b as create$1, s as setIfUndefined, d as create$2, f as from, e as floor$1, g as equalityDeep, w as writeVarUint, h as writeVarString, t as toUint8Array, i as createEncoder, j as createInjectionKey, k as toString, l as throwError, m as useSsrAdapter, n as configProviderInjectionKey, o as cssrAnchorMetaName, p as globalStyle, q as cB, r as c, v as isMounted, x as commonVariables$2, y as cM, z as cNotM, A as cE, C as derived, D as changeColor, E as insideModal, F as insidePopover, G as resolveWrappedSlot, H as on, I as warnOnce, J as useConfig, K as useMergedState, L as useMemo, N as useTheme, O as useRtl, P as createKey, Q as useThemeClass, R as createId, S as call, T as render, U as messageProviderInjectionKey, V as messageApiInjectionKey, W as fromBase64, X as onChange, Y as varStorage, Z as toBase64, _ as createUint8ArrayFromArrayBuffer, $ as offChange, a0 as writeVarUint8Array, a1 as map, a2 as length, a3 as isNode, a4 as min, a5 as pow, a6 as comments_module_events, a7 as getFileObject, a8 as getTrackChanges, a9 as CommentsPluginKey, aa as TrackChangesBasePluginKey, ab as Editor, ac as getRichTextExtensions, ad as ellipsisVerticalSvg, ae as xmarkIconSvg, af as checkIconSvg, ag as caretDownIconSvg, ah as commentIconSvg, ai as _export_sfc, aj as NDropdown, ak as SuperInput, al as vClickOutside, am as PresentationEditor, an as SuperEditor, ao as AIWriter, ap as NConfigProvider, aq as SuperToolbar } from "./index-CJec1cbb.es.js";
-import "./SuperConverter-BQ6PNaJ8.es.js";
+import { B as BIT8, M as MAX_SAFE_INTEGER, c as create, a as BITS7, u as utf8TextDecoder, b as create$1, s as setIfUndefined, d as create$2, f as from, e as floor$1, g as equalityDeep, w as writeVarUint, h as writeVarString, t as toUint8Array, i as createEncoder, j as createInjectionKey, k as toString, l as throwError, m as useSsrAdapter, n as configProviderInjectionKey, o as cssrAnchorMetaName, p as globalStyle, q as cB, r as c, v as isMounted, x as commonVariables$2, y as cM, z as cNotM, A as cE, C as derived, D as changeColor, E as insideModal, F as insidePopover, G as resolveWrappedSlot, H as on, I as warnOnce, J as useConfig, K as useMergedState, L as useMemo, N as useTheme, O as useRtl, P as createKey, Q as useThemeClass, R as createId, S as call, T as render, U as messageProviderInjectionKey, V as messageApiInjectionKey, W as fromBase64, X as onChange, Y as varStorage, Z as toBase64, _ as createUint8ArrayFromArrayBuffer, $ as offChange, a0 as writeVarUint8Array, a1 as map, a2 as length, a3 as isNode, a4 as min, a5 as pow, a6 as comments_module_events, a7 as getFileObject, a8 as getTrackChanges, a9 as CommentsPluginKey, aa as TrackChangesBasePluginKey, ab as Editor, ac as getRichTextExtensions, ad as ellipsisVerticalSvg, ae as xmarkIconSvg, af as checkIconSvg, ag as caretDownIconSvg, ah as commentIconSvg, ai as _export_sfc, aj as NDropdown, ak as SuperInput, al as vClickOutside, am as PresentationEditor, an as SuperEditor, ao as AIWriter, ap as NConfigProvider, aq as SuperToolbar } from "./index-dnQEKI-e.es.js";
+import "./SuperConverter-DxlpZQZQ.es.js";
 import { B as BlankDOCX } from "./blank-docx-ABm6XYAA.es.js";
 import { E as EventEmitter } from "./eventemitter3-CwrdEv8r.es.js";
 import { HocuspocusProvider, HocuspocusProviderWebsocket } from "@hocuspocus/provider";
@@ -5144,6 +5144,11 @@ const useCommentsStore = /* @__PURE__ */ defineStore("comments", () => {
     allowResolve: true,
     showResolved: false
   });
+  const viewingVisibility = reactive({
+    documentMode: "editing",
+    commentsVisible: false,
+    trackChangesVisible: false
+  });
   const isDebugging = false;
   const debounceTimers = {};
   const COMMENT_EVENTS = comments_module_events;
@@ -5170,6 +5175,7 @@ const useCommentsStore = /* @__PURE__ */ defineStore("comments", () => {
   const isFloatingCommentsReady = ref(false);
   const generalCommentIds = ref([]);
   const pendingComment = ref(null);
+  const isViewingMode = computed(() => viewingVisibility.documentMode === "viewing");
   const init = (config = {}) => {
     const updatedConfig = { ...commentsConfig, ...config };
     Object.assign(commentsConfig, updatedConfig);
@@ -5182,6 +5188,17 @@ const useCommentsStore = /* @__PURE__ */ defineStore("comments", () => {
     if (id === void 0 || id === null) return null;
     return commentsList.value.find((c2) => c2.commentId == id || c2.importedId == id);
   };
+  const getThreadParent = (comment) => {
+    if (!comment?.parentCommentId) return comment;
+    return getComment(comment.parentCommentId);
+  };
+  const isThreadVisible = (comment) => {
+    if (!isViewingMode.value) return true;
+    const parent = getThreadParent(comment);
+    if (!parent && comment?.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;
@@ -5283,6 +5300,7 @@ const useCommentsStore = /* @__PURE__ */ defineStore("comments", () => {
     const resolvedComments = [];
     const childCommentMap = /* @__PURE__ */ new Map();
     commentsList.value.forEach((comment) => {
+      if (!isThreadVisible(comment)) return;
       if (comment.resolvedTime) {
         resolvedComments.push(comment);
       } else if (!comment.parentCommentId && !comment.resolvedTime) {
@@ -5491,6 +5509,17 @@ const useCommentsStore = /* @__PURE__ */ defineStore("comments", () => {
     });
     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 = (node) => {
     if (!node || typeof node !== "object") return node;
     const cloneMarks = (marks) => Array.isArray(marks) ? marks.filter(Boolean).map((mark) => ({
@@ -5570,6 +5599,7 @@ const useCommentsStore = /* @__PURE__ */ defineStore("comments", () => {
     getFloatingComments,
     // Actions
     init,
+    setViewingVisibility,
     getComment,
     setActiveComment,
     getCommentLocation,
@@ -6559,7 +6589,7 @@ const _sfc_main$a = {
     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 emit = __emit;
@@ -6621,7 +6651,7 @@ const _sfc_main$a = {
       emit("highlight-click", comment);
     };
     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;
@@ -6649,7 +6679,7 @@ const _sfc_main$a = {
     };
   }
 };
-const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-d019784c"]]);
+const CommentsLayer = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-7d21d613"]]);
 const _hoisted_1$8 = { class: "sidebar-container calculation-container" };
 const _hoisted_2$3 = ["id"];
 const _sfc_main$9 = {
@@ -7449,7 +7479,7 @@ const _sfc_main = {
   __name: "SuperDoc",
   emits: ["selection-update"],
   setup(__props, { emit: __emit }) {
-    const PdfViewer = defineAsyncComponent(() => import("./PdfViewer-CPnVLLJm.es.js"));
+    const PdfViewer = defineAsyncComponent(() => import("./PdfViewer-Dnv-LGqI.es.js"));
     const superdocStore = useSuperdocStore();
     const commentsStore = useCommentsStore();
     const {
@@ -7491,6 +7521,16 @@ const _sfc_main = {
     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 config = modules.comments;
       if (config === false || config == null) return null;
@@ -7585,7 +7625,7 @@ const _sfc_main = {
         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;
         }
@@ -7780,7 +7820,9 @@ const _sfc_main = {
         layoutEngineOptions: useLayoutEngine ? {
           ...proxy.$superdoc.config.layoutEngineOptions || {},
           debugLabel: proxy.$superdoc.config.layoutEngineOptions?.debugLabel ?? doc.name ?? doc.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,
@@ -7793,7 +7835,7 @@ const _sfc_main = {
     const onEditorCommentLocationsUpdate = (doc, { allCommentIds: activeThreadId, allCommentPositions } = {}) => {
       const commentsConfig = proxy.$superdoc.config.modules?.comments;
       if (!commentsConfig || commentsConfig === false) return;
-      if (isViewingMode()) {
+      if (!shouldRenderCommentsInViewing.value) {
         commentsStore.clearEditorCommentPositions?.();
         return;
       }
@@ -7852,7 +7894,7 @@ const _sfc_main = {
     };
     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(() => {
@@ -8194,7 +8236,7 @@ const _sfc_main = {
     };
   }
 };
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5196811d"]]);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78737564"]]);
 const createSuperdocVueApp = () => {
   const app = createApp(App);
   const pinia = createPinia();
@@ -8300,6 +8342,8 @@ class SuperDoc extends EventEmitter {
     title: "SuperDoc",
     conversations: [],
     isInternal: false,
+    comments: { visible: false },
+    trackChanges: { visible: false },
     // toolbar config
     toolbar: null,
     // Optional DOM element to render the toolbar in
@@ -8349,6 +8393,16 @@ class SuperDoc extends EventEmitter {
       ...this.config,
       ...config
     };
+    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 };
@@ -8366,9 +8420,10 @@ class SuperDoc extends EventEmitter {
     }
     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 || {};
@@ -8378,7 +8433,7 @@ class SuperDoc extends EventEmitter {
     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 = config.superdocId || v4();
     this.colors = this.config.colors;
@@ -8515,6 +8570,7 @@ class SuperDoc extends EventEmitter {
     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);
@@ -8816,6 +8872,7 @@ class SuperDoc extends EventEmitter {
     if (!type) return;
     type = type.toLowerCase();
     this.config.documentMode = type;
+    this.#syncViewingVisibility();
     const types = {
       viewing: () => this.#setModeViewing(),
       editing: () => this.#setModeEditing(),
@@ -8895,10 +8952,20 @@ class SuperDoc extends EventEmitter {
   }
   #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((doc) => {
-      doc.removeComments();
+      if (commentsVisible || trackChangesVisible) {
+        doc.restoreComments();
+      } else {
+        doc.removeComments();
+      }
       this.#applyDocumentMode(doc, "viewing");
     });
     if (this.toolbar) {
@@ -8906,6 +8973,31 @@ class SuperDoc extends EventEmitter {
       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((doc) => {
+        const presentationEditor = typeof doc.getPresentationEditor === "function" ? doc.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