@harbour-enterprises/superdoc 0.22.0-next.9 → 0.22.1

package/dist/superdoc.umd.js

@@ -22730,6 +22730,10 @@
     }
     return id.join("");
   }
+  function generateRandomSigned32BitIntStrId() {
+    const val = Math.floor(Math.random() * 2147483647);
+    return val.toString();
+  }
   function generateRandom32BitHex() {
     const val = Math.floor(Math.random() * 2147483647);
     return val.toString(16).toUpperCase().padStart(8, "0");
@@ -30308,6 +30312,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     generateDocxListAttributes,
     generateDocxRandomId,
     generateRandom32BitHex,
+    generateRandomSigned32BitIntStrId,
     getActiveFormatting,
     getExtensionConfigField,
     getMarkRange,
@@ -35902,6 +35907,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;
     }
@@ -35913,15 +35921,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
       }
     };
@@ -38179,21 +38188,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 = [];
@@ -39254,7 +39297,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const pict = {
       name: "w:pict",
       attributes: {
-        "w14:anchorId": Math.floor(Math.random() * 4294967295).toString()
+        "w14:anchorId": generateRandomSigned32BitIntStrId()
       },
       elements: [shape]
     };
@@ -39321,7 +39364,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     const pict = {
       name: "w:pict",
       attributes: {
-        "w14:anchorId": Math.floor(Math.random() * 4294967295).toString()
+        "w14:anchorId": generateRandomSigned32BitIntStrId()
       },
       elements: [rect]
     };
@@ -39368,7 +39411,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     if (elements) {
       if (name === "w:instrText") {
-        tags.push(elements[0].text);
+        const textContent2 = (elements || []).map((child) => typeof child?.text === "string" ? child.text : "").join("");
+        tags.push(__privateMethod$2(this, _DocxExporter_instances, replaceSpecialCharacters_fn).call(this, textContent2));
       } else if (name === "w:t" || name === "w:delText" || name === "wp:posOffset") {
         try {
           let text = String(elements[0].text);
@@ -40794,7 +40838,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       gutter: "0"
     })
   });
-  function ensureSectionProperties(bodyNode, converter) {
+  function ensureSectionProperties(bodyNode) {
     if (!bodyNode.elements) bodyNode.elements = [];
     let sectPr = bodyNode.elements.find((el) => el.name === "w:sectPr");
     if (!sectPr) {
@@ -41162,7 +41206,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         return;
       }
     }
-    static updateDocumentVersion(docx = this.convertedXml, version2 = "0.21.0") {
+    static updateDocumentVersion(docx = this.convertedXml, version2 = "0.22.0") {
       const customLocation = "docProps/custom.xml";
       if (!docx[customLocation]) {
         docx[customLocation] = generateCustomXml();
@@ -41651,7 +41695,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
   function generateCustomXml() {
     return DEFAULT_CUSTOM_XML;
   }
-  function generateSuperdocVersion(pid = 2, version2 = "0.21.0") {
+  function generateSuperdocVersion(pid = 2, version2 = "0.22.0") {
     return {
       type: "element",
       name: "property",
@@ -44293,7 +44337,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() {
   };
@@ -56368,7 +56412,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     if (emitParams) editor.emit("commentsUpdate", emitParams);
     return newTrackedChanges;
   };
-  const getTrackedChangeText = ({ state: state2, nodes, mark, marks, trackedChangeType, isDeletionInsertion }) => {
+  const getTrackedChangeText = ({ nodes, mark, trackedChangeType, isDeletionInsertion }) => {
     let trackedChangeText = "";
     let deletionText = "";
     if (trackedChangeType === TrackInsertMarkName) {
@@ -56410,10 +56454,8 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       if (hasMatchingId) nodesWithMark.push(node2);
     });
     const { deletionText, trackedChangeText } = getTrackedChangeText({
-      state: newEditorState,
       nodes: nodesWithMark.length ? nodesWithMark : [node],
       mark: trackedMark,
-      marks,
       trackedChangeType,
       isDeletionInsertion
     });
@@ -59096,7 +59138,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * @returns {Object | void} Migration results
      */
     processCollaborationMigrations() {
-      console.debug("[checkVersionMigrations] Current editor version", "0.21.0");
+      console.debug("[checkVersionMigrations] Current editor version", "0.22.0");
       if (!this.options.ydoc) return;
       const metaMap = this.options.ydoc.getMap("meta");
       let docVersion = metaMap.get("version");
@@ -61068,228 +61110,1223 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return this.editor.options.isHeadless ? [] : [slashMenuPlugin];
     }
   });
-  const Document = Node$1.create({
-    name: "doc",
-    topNode: true,
-    content: "block+",
-    parseDOM() {
-      return [{ tag: "doc" }];
-    },
-    renderDOM() {
-      return ["doc", 0];
-    },
-    addAttributes() {
-      return {
-        attributes: {
-          rendered: false,
-          "aria-label": "Document node"
-        }
-      };
-    },
-    addCommands() {
-      return {
-        /**
-         * Get document statistics
-         * @category Command
-         * @example
-         * // Get word and character count
-         * const stats = editor.commands.getDocumentStats()
-         * console.log(`${stats.words} words, ${stats.characters} characters`)
-         * @note Returns word count, character count, and paragraph count
-         */
-        getDocumentStats: () => ({ editor }) => {
-          const text = editor.getText();
-          const words = text.split(/\s+/).filter((word) => word.length > 0).length;
-          const characters = text.length;
-          const paragraphs = editor.state.doc.content.childCount;
-          return {
-            words,
-            characters,
-            paragraphs
-          };
-        },
-        /**
-         * Clear entire document
-         * @category Command
-         * @example
-         * editor.commands.clearDocument()
-         * @note Replaces all content with an empty paragraph
-         */
-        clearDocument: () => ({ commands: commands2 }) => {
-          return commands2.setContent("<p></p>");
+  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;
     }
-  });
-  const Text = Node$1.create({
-    name: "text",
-    group: "inline",
-    inline: true,
-    addOptions() {
-      return {};
+    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;
     }
-  });
-  const splitRun = () => (props) => {
-    const { state: state2, view, tr } = props;
-    const { $from, empty: empty2 } = state2.selection;
-    if (!empty2) return false;
-    if ($from.parent.type.name !== "run") return false;
-    const handled = splitBlock(state2, (transaction) => {
+    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);
-    });
-    if (handled) {
-      tr.setMeta("preventDispatch", true);
     }
-    return handled;
-  };
-  const Run = OxmlNode.create({
-    name: "run",
-    oXmlName: "w:r",
-    group: "inline",
+  }
+  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*",
-    selectable: false,
-    childToAttributes: ["runProperties"],
+    isolating: true,
+    atom: false,
+    // false - has editable content.
+    draggable: true,
     addOptions() {
       return {
         htmlAttributes: {
-          "data-run": "1"
+          class: structuredContentClass$1,
+          "aria-label": "Structured content node"
         }
       };
     },
     addAttributes() {
       return {
-        runProperties: {
+        id: {
           default: null,
-          rendered: false,
-          keepOnSplit: true
+          parseDOM: (elem) => elem.getAttribute("data-id"),
+          renderDOM: (attrs) => {
+            if (!attrs.id) return {};
+            return { "data-id": attrs.id };
+          }
         },
-        rsidR: {
+        tag: {
           default: null,
-          rendered: false,
-          keepOnSplit: true
+          parseDOM: (elem) => elem.getAttribute("data-tag"),
+          renderDOM: (attrs) => {
+            if (!attrs.tag) return {};
+            return { "data-tag": attrs.tag };
+          }
         },
-        rsidRPr: {
+        alias: {
           default: null,
-          rendered: false,
-          keepOnSplit: true
+          parseDOM: (elem) => elem.getAttribute("data-alias"),
+          renderDOM: (attrs) => {
+            if (!attrs.alias) return {};
+            return { "data-alias": attrs.alias };
+          }
         },
-        rsidDel: {
-          default: null,
-          rendered: false,
-          keepOnSplit: true
+        sdtPr: {
+          rendered: false
         }
       };
     },
-    addCommands() {
-      return {
-        splitRun
-      };
-    },
     parseDOM() {
-      return [{ tag: "span[data-run]" }];
+      return [{ tag: "span[data-structured-content]" }];
     },
     renderDOM({ htmlAttributes }) {
-      const base2 = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-      return ["span", base2, 0];
+      return [
+        "span",
+        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+          "data-structured-content": ""
+        }),
+        0
+      ];
+    },
+    addNodeView() {
+      return (props) => {
+        return new StructuredContentInlineView({ ...props });
+      };
     }
   });
-  const inputRegex$1 = /^\s*([-+*])\s$/;
-  const BulletList = Node$1.create({
-    name: "bulletList",
-    group: "block list",
-    selectable: false,
-    content() {
-      return `${this.options.itemTypeName}+`;
-    },
+  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 {
-        itemTypeName: "listItem",
         htmlAttributes: {
-          "aria-label": "Bullet list node"
-        },
-        keepMarks: true,
-        keepAttributes: false
+          class: structuredContentClass,
+          "aria-label": "Structured content block node"
+        }
       };
     },
-    parseDOM() {
-      return [{ tag: "ul" }];
-    },
-    renderDOM({ htmlAttributes }) {
-      const attributes = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-      return ["ul", attributes, 0];
-    },
     addAttributes() {
       return {
-        "list-style-type": {
-          default: "bullet",
-          rendered: false
+        id: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-id"),
+          renderDOM: (attrs) => {
+            if (!attrs.id) return {};
+            return { "data-id": attrs.id };
+          }
         },
-        listId: {
-          rendered: false
+        tag: {
+          default: null,
+          parseDOM: (elem) => elem.getAttribute("data-tag"),
+          renderDOM: (attrs) => {
+            if (!attrs.tag) return {};
+            return { "data-tag": attrs.tag };
+          }
         },
-        sdBlockId: {
+        alias: {
           default: null,
-          keepOnSplit: false,
-          parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+          parseDOM: (elem) => elem.getAttribute("data-alias"),
           renderDOM: (attrs) => {
-            return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+            if (!attrs.alias) return {};
+            return { "data-alias": attrs.alias };
           }
         },
-        attributes: {
-          rendered: false,
-          keepOnSplit: true
-        }
-      };
-    },
-    addCommands() {
-      return {
-        /**
-         * Toggle a bullet list at the current selection
-         * @category Command
-         * @example
-         * // Toggle bullet list on selected text
-         * editor.commands.toggleBulletList()
-         * @note Converts selected paragraphs to list items or removes list formatting
-         */
-        toggleBulletList: () => (params2) => {
-          return toggleList(this.type)(params2);
+        sdtPr: {
+          rendered: false
         }
       };
     },
-    addShortcuts() {
-      return {
-        "Mod-Shift-8": () => {
-          return this.editor.commands.toggleBulletList();
-        }
-      };
+    parseDOM() {
+      return [{ tag: "div[data-structured-content-block]" }];
     },
-    addInputRules() {
+    renderDOM({ htmlAttributes }) {
       return [
-        new InputRule({
-          match: inputRegex$1,
-          handler: ({ state: state2, range: range2 }) => {
-            const $pos = state2.selection.$from;
-            const listItemType = state2.schema.nodes.listItem;
-            for (let depth = $pos.depth; depth >= 0; depth--) {
-              if ($pos.node(depth).type === listItemType) {
-                return null;
-              }
-            }
-            const { tr } = state2;
-            tr.delete(range2.from, range2.to);
-            ListHelpers.createNewList({
-              listType: this.type,
-              tr,
-              editor: this.editor
-            });
-          }
-        })
+        "div",
+        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+          "data-structured-content-block": ""
+        }),
+        0
       ];
+    },
+    addNodeView() {
+      return (props) => {
+        return new StructuredContentBlockView({ ...props });
+      };
     }
   });
-  const inputRegex = /^(\d+)\.\s$/;
-  const OrderedList = Node$1.create({
+  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 || generateRandomSigned32BitIntStrId(),
+              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 || generateRandomSigned32BitIntStrId(),
+              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: () => ({ 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
+      };
+    }
+  });
+  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,
+    content: "block+",
+    parseDOM() {
+      return [{ tag: "doc" }];
+    },
+    renderDOM() {
+      return ["doc", 0];
+    },
+    addAttributes() {
+      return {
+        attributes: {
+          rendered: false,
+          "aria-label": "Document node"
+        }
+      };
+    },
+    addCommands() {
+      return {
+        /**
+         * Get document statistics
+         * @category Command
+         * @example
+         * // Get word and character count
+         * const stats = editor.commands.getDocumentStats()
+         * console.log(`${stats.words} words, ${stats.characters} characters`)
+         * @note Returns word count, character count, and paragraph count
+         */
+        getDocumentStats: () => ({ editor }) => {
+          const text = editor.getText();
+          const words = text.split(/\s+/).filter((word) => word.length > 0).length;
+          const characters = text.length;
+          const paragraphs = editor.state.doc.content.childCount;
+          return {
+            words,
+            characters,
+            paragraphs
+          };
+        },
+        /**
+         * Clear entire document
+         * @category Command
+         * @example
+         * editor.commands.clearDocument()
+         * @note Replaces all content with an empty paragraph
+         */
+        clearDocument: () => ({ commands: commands2 }) => {
+          return commands2.setContent("<p></p>");
+        }
+      };
+    }
+  });
+  const Text = Node$1.create({
+    name: "text",
+    group: "inline",
+    inline: true,
+    addOptions() {
+      return {};
+    }
+  });
+  const splitRun = () => (props) => {
+    const { state: state2, view, tr } = props;
+    const { $from, empty: empty2 } = state2.selection;
+    if (!empty2) return false;
+    if ($from.parent.type.name !== "run") return false;
+    const handled = splitBlock(state2, (transaction) => {
+      view.dispatch(transaction);
+    });
+    if (handled) {
+      tr.setMeta("preventDispatch", true);
+    }
+    return handled;
+  };
+  const Run = OxmlNode.create({
+    name: "run",
+    oXmlName: "w:r",
+    group: "inline",
+    inline: true,
+    content: "inline*",
+    selectable: false,
+    childToAttributes: ["runProperties"],
+    addOptions() {
+      return {
+        htmlAttributes: {
+          "data-run": "1"
+        }
+      };
+    },
+    addAttributes() {
+      return {
+        runProperties: {
+          default: null,
+          rendered: false,
+          keepOnSplit: true
+        },
+        rsidR: {
+          default: null,
+          rendered: false,
+          keepOnSplit: true
+        },
+        rsidRPr: {
+          default: null,
+          rendered: false,
+          keepOnSplit: true
+        },
+        rsidDel: {
+          default: null,
+          rendered: false,
+          keepOnSplit: true
+        }
+      };
+    },
+    addCommands() {
+      return {
+        splitRun
+      };
+    },
+    parseDOM() {
+      return [{ tag: "span[data-run]" }];
+    },
+    renderDOM({ htmlAttributes }) {
+      const base2 = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+      return ["span", base2, 0];
+    }
+  });
+  const inputRegex$1 = /^\s*([-+*])\s$/;
+  const BulletList = Node$1.create({
+    name: "bulletList",
+    group: "block list",
+    selectable: false,
+    content() {
+      return `${this.options.itemTypeName}+`;
+    },
+    addOptions() {
+      return {
+        itemTypeName: "listItem",
+        htmlAttributes: {
+          "aria-label": "Bullet list node"
+        },
+        keepMarks: true,
+        keepAttributes: false
+      };
+    },
+    parseDOM() {
+      return [{ tag: "ul" }];
+    },
+    renderDOM({ htmlAttributes }) {
+      const attributes = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+      return ["ul", attributes, 0];
+    },
+    addAttributes() {
+      return {
+        "list-style-type": {
+          default: "bullet",
+          rendered: false
+        },
+        listId: {
+          rendered: false
+        },
+        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,
+          keepOnSplit: true
+        }
+      };
+    },
+    addCommands() {
+      return {
+        /**
+         * Toggle a bullet list at the current selection
+         * @category Command
+         * @example
+         * // Toggle bullet list on selected text
+         * editor.commands.toggleBulletList()
+         * @note Converts selected paragraphs to list items or removes list formatting
+         */
+        toggleBulletList: () => (params2) => {
+          return toggleList(this.type)(params2);
+        }
+      };
+    },
+    addShortcuts() {
+      return {
+        "Mod-Shift-8": () => {
+          return this.editor.commands.toggleBulletList();
+        }
+      };
+    },
+    addInputRules() {
+      return [
+        new InputRule({
+          match: inputRegex$1,
+          handler: ({ state: state2, range: range2 }) => {
+            const $pos = state2.selection.$from;
+            const listItemType = state2.schema.nodes.listItem;
+            for (let depth = $pos.depth; depth >= 0; depth--) {
+              if ($pos.node(depth).type === listItemType) {
+                return null;
+              }
+            }
+            const { tr } = state2;
+            tr.delete(range2.from, range2.to);
+            ListHelpers.createNewList({
+              listType: this.type,
+              tr,
+              editor: this.editor
+            });
+          }
+        })
+      ];
+    }
+  });
+  const inputRegex = /^(\d+)\.\s$/;
+  const OrderedList = Node$1.create({
     name: "orderedList",
     group: "block list",
     selectable: false,
@@ -62650,7 +63687,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() {
@@ -62711,7 +63748,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 = "";
@@ -69820,984 +70857,335 @@ Please report this to https://github.com/markedjs/marked.`, e) {
         }
       };
     },
-    addAttributes() {
-      return {
-        marksAsAttrs: {
-          default: null,
-          rendered: false
-        }
-      };
-    },
-    addNodeView() {
-      return ({ node, editor, getPos, decorations }) => {
-        const htmlAttributes = this.options.htmlAttributes;
-        return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
-      };
-    },
-    parseDOM() {
-      return [{ tag: 'span[data-id="auto-page-number"' }];
-    },
-    renderDOM({ htmlAttributes }) {
-      return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
-    },
-    addCommands() {
-      return {
-        /**
-         * Insert an automatic page number
-         * @category Command
-         * @returns {Function} Command function
-         * @example
-         * editor.commands.addAutoPageNumber()
-         * @note Only works in header/footer contexts
-         */
-        addAutoPageNumber: () => ({ tr, dispatch, state: state2, editor }) => {
-          const { options } = editor;
-          if (!options.isHeaderOrFooter) return false;
-          const { schema } = state2;
-          const pageNumberType = schema?.nodes?.["page-number"];
-          if (!pageNumberType) return false;
-          const pageNumberNodeJSON = { type: "page-number" };
-          const pageNumberNode = schema.nodeFromJSON(pageNumberNodeJSON);
-          if (dispatch) {
-            tr.replaceSelectionWith(pageNumberNode, false);
-            tr.setMeta("forceUpdatePagination", true);
-          }
-          return true;
-        }
-      };
-    },
-    addShortcuts() {
-      return {
-        "Mod-Shift-alt-p": () => this.editor.commands.addAutoPageNumber()
-      };
-    }
-  });
-  const TotalPageCount = Node$1.create({
-    name: "total-page-number",
-    group: "inline",
-    inline: true,
-    atom: true,
-    draggable: false,
-    selectable: false,
-    content: "text*",
-    addOptions() {
-      return {
-        htmlAttributes: {
-          contenteditable: false,
-          "data-id": "auto-total-pages",
-          "aria-label": "Total page count node",
-          class: "sd-editor-auto-total-pages"
-        }
-      };
-    },
-    addAttributes() {
-      return {
-        marksAsAttrs: {
-          default: null,
-          rendered: false
-        }
-      };
-    },
-    addNodeView() {
-      return ({ node, editor, getPos, decorations }) => {
-        const htmlAttributes = this.options.htmlAttributes;
-        return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
-      };
-    },
-    parseDOM() {
-      return [{ tag: 'span[data-id="auto-total-pages"' }];
-    },
-    renderDOM({ htmlAttributes }) {
-      return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-    },
-    addCommands() {
-      return {
-        /**
-         * Insert total page count
-         * @category Command
-         * @returns {Function} Command function
-         * @example
-         * editor.commands.addTotalPageCount()
-         * @note Only works in header/footer contexts
-         */
-        addTotalPageCount: () => ({ tr, dispatch, state: state2, editor }) => {
-          const { options } = editor;
-          if (!options.isHeaderOrFooter) return false;
-          const { schema } = state2;
-          const pageNumberType = schema.nodes?.["total-page-number"];
-          if (!pageNumberType) return false;
-          const currentPages = editor?.options?.parentEditor?.currentTotalPages || 1;
-          const pageNumberNode = {
-            type: "total-page-number",
-            content: [{ type: "text", text: String(currentPages) }]
-          };
-          const pageNode = schema.nodeFromJSON(pageNumberNode);
-          if (dispatch) {
-            tr.replaceSelectionWith(pageNode, false);
-          }
-          return true;
-        }
-      };
-    },
-    addShortcuts() {
-      return {
-        "Mod-Shift-alt-c": () => this.editor.commands.addTotalPageCount()
-      };
-    }
-  });
-  const getNodeAttributes = (nodeName, editor) => {
-    switch (nodeName) {
-      case "page-number":
-        return {
-          text: editor.options.currentPageNumber || "1",
-          className: "sd-editor-auto-page-number",
-          dataId: "auto-page-number",
-          ariaLabel: "Page number node"
-        };
-      case "total-page-number":
-        return {
-          text: editor.options.parentEditor?.currentTotalPages || "1",
-          className: "sd-editor-auto-total-pages",
-          dataId: "auto-total-pages",
-          ariaLabel: "Total page count node"
-        };
-      default:
-        return {};
-    }
-  };
-  class AutoPageNumberNodeView {
-    constructor(node, getPos, decorations, editor, htmlAttributes = {}) {
-      __privateAdd$1(this, _AutoPageNumberNodeView_instances);
-      this.node = node;
-      this.editor = editor;
-      this.view = editor.view;
-      this.getPos = getPos;
-      this.editor = editor;
-      this.dom = __privateMethod$1(this, _AutoPageNumberNodeView_instances, renderDom_fn).call(this, node, htmlAttributes);
-    }
-    update(node) {
-      const incomingType = node?.type?.name;
-      const currentType = this.node?.type?.name;
-      if (!incomingType || incomingType !== currentType) return false;
-      this.node = node;
-      return true;
-    }
-  }
-  _AutoPageNumberNodeView_instances = /* @__PURE__ */ new WeakSet();
-  renderDom_fn = function(node, htmlAttributes) {
-    const attrs = getNodeAttributes(this.node.type.name, this.editor);
-    const content = document.createTextNode(String(attrs.text));
-    const nodeContent = document.createElement("span");
-    nodeContent.className = attrs.className;
-    nodeContent.setAttribute("data-id", attrs.dataId);
-    nodeContent.setAttribute("aria-label", attrs.ariaLabel);
-    const currentPos = this.getPos();
-    const { styles, marks } = getMarksFromNeighbors(currentPos, this.view);
-    __privateMethod$1(this, _AutoPageNumberNodeView_instances, scheduleUpdateNodeStyle_fn).call(this, currentPos, marks);
-    Object.assign(nodeContent.style, styles);
-    nodeContent.appendChild(content);
-    Object.entries(htmlAttributes).forEach(([key2, value]) => {
-      if (value) nodeContent.setAttribute(key2, value);
-    });
-    return nodeContent;
-  };
-  scheduleUpdateNodeStyle_fn = function(pos, marks) {
-    setTimeout(() => {
-      const { state: state2 } = this.editor;
-      const { dispatch } = this.view;
-      const node = state2.doc.nodeAt(pos);
-      if (!node || node.isText) return;
-      const currentMarks = node.attrs.marksAsAttrs || [];
-      const newMarks = marks.map((m2) => ({ type: m2.type.name, attrs: m2.attrs }));
-      const isEqual = JSON.stringify(currentMarks) === JSON.stringify(newMarks);
-      if (isEqual) return;
-      const newAttrs = {
-        ...node.attrs,
-        marksAsAttrs: newMarks
-      };
-      const tr = state2.tr.setNodeMarkup(pos, void 0, newAttrs);
-      dispatch(tr);
-    }, 0);
-  };
-  const getMarksFromNeighbors = (currentPos, view) => {
-    const $pos = view.state.doc.resolve(currentPos);
-    const styles = {};
-    const marks = [];
-    const before = $pos.nodeBefore;
-    if (before) {
-      Object.assign(styles, processMarks(before.marks));
-      marks.push(...before.marks);
-    }
-    const after = $pos.nodeAfter;
-    if (after) {
-      Object.assign(styles, { ...styles, ...processMarks(after.marks) });
-      marks.push(...after.marks);
-    }
-    return {
-      styles,
-      marks
-    };
-  };
-  const processMarks = (marks) => {
-    const styles = {};
-    marks.forEach((mark) => {
-      const { type: type2, attrs } = mark;
-      switch (type2.name) {
-        case "textStyle":
-          if (attrs.fontFamily) styles["font-family"] = attrs.fontFamily;
-          if (attrs.fontSize) styles["font-size"] = attrs.fontSize;
-          if (attrs.color) styles["color"] = attrs.color;
-          if (attrs.backgroundColor) styles["background-color"] = attrs.backgroundColor;
-          break;
-        case "bold":
-          styles["font-weight"] = "bold";
-          break;
-        case "italic":
-          styles["font-style"] = "italic";
-          break;
-        case "underline":
-          styles["text-decoration"] = (styles["text-decoration"] || "") + " underline";
-          break;
-        case "strike":
-          styles["text-decoration"] = (styles["text-decoration"] || "") + " line-through";
-          break;
-        default:
-          if (attrs?.style) {
-            Object.entries(attrs.style).forEach(([key2, value]) => {
-              styles[key2] = value;
-            });
-          }
-          break;
-      }
-    });
-    return styles;
-  };
-  const ShapeContainer = Node$1.create({
-    name: "shapeContainer",
-    group: "block",
-    content: "block+",
-    isolating: true,
-    addOptions() {
-      return {
-        htmlAttributes: {
-          class: "sd-editor-shape-container",
-          "aria-label": "Shape container node"
-        }
-      };
-    },
-    addAttributes() {
-      return {
-        fillcolor: {
-          renderDOM: (attrs) => {
-            if (!attrs.fillcolor) return {};
-            return {
-              style: `background-color: ${attrs.fillcolor}`
-            };
-          }
-        },
-        sdBlockId: {
-          default: null,
-          keepOnSplit: false,
-          parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
-          renderDOM: (attrs) => {
-            return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
-          }
-        },
-        style: {
-          renderDOM: (attrs) => {
-            if (!attrs.style) return {};
-            return {
-              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: {
+    addAttributes() {
+      return {
+        marksAsAttrs: {
+          default: null,
           rendered: false
         }
       };
     },
+    addNodeView() {
+      return ({ node, editor, getPos, decorations }) => {
+        const htmlAttributes = this.options.htmlAttributes;
+        return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
+      };
+    },
     parseDOM() {
-      return [
-        {
-          tag: `div[data-type="${this.name}"]`
-        }
-      ];
+      return [{ tag: 'span[data-id="auto-page-number"' }];
     },
     renderDOM({ htmlAttributes }) {
-      return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
+      return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
     },
     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
+         * Insert an automatic page number
          * @category Command
-         * @param {ContentBlockConfig} config - Block configuration
-         * @example
-         * // Insert a spacer block
-         * editor.commands.insertContentBlock({ size: { height: 20 } })
-         *
+         * @returns {Function} Command function
          * @example
-         * // Insert a colored divider
-         * editor.commands.insertContentBlock({
-         *   size: { width: '50%', height: 3 },
-         *   background: '#3b82f6'
-         * })
-         * @note Used for spacing, dividers, and special inline content
+         * editor.commands.addAutoPageNumber()
+         * @note Only works in header/footer contexts
          */
-        insertContentBlock: (config2) => ({ commands: commands2 }) => {
-          return commands2.insertContent({
-            type: this.name,
-            attrs: config2
-          });
+        addAutoPageNumber: () => ({ tr, dispatch, state: state2, editor }) => {
+          const { options } = editor;
+          if (!options.isHeaderOrFooter) return false;
+          const { schema } = state2;
+          const pageNumberType = schema?.nodes?.["page-number"];
+          if (!pageNumberType) return false;
+          const pageNumberNodeJSON = { type: "page-number" };
+          const pageNumberNode = schema.nodeFromJSON(pageNumberNodeJSON);
+          if (dispatch) {
+            tr.replaceSelectionWith(pageNumberNode, false);
+            tr.setMeta("forceUpdatePagination", true);
+          }
+          return true;
         }
       };
+    },
+    addShortcuts() {
+      return {
+        "Mod-Shift-alt-p": () => this.editor.commands.addAutoPageNumber()
+      };
     }
   });
-  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",
+  const TotalPageCount = Node$1.create({
+    name: "total-page-number",
+    group: "inline",
     inline: true,
-    content: "inline*",
-    isolating: true,
-    atom: false,
-    // false - has editable content.
-    draggable: true,
+    atom: true,
+    draggable: false,
+    selectable: false,
+    content: "text*",
     addOptions() {
       return {
         htmlAttributes: {
-          class: structuredContentClass$1,
-          "aria-label": "Structured content node"
+          contenteditable: false,
+          "data-id": "auto-total-pages",
+          "aria-label": "Total page count node",
+          class: "sd-editor-auto-total-pages"
         }
       };
     },
     addAttributes() {
       return {
-        id: {
+        marksAsAttrs: {
           default: null,
-          parseDOM: (elem) => elem.getAttribute("data-id"),
-          renderDOM: (attrs) => {
-            if (!attrs.id) return {};
-            return { "data-id": attrs.id };
-          }
-        },
-        sdtPr: {
           rendered: false
         }
       };
     },
+    addNodeView() {
+      return ({ node, editor, getPos, decorations }) => {
+        const htmlAttributes = this.options.htmlAttributes;
+        return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
+      };
+    },
     parseDOM() {
-      return [{ tag: "span[data-structured-content]" }];
+      return [{ tag: 'span[data-id="auto-total-pages"' }];
     },
     renderDOM({ htmlAttributes }) {
-      return [
-        "span",
-        Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-          "data-structured-content": ""
-        }),
-        0
-      ];
+      return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
     },
-    addNodeView() {
-      return (props) => {
-        return new StructuredContentInlineView({ ...props });
+    addCommands() {
+      return {
+        /**
+         * Insert total page count
+         * @category Command
+         * @returns {Function} Command function
+         * @example
+         * editor.commands.addTotalPageCount()
+         * @note Only works in header/footer contexts
+         */
+        addTotalPageCount: () => ({ tr, dispatch, state: state2, editor }) => {
+          const { options } = editor;
+          if (!options.isHeaderOrFooter) return false;
+          const { schema } = state2;
+          const pageNumberType = schema.nodes?.["total-page-number"];
+          if (!pageNumberType) return false;
+          const currentPages = editor?.options?.parentEditor?.currentTotalPages || 1;
+          const pageNumberNode = {
+            type: "total-page-number",
+            content: [{ type: "text", text: String(currentPages) }]
+          };
+          const pageNode = schema.nodeFromJSON(pageNumberNode);
+          if (dispatch) {
+            tr.replaceSelectionWith(pageNode, false);
+          }
+          return true;
+        }
+      };
+    },
+    addShortcuts() {
+      return {
+        "Mod-Shift-alt-c": () => this.editor.commands.addTotalPageCount()
       };
     }
   });
-  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;
+  const getNodeAttributes = (nodeName, editor) => {
+    switch (nodeName) {
+      case "page-number":
+        return {
+          text: editor.options.currentPageNumber || "1",
+          className: "sd-editor-auto-page-number",
+          dataId: "auto-page-number",
+          ariaLabel: "Page number node"
+        };
+      case "total-page-number":
+        return {
+          text: editor.options.parentEditor?.currentTotalPages || "1",
+          className: "sd-editor-auto-total-pages",
+          dataId: "auto-total-pages",
+          ariaLabel: "Total page count node"
+        };
+      default:
+        return {};
     }
-    updateView() {
-      const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-      updateDOMAttributes(this.dom, { ...domAttrs });
+  };
+  class AutoPageNumberNodeView {
+    constructor(node, getPos, decorations, editor, htmlAttributes = {}) {
+      __privateAdd$1(this, _AutoPageNumberNodeView_instances);
+      this.node = node;
+      this.editor = editor;
+      this.view = editor.view;
+      this.getPos = getPos;
+      this.editor = editor;
+      this.dom = __privateMethod$1(this, _AutoPageNumberNodeView_instances, renderDom_fn).call(this, node, htmlAttributes);
     }
-    update(node, decorations, innerDecorations) {
-      const result = super.update(node, decorations, innerDecorations);
-      if (!result) return false;
-      this.updateView();
+    update(node) {
+      const incomingType = node?.type?.name;
+      const currentType = this.node?.type?.name;
+      if (!incomingType || incomingType !== currentType) return false;
+      this.node = node;
       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*",
+  _AutoPageNumberNodeView_instances = /* @__PURE__ */ new WeakSet();
+  renderDom_fn = function(node, htmlAttributes) {
+    const attrs = getNodeAttributes(this.node.type.name, this.editor);
+    const content = document.createTextNode(String(attrs.text));
+    const nodeContent = document.createElement("span");
+    nodeContent.className = attrs.className;
+    nodeContent.setAttribute("data-id", attrs.dataId);
+    nodeContent.setAttribute("aria-label", attrs.ariaLabel);
+    const currentPos = this.getPos();
+    const { styles, marks } = getMarksFromNeighbors(currentPos, this.view);
+    __privateMethod$1(this, _AutoPageNumberNodeView_instances, scheduleUpdateNodeStyle_fn).call(this, currentPos, marks);
+    Object.assign(nodeContent.style, styles);
+    nodeContent.appendChild(content);
+    Object.entries(htmlAttributes).forEach(([key2, value]) => {
+      if (value) nodeContent.setAttribute(key2, value);
+    });
+    return nodeContent;
+  };
+  scheduleUpdateNodeStyle_fn = function(pos, marks) {
+    setTimeout(() => {
+      const { state: state2 } = this.editor;
+      const { dispatch } = this.view;
+      const node = state2.doc.nodeAt(pos);
+      if (!node || node.isText) return;
+      const currentMarks = node.attrs.marksAsAttrs || [];
+      const newMarks = marks.map((m2) => ({ type: m2.type.name, attrs: m2.attrs }));
+      const isEqual = JSON.stringify(currentMarks) === JSON.stringify(newMarks);
+      if (isEqual) return;
+      const newAttrs = {
+        ...node.attrs,
+        marksAsAttrs: newMarks
+      };
+      const tr = state2.tr.setNodeMarkup(pos, void 0, newAttrs);
+      dispatch(tr);
+    }, 0);
+  };
+  const getMarksFromNeighbors = (currentPos, view) => {
+    const $pos = view.state.doc.resolve(currentPos);
+    const styles = {};
+    const marks = [];
+    const before = $pos.nodeBefore;
+    if (before) {
+      Object.assign(styles, processMarks(before.marks));
+      marks.push(...before.marks);
+    }
+    const after = $pos.nodeAfter;
+    if (after) {
+      Object.assign(styles, { ...styles, ...processMarks(after.marks) });
+      marks.push(...after.marks);
+    }
+    return {
+      styles,
+      marks
+    };
+  };
+  const processMarks = (marks) => {
+    const styles = {};
+    marks.forEach((mark) => {
+      const { type: type2, attrs } = mark;
+      switch (type2.name) {
+        case "textStyle":
+          if (attrs.fontFamily) styles["font-family"] = attrs.fontFamily;
+          if (attrs.fontSize) styles["font-size"] = attrs.fontSize;
+          if (attrs.color) styles["color"] = attrs.color;
+          if (attrs.backgroundColor) styles["background-color"] = attrs.backgroundColor;
+          break;
+        case "bold":
+          styles["font-weight"] = "bold";
+          break;
+        case "italic":
+          styles["font-style"] = "italic";
+          break;
+        case "underline":
+          styles["text-decoration"] = (styles["text-decoration"] || "") + " underline";
+          break;
+        case "strike":
+          styles["text-decoration"] = (styles["text-decoration"] || "") + " line-through";
+          break;
+        default:
+          if (attrs?.style) {
+            Object.entries(attrs.style).forEach(([key2, value]) => {
+              styles[key2] = value;
+            });
+          }
+          break;
+      }
+    });
+    return styles;
+  };
+  const ShapeContainer = Node$1.create({
+    name: "shapeContainer",
+    group: "block",
+    content: "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-container",
+          "aria-label": "Shape container node"
         }
       };
     },
     addAttributes() {
       return {
-        id: {
+        fillcolor: {
+          renderDOM: (attrs) => {
+            if (!attrs.fillcolor) return {};
+            return {
+              style: `background-color: ${attrs.fillcolor}`
+            };
+          }
+        },
+        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: {
+        style: {
+          renderDOM: (attrs) => {
+            if (!attrs.style) return {};
+            return {
+              style: attrs.style
+            };
+          }
+        },
+        wrapAttributes: {
+          rendered: false
+        },
+        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",
+  const ShapeTextbox = Node$1.create({
+    name: "shapeTextbox",
     group: "block",
-    content: "block*",
-    atom: true,
+    content: "paragraph* block*",
     isolating: true,
     addOptions() {
       return {
         htmlAttributes: {
-          class: "sd-document-section-block",
-          "aria-label": "Structured content block"
+          class: "sd-editor-shape-textbox",
+          "aria-label": "Shape textbox node"
         }
       };
     },
-    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,
@@ -70806,212 +71194,131 @@ Please report this to https://github.com/markedjs/marked.`, e) {
             return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
           }
         },
-        title: {},
-        description: {},
-        sectionType: {},
-        isLocked: { default: 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 }),
+        0
+      ];
+    }
+  });
+  const ContentBlock = Node$1.create({
+    name: "contentBlock",
+    group: "inline",
+    content: "",
+    isolating: true,
+    atom: true,
+    inline: true,
+    addOptions() {
+      return {
+        htmlAttributes: {
+          contenteditable: false
+        }
       };
     },
-    addCommands() {
+    addAttributes() {
       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);
+        horizontalRule: {
+          default: false,
+          renderDOM: ({ horizontalRule }) => {
+            if (!horizontalRule) return {};
+            return { "data-horizontal-rule": "true" };
           }
-          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);
+        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 };
           }
-          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);
+        background: {
+          default: null,
+          renderDOM: (attrs) => {
+            if (!attrs.background) return {};
+            return {
+              style: `background-color: ${attrs.background}`
+            };
           }
-          return true;
         },
+        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 {
         /**
-         * Lock section against edits
+         * Insert a horizontal rule
          * @category Command
-         * @param {number} id - Section to lock
          * @example
-         * editor.commands.lockSectionById(123)
+         * editor.commands.insertHorizontalRule()
+         * @note Creates a visual separator between content sections
          */
-        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;
+        insertHorizontalRule: () => ({ commands: commands2 }) => {
+          return commands2.insertContent({
+            type: this.name,
+            attrs: {
+              horizontalRule: true,
+              size: { width: "100%", height: 2 },
+              background: "#e5e7eb"
+            }
+          });
         },
         /**
-         * Modify section attributes or content
+         * Insert a content block
          * @category Command
-         * @param {SectionUpdate} options - Changes to apply
+         * @param {ContentBlockConfig} config - Block configuration
          * @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 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
          */
-        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;
@@ -77861,6 +78168,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       Search,
       StructuredContent,
       StructuredContentBlock,
+      StructuredContentCommands,
       DocumentSection,
       NodeResizer,
       CustomSelection,
@@ -110777,7 +111085,7 @@ ${style2}
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "0.21.0";
+      this.version = "0.22.0";
       this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
       this.superdocId = config2.superdocId || v4();
       this.colors = this.config.colors;