@harbour-enterprises/superdoc 0.22.0-next.2 → 0.22.0-next.4

package/dist/superdoc.umd.js

@@ -32581,17 +32581,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   };
   const getDefaultParagraphStyle = (docx, styleId = "") => {
     const styles = docx["word/styles.xml"];
-    if (!styles) {
+    const rootElements = styles?.elements?.[0]?.elements;
+    if (!rootElements?.length) {
       return {};
     }
-    const defaults = styles.elements[0].elements?.find((el) => el.name === "w:docDefaults");
-    const pDefault = defaults.elements.find((el) => el.name === "w:pPrDefault");
+    const defaults = rootElements.find((el) => el.name === "w:docDefaults");
+    const pDefault = defaults?.elements?.find((el) => el.name === "w:pPrDefault") || {};
     const pPrDefault = pDefault?.elements?.find((el) => el.name === "w:pPr");
     const pPrDefaultSpacingTag = pPrDefault?.elements?.find((el) => el.name === "w:spacing") || {};
     const pPrDefaultIndentTag = pPrDefault?.elements?.find((el) => el.name === "w:ind") || {};
-    const stylesNormal = styles.elements[0].elements?.find(
-      (el) => el.name === "w:style" && el.attributes["w:styleId"] === "Normal"
-    );
+    const stylesNormal = rootElements.find((el) => el.name === "w:style" && el.attributes["w:styleId"] === "Normal");
     const pPrNormal = stylesNormal?.elements?.find((el) => el.name === "w:pPr");
     const pPrNormalSpacingTag = pPrNormal?.elements?.find((el) => el.name === "w:spacing") || {};
     const pPrNormalIndentTag = pPrNormal?.elements?.find((el) => el.name === "w:ind") || {};
@@ -32600,9 +32599,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     let pPrStyleIdIndentTag = {};
     let pPrStyleJc = {};
     if (styleId) {
-      const stylesById = styles.elements[0].elements?.find(
-        (el) => el.name === "w:style" && el.attributes["w:styleId"] === styleId
-      );
+      const stylesById = rootElements.find((el) => el.name === "w:style" && el.attributes["w:styleId"] === styleId);
       const pPrById = stylesById?.elements?.find((el) => el.name === "w:pPr");
       pPrStyleIdSpacingTag = pPrById?.elements?.find((el) => el.name === "w:spacing") || {};
       pPrStyleIdIndentTag = pPrById?.elements?.find((el) => el.name === "w:ind") || {};
@@ -38336,6 +38333,18 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     attributes: validXmlAttributes
   };
   const translator = NodeTranslator.from(config);
+  const DEFAULT_SECTION_PROPS_TWIPS = Object.freeze({
+    pageSize: Object.freeze({ width: "12240", height: "15840" }),
+    pageMargins: Object.freeze({
+      top: "1440",
+      right: "1440",
+      bottom: "1440",
+      left: "1440",
+      header: "720",
+      footer: "720",
+      gutter: "0"
+    })
+  });
   const isLineBreakOnlyRun = (node) => {
     if (!node) return false;
     if (node.type === "lineBreak" || node.type === "hardBreak") return true;
@@ -38388,28 +38397,63 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     return handler2(params2);
   }
   function translateBodyNode(params2) {
-    let sectPr = params2.bodyNode?.elements.find((n) => n.name === "w:sectPr") || {};
+    let sectPr = params2.bodyNode?.elements?.find((n) => n.name === "w:sectPr");
+    if (!sectPr) {
+      sectPr = {
+        type: "element",
+        name: "w:sectPr",
+        elements: []
+      };
+    } else if (!sectPr.elements) {
+      sectPr = { ...sectPr, elements: [] };
+    }
     if (params2.converter) {
-      const hasHeader = sectPr?.elements?.some((n) => n.name === "w:headerReference");
+      const hasHeader = sectPr.elements?.some((n) => n.name === "w:headerReference");
       const hasDefaultHeader = params2.converter.headerIds?.default;
       if (!hasHeader && hasDefaultHeader && !params2.editor.options.isHeaderOrFooter) {
         const defaultHeader = generateDefaultHeaderFooter("header", params2.converter.headerIds?.default);
         sectPr.elements.push(defaultHeader);
       }
-      const hasFooter = sectPr?.elements?.some((n) => n.name === "w:footerReference");
+      const hasFooter = sectPr.elements?.some((n) => n.name === "w:footerReference");
       const hasDefaultFooter = params2.converter.footerIds?.default;
       if (!hasFooter && hasDefaultFooter && !params2.editor.options.isHeaderOrFooter) {
         const defaultFooter = generateDefaultHeaderFooter("footer", params2.converter.footerIds?.default);
         sectPr.elements.push(defaultFooter);
       }
-      const newMargins = params2.converter.pageStyles.pageMargins;
-      const sectPrMargins = sectPr.elements.find((n) => n.name === "w:pgMar");
-      const { attributes } = sectPrMargins;
-      Object.entries(newMargins).forEach(([key2, value]) => {
-        const convertedValue = inchesToTwips(value);
-        attributes[`w:${key2}`] = convertedValue;
-      });
-      sectPrMargins.attributes = attributes;
+      const newMargins = params2.converter.pageStyles?.pageMargins;
+      if (newMargins) {
+        let sectPrMargins = sectPr.elements.find((n) => n.name === "w:pgMar");
+        if (!sectPrMargins) {
+          sectPrMargins = {
+            type: "element",
+            name: "w:pgMar",
+            attributes: {}
+          };
+          sectPr.elements.push(sectPrMargins);
+        } else if (!sectPrMargins.attributes) {
+          sectPrMargins.attributes = {};
+        }
+        Object.entries(newMargins).forEach(([key2, value]) => {
+          const convertedValue = inchesToTwips(value);
+          sectPrMargins.attributes[`w:${key2}`] = convertedValue;
+        });
+      }
+      let sectPrPgSz = sectPr.elements.find((n) => n.name === "w:pgSz");
+      if (!sectPrPgSz) {
+        sectPrPgSz = {
+          type: "element",
+          name: "w:pgSz",
+          attributes: {}
+        };
+        sectPr.elements.push(sectPrPgSz);
+      } else if (!sectPrPgSz.attributes) {
+        sectPrPgSz.attributes = {};
+      }
+      const pageSize = params2.converter.pageStyles?.pageSize;
+      const widthInches = pageSize?.width;
+      const heightInches = pageSize?.height;
+      sectPrPgSz.attributes["w:w"] = widthInches ? String(inchesToTwips(widthInches)) : sectPrPgSz.attributes["w:w"] ?? DEFAULT_SECTION_PROPS_TWIPS.pageSize.width;
+      sectPrPgSz.attributes["w:h"] = heightInches ? String(inchesToTwips(heightInches)) : sectPrPgSz.attributes["w:h"] ?? DEFAULT_SECTION_PROPS_TWIPS.pageSize.height;
     }
     const elements = translateChildNodes(params2);
     if (params2.isHeaderFooter) {
@@ -40397,6 +40441,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const nodeListHandler = defaultNodeListHandler();
     const bodyNode = json.elements[0].elements.find((el) => el.name === "w:body");
     if (bodyNode) {
+      ensureSectionProperties(bodyNode);
       const node = bodyNode;
       const contentElements = node.elements?.filter((n) => n.name !== "w:sectPr") ?? [];
       const content = pruneIgnoredNodes(contentElements);
@@ -40630,6 +40675,59 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     styles.alternateHeaders = isAlternatingHeadersOddEven(docx);
     return styles;
   }
+  const DEFAULT_SECTION_PROPS = Object.freeze({
+    pageSize: Object.freeze({ width: "12240", height: "15840" }),
+    pageMargins: Object.freeze({
+      top: "1440",
+      right: "1440",
+      bottom: "1440",
+      left: "1440",
+      header: "720",
+      footer: "720",
+      gutter: "0"
+    })
+  });
+  function ensureSectionProperties(bodyNode, converter) {
+    if (!bodyNode.elements) bodyNode.elements = [];
+    let sectPr = bodyNode.elements.find((el) => el.name === "w:sectPr");
+    if (!sectPr) {
+      sectPr = {
+        type: "element",
+        name: "w:sectPr",
+        elements: []
+      };
+      bodyNode.elements.push(sectPr);
+    } else if (!sectPr.elements) {
+      sectPr.elements = [];
+    }
+    const ensureChild = (name, factory) => {
+      let child = sectPr.elements.find((el) => el.name === name);
+      if (!child) {
+        child = factory();
+        sectPr.elements.push(child);
+      } else if (!child.attributes) {
+        child.attributes = {};
+      }
+      return child;
+    };
+    const pgSz = ensureChild("w:pgSz", () => ({
+      type: "element",
+      name: "w:pgSz",
+      attributes: {}
+    }));
+    pgSz.attributes["w:w"] = pgSz.attributes["w:w"] ?? DEFAULT_SECTION_PROPS.pageSize.width;
+    pgSz.attributes["w:h"] = pgSz.attributes["w:h"] ?? DEFAULT_SECTION_PROPS.pageSize.height;
+    const pgMar = ensureChild("w:pgMar", () => ({
+      type: "element",
+      name: "w:pgMar",
+      attributes: {}
+    }));
+    Object.entries(DEFAULT_SECTION_PROPS.pageMargins).forEach(([key2, value]) => {
+      const attrKey = `w:${key2}`;
+      if (pgMar.attributes[attrKey] == null) pgMar.attributes[attrKey] = value;
+    });
+    return sectPr;
+  }
   function getStyleDefinitions(docx) {
     const styles = docx["word/styles.xml"];
     if (!styles) return [];
@@ -40822,6 +40920,36 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     auto: "sans-serif"
   });
   const DEFAULT_GENERIC_FALLBACK = "sans-serif";
+  const DEFAULT_FONT_SIZE_PT = 10;
+  const collectRunDefaultProperties = (runProps, { allowOverrideTypeface = true, allowOverrideSize = true, themeResolver, state: state2 }) => {
+    if (!runProps?.elements?.length || !state2) return;
+    const fontsNode = runProps.elements.find((el) => el.name === "w:rFonts");
+    if (fontsNode?.attributes) {
+      const themeName = fontsNode.attributes["w:asciiTheme"];
+      if (themeName) {
+        const themeInfo = themeResolver?.(themeName) || {};
+        if ((allowOverrideTypeface || !state2.typeface) && themeInfo.typeface) state2.typeface = themeInfo.typeface;
+        if ((allowOverrideTypeface || !state2.panose) && themeInfo.panose) state2.panose = themeInfo.panose;
+      }
+      const ascii = fontsNode.attributes["w:ascii"];
+      if ((allowOverrideTypeface || !state2.typeface) && ascii) {
+        state2.typeface = ascii;
+      }
+    }
+    const sizeNode = runProps.elements.find((el) => el.name === "w:sz");
+    if (sizeNode?.attributes?.["w:val"]) {
+      const sizeTwips = Number(sizeNode.attributes["w:val"]);
+      if (Number.isFinite(sizeTwips)) {
+        if (state2.fallbackSzTwips === void 0) state2.fallbackSzTwips = sizeTwips;
+        const sizePt = sizeTwips / 2;
+        if (allowOverrideSize || state2.fontSizePt === void 0) state2.fontSizePt = sizePt;
+      }
+    }
+    const kernNode = runProps.elements.find((el) => el.name === "w:kern");
+    if (kernNode?.attributes?.["w:val"]) {
+      if (allowOverrideSize || state2.kern === void 0) state2.kern = kernNode.attributes["w:val"];
+    }
+  };
   const _SuperConverter = class _SuperConverter2 {
     constructor(params2 = null) {
       __privateAdd$2(this, _SuperConverter_instances);
@@ -40949,49 +41077,45 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     getDocumentDefaultStyles() {
       const styles = this.convertedXml["word/styles.xml"];
-      if (!styles) return {};
-      const defaults = styles.elements[0].elements.find((el) => el.name === "w:docDefaults");
-      const rDefault = defaults.elements.find((el) => el.name === "w:rPrDefault");
-      if (!rDefault.elements) return {};
-      const rElements = rDefault.elements[0].elements;
-      const rFonts = rElements?.find((el) => el.name === "w:rFonts");
-      if ("elements" in rDefault) {
-        const fontThemeName = rElements.find((el) => el.name === "w:rFonts")?.attributes["w:asciiTheme"];
-        let typeface, panose, fontSizeNormal;
-        if (fontThemeName) {
-          const fontInfo = this.getThemeInfo(fontThemeName);
-          typeface = fontInfo.typeface;
-          panose = fontInfo.panose;
-        } else if (rFonts) {
-          typeface = rFonts?.attributes["w:ascii"];
-        }
-        const paragraphDefaults = styles.elements[0].elements.filter((el) => {
-          return el.name === "w:style" && el.attributes["w:styleId"] === "Normal";
-        }) || [];
-        paragraphDefaults.forEach((el) => {
-          const rPr = el.elements.find((el2) => el2.name === "w:rPr");
-          const fonts = rPr?.elements?.find((el2) => el2.name === "w:rFonts");
-          typeface = fonts?.attributes["w:ascii"];
-          fontSizeNormal = Number(rPr?.elements?.find((el2) => el2.name === "w:sz")?.attributes["w:val"]) / 2;
-        });
-        const rPrDefaults = defaults?.elements?.find((el) => el.name === "w:rPrDefault");
-        if (rPrDefaults) {
-          const rPr = rPrDefaults.elements?.find((el) => el.name === "w:rPr");
-          const fonts = rPr?.elements?.find((el) => el.name === "w:rFonts");
-          if (fonts?.attributes?.["w:ascii"]) {
-            typeface = fonts.attributes["w:ascii"];
-          }
-          const fontSizeRaw = rPr?.elements?.find((el) => el.name === "w:sz")?.attributes?.["w:val"];
-          if (!fontSizeNormal && fontSizeRaw) {
-            fontSizeNormal = Number(fontSizeRaw) / 2;
-          }
-        }
-        const fallbackSz = Number(rElements.find((el) => el.name === "w:sz")?.attributes?.["w:val"]);
-        const fontSizePt = fontSizeNormal ?? (Number.isFinite(fallbackSz) ? fallbackSz / 2 : void 0) ?? 10;
-        const kern = rElements.find((el) => el.name === "w:kern")?.attributes["w:val"];
-        const fontFamilyCss = _SuperConverter2.toCssFontFamily(typeface, this.convertedXml);
-        return { fontSizePt, kern, typeface, panose, fontFamilyCss };
-      }
+      const styleRoot = styles?.elements?.[0];
+      const styleElements = styleRoot?.elements || [];
+      if (!styleElements.length) return {};
+      const defaults = styleElements.find((el) => el.name === "w:docDefaults");
+      const normalStyle = styleElements.find((el) => el.name === "w:style" && el.attributes?.["w:styleId"] === "Normal");
+      const defaultsState = {
+        typeface: void 0,
+        panose: void 0,
+        fontSizePt: void 0,
+        kern: void 0,
+        fallbackSzTwips: void 0
+      };
+      const docDefaultRun = defaults?.elements?.find((el) => el.name === "w:rPrDefault");
+      const docDefaultProps = docDefaultRun?.elements?.find((el) => el.name === "w:rPr") ?? docDefaultRun;
+      collectRunDefaultProperties(docDefaultProps, {
+        allowOverrideTypeface: true,
+        allowOverrideSize: true,
+        themeResolver: (theme) => this.getThemeInfo(theme),
+        state: defaultsState
+      });
+      const normalRunProps = normalStyle?.elements?.find((el) => el.name === "w:rPr") ?? null;
+      collectRunDefaultProperties(normalRunProps, {
+        allowOverrideTypeface: true,
+        allowOverrideSize: true,
+        themeResolver: (theme) => this.getThemeInfo(theme),
+        state: defaultsState
+      });
+      if (defaultsState.fontSizePt === void 0) {
+        if (Number.isFinite(defaultsState.fallbackSzTwips)) defaultsState.fontSizePt = defaultsState.fallbackSzTwips / 2;
+        else defaultsState.fontSizePt = DEFAULT_FONT_SIZE_PT;
+      }
+      const fontFamilyCss = defaultsState.typeface ? _SuperConverter2.toCssFontFamily(defaultsState.typeface, this.convertedXml) : void 0;
+      const result = {};
+      if (defaultsState.fontSizePt !== void 0) result.fontSizePt = defaultsState.fontSizePt;
+      if (defaultsState.kern !== void 0) result.kern = defaultsState.kern;
+      if (defaultsState.typeface) result.typeface = defaultsState.typeface;
+      if (defaultsState.panose) result.panose = defaultsState.panose;
+      if (fontFamilyCss) result.fontFamilyCss = fontFamilyCss;
+      return result;
     }
     getDocumentFonts() {
       const fontTable = this.convertedXml["word/fontTable.xml"];
@@ -55644,9 +55768,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       item.editor.view.dom.setAttribute("documentmode", documentMode);
     });
     if (isEditMode) {
-      const pm = document.querySelector(".ProseMirror");
-      pm.classList.add("header-footer-edit");
-      pm.setAttribute("aria-readonly", true);
+      const pm = editor.view?.dom || editor.options.element?.querySelector?.(".ProseMirror");
+      if (pm) {
+        pm.classList.add("header-footer-edit");
+        pm.setAttribute("aria-readonly", true);
+      }
     }
     if (focusedSectionEditor) {
       focusedSectionEditor.view.focus();
@@ -58258,7 +58384,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     setDocumentMode(documentMode) {
       let cleanedMode = documentMode?.toLowerCase() || "editing";
       if (!this.extensionService || !this.state) return;
-      const pm = document.querySelector(".ProseMirror");
+      const pm = this.view?.dom || this.options.element?.querySelector?.(".ProseMirror");
       if (this.options.role === "viewer") cleanedMode = "viewing";
       if (this.options.role === "suggester" && cleanedMode === "editing") cleanedMode = "suggesting";
       if (cleanedMode === "viewing") {
@@ -59232,9 +59358,11 @@ Please report this to https://github.com/markedjs/marked.`, e) {
             isEditMode: false,
             documentMode: this.options.documentMode
           });
-          const pm = document.querySelector(".ProseMirror");
-          pm.classList.remove("header-footer-edit");
-          pm.setAttribute("aria-readonly", false);
+          const pm = this.view?.dom || this.options.element?.querySelector?.(".ProseMirror");
+          if (pm) {
+            pm.classList.remove("header-footer-edit");
+            pm.setAttribute("aria-readonly", false);
+          }
         }
         setWordSelection(view, pos);
       }
@@ -77269,7 +77397,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
             const prevSelection = prevState.selection;
             if (selection.from !== prevSelection.from || selection.to !== prevSelection.to) {
               setTimeout(() => {
-                const selectedResizableWrapper = document.querySelector(".sd-editor-resizable-wrapper");
+                const searchRoot = editorView?.dom;
+                const selectedResizableWrapper = searchRoot?.querySelector(".sd-editor-resizable-wrapper");
                 if (selectedResizableWrapper) {
                   showResizeHandles(view2, selectedResizableWrapper);
                 } else {
@@ -90805,7 +90934,7 @@ ${style2}
           if (!argument) return;
           item.onActivate({ zoom: argument });
           this.emit("superdoc-command", { item, argument });
-          const layers = document.querySelector(this.superdoc.config.selector)?.querySelector(".layers");
+          const layers = this.superdoc.element?.querySelector(".layers");
           if (!layers) return;
           const isMobileDevice = typeof screen.orientation !== "undefined";
           const isSmallScreen = window.matchMedia("(max-width: 834px)").matches;
@@ -110474,6 +110603,9 @@ ${style2}
       this.isDev = this.config.isDev || false;
       this.activeEditor = null;
       this.comments = [];
+      if (!this.config.selector) {
+        throw new Error("SuperDoc: selector is required");
+      }
       this.app.mount(this.config.selector);
       this.readyEditors = 0;
       this.isLocked = this.config.isLocked || false;
@@ -110493,6 +110625,16 @@ ${style2}
         users: this.users
       };
     }
+    /**
+     * Get the SuperDoc container element
+     * @returns {HTMLElement | null}
+     */
+    get element() {
+      if (typeof this.config.selector === "string") {
+        return document.querySelector(this.config.selector);
+      }
+      return this.config.selector;
+    }
     #patchNaiveUIStyles() {
       const cspNonce = this.config.cspNonce;
       const originalCreateElement = document.createElement;
@@ -110516,10 +110658,16 @@ ${style2}
       }
       if (hasDocumentConfig) {
         const normalized = normalizeDocumentEntry(this.config.document);
-        this.config.documents = [normalized];
+        this.config.documents = [
+          {
+            id: v4(),
+            ...normalized
+          }
+        ];
       } else if (hasDocumentUrl) {
         this.config.documents = [
           {
+            id: v4(),
             type: DOCX,
             url: this.config.document,
             name: "document.docx",
@@ -110527,33 +110675,34 @@ ${style2}
           }
         ];
       } else if (hasDocumentFile) {
+        const normalized = normalizeDocumentEntry(this.config.document);
         this.config.documents = [
           {
-            type: this.config.document.type,
-            data: this.config.document,
-            name: this.config.document.name,
-            isNewFile: true
+            id: v4(),
+            ...normalized
           }
         ];
       } else if (hasDocumentBlob) {
-        const docType = this.config.document.type || DOCX;
-        let extension = ".docx";
-        if (docType === PDF) {
-          extension = ".pdf";
-        } else if (docType === HTML) {
-          extension = ".html";
-        }
+        const normalized = normalizeDocumentEntry(this.config.document);
         this.config.documents = [
           {
-            type: docType,
-            data: this.config.document,
-            name: `document${extension}`,
-            isNewFile: true
+            id: v4(),
+            ...normalized
           }
         ];
       }
       if (Array.isArray(this.config.documents) && this.config.documents.length > 0) {
-        this.config.documents = this.config.documents.map((d2) => normalizeDocumentEntry(d2));
+        this.config.documents = this.config.documents.map((d2) => {
+          const normalized = normalizeDocumentEntry(d2);
+          if (!normalized || typeof normalized !== "object") {
+            return normalized;
+          }
+          const existingId = typeof normalized === "object" && "id" in normalized && normalized.id || d2 && typeof d2 === "object" && "id" in d2 && d2.id;
+          return {
+            ...normalized,
+            id: existingId || v4()
+          };
+        });
       }
     }
     #initVueApp() {