@harbour-enterprises/superdoc 0.22.0-next.8 → 0.22.0

package/dist/chunks/{super-editor.es-D6u8E2n4.cjs → super-editor.es-BoUJEZaF.cjs}

@@ -15005,6 +15005,10 @@ function generateDocxRandomId(length2 = 8) {
   }
   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");
@@ -22583,6 +22587,7 @@ const helpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePrope
   generateDocxListAttributes,
   generateDocxRandomId,
   generateRandom32BitHex,
+  generateRandomSigned32BitIntStrId,
   getActiveFormatting,
   getExtensionConfigField,
   getMarkRange,
@@ -28177,6 +28182,9 @@ function handleStructuredContentNode(params2) {
   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;
   }
@@ -28188,15 +28196,16 @@ function handleStructuredContentNode(params2) {
     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
     }
   };
@@ -30454,21 +30463,55 @@ const generateSdtPrTagForDocumentSection = (id, title, tag) => {
 };
 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 = [];
@@ -31529,7 +31572,7 @@ function translateShapeContainer(params2) {
   const pict = {
     name: "w:pict",
     attributes: {
-      "w14:anchorId": Math.floor(Math.random() * 4294967295).toString()
+      "w14:anchorId": generateRandomSigned32BitIntStrId()
     },
     elements: [shape]
   };
@@ -31596,7 +31639,7 @@ function translateVRectContentBlock(params2) {
   const pict = {
     name: "w:pict",
     attributes: {
-      "w14:anchorId": Math.floor(Math.random() * 4294967295).toString()
+      "w14:anchorId": generateRandomSigned32BitIntStrId()
     },
     elements: [rect]
   };
@@ -33096,7 +33139,7 @@ const DEFAULT_SECTION_PROPS = Object.freeze({
     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) {
@@ -36595,7 +36638,7 @@ var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "rea
 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() {
 };
@@ -48670,28 +48713,25 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
   if (emitParams) editor.emit("commentsUpdate", emitParams);
   return newTrackedChanges;
 };
-const getTrackedChangeText = ({ state: state2, node, mark, marks, trackedChangeType, isDeletionInsertion }) => {
+const getTrackedChangeText = ({ nodes, mark, trackedChangeType, isDeletionInsertion }) => {
   let trackedChangeText = "";
   let deletionText = "";
   if (trackedChangeType === TrackInsertMarkName) {
-    trackedChangeText = node?.text ?? "";
+    trackedChangeText = nodes.reduce((acc, node) => {
+      if (!node.marks.find((nodeMark) => nodeMark.type.name === mark.type.name)) return acc;
+      acc += node?.text || node?.textContent || "";
+      return acc;
+    }, "");
   }
   if (trackedChangeType === TrackFormatMarkName) {
     trackedChangeText = translateFormatChangesToEnglish(mark.attrs);
   }
   if (trackedChangeType === TrackDeleteMarkName || isDeletionInsertion) {
-    deletionText = node?.text ?? "";
-    if (isDeletionInsertion) {
-      let { id } = marks.deletionMark.attrs;
-      let deletionNode = findNode$1(state2.doc, (node2) => {
-        const { marks: marks2 = [] } = node2;
-        const changeMarks = marks2.filter((mark2) => TRACK_CHANGE_MARKS.includes(mark2.type.name));
-        if (!changeMarks.length) return false;
-        const hasMatchingId = changeMarks.find((mark2) => mark2.attrs.id === id);
-        if (hasMatchingId) return true;
-      });
-      deletionText = deletionNode?.node.text ?? "";
-    }
+    deletionText = nodes.reduce((acc, node) => {
+      if (!node.marks.find((nodeMark) => nodeMark.type.name === TrackDeleteMarkName)) return acc;
+      acc += node?.text || node?.textContent || "";
+      return acc;
+    }, "");
   }
   return {
     deletionText,
@@ -48706,20 +48746,17 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
   const id = attrs.id;
   const node = nodes[0];
   const isDeletionInsertion = !!(marks.insertedMark && marks.deletionMark);
-  let existingNode;
+  let nodesWithMark = [];
   newEditorState.doc.descendants((node2) => {
     const { marks: marks2 = [] } = node2;
     const changeMarks = marks2.filter((mark) => TRACK_CHANGE_MARKS.includes(mark.type.name));
     if (!changeMarks.length) return;
     const hasMatchingId = changeMarks.find((mark) => mark.attrs.id === id);
-    if (hasMatchingId) existingNode = node2;
-    if (existingNode) return false;
+    if (hasMatchingId) nodesWithMark.push(node2);
   });
   const { deletionText, trackedChangeText } = getTrackedChangeText({
-    state: newEditorState,
-    node: existingNode || node,
+    nodes: nodesWithMark.length ? nodesWithMark : [node],
     mark: trackedMark,
-    marks,
     trackedChangeType,
     isDeletionInsertion
   });
@@ -48747,14 +48784,6 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
   else if (event === "update") params2.event = comments_module_events.UPDATE;
   return params2;
 };
-function findNode$1(node, predicate) {
-  let found2 = null;
-  node.descendants((node2, pos) => {
-    if (predicate(node2)) found2 = { node: node2, pos };
-    if (found2) return false;
-  });
-  return found2;
-}
 function findRangeById(doc2, id) {
   let from2 = null, to = null;
   doc2.descendants((node, pos) => {
@@ -53382,196 +53411,1191 @@ const SlashMenu = Extension.create({
     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((i) => i.type === this.node.type.name);
+    this.htmlAttributes = Attribute2.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 = Attribute2.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 = Attribute2.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 = Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-    return ["span", base2, 0];
+    return [
+      "span",
+      Attribute2.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 = Attribute2.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 = Attribute2.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 = Attribute2.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
+      sdtPr: {
+        rendered: false
       }
     };
   },
+  parseDOM() {
+    return [{ tag: "div[data-structured-content-block]" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    return [
+      "div",
+      Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+        "data-structured-content-block": ""
+      }),
+      0
+    ];
+  },
+  addNodeView() {
+    return (props) => {
+      return new StructuredContentBlockView({ ...props });
+    };
+  }
+});
+function getStructuredContentTagsById(idOrIds, state2) {
+  const result = findChildren$5(state2.doc, (node) => {
+    const isStructuredContent = ["structuredContent", "structuredContentBlock"].includes(node.type.name);
+    if (Array.isArray(idOrIds)) {
+      return isStructuredContent && idOrIds.includes(node.attrs.id);
+    } else {
+      return isStructuredContent && node.attrs.id === idOrIds;
+    }
+  });
+  return result;
+}
+function getStructuredContentTags(state2) {
+  const result = findChildren$5(state2.doc, (node) => {
+    return node.type.name === "structuredContent" || node.type.name === "structuredContentBlock";
+  });
+  return result;
+}
+function getStructuredContentInlineTags(state2) {
+  const result = findChildren$5(state2.doc, (node) => node.type.name === "structuredContent");
+  return result;
+}
+function getStructuredContentBlockTags(state2) {
+  const result = findChildren$5(state2.doc, (node) => node.type.name === "structuredContentBlock");
+  return result;
+}
+const structuredContentHelpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  getStructuredContentBlockTags,
+  getStructuredContentInlineTags,
+  getStructuredContentTags,
+  getStructuredContentTagsById
+}, Symbol.toStringTag, { value: "Module" }));
+const STRUCTURED_CONTENT_NAMES = ["structuredContent", "structuredContentBlock"];
+const StructuredContentCommands = Extension.create({
+  name: "structuredContentCommands",
   addCommands() {
     return {
       /**
-       * Toggle a bullet list at the current selection
+       * Inserts a structured content inline at selection.
        * @category Command
-       * @example
-       * // Toggle bullet list on selected text
-       * editor.commands.toggleBulletList()
-       * @note Converts selected paragraphs to list items or removes list formatting
+       * @param {StructuredContentInlineInsert} options
        */
-      toggleBulletList: () => (params2) => {
-        return toggleList(this.type)(params2);
-      }
-    };
-  },
-  addShortcuts() {
+      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", Attribute2.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 = Attribute2.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 = Attribute2.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();
@@ -54964,7 +55988,7 @@ class ListItemNodeView {
     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() {
@@ -55025,7 +56049,7 @@ class ListItemNodeView {
   }
 }
 _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 = "";
@@ -62134,984 +63158,335 @@ const PageNumber = Node$1.create({
       }
     };
   },
-  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", Attribute2.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", Attribute2.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",
-      Attribute2.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",
-      Attribute2.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", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
+    return ["span", Attribute2.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((i) => i.type === this.node.type.name);
-    this.htmlAttributes = Attribute2.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 = Attribute2.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 = Attribute2.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",
-      Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-        "data-structured-content": ""
-      }),
-      0
-    ];
+    return ["span", Attribute2.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 = Attribute2.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 = Attribute2.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",
-      Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-        "data-structured-content-block": ""
-      }),
+      Attribute2.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", Attribute2.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-  },
   addAttributes() {
     return {
-      id: {},
       sdBlockId: {
         default: null,
         keepOnSplit: false,
@@ -63120,212 +63495,131 @@ const DocumentSection = Node$1.create({
           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",
+      Attribute2.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", Attribute2.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;
@@ -70175,6 +70469,7 @@ const getStarterExtensions = () => {
     Search,
     StructuredContent,
     StructuredContentBlock,
+    StructuredContentCommands,
     DocumentSection,
     NodeResizer,
     CustomSelection,