@harbour-enterprises/superdoc 0.22.0-next.1 → 0.22.0-next.10

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") || {};
@@ -34905,6 +34902,68 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     decode: decode$h
   };
   const translator$a = NodeTranslator.from(config$a);
+  const DEFAULT_PAGE_WIDTH_TWIPS = 12240;
+  const DEFAULT_PAGE_MARGIN_TWIPS = 1440;
+  const DEFAULT_CONTENT_WIDTH_TWIPS = DEFAULT_PAGE_WIDTH_TWIPS - 2 * DEFAULT_PAGE_MARGIN_TWIPS;
+  const MIN_COLUMN_WIDTH_TWIPS = pixelsToTwips(10);
+  const pctToPercent = (value) => {
+    if (value == null) return null;
+    return value / 50;
+  };
+  const resolveContentWidthTwips = () => DEFAULT_CONTENT_WIDTH_TWIPS;
+  const resolveMeasurementWidthPx = (measurement) => {
+    if (!measurement || typeof measurement.value !== "number" || measurement.value <= 0) return null;
+    const { value, type: type2 } = measurement;
+    if (!type2 || type2 === "auto") return null;
+    if (type2 === "dxa") return twipsToPixels(value);
+    if (type2 === "pct") {
+      const percent2 = pctToPercent(value);
+      if (percent2 == null || percent2 <= 0) return null;
+      const widthTwips = resolveContentWidthTwips() * percent2 / 100;
+      return twipsToPixels(widthTwips);
+    }
+    return null;
+  };
+  const countColumnsInRow = (row) => {
+    if (!row?.elements?.length) return 0;
+    return row.elements.reduce((count, element) => {
+      if (element.name !== "w:tc") return count;
+      const tcPr = element.elements?.find((el) => el.name === "w:tcPr");
+      const gridSpan = tcPr?.elements?.find((el) => el.name === "w:gridSpan");
+      const spanValue = parseInt(gridSpan?.attributes?.["w:val"] || "1", 10);
+      return count + (Number.isFinite(spanValue) && spanValue > 0 ? spanValue : 1);
+    }, 0);
+  };
+  const clampColumnWidthTwips = (value) => Math.max(Math.round(value), MIN_COLUMN_WIDTH_TWIPS);
+  const createFallbackGrid = (columnCount, columnWidthTwips) => Array.from({ length: columnCount }, () => ({ col: clampColumnWidthTwips(columnWidthTwips) }));
+  const buildFallbackGridForTable = ({ params: params2, rows, tableWidth, tableWidthMeasurement }) => {
+    const firstRow = rows.find((row) => row.elements?.some((el) => el.name === "w:tc"));
+    const columnCount = countColumnsInRow(firstRow);
+    if (!columnCount) return null;
+    const schemaDefaultPx = getSchemaDefaultColumnWidthPx(
+      /** @type {any} */
+      params2
+    );
+    const minimumColumnWidthPx = Number.isFinite(schemaDefaultPx) && schemaDefaultPx > 0 ? schemaDefaultPx : DEFAULT_COLUMN_WIDTH_PX;
+    let totalWidthPx;
+    if (tableWidthMeasurement) {
+      const resolved = resolveMeasurementWidthPx(tableWidthMeasurement);
+      if (resolved != null) totalWidthPx = resolved;
+    }
+    if (totalWidthPx == null && tableWidth?.width && tableWidth.width > 0) {
+      totalWidthPx = tableWidth.width;
+    }
+    if (totalWidthPx == null) {
+      totalWidthPx = minimumColumnWidthPx * columnCount;
+    }
+    const rawColumnWidthPx = Math.max(totalWidthPx / columnCount, minimumColumnWidthPx);
+    const columnWidthTwips = clampColumnWidthTwips(pixelsToTwips(rawColumnWidthPx));
+    const fallbackColumnWidthPx = twipsToPixels(columnWidthTwips);
+    return {
+      grid: createFallbackGrid(columnCount, columnWidthTwips),
+      columnWidths: Array(columnCount).fill(fallbackColumnWidthPx)
+    };
+  };
   const XML_NODE_NAME$9 = "w:tbl";
   const SD_NODE_NAME$9 = "table";
   const encode$g = (params2, encodedAttrs) => {
@@ -34924,7 +34983,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       "justification",
       "tableLayout",
       ["tableIndent", ({ value, type: type2 }) => ({ width: twipsToPixels(value), type: type2 })],
-      ["tableWidth", ({ value, type: type2 }) => ({ width: twipsToPixels(value), type: type2 })],
       ["tableCellSpacing", ({ value, type: type2 }) => ({ w: String(value), type: type2 })]
     ].forEach((prop) => {
       let key2;
@@ -34942,6 +35000,21 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     if (encodedAttrs.tableCellSpacing) {
       encodedAttrs["borderCollapse"] = "separate";
     }
+    if (encodedAttrs.tableProperties?.tableWidth) {
+      const tableWidthMeasurement = encodedAttrs.tableProperties.tableWidth;
+      const widthPx = twipsToPixels(tableWidthMeasurement.value);
+      if (widthPx != null) {
+        encodedAttrs.tableWidth = {
+          width: widthPx,
+          type: tableWidthMeasurement.type
+        };
+      } else if (tableWidthMeasurement.type === "auto") {
+        encodedAttrs.tableWidth = {
+          width: 0,
+          type: tableWidthMeasurement.type
+        };
+      }
+    }
     const { borders, rowBorders } = _processTableBorders(encodedAttrs.tableProperties?.borders || {});
     const referencedStyles = _getReferencedTableStyles(encodedAttrs.tableStyleId, params2);
     if (referencedStyles?.cellMargins && !encodedAttrs.tableProperties?.cellMargins) {
@@ -34955,7 +35028,19 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const borderRowData = Object.assign({}, referencedStyles?.rowBorders || {}, rowBorders || {});
     encodedAttrs["borders"] = borderData;
     const tblStyleTag = tblPr?.elements?.find((el) => el.name === "w:tblStyle");
-    const columnWidths = (encodedAttrs["grid"] ?? []).map((item) => twipsToPixels(item.col));
+    let columnWidths = Array.isArray(encodedAttrs["grid"]) ? encodedAttrs["grid"].map((item) => twipsToPixels(item.col)) : [];
+    if (!columnWidths.length) {
+      const fallback = buildFallbackGridForTable({
+        params: params2,
+        rows,
+        tableWidth: encodedAttrs.tableWidth,
+        tableWidthMeasurement: encodedAttrs.tableProperties?.tableWidth
+      });
+      if (fallback) {
+        encodedAttrs.grid = fallback.grid;
+        columnWidths = fallback.columnWidths;
+      }
+    }
     const content = [];
     rows.forEach((row) => {
       const result = translator$G.encode({
@@ -35817,6 +35902,9 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const node = nodes[0];
     const sdtPr = node.elements.find((el) => el.name === "w:sdtPr");
     const sdtContent = node.elements.find((el) => el.name === "w:sdtContent");
+    const id = sdtPr?.elements?.find((el) => el.name === "w:id");
+    const tag = sdtPr?.elements?.find((el) => el.name === "w:tag");
+    const alias = sdtPr?.elements?.find((el) => el.name === "w:alias");
     if (!sdtContent) {
       return null;
     }
@@ -35828,15 +35916,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       nodes: sdtContent.elements,
       path: [...params2.path || [], sdtContent]
     });
-    let sdtContentType = "structuredContent";
-    if (paragraph || table) {
-      sdtContentType = "structuredContentBlock";
-    }
+    const isBlockNode2 = paragraph || table;
+    const sdtContentType = isBlockNode2 ? "structuredContentBlock" : "structuredContent";
     let result = {
       type: sdtContentType,
       content: translatedContent,
       marks,
       attrs: {
+        id: id?.attributes?.["w:val"] || null,
+        tag: tag?.attributes?.["w:val"] || null,
+        alias: alias?.attributes?.["w:val"] || null,
         sdtPr
       }
     };
@@ -38094,21 +38183,55 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   };
   function translateStructuredContent(params2) {
     const { node } = params2;
-    const { attrs = {} } = node;
     const childContent = translateChildNodes({ ...params2, nodes: node.content });
-    const nodeElements = [
-      {
-        name: "w:sdtContent",
-        elements: childContent
-      }
-    ];
-    nodeElements.unshift(attrs.sdtPr);
+    const sdtContent = { name: "w:sdtContent", elements: childContent };
+    const sdtPr = generateSdtPrTagForStructuredContent({ node });
+    const nodeElements = [sdtPr, sdtContent];
     const result = {
       name: "w:sdt",
       elements: nodeElements
     };
     return result;
   }
+  function generateSdtPrTagForStructuredContent({ node }) {
+    const { attrs = {} } = node;
+    const id = {
+      name: "w:id",
+      type: "element",
+      attributes: { "w:val": attrs.id }
+    };
+    const alias = {
+      name: "w:alias",
+      type: "element",
+      attributes: { "w:val": attrs.alias }
+    };
+    const tag = {
+      name: "w:tag",
+      type: "element",
+      attributes: { "w:val": attrs.tag }
+    };
+    const resultElements = [];
+    if (attrs.id) resultElements.push(id);
+    if (attrs.alias) resultElements.push(alias);
+    if (attrs.tag) resultElements.push(tag);
+    if (attrs.sdtPr) {
+      const elements = attrs.sdtPr.elements || [];
+      const elementsToExclude = ["w:id", "w:alias", "w:tag"];
+      const restElements = elements.filter((el) => !elementsToExclude.includes(el.name));
+      const result2 = {
+        name: "w:sdtPr",
+        type: "element",
+        elements: [...resultElements, ...restElements]
+      };
+      return result2;
+    }
+    const result = {
+      name: "w:sdtPr",
+      type: "element",
+      elements: resultElements
+    };
+    return result;
+  }
   const XML_NODE_NAME$3 = "w:sdt";
   const SD_NODE_NAME$3 = ["fieldAnnotation", "structuredContent", "structuredContentBlock", "documentSection"];
   const validXmlAttributes$3 = [];
@@ -38336,6 +38459,63 @@ 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 ensureSectionLayoutDefaults = (sectPr, converter) => {
+    if (!sectPr) {
+      return {
+        type: "element",
+        name: "w:sectPr",
+        elements: []
+      };
+    }
+    if (!sectPr.elements) sectPr.elements = [];
+    const ensureChild = (name) => {
+      let child = sectPr.elements.find((n) => n.name === name);
+      if (!child) {
+        child = {
+          type: "element",
+          name,
+          elements: [],
+          attributes: {}
+        };
+        sectPr.elements.push(child);
+      } else {
+        if (!child.elements) child.elements = [];
+        if (!child.attributes) child.attributes = {};
+      }
+      return child;
+    };
+    const pageSize = converter?.pageStyles?.pageSize;
+    const pgSz = ensureChild("w:pgSz");
+    if (pageSize?.width != null) pgSz.attributes["w:w"] = String(inchesToTwips(pageSize.width));
+    if (pageSize?.height != null) pgSz.attributes["w:h"] = String(inchesToTwips(pageSize.height));
+    if (pgSz.attributes["w:w"] == null) pgSz.attributes["w:w"] = DEFAULT_SECTION_PROPS_TWIPS.pageSize.width;
+    if (pgSz.attributes["w:h"] == null) pgSz.attributes["w:h"] = DEFAULT_SECTION_PROPS_TWIPS.pageSize.height;
+    const pageMargins = converter?.pageStyles?.pageMargins;
+    const pgMar = ensureChild("w:pgMar");
+    if (pageMargins) {
+      Object.entries(pageMargins).forEach(([key2, value]) => {
+        const converted = inchesToTwips(value);
+        if (converted != null) pgMar.attributes[`w:${key2}`] = String(converted);
+      });
+    }
+    Object.entries(DEFAULT_SECTION_PROPS_TWIPS.pageMargins).forEach(([key2, value]) => {
+      const attrKey = `w:${key2}`;
+      if (pgMar.attributes[attrKey] == null) pgMar.attributes[attrKey] = value;
+    });
+    return sectPr;
+  };
   const isLineBreakOnlyRun = (node) => {
     if (!node) return false;
     if (node.type === "lineBreak" || node.type === "hardBreak") return true;
@@ -38388,28 +38568,30 @@ 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: [] };
+    }
+    sectPr = ensureSectionLayoutDefaults(sectPr, params2.converter);
     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 elements = translateChildNodes(params2);
     if (params2.isHeaderFooter) {
@@ -39836,8 +40018,15 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return { nodes: [], consumed: 0 };
     }
     const [pNode] = nodes;
-    const run2 = pNode.elements?.find((el) => el.name === "w:r");
-    const pict = run2?.elements?.find((el) => el.name === "w:pict");
+    const runs = pNode.elements?.filter((el) => el.name === "w:r") || [];
+    let pict = null;
+    for (const run2 of runs) {
+      const foundPict = run2.elements?.find((el) => el.name === "w:pict");
+      if (foundPict) {
+        pict = foundPict;
+        break;
+      }
+    }
     if (!pict) {
       return { nodes: [], consumed: 0 };
     }
@@ -40397,6 +40586,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 +40820,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 +41065,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 +41222,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"];
@@ -43858,14 +44127,19 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     /**
      * Update [Content_Types].xml with extensions of new Image annotations
      */
-    async updateContentTypes(docx, media, fromJson) {
+    async updateContentTypes(docx, media, fromJson, updatedDocs = {}) {
+      const additionalPartNames = Object.keys(updatedDocs || {});
       const newMediaTypes = Object.keys(media).map((name) => {
         return this.getFileExtension(name);
       }).filter(Boolean);
       const contentTypesPath = "[Content_Types].xml";
       let contentTypesXml;
       if (fromJson) {
-        contentTypesXml = docx.files.find((file) => file.name === contentTypesPath)?.content || "";
+        if (Array.isArray(docx.files)) {
+          contentTypesXml = docx.files.find((file) => file.name === contentTypesPath)?.content || "";
+        } else {
+          contentTypesXml = docx.files?.[contentTypesPath] || "";
+        }
       } else contentTypesXml = await docx.file(contentTypesPath).async("string");
       let typesString = "";
       const defaultMediaTypes = getContentTypesFromXml(contentTypesXml);
@@ -43891,24 +44165,39 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const hasCommentsExtensible = types2.elements?.some(
         (el) => el.name === "Override" && el.attributes.PartName === "/word/commentsExtensible.xml"
       );
-      if (docx.files["word/comments.xml"]) {
+      const hasFile = (filename) => {
+        if (!docx?.files) return false;
+        if (!fromJson) return Boolean(docx.files[filename]);
+        if (Array.isArray(docx.files)) return docx.files.some((file) => file.name === filename);
+        return Boolean(docx.files[filename]);
+      };
+      if (hasFile("word/comments.xml")) {
         const commentsDef = `<Override PartName="/word/comments.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml" />`;
         if (!hasComments) typesString += commentsDef;
       }
-      if (docx.files["word/commentsExtended.xml"]) {
+      if (hasFile("word/commentsExtended.xml")) {
         const commentsExtendedDef = `<Override PartName="/word/commentsExtended.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsExtended+xml" />`;
         if (!hasCommentsExtended) typesString += commentsExtendedDef;
       }
-      if (docx.files["word/commentsIds.xml"]) {
+      if (hasFile("word/commentsIds.xml")) {
         const commentsIdsDef = `<Override PartName="/word/commentsIds.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsIds+xml" />`;
         if (!hasCommentsIds) typesString += commentsIdsDef;
       }
-      if (docx.files["word/commentsExtensible.xml"]) {
+      if (hasFile("word/commentsExtensible.xml")) {
         const commentsExtendedDef = `<Override PartName="/word/commentsExtensible.xml" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.commentsExtensible+xml" />`;
         if (!hasCommentsExtensible) typesString += commentsExtendedDef;
       }
-      Object.keys(docx.files).forEach((name) => {
-        if (name.includes(".rels") || !name.includes("header") && !name.includes("footer")) return;
+      const partNames = new Set(additionalPartNames);
+      if (docx?.files) {
+        if (fromJson && Array.isArray(docx.files)) {
+          docx.files.forEach((file) => partNames.add(file.name));
+        } else {
+          Object.keys(docx.files).forEach((key2) => partNames.add(key2));
+        }
+      }
+      partNames.forEach((name) => {
+        if (name.includes(".rels")) return;
+        if (!name.includes("header") && !name.includes("footer")) return;
         const hasExtensible = types2.elements?.some(
           (el) => el.name === "Override" && el.attributes.PartName === `/${name}`
         );
@@ -43919,7 +44208,48 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         }
       });
       const beginningString = '<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">';
-      const updatedContentTypesXml = contentTypesXml.replace(beginningString, `${beginningString}${typesString}`);
+      let updatedContentTypesXml = contentTypesXml.replace(beginningString, `${beginningString}${typesString}`);
+      let relationshipsXml = updatedDocs["word/_rels/document.xml.rels"];
+      if (!relationshipsXml) {
+        if (fromJson) {
+          if (Array.isArray(docx.files)) {
+            relationshipsXml = docx.files.find((file) => file.name === "word/_rels/document.xml.rels")?.content;
+          } else {
+            relationshipsXml = docx.files?.["word/_rels/document.xml.rels"];
+          }
+        } else {
+          relationshipsXml = await docx.file("word/_rels/document.xml.rels")?.async("string");
+        }
+      }
+      if (relationshipsXml) {
+        try {
+          const relJson = xmljs.xml2js(relationshipsXml, { compact: false });
+          const relationships = relJson.elements?.find((el) => el.name === "Relationships");
+          relationships?.elements?.forEach((rel) => {
+            const type2 = rel.attributes?.Type;
+            const target = rel.attributes?.Target;
+            if (!type2 || !target) return;
+            const isHeader = type2.includes("/header");
+            const isFooter = type2.includes("/footer");
+            if (!isHeader && !isFooter) return;
+            let sanitizedTarget = target.replace(/^\.\//, "");
+            if (sanitizedTarget.startsWith("../")) sanitizedTarget = sanitizedTarget.slice(3);
+            if (sanitizedTarget.startsWith("/")) sanitizedTarget = sanitizedTarget.slice(1);
+            const partName = sanitizedTarget.startsWith("word/") ? sanitizedTarget : `word/${sanitizedTarget}`;
+            partNames.add(partName);
+          });
+        } catch (error) {
+          console.warn("Failed to parse document relationships while updating content types", error);
+        }
+      }
+      partNames.forEach((name) => {
+        if (name.includes(".rels")) return;
+        if (!name.includes("header") && !name.includes("footer")) return;
+        if (updatedContentTypesXml.includes(`PartName="/${name}"`)) return;
+        const type2 = name.includes("header") ? "header" : "footer";
+        const extendedDef = `<Override PartName="/${name}" ContentType="application/vnd.openxmlformats-officedocument.wordprocessingml.${type2}+xml"/>`;
+        updatedContentTypesXml = updatedContentTypesXml.replace("</Types>", `${extendedDef}</Types>`);
+      });
       if (fromJson) return updatedContentTypesXml;
       docx.file(contentTypesPath, updatedContentTypesXml);
     }
@@ -43960,7 +44290,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       for (const [fontName, fontUintArray] of Object.entries(fonts)) {
         zip.file(fontName, fontUintArray);
       }
-      await this.updateContentTypes(zip, media);
+      await this.updateContentTypes(zip, media, false, updatedDocs);
       return zip;
     }
     /**
@@ -43986,7 +44316,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       Object.keys(media).forEach((path) => {
         unzippedOriginalDocx.file(path, media[path]);
       });
-      await this.updateContentTypes(unzippedOriginalDocx, media);
+      await this.updateContentTypes(unzippedOriginalDocx, media, false, updatedDocs);
       return unzippedOriginalDocx;
     }
   }
@@ -44001,7 +44331,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
   var __privateSet = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
   var __privateMethod$1 = (obj, member, method) => (__accessCheck$1(obj, member, "access private method"), method);
-  var _Attribute_static, getGlobalAttributes_fn, getNodeAndMarksAttributes_fn, _Schema_static, createNodesSchema_fn, createMarksSchema_fn, _events, _ExtensionService_instances, setupExtensions_fn, attachEditorEvents_fn, _editor, _stateValidators, _xmlValidators, _requiredNodeTypes, _requiredMarkTypes, _SuperValidator_instances, initializeValidators_fn, collectValidatorRequirements_fn, analyzeDocument_fn, _commandService, _Editor_instances, initContainerElement_fn, init_fn, initRichText_fn, onFocus_fn, checkHeadless_fn, registerCopyHandler_fn, insertNewFileData_fn, registerPluginByNameIfNotExists_fn, createExtensionService_fn, createCommandService_fn, createConverter_fn, initMedia_fn, initFonts_fn, createSchema_fn, generatePmData_fn, createView_fn, onCollaborationReady_fn, initComments_fn, initPagination_fn, dispatchTransaction_fn, handleNodeSelection_fn, prepareDocumentForImport_fn, prepareDocumentForExport_fn, endCollaboration_fn, validateDocumentInit_fn, validateDocumentExport_fn, initDevTools_fn, _ListItemNodeView_instances, init_fn2, _FieldAnnotationView_instances, createAnnotation_fn, _AutoPageNumberNodeView_instances, renderDom_fn, scheduleUpdateNodeStyle_fn, _DocumentSectionView_instances, init_fn3, addToolTip_fn;
+  var _Attribute_static, getGlobalAttributes_fn, getNodeAndMarksAttributes_fn, _Schema_static, createNodesSchema_fn, createMarksSchema_fn, _events, _ExtensionService_instances, setupExtensions_fn, attachEditorEvents_fn, _editor, _stateValidators, _xmlValidators, _requiredNodeTypes, _requiredMarkTypes, _SuperValidator_instances, initializeValidators_fn, collectValidatorRequirements_fn, analyzeDocument_fn, _commandService, _Editor_instances, initContainerElement_fn, init_fn, initRichText_fn, onFocus_fn, checkHeadless_fn, registerCopyHandler_fn, insertNewFileData_fn, registerPluginByNameIfNotExists_fn, createExtensionService_fn, createCommandService_fn, createConverter_fn, initMedia_fn, initFonts_fn, createSchema_fn, generatePmData_fn, createView_fn, onCollaborationReady_fn, initComments_fn, initPagination_fn, dispatchTransaction_fn, handleNodeSelection_fn, prepareDocumentForImport_fn, prepareDocumentForExport_fn, endCollaboration_fn, validateDocumentInit_fn, validateDocumentExport_fn, initDevTools_fn, _DocumentSectionView_instances, init_fn2, addToolTip_fn, _ListItemNodeView_instances, init_fn3, _FieldAnnotationView_instances, createAnnotation_fn, _AutoPageNumberNodeView_instances, renderDom_fn, scheduleUpdateNodeStyle_fn;
   var GOOD_LEAF_SIZE = 200;
   var RopeSequence = function RopeSequence2() {
   };
@@ -55644,9 +55974,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();
@@ -56074,28 +56406,25 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     if (emitParams) editor.emit("commentsUpdate", emitParams);
     return newTrackedChanges;
   };
-  const getTrackedChangeText = ({ state: state2, node, mark, marks, trackedChangeType, isDeletionInsertion }) => {
+  const getTrackedChangeText = ({ state: state2, nodes, mark, marks, trackedChangeType, isDeletionInsertion }) => {
     let trackedChangeText = "";
     let deletionText = "";
     if (trackedChangeType === TrackInsertMarkName) {
-      trackedChangeText = node?.text ?? "";
+      trackedChangeText = nodes.reduce((acc, node) => {
+        if (!node.marks.find((nodeMark) => nodeMark.type.name === mark.type.name)) return acc;
+        acc += node?.text || node?.textContent || "";
+        return acc;
+      }, "");
     }
     if (trackedChangeType === TrackFormatMarkName) {
       trackedChangeText = translateFormatChangesToEnglish(mark.attrs);
     }
     if (trackedChangeType === TrackDeleteMarkName || isDeletionInsertion) {
-      deletionText = node?.text ?? "";
-      if (isDeletionInsertion) {
-        let { id } = marks.deletionMark.attrs;
-        let deletionNode = findNode$1(state2.doc, (node2) => {
-          const { marks: marks2 = [] } = node2;
-          const changeMarks = marks2.filter((mark2) => TRACK_CHANGE_MARKS.includes(mark2.type.name));
-          if (!changeMarks.length) return false;
-          const hasMatchingId = changeMarks.find((mark2) => mark2.attrs.id === id);
-          if (hasMatchingId) return true;
-        });
-        deletionText = deletionNode?.node.text ?? "";
-      }
+      deletionText = nodes.reduce((acc, node) => {
+        if (!node.marks.find((nodeMark) => nodeMark.type.name === TrackDeleteMarkName)) return acc;
+        acc += node?.text || node?.textContent || "";
+        return acc;
+      }, "");
     }
     return {
       deletionText,
@@ -56110,18 +56439,17 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const id = attrs.id;
     const node = nodes[0];
     const isDeletionInsertion = !!(marks.insertedMark && marks.deletionMark);
-    let existingNode;
+    let nodesWithMark = [];
     newEditorState.doc.descendants((node2) => {
       const { marks: marks2 = [] } = node2;
       const changeMarks = marks2.filter((mark) => TRACK_CHANGE_MARKS.includes(mark.type.name));
       if (!changeMarks.length) return;
       const hasMatchingId = changeMarks.find((mark) => mark.attrs.id === id);
-      if (hasMatchingId) existingNode = node2;
-      if (existingNode) return false;
+      if (hasMatchingId) nodesWithMark.push(node2);
     });
     const { deletionText, trackedChangeText } = getTrackedChangeText({
       state: newEditorState,
-      node: existingNode || node,
+      nodes: nodesWithMark.length ? nodesWithMark : [node],
       mark: trackedMark,
       marks,
       trackedChangeType,
@@ -56151,14 +56479,6 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     else if (event === "update") params2.event = comments_module_events$1.UPDATE;
     return params2;
   };
-  function findNode$1(node, predicate) {
-    let found2 = null;
-    node.descendants((node2, pos) => {
-      if (predicate(node2)) found2 = { node: node2, pos };
-      if (found2) return false;
-    });
-    return found2;
-  }
   function findRangeById(doc2, id) {
     let from2 = null, to = null;
     doc2.descendants((node, pos) => {
@@ -56676,6 +56996,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const mappedRowStart = tr.mapping.map(absoluteRowStart);
       const rowEnd = mappedRowStart + rowNode.nodeSize;
       tr.replaceWith(mappedRowStart, rowEnd, Fragment.from(newRows));
+      tr.setMeta("tableGeneration", true);
     } catch (error) {
       console.error("Error during row generation:", error);
       throw error;
@@ -57080,7 +57401,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   }
   function findRemovedFieldAnnotations(tr) {
     let removedNodes = [];
-    if (!tr.steps.length || tr.meta && !Object.keys(tr.meta).every((meta) => ["inputType", "uiEvent", "paste"].includes(meta)) || ["historyUndo", "historyRedo"].includes(tr.getMeta("inputType")) || ["drop"].includes(tr.getMeta("uiEvent")) || tr.getMeta("fieldAnnotationUpdate") === true) {
+    if (!tr.steps.length || tr.meta && !Object.keys(tr.meta).every((meta) => ["inputType", "uiEvent", "paste"].includes(meta)) || ["historyUndo", "historyRedo"].includes(tr.getMeta("inputType")) || ["drop"].includes(tr.getMeta("uiEvent")) || tr.getMeta("fieldAnnotationUpdate") === true || tr.getMeta("tableGeneration") === true) {
       return removedNodes;
     }
     const hasDeletion = transactionDeletedAnything(tr);
@@ -58258,7 +58579,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") {
@@ -58746,7 +59067,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
               files: this.options.content
             },
             media,
-            true
+            true,
+            updatedDocs
           );
           return updatedDocs;
         }
@@ -59232,9 +59554,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);
       }
@@ -60782,6 +61106,1004 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return this.editor.options.isHeadless ? [] : [slashMenuPlugin];
     }
   });
+  class StructuredContentViewBase {
+    constructor(props) {
+      __publicField$1(this, "node");
+      __publicField$1(this, "view");
+      __publicField$1(this, "getPos");
+      __publicField$1(this, "decorations");
+      __publicField$1(this, "innerDecorations");
+      __publicField$1(this, "editor");
+      __publicField$1(this, "extension");
+      __publicField$1(this, "htmlAttributes");
+      __publicField$1(this, "root");
+      __publicField$1(this, "isDragging", false);
+      this.node = props.node;
+      this.view = props.editor.view;
+      this.getPos = props.getPos;
+      this.decorations = props.decorations;
+      this.innerDecorations = props.innerDecorations;
+      this.editor = props.editor;
+      this.extension = props.extension;
+      this.htmlAttributes = props.htmlAttributes;
+      this.mount(props);
+    }
+    mount() {
+      return;
+    }
+    get dom() {
+      return this.root;
+    }
+    get contentDOM() {
+      return null;
+    }
+    update(node, decorations, innerDecorations) {
+      if (node.type !== this.node.type) {
+        return false;
+      }
+      this.node = node;
+      this.decorations = decorations;
+      this.innerDecorations = innerDecorations;
+      this.updateHTMLAttributes();
+      return true;
+    }
+    stopEvent(event) {
+      if (!this.dom) return false;
+      const target = event.target;
+      const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);
+      if (!isInElement) return false;
+      const isDragEvent = event.type.startsWith("drag");
+      const isDropEvent = event.type === "drop";
+      const isInput = ["INPUT", "BUTTON", "SELECT", "TEXTAREA"].includes(target.tagName) || target.isContentEditable;
+      if (isInput && !isDropEvent && !isDragEvent) return true;
+      const { isEditable } = this.editor;
+      const { isDragging } = this;
+      const isDraggable = !!this.node.type.spec.draggable;
+      const isSelectable = NodeSelection.isSelectable(this.node);
+      const isCopyEvent = event.type === "copy";
+      const isPasteEvent = event.type === "paste";
+      const isCutEvent = event.type === "cut";
+      const isClickEvent = event.type === "mousedown";
+      if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
+        event.preventDefault();
+      }
+      if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
+        event.preventDefault();
+        return false;
+      }
+      if (isDraggable && isEditable && !isDragging && isClickEvent) {
+        const dragHandle = target.closest("[data-drag-handle]");
+        const isValidDragHandle = dragHandle && (this.dom === dragHandle || this.dom.contains(dragHandle));
+        if (isValidDragHandle) {
+          this.isDragging = true;
+          document.addEventListener(
+            "dragend",
+            () => {
+              this.isDragging = false;
+            },
+            { once: true }
+          );
+          document.addEventListener(
+            "drop",
+            () => {
+              this.isDragging = false;
+            },
+            { once: true }
+          );
+          document.addEventListener(
+            "mouseup",
+            () => {
+              this.isDragging = false;
+            },
+            { once: true }
+          );
+        }
+      }
+      if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || isClickEvent && isSelectable) {
+        return false;
+      }
+      return true;
+    }
+    ignoreMutation(mutation) {
+      if (!this.dom || !this.contentDOM) return true;
+      if (this.node.isLeaf || this.node.isAtom) return true;
+      if (mutation.type === "selection") return false;
+      if (this.contentDOM === mutation.target && mutation.type === "attributes") return true;
+      if (this.contentDOM.contains(mutation.target)) return false;
+      return true;
+    }
+    destroy() {
+      this.dom.remove();
+      this.contentDOM?.remove();
+    }
+    updateAttributes(attrs) {
+      const pos = this.getPos();
+      if (typeof pos !== "number") {
+        return;
+      }
+      return this.view.dispatch(
+        this.view.state.tr.setNodeMarkup(pos, void 0, {
+          ...this.node.attrs,
+          ...attrs
+        })
+      );
+    }
+    updateHTMLAttributes() {
+      const { extensionService } = this.editor;
+      const { attributes } = extensionService;
+      const extensionAttrs = attributes.filter((i2) => i2.type === this.node.type.name);
+      this.htmlAttributes = Attribute.getAttributesToRender(this.node, extensionAttrs);
+    }
+    createDragHandle() {
+      const dragHandle = document.createElement("span");
+      dragHandle.classList.add("sd-structured-content-draggable");
+      dragHandle.draggable = true;
+      dragHandle.contentEditable = "false";
+      dragHandle.dataset.dragHandle = "";
+      const textElement = document.createElement("span");
+      textElement.textContent = this.node.attrs.alias || "Structured content";
+      dragHandle.append(textElement);
+      return dragHandle;
+    }
+    onDragStart(event) {
+      const { view } = this.editor;
+      const target = event.target;
+      const dragHandle = target.nodeType === 3 ? target.parentElement?.closest("[data-drag-handle]") : target.closest("[data-drag-handle]");
+      if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
+        return;
+      }
+      let x = 0;
+      let y2 = 0;
+      if (this.dom !== dragHandle) {
+        const domBox = this.dom.getBoundingClientRect();
+        const handleBox = dragHandle.getBoundingClientRect();
+        const offsetX = event.offsetX ?? event.nativeEvent?.offsetX;
+        const offsetY = event.offsetY ?? event.nativeEvent?.offsetY;
+        x = handleBox.x - domBox.x + offsetX;
+        y2 = handleBox.y - domBox.y + offsetY;
+      }
+      event.dataTransfer?.setDragImage(this.dom, x, y2);
+      const pos = this.getPos();
+      if (typeof pos !== "number") {
+        return;
+      }
+      const selection = NodeSelection.create(view.state.doc, pos);
+      const transaction = view.state.tr.setSelection(selection);
+      view.dispatch(transaction);
+    }
+  }
+  class StructuredContentInlineView extends StructuredContentViewBase {
+    constructor(props) {
+      super(props);
+    }
+    mount() {
+      this.buildView();
+    }
+    get contentDOM() {
+      const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
+      return contentElement || null;
+    }
+    createElement() {
+      const element = document.createElement("span");
+      element.classList.add(structuredContentClass$1);
+      element.setAttribute("data-structured-content", "");
+      const contentElement = document.createElement("span");
+      contentElement.classList.add(structuredContentInnerClass$1);
+      element.append(contentElement);
+      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+      updateDOMAttributes(element, { ...domAttrs });
+      return { element, contentElement };
+    }
+    buildView() {
+      const { element } = this.createElement();
+      const dragHandle = this.createDragHandle();
+      element.prepend(dragHandle);
+      element.addEventListener("dragstart", (e) => this.onDragStart(e));
+      this.root = element;
+    }
+    updateView() {
+      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+      updateDOMAttributes(this.dom, { ...domAttrs });
+    }
+    update(node, decorations, innerDecorations) {
+      const result = super.update(node, decorations, innerDecorations);
+      if (!result) return false;
+      this.updateView();
+      return true;
+    }
+  }
+  const structuredContentClass$1 = "sd-structured-content";
+  const structuredContentInnerClass$1 = "sd-structured-content__content";
+  const StructuredContent = Node$1.create({
+    name: "structuredContent",
+    group: "inline structuredContent",
+    inline: true,
+    content: "inline*",
+    isolating: true,
+    atom: false,
+    // false - has editable content.
+    draggable: true,
+    addOptions() {
+      return {
+        htmlAttributes: {
+          class: structuredContentClass$1,
+          "aria-label": "Structured content node"
+        }
+      };
+    },
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-id"),
+          renderDOM: (attrs) => {
+            if (!attrs.id) return {};
+            return { "data-id": attrs.id };
+          }
+        },
+        tag: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-tag"),
+          renderDOM: (attrs) => {
+            if (!attrs.tag) return {};
+            return { "data-tag": attrs.tag };
+          }
+        },
+        alias: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-alias"),
+          renderDOM: (attrs) => {
+            if (!attrs.alias) return {};
+            return { "data-alias": attrs.alias };
+          }
+        },
+        sdtPr: {
+          rendered: false
+        }
+      };
+    },
+    parseDOM() {
+      return [{ tag: "span[data-structured-content]" }];
+    },
+    renderDOM({ htmlAttributes }) {
+      return [
+        "span",
+        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+          "data-structured-content": ""
+        }),
+        0
+      ];
+    },
+    addNodeView() {
+      return (props) => {
+        return new StructuredContentInlineView({ ...props });
+      };
+    }
+  });
+  class StructuredContentBlockView extends StructuredContentViewBase {
+    constructor(props) {
+      super(props);
+    }
+    mount() {
+      this.buildView();
+    }
+    get contentDOM() {
+      const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
+      return contentElement || null;
+    }
+    createElement() {
+      const element = document.createElement("div");
+      element.classList.add(structuredContentClass);
+      element.setAttribute("data-structured-content-block", "");
+      const contentElement = document.createElement("div");
+      contentElement.classList.add(structuredContentInnerClass);
+      element.append(contentElement);
+      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+      updateDOMAttributes(element, { ...domAttrs });
+      return { element, contentElement };
+    }
+    buildView() {
+      const { element } = this.createElement();
+      const dragHandle = this.createDragHandle();
+      element.prepend(dragHandle);
+      element.addEventListener("dragstart", (e) => this.onDragStart(e));
+      this.root = element;
+    }
+    updateView() {
+      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+      updateDOMAttributes(this.dom, { ...domAttrs });
+    }
+    update(node, decorations, innerDecorations) {
+      const result = super.update(node, decorations, innerDecorations);
+      if (!result) return false;
+      this.updateView();
+      return true;
+    }
+  }
+  const structuredContentClass = "sd-structured-content-block";
+  const structuredContentInnerClass = "sd-structured-content-block__content";
+  const StructuredContentBlock = Node$1.create({
+    name: "structuredContentBlock",
+    group: "block structuredContent",
+    content: "block*",
+    isolating: true,
+    atom: false,
+    // false - has editable content.
+    draggable: true,
+    addOptions() {
+      return {
+        htmlAttributes: {
+          class: structuredContentClass,
+          "aria-label": "Structured content block node"
+        }
+      };
+    },
+    addAttributes() {
+      return {
+        id: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-id"),
+          renderDOM: (attrs) => {
+            if (!attrs.id) return {};
+            return { "data-id": attrs.id };
+          }
+        },
+        tag: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-tag"),
+          renderDOM: (attrs) => {
+            if (!attrs.tag) return {};
+            return { "data-tag": attrs.tag };
+          }
+        },
+        alias: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-alias"),
+          renderDOM: (attrs) => {
+            if (!attrs.alias) return {};
+            return { "data-alias": attrs.alias };
+          }
+        },
+        sdtPr: {
+          rendered: false
+        }
+      };
+    },
+    parseDOM() {
+      return [{ tag: "div[data-structured-content-block]" }];
+    },
+    renderDOM({ htmlAttributes }) {
+      return [
+        "div",
+        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+          "data-structured-content-block": ""
+        }),
+        0
+      ];
+    },
+    addNodeView() {
+      return (props) => {
+        return new StructuredContentBlockView({ ...props });
+      };
+    }
+  });
+  function getStructuredContentTagsById(idOrIds, state2) {
+    const result = findChildren$5(state2.doc, (node) => {
+      const isStructuredContent = ["structuredContent", "structuredContentBlock"].includes(node.type.name);
+      if (Array.isArray(idOrIds)) {
+        return isStructuredContent && idOrIds.includes(node.attrs.id);
+      } else {
+        return isStructuredContent && node.attrs.id === idOrIds;
+      }
+    });
+    return result;
+  }
+  function getStructuredContentTags(state2) {
+    const result = findChildren$5(state2.doc, (node) => {
+      return node.type.name === "structuredContent" || node.type.name === "structuredContentBlock";
+    });
+    return result;
+  }
+  function getStructuredContentInlineTags(state2) {
+    const result = findChildren$5(state2.doc, (node) => node.type.name === "structuredContent");
+    return result;
+  }
+  function getStructuredContentBlockTags(state2) {
+    const result = findChildren$5(state2.doc, (node) => node.type.name === "structuredContentBlock");
+    return result;
+  }
+  const structuredContentHelpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+    __proto__: null,
+    getStructuredContentBlockTags,
+    getStructuredContentInlineTags,
+    getStructuredContentTags,
+    getStructuredContentTagsById
+  }, Symbol.toStringTag, { value: "Module" }));
+  const STRUCTURED_CONTENT_NAMES = ["structuredContent", "structuredContentBlock"];
+  const StructuredContentCommands = Extension.create({
+    name: "structuredContentCommands",
+    addCommands() {
+      return {
+        /**
+         * Inserts a structured content inline at selection.
+         * @category Command
+         * @param {StructuredContentInlineInsert} options
+         */
+        insertStructuredContentInline: (options = {}) => ({ editor, dispatch, state: state2, tr }) => {
+          const { schema } = editor;
+          let { from: from2, to } = state2.selection;
+          if (dispatch) {
+            const selectionText = state2.doc.textBetween(from2, to);
+            let content = null;
+            if (selectionText) {
+              content = schema.text(selectionText);
+            }
+            if (options.text) {
+              content = schema.text(options.text);
+            }
+            if (options.json) {
+              content = schema.nodeFromJSON(options.json);
+            }
+            if (!content) {
+              content = schema.text(" ");
+            }
+            const attrs = {
+              ...options.attrs,
+              id: options.attrs?.id || randomId(),
+              tag: "inline_text_sdt",
+              alias: options.attrs?.alias || "Structured content"
+            };
+            const node = schema.nodes.structuredContent.create(attrs, content, null);
+            const parent = findParentNode((node2) => node2.type.name === "structuredContent")(state2.selection);
+            if (parent) {
+              const insertPos = parent.pos + parent.node.nodeSize;
+              from2 = to = insertPos;
+            }
+            tr.replaceWith(from2, to, node);
+          }
+          return true;
+        },
+        /**
+         * Inserts a structured content block at selection.
+         * @category Command
+         * @param {StructuredContentBlockInsert} options
+         */
+        insertStructuredContentBlock: (options = {}) => ({ editor, dispatch, state: state2, tr }) => {
+          const { schema } = editor;
+          let { from: from2, to } = state2.selection;
+          if (dispatch) {
+            const selectionContent = state2.selection.content();
+            let content = null;
+            if (selectionContent.size) {
+              content = selectionContent.content;
+            }
+            if (options.html) {
+              const html = htmlHandler(options.html, editor);
+              const doc2 = DOMParser$1.fromSchema(schema).parse(html);
+              content = doc2.content;
+            }
+            if (options.json) {
+              content = schema.nodeFromJSON(options.json);
+            }
+            if (!content) {
+              content = schema.nodeFromJSON({ type: "paragraph", content: [] });
+            }
+            const attrs = {
+              ...options.attrs,
+              id: options.attrs?.id || randomId(),
+              tag: "block_table_sdt",
+              alias: options.attrs?.alias || "Structured content"
+            };
+            const node = schema.nodes.structuredContentBlock.create(attrs, content, null);
+            const parent = findParentNode((node2) => node2.type.name === "structuredContentBlock")(state2.selection);
+            if (parent) {
+              const insertPos = parent.pos + parent.node.nodeSize;
+              from2 = to = insertPos;
+            }
+            tr.replaceRangeWith(from2, to, node);
+          }
+          return true;
+        },
+        /**
+         * Updates a structured content attributes or content.
+         * If the updated node does not match the schema, it will not be updated.
+         * @category Command
+         * @param {string} id
+         * @param {StructuredContentUpdate} options
+         */
+        updateStructuredContentById: (id, options = {}) => ({ editor, dispatch, state: state2, tr }) => {
+          const structuredContentTags = getStructuredContentTagsById(id, state2);
+          if (!structuredContentTags.length) {
+            return true;
+          }
+          const { schema } = editor;
+          if (dispatch) {
+            const structuredContent = structuredContentTags[0];
+            const { pos, node } = structuredContent;
+            const posFrom = pos;
+            const posTo = pos + node.nodeSize;
+            let content = null;
+            if (options.text) {
+              content = schema.text(options.text);
+            }
+            if (options.html) {
+              const html = htmlHandler(options.html, editor);
+              const doc2 = DOMParser$1.fromSchema(schema).parse(html);
+              content = doc2.content;
+            }
+            if (options.json) {
+              content = schema.nodeFromJSON(options.json);
+            }
+            if (!content) {
+              content = node.content;
+            }
+            const updatedNode = node.type.create({ ...node.attrs, ...options.attrs }, content, node.marks);
+            try {
+              updatedNode.check();
+            } catch {
+              console.error("Updated node does not conform to the schema");
+              return false;
+            }
+            tr.replaceWith(posFrom, posTo, updatedNode);
+          }
+          return true;
+        },
+        /**
+         * Removes a structured content.
+         * @category Command
+         * @param {Array<{ node: Node, pos: number }>} structuredContentTags
+         */
+        deleteStructuredContent: (structuredContentTags) => ({ dispatch, tr }) => {
+          if (!structuredContentTags.length) {
+            return true;
+          }
+          if (dispatch) {
+            structuredContentTags.forEach((structuredContent) => {
+              const { pos, node } = structuredContent;
+              const posFrom = tr.mapping.map(pos);
+              const posTo = tr.mapping.map(pos + node.nodeSize);
+              const currentNode = tr.doc.nodeAt(posFrom);
+              if (currentNode && node.eq(currentNode)) {
+                tr.delete(posFrom, posTo);
+              }
+            });
+          }
+          return true;
+        },
+        /**
+         * Removes a structured content by ID.
+         * @category Command
+         * @param {string | string[]} idOrIds
+         */
+        deleteStructuredContentById: (idOrIds) => ({ dispatch, state: state2, tr }) => {
+          const structuredContentTags = getStructuredContentTagsById(idOrIds, state2);
+          if (!structuredContentTags.length) {
+            return true;
+          }
+          if (dispatch) {
+            structuredContentTags.forEach((structuredContent) => {
+              const { pos, node } = structuredContent;
+              const posFrom = tr.mapping.map(pos);
+              const posTo = tr.mapping.map(pos + node.nodeSize);
+              const currentNode = tr.doc.nodeAt(posFrom);
+              if (currentNode && node.eq(currentNode)) {
+                tr.delete(posFrom, posTo);
+              }
+            });
+          }
+          return true;
+        },
+        /**
+         * Removes a structured content at cursor, preserving its content.
+         * @category Command
+         */
+        deleteStructuredContentAtSelection: () => ({ editor, dispatch, state: state2, tr }) => {
+          const predicate = (node) => STRUCTURED_CONTENT_NAMES.includes(node.type.name);
+          const structuredContent = findParentNode(predicate)(state2.selection);
+          if (!structuredContent) {
+            return true;
+          }
+          if (dispatch) {
+            const { node, pos } = structuredContent;
+            const posFrom = pos;
+            const posTo = posFrom + node.nodeSize;
+            const content = node.content;
+            tr.replaceWith(posFrom, posTo, content);
+          }
+          return true;
+        }
+      };
+    },
+    addHelpers() {
+      return {
+        ...structuredContentHelpers
+      };
+    }
+  });
+  const randomId = () => {
+    return Math.floor(Math.random() * 4294967295).toString();
+  };
+  class DocumentSectionView {
+    constructor(node, getPos, decorations, editor) {
+      __privateAdd$1(this, _DocumentSectionView_instances);
+      this.node = node;
+      this.editor = editor;
+      this.decorations = decorations;
+      this.view = editor.view;
+      this.getPos = getPos;
+      __privateMethod$1(this, _DocumentSectionView_instances, init_fn2).call(this);
+    }
+  }
+  _DocumentSectionView_instances = /* @__PURE__ */ new WeakSet();
+  init_fn2 = function() {
+    const { attrs } = this.node;
+    const { id, title, description } = attrs;
+    this.dom = document.createElement("div");
+    this.dom.className = "sd-document-section-block";
+    this.dom.setAttribute("data-id", id);
+    this.dom.setAttribute("data-title", title);
+    this.dom.setAttribute("data-description", description);
+    this.dom.setAttribute("aria-label", "Document section");
+    __privateMethod$1(this, _DocumentSectionView_instances, addToolTip_fn).call(this);
+    this.contentDOM = document.createElement("div");
+    this.contentDOM.className = "sd-document-section-block-content";
+    this.contentDOM.setAttribute("contenteditable", "true");
+    this.dom.appendChild(this.contentDOM);
+  };
+  addToolTip_fn = function() {
+    const { title } = this.node.attrs;
+    this.infoDiv = document.createElement("div");
+    this.infoDiv.className = "sd-document-section-block-info";
+    const textSpan = document.createElement("span");
+    textSpan.textContent = title || "Document section";
+    this.infoDiv.appendChild(textSpan);
+    this.infoDiv.setAttribute("contenteditable", "false");
+    this.dom.appendChild(this.infoDiv);
+  };
+  const getAllSections = (editor) => {
+    if (!editor) return [];
+    const type2 = editor.schema.nodes.documentSection;
+    if (!type2) return [];
+    const sections = [];
+    const { state: state2 } = editor;
+    state2.doc.descendants((node, pos) => {
+      if (node.type.name === type2.name) {
+        sections.push({ node, pos });
+      }
+    });
+    return sections;
+  };
+  const exportSectionsToHTML = (editor) => {
+    const sections = getAllSections(editor);
+    const processedSections = /* @__PURE__ */ new Set();
+    const result = [];
+    sections.forEach(({ node }) => {
+      const { attrs } = node;
+      const { id, title, description } = attrs;
+      if (processedSections.has(id)) return;
+      processedSections.add(id);
+      const html = getHTMLFromNode(node, editor);
+      result.push({
+        id,
+        title,
+        description,
+        html
+      });
+    });
+    return result;
+  };
+  const getHTMLFromNode = (node, editor) => {
+    const tempDocument = document.implementation.createHTMLDocument();
+    const container = tempDocument.createElement("div");
+    const fragment = DOMSerializer.fromSchema(editor.schema).serializeFragment(node.content);
+    container.appendChild(fragment);
+    let html = container.innerHTML;
+    return html;
+  };
+  const exportSectionsToJSON = (editor) => {
+    const sections = getAllSections(editor);
+    const processedSections = /* @__PURE__ */ new Set();
+    const result = [];
+    sections.forEach(({ node }) => {
+      const { attrs } = node;
+      const { id, title, description } = attrs;
+      if (processedSections.has(id)) return;
+      processedSections.add(id);
+      result.push({
+        id,
+        title,
+        description,
+        content: node.toJSON()
+      });
+    });
+    return result;
+  };
+  const getLinkedSectionEditor = (id, options, editor) => {
+    const sections = getAllSections(editor);
+    const section = sections.find((s) => s.node.attrs.id === id);
+    if (!section) return null;
+    const child = editor.createChildEditor({
+      ...options,
+      onUpdate: ({ editor: childEditor, transaction }) => {
+        const isFromtLinkedParent = transaction.getMeta("fromLinkedParent");
+        if (isFromtLinkedParent) return;
+        const updatedContent = childEditor.state.doc.content;
+        const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
+        if (!sectionNode) return;
+        const { pos, node } = sectionNode;
+        const newNode = node.type.create(node.attrs, updatedContent, node.marks);
+        const tr = editor.state.tr.replaceWith(pos, pos + node.nodeSize, newNode);
+        tr.setMeta("fromLinkedChild", true);
+        editor.view.dispatch(tr);
+      }
+    });
+    editor.on("update", ({ transaction }) => {
+      const isFromLinkedChild = transaction.getMeta("fromLinkedChild");
+      if (isFromLinkedChild) return;
+      const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
+      if (!sectionNode) return;
+      const sectionContent = sectionNode.node.content;
+      const json = {
+        type: "doc",
+        content: sectionContent.content.map((node) => node.toJSON())
+      };
+      const childTr = child.state.tr;
+      childTr.setMeta("fromLinkedParent", true);
+      childTr.replaceWith(0, child.state.doc.content.size, child.schema.nodeFromJSON(json));
+      child.view.dispatch(childTr);
+    });
+    return child;
+  };
+  const SectionHelpers = {
+    getAllSections,
+    exportSectionsToHTML,
+    exportSectionsToJSON,
+    getLinkedSectionEditor
+  };
+  const DocumentSection = Node$1.create({
+    name: "documentSection",
+    group: "block",
+    content: "block*",
+    atom: true,
+    isolating: true,
+    addOptions() {
+      return {
+        htmlAttributes: {
+          class: "sd-document-section-block",
+          "aria-label": "Structured content block"
+        }
+      };
+    },
+    parseDOM() {
+      return [
+        {
+          tag: "div.sd-document-section-block",
+          priority: 60
+        }
+      ];
+    },
+    renderDOM({ htmlAttributes }) {
+      return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+    },
+    addAttributes() {
+      return {
+        id: {},
+        sdBlockId: {
+          default: null,
+          keepOnSplit: false,
+          parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+          renderDOM: (attrs) => {
+            return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+          }
+        },
+        title: {},
+        description: {},
+        sectionType: {},
+        isLocked: { default: false }
+      };
+    },
+    addNodeView() {
+      return ({ node, editor, getPos, decorations }) => {
+        return new DocumentSectionView(node, getPos, decorations, editor);
+      };
+    },
+    addCommands() {
+      return {
+        /**
+         * Create a lockable content section
+         * @category Command
+         * @param {SectionCreate} [options={}] - Section configuration
+         * @example
+         * editor.commands.createDocumentSection({
+         *   id: 1,
+         *   title: 'Terms & Conditions',
+         *   isLocked: true,
+         *   html: '<p>Legal content...</p>'
+         * })
+         */
+        createDocumentSection: (options = {}) => ({ tr, state: state2, dispatch, editor }) => {
+          const { selection } = state2;
+          let { from: from2, to } = selection;
+          let content = selection.content().content;
+          const { html: optionsHTML, json: optionsJSON } = options;
+          if (optionsHTML) {
+            const html = htmlHandler(optionsHTML, this.editor);
+            const doc2 = DOMParser$1.fromSchema(this.editor.schema).parse(html);
+            content = doc2.content;
+          }
+          if (optionsJSON) {
+            content = this.editor.schema.nodeFromJSON(optionsJSON);
+          }
+          if (!content?.content?.length) {
+            content = this.editor.schema.nodeFromJSON({ type: "paragraph", content: [] });
+          }
+          if (!options.id) {
+            const allSections = SectionHelpers.getAllSections(editor);
+            options.id = allSections.length + 1;
+          }
+          if (!options.title) {
+            options.title = "Document section";
+          }
+          const node = this.type.createAndFill(options, content);
+          if (!node) return false;
+          const isAlreadyInSdtBlock = findParentNode((node2) => node2.type.name === "documentSection")(selection);
+          if (isAlreadyInSdtBlock && isAlreadyInSdtBlock.node) {
+            const insertPos2 = isAlreadyInSdtBlock.pos + isAlreadyInSdtBlock.node.nodeSize;
+            from2 = insertPos2;
+            to = insertPos2;
+          }
+          tr.replaceRangeWith(from2, to, node);
+          const nodeEnd = from2 + node.nodeSize;
+          let shouldInsertParagraph = true;
+          let insertPos = nodeEnd;
+          if (nodeEnd >= tr.doc.content.size) {
+            insertPos = tr.doc.content.size;
+            if (insertPos > 0) {
+              const $endPos = tr.doc.resolve(insertPos);
+              if ($endPos.nodeBefore && $endPos.nodeBefore.type.name === "paragraph") {
+                shouldInsertParagraph = false;
+              }
+            }
+          }
+          if (shouldInsertParagraph) {
+            const emptyParagraph = tr.doc.type.schema.nodes.paragraph.create();
+            tr.insert(insertPos, emptyParagraph);
+          }
+          if (dispatch) {
+            tr.setMeta("documentSection", { action: "create" });
+            dispatch(tr);
+            setTimeout(() => {
+              try {
+                const currentState = editor.state;
+                const docSize = currentState.doc.content.size;
+                let targetPos = from2 + node.nodeSize;
+                if (shouldInsertParagraph) {
+                  targetPos += 1;
+                }
+                targetPos = Math.min(targetPos, docSize);
+                if (targetPos < docSize && targetPos > 0) {
+                  const newSelection = Selection.near(currentState.doc.resolve(targetPos));
+                  const newTr = currentState.tr.setSelection(newSelection);
+                  editor.view.dispatch(newTr);
+                }
+              } catch (e) {
+                console.warn("Could not set delayed selection:", e);
+              }
+            }, 0);
+          }
+          return true;
+        },
+        /**
+         * Remove section wrapper at cursor, preserving its content
+         * @category Command
+         * @example
+         * editor.commands.removeSectionAtSelection()
+         * @note Content stays in document, only section wrapper is removed
+         */
+        removeSectionAtSelection: () => ({ tr, dispatch }) => {
+          const sdtNode = findParentNode((node2) => node2.type.name === "documentSection")(tr.selection);
+          if (!sdtNode) return false;
+          const { node, pos } = sdtNode;
+          const nodeStart = pos;
+          const nodeEnd = nodeStart + node.nodeSize;
+          const contentToPreserve = node.content;
+          tr.delete(nodeStart, nodeEnd);
+          if (contentToPreserve.size > 0) {
+            tr.insert(nodeStart, contentToPreserve);
+          }
+          const newPos = Math.min(nodeStart, tr.doc.content.size);
+          tr.setSelection(Selection.near(tr.doc.resolve(newPos)));
+          if (dispatch) {
+            tr.setMeta("documentSection", { action: "delete" });
+            dispatch(tr);
+          }
+          return true;
+        },
+        /**
+         * Delete section and all its content
+         * @category Command
+         * @param {number} id - Section to delete
+         * @example
+         * editor.commands.removeSectionById(123)
+         */
+        removeSectionById: (id) => ({ tr, dispatch }) => {
+          const sections = SectionHelpers.getAllSections(this.editor);
+          const sectionToRemove = sections.find(({ node: node2 }) => node2.attrs.id === id);
+          if (!sectionToRemove) return false;
+          const { pos, node } = sectionToRemove;
+          const nodeStart = pos;
+          const nodeEnd = nodeStart + node.nodeSize;
+          tr.delete(nodeStart, nodeEnd);
+          if (dispatch) {
+            tr.setMeta("documentSection", { action: "delete", id });
+            dispatch(tr);
+          }
+          return true;
+        },
+        /**
+         * Lock section against edits
+         * @category Command
+         * @param {number} id - Section to lock
+         * @example
+         * editor.commands.lockSectionById(123)
+         */
+        lockSectionById: (id) => ({ tr, dispatch }) => {
+          const sections = SectionHelpers.getAllSections(this.editor);
+          const sectionToLock = sections.find(({ node }) => node.attrs.id === id);
+          if (!sectionToLock) return false;
+          tr.setNodeMarkup(sectionToLock.pos, null, { ...sectionToLock.node.attrs, isLocked: true });
+          if (dispatch) {
+            tr.setMeta("documentSection", { action: "lock", id });
+            dispatch(tr);
+          }
+          return true;
+        },
+        /**
+         * Modify section attributes or content
+         * @category Command
+         * @param {SectionUpdate} options - Changes to apply
+         * @example
+         * editor.commands.updateSectionById({ id: 123, attrs: { isLocked: false } })
+         * editor.commands.updateSectionById({ id: 123, html: '<p>New content</p>' })
+         * editor.commands.updateSectionById({
+         *   id: 123,
+         *   html: '<p>Updated</p>',
+         *   attrs: { title: 'New Title' }
+         * })
+         */
+        updateSectionById: ({ id, html, json, attrs }) => ({ tr, dispatch, editor }) => {
+          const sections = SectionHelpers.getAllSections(editor || this.editor);
+          const sectionToUpdate = sections.find(({ node: node2 }) => node2.attrs.id === id);
+          if (!sectionToUpdate) return false;
+          const { pos, node } = sectionToUpdate;
+          let newContent = null;
+          if (html) {
+            const htmlDoc = htmlHandler(html, editor || this.editor);
+            const doc2 = DOMParser$1.fromSchema((editor || this.editor).schema).parse(htmlDoc);
+            newContent = doc2.content;
+          }
+          if (json) {
+            newContent = (editor || this.editor).schema.nodeFromJSON(json);
+          }
+          if (!newContent) {
+            newContent = node.content;
+          }
+          const updatedNode = node.type.create({ ...node.attrs, ...attrs }, newContent, node.marks);
+          tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
+          if (dispatch) {
+            tr.setMeta("documentSection", { action: "update", id, attrs });
+            dispatch(tr);
+          }
+          return true;
+        }
+      };
+    },
+    addHelpers() {
+      return {
+        ...SectionHelpers
+      };
+    }
+  });
   const Document = Node$1.create({
     name: "doc",
     topNode: true,
@@ -61289,15 +62611,31 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     return result;
   };
-  const CustomSelectionPluginKey = new PluginKey("CustomSelection");
-  const shouldAllowNativeContextMenu = (event) => {
+  const isKeyboardInvocation = (event) => {
+    return event.type === "contextmenu" && typeof event.detail === "number" && event.detail === 0 && (event.button === 0 || event.button === void 0) && event.clientX === 0 && event.clientY === 0;
+  };
+  const prefersNativeMenu = (event) => {
     if (!event) return false;
     if (event.ctrlKey || event.metaKey) {
       return true;
     }
-    const isKeyboardInvocation = event.type === "contextmenu" && typeof event.detail === "number" && event.detail === 0 && (event.button === 0 || event.button === void 0) && event.clientX === 0 && event.clientY === 0;
-    return Boolean(isKeyboardInvocation);
+    return isKeyboardInvocation(event);
   };
+  const shouldAllowNativeContextMenu = (event) => {
+    return prefersNativeMenu(event);
+  };
+  const shouldBypassContextMenu = shouldAllowNativeContextMenu;
+  const DEFAULT_SELECTION_STATE = Object.freeze({
+    focused: false,
+    preservedSelection: null,
+    showVisualSelection: false,
+    skipFocusReset: false
+  });
+  const normalizeSelectionState = (state2 = {}) => ({
+    ...DEFAULT_SELECTION_STATE,
+    ...state2
+  });
+  const CustomSelectionPluginKey = new PluginKey("CustomSelection");
   const handleClickOutside = (event, editor) => {
     const editorElem = editor?.options?.element;
     if (!editorElem) return;
@@ -61334,11 +62672,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       const customSelectionPlugin = new Plugin({
         key: CustomSelectionPluginKey,
         state: {
-          init: () => ({
-            focused: false,
-            preservedSelection: null,
-            showVisualSelection: false
-          }),
+          init: () => ({ ...DEFAULT_SELECTION_STATE }),
           apply: (tr, value) => {
             const meta = getFocusMeta(tr);
             if (meta !== void 0) {
@@ -61369,7 +62703,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
                   setFocusMeta(view.state.tr, {
                     focused: true,
                     preservedSelection: selection,
-                    showVisualSelection: true
+                    showVisualSelection: true,
+                    skipFocusReset: true
                   })
                 );
               }
@@ -61390,7 +62725,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
                     setFocusMeta(view.state.tr, {
                       focused: true,
                       preservedSelection: selection2,
-                      showVisualSelection: true
+                      showVisualSelection: true,
+                      skipFocusReset: true
                     })
                   );
                   this.editor.setOptions({
@@ -61413,7 +62749,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
                   setFocusMeta(view.state.tr, {
                     focused: true,
                     preservedSelection: selection,
-                    showVisualSelection: true
+                    showVisualSelection: true,
+                    skipFocusReset: false
                   })
                 );
                 this.editor.setOptions({
@@ -61431,7 +62768,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
                     setFocusMeta(view.state.tr, {
                       focused: true,
                       preservedSelection: selection,
-                      showVisualSelection: true
+                      showVisualSelection: true,
+                      skipFocusReset: false
                     })
                   );
                 }
@@ -61442,7 +62780,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
                   setFocusMeta(view.state.tr, {
                     focused: false,
                     preservedSelection: null,
-                    showVisualSelection: false
+                    showVisualSelection: false,
+                    skipFocusReset: false
                   })
                 );
                 if (!selection.empty && !this.editor.options.element?.contains(target)) {
@@ -61459,12 +62798,20 @@ Please report this to https://github.com/markedjs/marked.`, e) {
               const isElement2 = target instanceof Element;
               const isToolbarBtn = isElement2 && isToolbarButton(target);
               const isToolbarInp = isElement2 && isToolbarInput(target);
+              const focusState = getFocusState(view.state);
+              if (focusState?.skipFocusReset) {
+                view.dispatch(
+                  setFocusMeta(view.state.tr, normalizeSelectionState({ ...focusState, skipFocusReset: false }))
+                );
+                return false;
+              }
               if (!isToolbarBtn && !isToolbarInp) {
                 view.dispatch(
                   setFocusMeta(view.state.tr, {
                     focused: false,
                     preservedSelection: null,
-                    showVisualSelection: false
+                    showVisualSelection: false,
+                    skipFocusReset: false
                   })
                 );
               }
@@ -61475,12 +62822,16 @@ Please report this to https://github.com/markedjs/marked.`, e) {
               const isToolbarBtn = isElement2 && isToolbarButton(target);
               const isToolbarInp = isElement2 && isToolbarInput(target);
               const state2 = getFocusState(view.state);
+              if (state2?.skipFocusReset) {
+                return false;
+              }
               if (isToolbarBtn || isToolbarInp) {
                 view.dispatch(
                   setFocusMeta(view.state.tr, {
                     focused: true,
                     preservedSelection: state2.preservedSelection || view.state.selection,
-                    showVisualSelection: true
+                    showVisualSelection: true,
+                    skipFocusReset: false
                   })
                 );
               } else {
@@ -61488,7 +62839,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
                   setFocusMeta(view.state.tr, {
                     focused: false,
                     preservedSelection: null,
-                    showVisualSelection: false
+                    showVisualSelection: false,
+                    skipFocusReset: false
                   })
                 );
               }
@@ -62334,7 +63686,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       this.decorations = decorations;
       this.view = editor.view;
       this.getPos = getPos;
-      __privateMethod$1(this, _ListItemNodeView_instances, init_fn2).call(this);
+      __privateMethod$1(this, _ListItemNodeView_instances, init_fn3).call(this);
       activeListItemNodeViews.add(this);
     }
     refreshIndentStyling() {
@@ -62395,7 +63747,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
   }
   _ListItemNodeView_instances = /* @__PURE__ */ new WeakSet();
-  init_fn2 = function() {
+  init_fn3 = function() {
     const { attrs } = this.node;
     const { listLevel, listNumberingType, lvlText, numId, level, customFormat } = attrs;
     let orderMarker = "";
@@ -69794,908 +71146,178 @@ Please report this to https://github.com/markedjs/marked.`, e) {
               style: attrs.style
             };
           }
-        },
-        wrapAttributes: {
-          rendered: false
-        },
-        attributes: {
-          rendered: false
-        }
-      };
-    },
-    parseDOM() {
-      return [
-        {
-          tag: `div[data-type="${this.name}"]`
-        }
-      ];
-    },
-    renderDOM({ htmlAttributes }) {
-      return [
-        "div",
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
-        0
-      ];
-    }
-  });
-  const ShapeTextbox = Node$1.create({
-    name: "shapeTextbox",
-    group: "block",
-    content: "paragraph* block*",
-    isolating: true,
-    addOptions() {
-      return {
-        htmlAttributes: {
-          class: "sd-editor-shape-textbox",
-          "aria-label": "Shape textbox node"
-        }
-      };
-    },
-    addAttributes() {
-      return {
-        sdBlockId: {
-          default: null,
-          keepOnSplit: false,
-          parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
-          renderDOM: (attrs) => {
-            return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
-          }
-        },
-        attributes: {
-          rendered: false
-        }
-      };
-    },
-    parseDOM() {
-      return [
-        {
-          tag: `div[data-type="${this.name}"]`
-        }
-      ];
-    },
-    renderDOM({ htmlAttributes }) {
-      return [
-        "div",
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
-        0
-      ];
-    }
-  });
-  const ContentBlock = Node$1.create({
-    name: "contentBlock",
-    group: "inline",
-    content: "",
-    isolating: true,
-    atom: true,
-    inline: true,
-    addOptions() {
-      return {
-        htmlAttributes: {
-          contenteditable: false
-        }
-      };
-    },
-    addAttributes() {
-      return {
-        horizontalRule: {
-          default: false,
-          renderDOM: ({ horizontalRule }) => {
-            if (!horizontalRule) return {};
-            return { "data-horizontal-rule": "true" };
-          }
-        },
-        size: {
-          default: null,
-          renderDOM: ({ size: size2 }) => {
-            if (!size2) return {};
-            let style2 = "";
-            if (size2.top) style2 += `top: ${size2.top}px; `;
-            if (size2.left) style2 += `left: ${size2.left}px; `;
-            if (size2.width) style2 += `width: ${size2.width.toString().endsWith("%") ? size2.width : `${size2.width}px`}; `;
-            if (size2.height)
-              style2 += `height: ${size2.height.toString().endsWith("%") ? size2.height : `${size2.height}px`}; `;
-            return { style: style2 };
-          }
-        },
-        background: {
-          default: null,
-          renderDOM: (attrs) => {
-            if (!attrs.background) return {};
-            return {
-              style: `background-color: ${attrs.background}`
-            };
-          }
-        },
-        drawingContent: {
-          rendered: false
-        },
-        attributes: {
-          rendered: false
-        }
-      };
-    },
-    parseDOM() {
-      return [
-        {
-          tag: `div[data-type="${this.name}"]`
-        }
-      ];
-    },
-    renderDOM({ htmlAttributes }) {
-      return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
-    },
-    addCommands() {
-      return {
-        /**
-         * Insert a horizontal rule
-         * @category Command
-         * @example
-         * editor.commands.insertHorizontalRule()
-         * @note Creates a visual separator between content sections
-         */
-        insertHorizontalRule: () => ({ commands: commands2 }) => {
-          return commands2.insertContent({
-            type: this.name,
-            attrs: {
-              horizontalRule: true,
-              size: { width: "100%", height: 2 },
-              background: "#e5e7eb"
-            }
-          });
-        },
-        /**
-         * Insert a content block
-         * @category Command
-         * @param {ContentBlockConfig} config - Block configuration
-         * @example
-         * // Insert a spacer block
-         * editor.commands.insertContentBlock({ size: { height: 20 } })
-         *
-         * @example
-         * // Insert a colored divider
-         * editor.commands.insertContentBlock({
-         *   size: { width: '50%', height: 3 },
-         *   background: '#3b82f6'
-         * })
-         * @note Used for spacing, dividers, and special inline content
-         */
-        insertContentBlock: (config2) => ({ commands: commands2 }) => {
-          return commands2.insertContent({
-            type: this.name,
-            attrs: config2
-          });
-        }
-      };
-    }
-  });
-  class StructuredContentViewBase {
-    constructor(props) {
-      __publicField$1(this, "node");
-      __publicField$1(this, "view");
-      __publicField$1(this, "getPos");
-      __publicField$1(this, "decorations");
-      __publicField$1(this, "innerDecorations");
-      __publicField$1(this, "editor");
-      __publicField$1(this, "extension");
-      __publicField$1(this, "htmlAttributes");
-      __publicField$1(this, "root");
-      __publicField$1(this, "isDragging", false);
-      this.node = props.node;
-      this.view = props.editor.view;
-      this.getPos = props.getPos;
-      this.decorations = props.decorations;
-      this.innerDecorations = props.innerDecorations;
-      this.editor = props.editor;
-      this.extension = props.extension;
-      this.htmlAttributes = props.htmlAttributes;
-      this.mount(props);
-    }
-    mount() {
-      return;
-    }
-    get dom() {
-      return this.root;
-    }
-    get contentDOM() {
-      return null;
-    }
-    update(node, decorations, innerDecorations) {
-      if (node.type !== this.node.type) {
-        return false;
-      }
-      this.node = node;
-      this.decorations = decorations;
-      this.innerDecorations = innerDecorations;
-      this.updateHTMLAttributes();
-      return true;
-    }
-    stopEvent(event) {
-      if (!this.dom) return false;
-      const target = event.target;
-      const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target);
-      if (!isInElement) return false;
-      const isDragEvent = event.type.startsWith("drag");
-      const isDropEvent = event.type === "drop";
-      const isInput = ["INPUT", "BUTTON", "SELECT", "TEXTAREA"].includes(target.tagName) || target.isContentEditable;
-      if (isInput && !isDropEvent && !isDragEvent) return true;
-      const { isEditable } = this.editor;
-      const { isDragging } = this;
-      const isDraggable = !!this.node.type.spec.draggable;
-      const isSelectable = NodeSelection.isSelectable(this.node);
-      const isCopyEvent = event.type === "copy";
-      const isPasteEvent = event.type === "paste";
-      const isCutEvent = event.type === "cut";
-      const isClickEvent = event.type === "mousedown";
-      if (!isDraggable && isSelectable && isDragEvent && event.target === this.dom) {
-        event.preventDefault();
-      }
-      if (isDraggable && isDragEvent && !isDragging && event.target === this.dom) {
-        event.preventDefault();
-        return false;
-      }
-      if (isDraggable && isEditable && !isDragging && isClickEvent) {
-        const dragHandle = target.closest("[data-drag-handle]");
-        const isValidDragHandle = dragHandle && (this.dom === dragHandle || this.dom.contains(dragHandle));
-        if (isValidDragHandle) {
-          this.isDragging = true;
-          document.addEventListener(
-            "dragend",
-            () => {
-              this.isDragging = false;
-            },
-            { once: true }
-          );
-          document.addEventListener(
-            "drop",
-            () => {
-              this.isDragging = false;
-            },
-            { once: true }
-          );
-          document.addEventListener(
-            "mouseup",
-            () => {
-              this.isDragging = false;
-            },
-            { once: true }
-          );
-        }
-      }
-      if (isDragging || isDropEvent || isCopyEvent || isPasteEvent || isCutEvent || isClickEvent && isSelectable) {
-        return false;
-      }
-      return true;
-    }
-    ignoreMutation(mutation) {
-      if (!this.dom || !this.contentDOM) return true;
-      if (this.node.isLeaf || this.node.isAtom) return true;
-      if (mutation.type === "selection") return false;
-      if (this.contentDOM === mutation.target && mutation.type === "attributes") return true;
-      if (this.contentDOM.contains(mutation.target)) return false;
-      return true;
-    }
-    destroy() {
-      this.dom.remove();
-      this.contentDOM?.remove();
-    }
-    updateAttributes(attrs) {
-      const pos = this.getPos();
-      if (typeof pos !== "number") {
-        return;
-      }
-      return this.view.dispatch(
-        this.view.state.tr.setNodeMarkup(pos, void 0, {
-          ...this.node.attrs,
-          ...attrs
-        })
-      );
-    }
-    updateHTMLAttributes() {
-      const { extensionService } = this.editor;
-      const { attributes } = extensionService;
-      const extensionAttrs = attributes.filter((i2) => i2.type === this.node.type.name);
-      this.htmlAttributes = Attribute.getAttributesToRender(this.node, extensionAttrs);
-    }
-    createDragHandle() {
-      const dragHandle = document.createElement("span");
-      dragHandle.classList.add("sd-structured-content-draggable");
-      dragHandle.draggable = true;
-      dragHandle.contentEditable = "false";
-      dragHandle.dataset.dragHandle = "";
-      const textElement = document.createElement("span");
-      textElement.textContent = "Structured content";
-      dragHandle.append(textElement);
-      return dragHandle;
-    }
-    onDragStart(event) {
-      const { view } = this.editor;
-      const target = event.target;
-      const dragHandle = target.nodeType === 3 ? target.parentElement?.closest("[data-drag-handle]") : target.closest("[data-drag-handle]");
-      if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
-        return;
-      }
-      let x = 0;
-      let y2 = 0;
-      if (this.dom !== dragHandle) {
-        const domBox = this.dom.getBoundingClientRect();
-        const handleBox = dragHandle.getBoundingClientRect();
-        const offsetX = event.offsetX ?? event.nativeEvent?.offsetX;
-        const offsetY = event.offsetY ?? event.nativeEvent?.offsetY;
-        x = handleBox.x - domBox.x + offsetX;
-        y2 = handleBox.y - domBox.y + offsetY;
-      }
-      event.dataTransfer?.setDragImage(this.dom, x, y2);
-      const pos = this.getPos();
-      if (typeof pos !== "number") {
-        return;
-      }
-      const selection = NodeSelection.create(view.state.doc, pos);
-      const transaction = view.state.tr.setSelection(selection);
-      view.dispatch(transaction);
-    }
-  }
-  class StructuredContentInlineView extends StructuredContentViewBase {
-    constructor(props) {
-      super(props);
-    }
-    mount() {
-      this.buildView();
-    }
-    get contentDOM() {
-      const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
-      return contentElement || null;
-    }
-    createElement() {
-      const element = document.createElement("span");
-      element.classList.add(structuredContentClass$1);
-      element.setAttribute("data-structured-content", "");
-      const contentElement = document.createElement("span");
-      contentElement.classList.add(structuredContentInnerClass$1);
-      element.append(contentElement);
-      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-      updateDOMAttributes(element, { ...domAttrs });
-      return { element, contentElement };
-    }
-    buildView() {
-      const { element } = this.createElement();
-      const dragHandle = this.createDragHandle();
-      element.prepend(dragHandle);
-      element.addEventListener("dragstart", (e) => this.onDragStart(e));
-      this.root = element;
-    }
-    updateView() {
-      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-      updateDOMAttributes(this.dom, { ...domAttrs });
-    }
-    update(node, decorations, innerDecorations) {
-      const result = super.update(node, decorations, innerDecorations);
-      if (!result) return false;
-      this.updateView();
-      return true;
-    }
-  }
-  const structuredContentClass$1 = "sd-structured-content";
-  const structuredContentInnerClass$1 = "sd-structured-content__content";
-  const StructuredContent = Node$1.create({
-    name: "structuredContent",
-    group: "inline structuredContent",
-    inline: true,
-    content: "inline*",
-    isolating: true,
-    atom: false,
-    // false - has editable content.
-    draggable: true,
-    addOptions() {
-      return {
-        htmlAttributes: {
-          class: structuredContentClass$1,
-          "aria-label": "Structured content node"
-        }
-      };
-    },
-    addAttributes() {
-      return {
-        id: {
-          default: null,
-          parseDOM: (elem) => elem.getAttribute("data-id"),
-          renderDOM: (attrs) => {
-            if (!attrs.id) return {};
-            return { "data-id": attrs.id };
-          }
-        },
-        sdtPr: {
-          rendered: false
-        }
-      };
-    },
-    parseDOM() {
-      return [{ tag: "span[data-structured-content]" }];
-    },
-    renderDOM({ htmlAttributes }) {
-      return [
-        "span",
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-          "data-structured-content": ""
-        }),
-        0
-      ];
-    },
-    addNodeView() {
-      return (props) => {
-        return new StructuredContentInlineView({ ...props });
-      };
-    }
-  });
-  class StructuredContentBlockView extends StructuredContentViewBase {
-    constructor(props) {
-      super(props);
-    }
-    mount() {
-      this.buildView();
-    }
-    get contentDOM() {
-      const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
-      return contentElement || null;
-    }
-    createElement() {
-      const element = document.createElement("div");
-      element.classList.add(structuredContentClass);
-      element.setAttribute("data-structured-content-block", "");
-      const contentElement = document.createElement("div");
-      contentElement.classList.add(structuredContentInnerClass);
-      element.append(contentElement);
-      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-      updateDOMAttributes(element, { ...domAttrs });
-      return { element, contentElement };
-    }
-    buildView() {
-      const { element } = this.createElement();
-      const dragHandle = this.createDragHandle();
-      element.prepend(dragHandle);
-      element.addEventListener("dragstart", (e) => this.onDragStart(e));
-      this.root = element;
-    }
-    updateView() {
-      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-      updateDOMAttributes(this.dom, { ...domAttrs });
-    }
-    update(node, decorations, innerDecorations) {
-      const result = super.update(node, decorations, innerDecorations);
-      if (!result) return false;
-      this.updateView();
-      return true;
+        },
+        wrapAttributes: {
+          rendered: false
+        },
+        attributes: {
+          rendered: false
+        }
+      };
+    },
+    parseDOM() {
+      return [
+        {
+          tag: `div[data-type="${this.name}"]`
+        }
+      ];
+    },
+    renderDOM({ htmlAttributes }) {
+      return [
+        "div",
+        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
+        0
+      ];
     }
-  }
-  const structuredContentClass = "sd-structured-content-block";
-  const structuredContentInnerClass = "sd-structured-content-block__content";
-  const StructuredContentBlock = Node$1.create({
-    name: "structuredContentBlock",
-    group: "block structuredContent",
-    content: "block*",
+  });
+  const ShapeTextbox = Node$1.create({
+    name: "shapeTextbox",
+    group: "block",
+    content: "paragraph* block*",
     isolating: true,
-    atom: false,
-    // false - has editable content.
-    draggable: true,
     addOptions() {
       return {
         htmlAttributes: {
-          class: structuredContentClass,
-          "aria-label": "Structured content block node"
+          class: "sd-editor-shape-textbox",
+          "aria-label": "Shape textbox node"
         }
       };
     },
     addAttributes() {
       return {
-        id: {
+        sdBlockId: {
           default: null,
-          parseDOM: (elem) => elem.getAttribute("data-id"),
+          keepOnSplit: false,
+          parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
           renderDOM: (attrs) => {
-            if (!attrs.id) return {};
-            return { "data-id": attrs.id };
+            return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
           }
         },
-        sdtPr: {
+        attributes: {
           rendered: false
         }
       };
     },
     parseDOM() {
-      return [{ tag: "div[data-structured-content-block]" }];
+      return [
+        {
+          tag: `div[data-type="${this.name}"]`
+        }
+      ];
     },
     renderDOM({ htmlAttributes }) {
       return [
         "div",
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-          "data-structured-content-block": ""
-        }),
+        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
         0
       ];
-    },
-    addNodeView() {
-      return (props) => {
-        return new StructuredContentBlockView({ ...props });
-      };
     }
   });
-  class DocumentSectionView {
-    constructor(node, getPos, decorations, editor) {
-      __privateAdd$1(this, _DocumentSectionView_instances);
-      this.node = node;
-      this.editor = editor;
-      this.decorations = decorations;
-      this.view = editor.view;
-      this.getPos = getPos;
-      __privateMethod$1(this, _DocumentSectionView_instances, init_fn3).call(this);
-    }
-  }
-  _DocumentSectionView_instances = /* @__PURE__ */ new WeakSet();
-  init_fn3 = function() {
-    const { attrs } = this.node;
-    const { id, title, description } = attrs;
-    this.dom = document.createElement("div");
-    this.dom.className = "sd-document-section-block";
-    this.dom.setAttribute("data-id", id);
-    this.dom.setAttribute("data-title", title);
-    this.dom.setAttribute("data-description", description);
-    this.dom.setAttribute("aria-label", "Document section");
-    __privateMethod$1(this, _DocumentSectionView_instances, addToolTip_fn).call(this);
-    this.contentDOM = document.createElement("div");
-    this.contentDOM.className = "sd-document-section-block-content";
-    this.contentDOM.setAttribute("contenteditable", "true");
-    this.dom.appendChild(this.contentDOM);
-  };
-  addToolTip_fn = function() {
-    const { title } = this.node.attrs;
-    this.infoDiv = document.createElement("div");
-    this.infoDiv.className = "sd-document-section-block-info";
-    const textSpan = document.createElement("span");
-    textSpan.textContent = title || "Document section";
-    this.infoDiv.appendChild(textSpan);
-    this.infoDiv.setAttribute("contenteditable", "false");
-    this.dom.appendChild(this.infoDiv);
-  };
-  const getAllSections = (editor) => {
-    if (!editor) return [];
-    const type2 = editor.schema.nodes.documentSection;
-    if (!type2) return [];
-    const sections = [];
-    const { state: state2 } = editor;
-    state2.doc.descendants((node, pos) => {
-      if (node.type.name === type2.name) {
-        sections.push({ node, pos });
-      }
-    });
-    return sections;
-  };
-  const exportSectionsToHTML = (editor) => {
-    const sections = getAllSections(editor);
-    const processedSections = /* @__PURE__ */ new Set();
-    const result = [];
-    sections.forEach(({ node }) => {
-      const { attrs } = node;
-      const { id, title, description } = attrs;
-      if (processedSections.has(id)) return;
-      processedSections.add(id);
-      const html = getHTMLFromNode(node, editor);
-      result.push({
-        id,
-        title,
-        description,
-        html
-      });
-    });
-    return result;
-  };
-  const getHTMLFromNode = (node, editor) => {
-    const tempDocument = document.implementation.createHTMLDocument();
-    const container = tempDocument.createElement("div");
-    const fragment = DOMSerializer.fromSchema(editor.schema).serializeFragment(node.content);
-    container.appendChild(fragment);
-    let html = container.innerHTML;
-    return html;
-  };
-  const exportSectionsToJSON = (editor) => {
-    const sections = getAllSections(editor);
-    const processedSections = /* @__PURE__ */ new Set();
-    const result = [];
-    sections.forEach(({ node }) => {
-      const { attrs } = node;
-      const { id, title, description } = attrs;
-      if (processedSections.has(id)) return;
-      processedSections.add(id);
-      result.push({
-        id,
-        title,
-        description,
-        content: node.toJSON()
-      });
-    });
-    return result;
-  };
-  const getLinkedSectionEditor = (id, options, editor) => {
-    const sections = getAllSections(editor);
-    const section = sections.find((s) => s.node.attrs.id === id);
-    if (!section) return null;
-    const child = editor.createChildEditor({
-      ...options,
-      onUpdate: ({ editor: childEditor, transaction }) => {
-        const isFromtLinkedParent = transaction.getMeta("fromLinkedParent");
-        if (isFromtLinkedParent) return;
-        const updatedContent = childEditor.state.doc.content;
-        const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
-        if (!sectionNode) return;
-        const { pos, node } = sectionNode;
-        const newNode = node.type.create(node.attrs, updatedContent, node.marks);
-        const tr = editor.state.tr.replaceWith(pos, pos + node.nodeSize, newNode);
-        tr.setMeta("fromLinkedChild", true);
-        editor.view.dispatch(tr);
-      }
-    });
-    editor.on("update", ({ transaction }) => {
-      const isFromLinkedChild = transaction.getMeta("fromLinkedChild");
-      if (isFromLinkedChild) return;
-      const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
-      if (!sectionNode) return;
-      const sectionContent = sectionNode.node.content;
-      const json = {
-        type: "doc",
-        content: sectionContent.content.map((node) => node.toJSON())
-      };
-      const childTr = child.state.tr;
-      childTr.setMeta("fromLinkedParent", true);
-      childTr.replaceWith(0, child.state.doc.content.size, child.schema.nodeFromJSON(json));
-      child.view.dispatch(childTr);
-    });
-    return child;
-  };
-  const SectionHelpers = {
-    getAllSections,
-    exportSectionsToHTML,
-    exportSectionsToJSON,
-    getLinkedSectionEditor
-  };
-  const DocumentSection = Node$1.create({
-    name: "documentSection",
-    group: "block",
-    content: "block*",
-    atom: true,
+  const ContentBlock = Node$1.create({
+    name: "contentBlock",
+    group: "inline",
+    content: "",
     isolating: true,
+    atom: true,
+    inline: true,
     addOptions() {
       return {
         htmlAttributes: {
-          class: "sd-document-section-block",
-          "aria-label": "Structured content block"
+          contenteditable: false
         }
       };
     },
-    parseDOM() {
-      return [
-        {
-          tag: "div.sd-document-section-block",
-          priority: 60
-        }
-      ];
-    },
-    renderDOM({ htmlAttributes }) {
-      return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-    },
     addAttributes() {
       return {
-        id: {},
-        sdBlockId: {
+        horizontalRule: {
+          default: false,
+          renderDOM: ({ horizontalRule }) => {
+            if (!horizontalRule) return {};
+            return { "data-horizontal-rule": "true" };
+          }
+        },
+        size: {
+          default: null,
+          renderDOM: ({ size: size2 }) => {
+            if (!size2) return {};
+            let style2 = "";
+            if (size2.top) style2 += `top: ${size2.top}px; `;
+            if (size2.left) style2 += `left: ${size2.left}px; `;
+            if (size2.width) style2 += `width: ${size2.width.toString().endsWith("%") ? size2.width : `${size2.width}px`}; `;
+            if (size2.height)
+              style2 += `height: ${size2.height.toString().endsWith("%") ? size2.height : `${size2.height}px`}; `;
+            return { style: style2 };
+          }
+        },
+        background: {
           default: null,
-          keepOnSplit: false,
-          parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
           renderDOM: (attrs) => {
-            return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+            if (!attrs.background) return {};
+            return {
+              style: `background-color: ${attrs.background}`
+            };
           }
         },
-        title: {},
-        description: {},
-        sectionType: {},
-        isLocked: { default: false }
+        drawingContent: {
+          rendered: false
+        },
+        attributes: {
+          rendered: false
+        }
       };
     },
-    addNodeView() {
-      return ({ node, editor, getPos, decorations }) => {
-        return new DocumentSectionView(node, getPos, decorations, editor);
-      };
+    parseDOM() {
+      return [
+        {
+          tag: `div[data-type="${this.name}"]`
+        }
+      ];
+    },
+    renderDOM({ htmlAttributes }) {
+      return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
     },
     addCommands() {
       return {
         /**
-         * Create a lockable content section
+         * Insert a horizontal rule
          * @category Command
-         * @param {SectionCreate} [options={}] - Section configuration
          * @example
-         * editor.commands.createDocumentSection({
-         *   id: 1,
-         *   title: 'Terms & Conditions',
-         *   isLocked: true,
-         *   html: '<p>Legal content...</p>'
-         * })
+         * editor.commands.insertHorizontalRule()
+         * @note Creates a visual separator between content sections
          */
-        createDocumentSection: (options = {}) => ({ tr, state: state2, dispatch, editor }) => {
-          const { selection } = state2;
-          let { from: from2, to } = selection;
-          let content = selection.content().content;
-          const { html: optionsHTML, json: optionsJSON } = options;
-          if (optionsHTML) {
-            const html = htmlHandler(optionsHTML, this.editor);
-            const doc2 = DOMParser$1.fromSchema(this.editor.schema).parse(html);
-            content = doc2.content;
-          }
-          if (optionsJSON) {
-            content = this.editor.schema.nodeFromJSON(optionsJSON);
-          }
-          if (!content?.content?.length) {
-            content = this.editor.schema.nodeFromJSON({ type: "paragraph", content: [] });
-          }
-          if (!options.id) {
-            const allSections = SectionHelpers.getAllSections(editor);
-            options.id = allSections.length + 1;
-          }
-          if (!options.title) {
-            options.title = "Document section";
-          }
-          const node = this.type.createAndFill(options, content);
-          if (!node) return false;
-          const isAlreadyInSdtBlock = findParentNode((node2) => node2.type.name === "documentSection")(selection);
-          if (isAlreadyInSdtBlock && isAlreadyInSdtBlock.node) {
-            const insertPos2 = isAlreadyInSdtBlock.pos + isAlreadyInSdtBlock.node.nodeSize;
-            from2 = insertPos2;
-            to = insertPos2;
-          }
-          tr.replaceRangeWith(from2, to, node);
-          const nodeEnd = from2 + node.nodeSize;
-          let shouldInsertParagraph = true;
-          let insertPos = nodeEnd;
-          if (nodeEnd >= tr.doc.content.size) {
-            insertPos = tr.doc.content.size;
-            if (insertPos > 0) {
-              const $endPos = tr.doc.resolve(insertPos);
-              if ($endPos.nodeBefore && $endPos.nodeBefore.type.name === "paragraph") {
-                shouldInsertParagraph = false;
-              }
+        insertHorizontalRule: () => ({ commands: commands2 }) => {
+          return commands2.insertContent({
+            type: this.name,
+            attrs: {
+              horizontalRule: true,
+              size: { width: "100%", height: 2 },
+              background: "#e5e7eb"
             }
-          }
-          if (shouldInsertParagraph) {
-            const emptyParagraph = tr.doc.type.schema.nodes.paragraph.create();
-            tr.insert(insertPos, emptyParagraph);
-          }
-          if (dispatch) {
-            tr.setMeta("documentSection", { action: "create" });
-            dispatch(tr);
-            setTimeout(() => {
-              try {
-                const currentState = editor.state;
-                const docSize = currentState.doc.content.size;
-                let targetPos = from2 + node.nodeSize;
-                if (shouldInsertParagraph) {
-                  targetPos += 1;
-                }
-                targetPos = Math.min(targetPos, docSize);
-                if (targetPos < docSize && targetPos > 0) {
-                  const newSelection = Selection.near(currentState.doc.resolve(targetPos));
-                  const newTr = currentState.tr.setSelection(newSelection);
-                  editor.view.dispatch(newTr);
-                }
-              } catch (e) {
-                console.warn("Could not set delayed selection:", e);
-              }
-            }, 0);
-          }
-          return true;
-        },
-        /**
-         * Remove section wrapper at cursor, preserving its content
-         * @category Command
-         * @example
-         * editor.commands.removeSectionAtSelection()
-         * @note Content stays in document, only section wrapper is removed
-         */
-        removeSectionAtSelection: () => ({ tr, dispatch }) => {
-          const sdtNode = findParentNode((node2) => node2.type.name === "documentSection")(tr.selection);
-          if (!sdtNode) return false;
-          const { node, pos } = sdtNode;
-          const nodeStart = pos;
-          const nodeEnd = nodeStart + node.nodeSize;
-          const contentToPreserve = node.content;
-          tr.delete(nodeStart, nodeEnd);
-          if (contentToPreserve.size > 0) {
-            tr.insert(nodeStart, contentToPreserve);
-          }
-          const newPos = Math.min(nodeStart, tr.doc.content.size);
-          tr.setSelection(Selection.near(tr.doc.resolve(newPos)));
-          if (dispatch) {
-            tr.setMeta("documentSection", { action: "delete" });
-            dispatch(tr);
-          }
-          return true;
-        },
-        /**
-         * Delete section and all its content
-         * @category Command
-         * @param {number} id - Section to delete
-         * @example
-         * editor.commands.removeSectionById(123)
-         */
-        removeSectionById: (id) => ({ tr, dispatch }) => {
-          const sections = SectionHelpers.getAllSections(this.editor);
-          const sectionToRemove = sections.find(({ node: node2 }) => node2.attrs.id === id);
-          if (!sectionToRemove) return false;
-          const { pos, node } = sectionToRemove;
-          const nodeStart = pos;
-          const nodeEnd = nodeStart + node.nodeSize;
-          tr.delete(nodeStart, nodeEnd);
-          if (dispatch) {
-            tr.setMeta("documentSection", { action: "delete", id });
-            dispatch(tr);
-          }
-          return true;
+          });
         },
         /**
-         * Lock section against edits
+         * Insert a content block
          * @category Command
-         * @param {number} id - Section to lock
+         * @param {ContentBlockConfig} config - Block configuration
          * @example
-         * editor.commands.lockSectionById(123)
-         */
-        lockSectionById: (id) => ({ tr, dispatch }) => {
-          const sections = SectionHelpers.getAllSections(this.editor);
-          const sectionToLock = sections.find(({ node }) => node.attrs.id === id);
-          if (!sectionToLock) return false;
-          tr.setNodeMarkup(sectionToLock.pos, null, { ...sectionToLock.node.attrs, isLocked: true });
-          if (dispatch) {
-            tr.setMeta("documentSection", { action: "lock", id });
-            dispatch(tr);
-          }
-          return true;
-        },
-        /**
-         * Modify section attributes or content
-         * @category Command
-         * @param {SectionUpdate} options - Changes to apply
+         * // Insert a spacer block
+         * editor.commands.insertContentBlock({ size: { height: 20 } })
+         *
          * @example
-         * editor.commands.updateSectionById({ id: 123, attrs: { isLocked: false } })
-         * editor.commands.updateSectionById({ id: 123, html: '<p>New content</p>' })
-         * editor.commands.updateSectionById({
-         *   id: 123,
-         *   html: '<p>Updated</p>',
-         *   attrs: { title: 'New Title' }
+         * // Insert a colored divider
+         * editor.commands.insertContentBlock({
+         *   size: { width: '50%', height: 3 },
+         *   background: '#3b82f6'
          * })
+         * @note Used for spacing, dividers, and special inline content
          */
-        updateSectionById: ({ id, html, json, attrs }) => ({ tr, dispatch, editor }) => {
-          const sections = SectionHelpers.getAllSections(editor || this.editor);
-          const sectionToUpdate = sections.find(({ node: node2 }) => node2.attrs.id === id);
-          if (!sectionToUpdate) return false;
-          const { pos, node } = sectionToUpdate;
-          let newContent = null;
-          if (html) {
-            const htmlDoc = htmlHandler(html, editor || this.editor);
-            const doc2 = DOMParser$1.fromSchema((editor || this.editor).schema).parse(htmlDoc);
-            newContent = doc2.content;
-          }
-          if (json) {
-            newContent = (editor || this.editor).schema.nodeFromJSON(json);
-          }
-          if (!newContent) {
-            newContent = node.content;
-          }
-          const updatedNode = node.type.create({ ...node.attrs, ...attrs }, newContent, node.marks);
-          tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
-          if (dispatch) {
-            tr.setMeta("documentSection", { action: "update", id, attrs });
-            dispatch(tr);
-          }
-          return true;
+        insertContentBlock: (config2) => ({ commands: commands2 }) => {
+          return commands2.insertContent({
+            type: this.name,
+            attrs: config2
+          });
         }
       };
-    },
-    addHelpers() {
-      return {
-        ...SectionHelpers
-      };
     }
   });
   const { findChildren } = helpers;
@@ -77263,7 +77885,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 {
@@ -77544,6 +78167,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       Search,
       StructuredContent,
       StructuredContentBlock,
+      StructuredContentCommands,
       DocumentSection,
       NodeResizer,
       CustomSelection,
@@ -90799,7 +91423,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;
@@ -91861,14 +92485,6 @@ ${style2}
       return null;
     }
   }
-  const shouldBypassContextMenu = (event) => {
-    if (!event) return false;
-    if (event.ctrlKey || event.metaKey) {
-      return true;
-    }
-    const isKeyboardInvocation = event.type === "contextmenu" && typeof event.detail === "number" && event.detail === 0 && (event.button === 0 || event.button === void 0) && event.clientX === 0 && event.clientY === 0;
-    return Boolean(isKeyboardInvocation);
-  };
   const isModuleEnabled = (editorOptions, moduleName) => {
     switch (moduleName) {
       case "ai":
@@ -96417,7 +97033,7 @@ ${reason}`);
       const c1 = changes[i2];
       const c2 = changes[i2 + 1];
       const c1Key = markMetaKeys[c1.mark.type.name];
-      if (c1 && c2 && c1.to === c2.from) {
+      if (c1 && c2 && c1.to === c2.from && c1.mark.attrs.id === c2.mark.attrs.id) {
         const c2Key = markMetaKeys[c2.mark.type.name];
         grouped.push({
           from: c1.from,
@@ -96462,6 +97078,7 @@ ${reason}`);
     const isCommentsListVisible = ref$1(false);
     const editorCommentIds = ref$1([]);
     const editorCommentPositions = ref$1({});
+    const isCommentHighlighted = ref$1(false);
     const floatingCommentsOffset = ref$1(0);
     const sortedConversations = ref$1([]);
     const visibleConversations = ref$1([]);
@@ -96740,8 +97357,8 @@ ${reason}`);
           tr.setMeta(CommentsPluginKey, { type: "forceTrackChanges" });
           tr.setMeta(TrackChangesBasePluginKey, trackChangesPayload);
         }
+        dispatch(tr);
       });
-      dispatch(tr);
     };
     const translateCommentsForExport = () => {
       const processedComments = [];
@@ -96811,6 +97428,7 @@ ${reason}`);
       try {
         const normalizedContent = normalizeCommentForEditor(commentTextJson);
         const schemaContent = Array.isArray(normalizedContent) ? normalizedContent[0] : normalizedContent;
+        if (!schemaContent.content.length) return null;
         const editor = new Editor({
           mode: "text",
           isHeadless: true,
@@ -96844,6 +97462,7 @@ ${reason}`);
       commentsParentElement,
       editorCommentPositions,
       hasInitializedLocations,
+      isCommentHighlighted,
       // Floating comments
       floatingCommentsOffset,
       sortedConversations,
@@ -108538,7 +109157,8 @@ ${style2}
         currentCommentText,
         isDebugging: isDebugging2,
         editingCommentId,
-        editorCommentPositions
+        editorCommentPositions,
+        isCommentHighlighted
       } = storeToRefs(commentsStore);
       const { activeZoom } = storeToRefs(superdocStore);
       const isInternal = ref$1(true);
@@ -108600,13 +109220,14 @@ ${style2}
           "track-format",
           "track-format-dec"
         ];
-        if (excludedClasses.some((className) => e.target.classList.contains(className))) return;
+        if (excludedClasses.some((className) => e.target.classList.contains(className)) || isCommentHighlighted.value) return;
         if (activeComment.value === props.comment.commentId) {
           floatingCommentsOffset.value = 0;
           emit2("dialog-exit");
         }
         activeComment.value = null;
         commentsStore.setActiveComment(proxy.$superdoc, activeComment.value);
+        isCommentHighlighted.value = false;
       };
       const handleAddComment = () => {
         const options = {
@@ -108819,7 +109440,7 @@ ${style2}
       };
     }
   };
-  const CommentDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-dc5e6675"]]);
+  const CommentDialog = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-e07f3426"]]);
   const _hoisted_1$b = { class: "comments-list" };
   const _hoisted_2$5 = { key: 0 };
   const _hoisted_3$3 = { class: "comment-item" };
@@ -109842,7 +110463,8 @@ ${style2}
         getFloatingComments,
         hasSyncedCollaborationComments,
         editorCommentPositions,
-        hasInitializedLocations
+        hasInitializedLocations,
+        isCommentHighlighted
       } = storeToRefs(commentsStore);
       const { showAddComment, handleEditorLocationsUpdate, handleTrackedChangeUpdate } = commentsStore;
       const { proxy } = getCurrentInstance();
@@ -110037,6 +110659,7 @@ ${style2}
         nextTick(() => {
           if (pendingComment.value) return;
           commentsStore.setActiveComment(proxy.$superdoc, activeCommentId);
+          isCommentHighlighted.value = true;
         });
         if (typeof proxy.$superdoc.config.onCommentsUpdate === "function") {
           proxy.$superdoc.config.onCommentsUpdate(params2);
@@ -110359,7 +110982,7 @@ ${style2}
       };
     }
   };
-  const App = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-dbfba5b9"]]);
+  const App = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3f71b1bf"]]);
   const createSuperdocVueApp = () => {
     const app = createApp(App);
     const pinia = createPinia();
@@ -110476,6 +111099,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;
@@ -110495,6 +111121,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;
@@ -110518,10 +111154,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",
@@ -110529,33 +111171,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() {