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

package/dist/super-editor/chunks/{editor-BC2sSIVa.js → editor-YR4uV-dp.js}

@@ -9,12 +9,12 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("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(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(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;
 import * as Y from "yjs";
 import { UndoManager, Item as Item$1, ContentType, Text as Text$1, XmlElement, encodeStateAsUpdate } from "yjs";
-import { P as PluginKey, a as Plugin, M as Mapping, N as NodeSelection, S as Selection, T as TextSelection, b as Slice, D as DOMSerializer, F as Fragment, c as DOMParser$1, d as Mark$1, e as dropPoint, A as AllSelection, p as process$1, B as Buffer2, f as callOrGet, g as getExtensionConfigField, h as getMarkType, i as getMarksFromSelection, j as getNodeType, k as getSchemaTypeNameByName, l as Schema$1, m as cleanSchemaItem, n as canSplit, o as defaultBlockAt$1, q as liftTarget, r as canJoin, s as joinPoint, t as replaceStep$1, R as ReplaceAroundStep$1, u as isTextSelection, v as getMarkRange, w as isMarkActive, x as isNodeActive, y as deleteProps, z as processContent, C as ReplaceStep, E as NodeRange, G as findWrapping, L as ListHelpers, H as findParentNode, I as isMacOS, J as isIOS, K as getSchemaTypeByName, O as inputRulesPlugin, Q as TrackDeleteMarkName, U as TrackInsertMarkName, V as v4, W as TrackFormatMarkName, X as comments_module_events, Y as findMark, Z as objectIncludes, _ as AddMarkStep, $ as RemoveMarkStep, a0 as twipsToLines, a1 as pixelsToTwips, a2 as helpers, a3 as posToDOMRect, a4 as CommandService, a5 as SuperConverter, a6 as createDocument, a7 as createDocFromMarkdown, a8 as createDocFromHTML, a9 as EditorState, aa as hasSomeParentWithClass, ab as isActive, ac as unflattenListsInHtml, ad as parseSizeUnit, ae as minMax, af as getLineHeightValueString, ag as InputRule, ah as kebabCase, ai as findParentNodeClosestToPos, aj as getListItemStyleDefinitions, ak as docxNumberigHelpers, al as parseIndentElement, am as combineIndents, an as SelectionRange, ao as Transform, ap as isInTable$1, aq as generateDocxRandomId, ar as insertNewRelationship, as as updateDOMAttributes, at as htmlHandler } from "./converter-BcqEfCTg.js";
+import { P as PluginKey, a as Plugin, M as Mapping, N as NodeSelection, S as Selection, T as TextSelection, b as Slice, D as DOMSerializer, F as Fragment, c as DOMParser$1, d as Mark$1, e as dropPoint, A as AllSelection, p as process$1, B as Buffer2, f as callOrGet, g as getExtensionConfigField, h as getMarkType, i as getMarksFromSelection, j as getNodeType, k as getSchemaTypeNameByName, l as Schema$1, m as cleanSchemaItem, n as canSplit, o as defaultBlockAt$1, q as liftTarget, r as canJoin, s as joinPoint, t as replaceStep$1, R as ReplaceAroundStep$1, u as isTextSelection, v as getMarkRange, w as isMarkActive, x as isNodeActive, y as deleteProps, z as processContent, C as ReplaceStep, E as NodeRange, G as findWrapping, L as ListHelpers, H as findParentNode, I as isMacOS, J as isIOS, K as getSchemaTypeByName, O as inputRulesPlugin, Q as TrackDeleteMarkName, U as TrackInsertMarkName, V as v4, W as TrackFormatMarkName, X as comments_module_events, Y as findMark, Z as objectIncludes, _ as AddMarkStep, $ as RemoveMarkStep, a0 as twipsToLines, a1 as pixelsToTwips, a2 as helpers, a3 as posToDOMRect, a4 as CommandService, a5 as SuperConverter, a6 as createDocument, a7 as createDocFromMarkdown, a8 as createDocFromHTML, a9 as EditorState, aa as hasSomeParentWithClass, ab as isActive, ac as unflattenListsInHtml, ad as parseSizeUnit, ae as minMax, af as getLineHeightValueString, ag as updateDOMAttributes, ah as findChildren$5, ai as htmlHandler, aj as InputRule, ak as kebabCase, al as findParentNodeClosestToPos, am as getListItemStyleDefinitions, an as docxNumberigHelpers, ao as parseIndentElement, ap as combineIndents, aq as SelectionRange, ar as Transform, as as isInTable$1, at as generateDocxRandomId, au as insertNewRelationship } from "./converter-DK1NMJZB.js";
 import { ref, computed, createElementBlock, openBlock, withModifiers, Fragment as Fragment$1, renderList, normalizeClass, createCommentVNode, toDisplayString, createElementVNode, createApp } from "vue";
-import { D as DocxZipper } from "./docx-zipper-DZ9ph0iQ.js";
+import { D as DocxZipper } from "./docx-zipper-CmK8TyNb.js";
 var GOOD_LEAF_SIZE = 200;
 var RopeSequence = function RopeSequence2() {
 };
@@ -11675,9 +11675,11 @@ const toggleHeaderFooterEditMode = ({ editor, focusedSectionEditor, isEditMode,
     item.editor.view.dom.setAttribute("documentmode", documentMode);
   });
   if (isEditMode) {
-    const pm = document.querySelector(".ProseMirror");
-    pm.classList.add("header-footer-edit");
-    pm.setAttribute("aria-readonly", true);
+    const pm = editor.view?.dom || editor.options.element?.querySelector?.(".ProseMirror");
+    if (pm) {
+      pm.classList.add("header-footer-edit");
+      pm.setAttribute("aria-readonly", true);
+    }
   }
   if (focusedSectionEditor) {
     focusedSectionEditor.view.focus();
@@ -12105,28 +12107,25 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
   if (emitParams) editor.emit("commentsUpdate", emitParams);
   return newTrackedChanges;
 };
-const getTrackedChangeText = ({ state, node, mark, marks, trackedChangeType, isDeletionInsertion }) => {
+const getTrackedChangeText = ({ state, nodes, mark, marks, trackedChangeType, isDeletionInsertion }) => {
   let trackedChangeText = "";
   let deletionText = "";
   if (trackedChangeType === TrackInsertMarkName) {
-    trackedChangeText = node?.text ?? "";
+    trackedChangeText = nodes.reduce((acc, node) => {
+      if (!node.marks.find((nodeMark) => nodeMark.type.name === mark.type.name)) return acc;
+      acc += node?.text || node?.textContent || "";
+      return acc;
+    }, "");
   }
   if (trackedChangeType === TrackFormatMarkName) {
     trackedChangeText = translateFormatChangesToEnglish(mark.attrs);
   }
   if (trackedChangeType === TrackDeleteMarkName || isDeletionInsertion) {
-    deletionText = node?.text ?? "";
-    if (isDeletionInsertion) {
-      let { id } = marks.deletionMark.attrs;
-      let deletionNode = findNode$1(state.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,
@@ -12141,18 +12140,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,
@@ -12182,14 +12180,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 found = null;
-  node.descendants((node2, pos) => {
-    if (predicate(node2)) found = { node: node2, pos };
-    if (found) return false;
-  });
-  return found;
-}
 function findRangeById(doc2, id) {
   let from2 = null, to = null;
   doc2.descendants((node, pos) => {
@@ -12707,6 +12697,7 @@ const generateTableIfNecessary = ({ tableNode, annotationValues, tr, state }) =>
     const mappedRowStart = tr.mapping.map(absoluteRowStart);
     const rowEnd = mappedRowStart + rowNode.nodeSize;
     tr.replaceWith(mappedRowStart, rowEnd, Fragment.from(newRows));
+    tr.setMeta("tableGeneration", true);
   } catch (error) {
     console.error("Error during row generation:", error);
     throw error;
@@ -13111,7 +13102,7 @@ function findFieldAnnotationsBetween(from2, to, doc2) {
 }
 function findRemovedFieldAnnotations(tr) {
   let removedNodes = [];
-  if (!tr.steps.length || tr.meta && !Object.keys(tr.meta).every((meta) => ["inputType", "uiEvent", "paste"].includes(meta)) || ["historyUndo", "historyRedo"].includes(tr.getMeta("inputType")) || ["drop"].includes(tr.getMeta("uiEvent")) || tr.getMeta("fieldAnnotationUpdate") === true) {
+  if (!tr.steps.length || tr.meta && !Object.keys(tr.meta).every((meta) => ["inputType", "uiEvent", "paste"].includes(meta)) || ["historyUndo", "historyRedo"].includes(tr.getMeta("inputType")) || ["drop"].includes(tr.getMeta("uiEvent")) || tr.getMeta("fieldAnnotationUpdate") === true || tr.getMeta("tableGeneration") === true) {
     return removedNodes;
   }
   const hasDeletion = transactionDeletedAnything(tr);
@@ -14332,7 +14323,7 @@ const _Editor = class _Editor extends EventEmitter {
   setDocumentMode(documentMode) {
     let cleanedMode = documentMode?.toLowerCase() || "editing";
     if (!this.extensionService || !this.state) return;
-    const pm = document.querySelector(".ProseMirror");
+    const pm = this.view?.dom || this.options.element?.querySelector?.(".ProseMirror");
     if (this.options.role === "viewer") cleanedMode = "viewing";
     if (this.options.role === "suggester" && cleanedMode === "editing") cleanedMode = "suggesting";
     if (cleanedMode === "viewing") {
@@ -14820,7 +14811,8 @@ const _Editor = class _Editor extends EventEmitter {
             files: this.options.content
           },
           media,
-          true
+          true,
+          updatedDocs
         );
         return updatedDocs;
       }
@@ -15380,9 +15372,11 @@ createView_fn = function(element) {
           isEditMode: false,
           documentMode: this.options.documentMode
         });
-        const pm = document.querySelector(".ProseMirror");
-        pm.classList.remove("header-footer-edit");
-        pm.setAttribute("aria-readonly", false);
+        const pm = this.view?.dom || this.options.element?.querySelector?.(".ProseMirror");
+        if (pm) {
+          pm.classList.remove("header-footer-edit");
+          pm.setAttribute("aria-readonly", false);
+        }
       }
       setWordSelection(view, pos);
     }
@@ -16973,580 +16967,1590 @@ 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(this, "node");
+    __publicField(this, "view");
+    __publicField(this, "getPos");
+    __publicField(this, "decorations");
+    __publicField(this, "innerDecorations");
+    __publicField(this, "editor");
+    __publicField(this, "extension");
+    __publicField(this, "htmlAttributes");
+    __publicField(this, "root");
+    __publicField(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, view, tr } = props;
-  const { $from, empty: empty2 } = state.selection;
-  if (!empty2) return false;
-  if ($from.parent.type.name !== "run") return false;
-  const handled = splitBlock(state, (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 = Attribute.getAttributesToRender(this.node, extensionAttrs);
+  }
+  createDragHandle() {
+    const dragHandle = document.createElement("span");
+    dragHandle.classList.add("sd-structured-content-draggable");
+    dragHandle.draggable = true;
+    dragHandle.contentEditable = "false";
+    dragHandle.dataset.dragHandle = "";
+    const textElement = document.createElement("span");
+    textElement.textContent = this.node.attrs.alias || "Structured content";
+    dragHandle.append(textElement);
+    return dragHandle;
+  }
+  onDragStart(event) {
+    const { view } = this.editor;
+    const target = event.target;
+    const dragHandle = target.nodeType === 3 ? target.parentElement?.closest("[data-drag-handle]") : target.closest("[data-drag-handle]");
+    if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
+      return;
+    }
+    let x = 0;
+    let y = 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;
+      y = handleBox.y - domBox.y + offsetY;
+    }
+    event.dataTransfer?.setDragImage(this.dom, x, y);
+    const pos = this.getPos();
+    if (typeof pos !== "number") {
+      return;
+    }
+    const selection = NodeSelection.create(view.state.doc, pos);
+    const transaction = view.state.tr.setSelection(selection);
     view.dispatch(transaction);
-  });
-  if (handled) {
-    tr.setMeta("preventDispatch", true);
   }
-  return handled;
-};
-const Run = OxmlNode.create({
-  name: "run",
-  oXmlName: "w:r",
-  group: "inline",
+}
+class StructuredContentInlineView extends StructuredContentViewBase {
+  constructor(props) {
+    super(props);
+  }
+  mount() {
+    this.buildView();
+  }
+  get contentDOM() {
+    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
+    return contentElement || null;
+  }
+  createElement() {
+    const element = document.createElement("span");
+    element.classList.add(structuredContentClass$1);
+    element.setAttribute("data-structured-content", "");
+    const contentElement = document.createElement("span");
+    contentElement.classList.add(structuredContentInnerClass$1);
+    element.append(contentElement);
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(element, { ...domAttrs });
+    return { element, contentElement };
+  }
+  buildView() {
+    const { element } = this.createElement();
+    const dragHandle = this.createDragHandle();
+    element.prepend(dragHandle);
+    element.addEventListener("dragstart", (e) => this.onDragStart(e));
+    this.root = element;
+  }
+  updateView() {
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(this.dom, { ...domAttrs });
+  }
+  update(node, decorations, innerDecorations) {
+    const result = super.update(node, decorations, innerDecorations);
+    if (!result) return false;
+    this.updateView();
+    return true;
+  }
+}
+const structuredContentClass$1 = "sd-structured-content";
+const structuredContentInnerClass$1 = "sd-structured-content__content";
+const StructuredContent = Node$1.create({
+  name: "structuredContent",
+  group: "inline structuredContent",
   inline: true,
   content: "inline*",
-  selectable: false,
-  childToAttributes: ["runProperties"],
+  isolating: true,
+  atom: false,
+  // false - has editable content.
+  draggable: true,
   addOptions() {
     return {
       htmlAttributes: {
-        "data-run": "1"
+        class: structuredContentClass$1,
+        "aria-label": "Structured content node"
       }
     };
   },
   addAttributes() {
     return {
-      runProperties: {
+      id: {
         default: null,
-        rendered: false,
-        keepOnSplit: true
+        parseDOM: (elem) => elem.getAttribute("data-id"),
+        renderDOM: (attrs) => {
+          if (!attrs.id) return {};
+          return { "data-id": attrs.id };
+        }
       },
-      rsidR: {
+      tag: {
         default: null,
-        rendered: false,
-        keepOnSplit: true
+        parseDOM: (elem) => elem.getAttribute("data-tag"),
+        renderDOM: (attrs) => {
+          if (!attrs.tag) return {};
+          return { "data-tag": attrs.tag };
+        }
       },
-      rsidRPr: {
+      alias: {
         default: null,
-        rendered: false,
-        keepOnSplit: true
+        parseDOM: (elem) => elem.getAttribute("data-alias"),
+        renderDOM: (attrs) => {
+          if (!attrs.alias) return {};
+          return { "data-alias": attrs.alias };
+        }
       },
-      rsidDel: {
-        default: null,
-        rendered: false,
-        keepOnSplit: true
+      sdtPr: {
+        rendered: false
       }
     };
   },
-  addCommands() {
-    return {
-      splitRun
-    };
-  },
   parseDOM() {
-    return [{ tag: "span[data-run]" }];
+    return [{ tag: "span[data-structured-content]" }];
   },
   renderDOM({ htmlAttributes }) {
-    const base2 = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-    return ["span", base2, 0];
+    return [
+      "span",
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+        "data-structured-content": ""
+      }),
+      0
+    ];
+  },
+  addNodeView() {
+    return (props) => {
+      return new StructuredContentInlineView({ ...props });
+    };
   }
 });
-const inputRegex$1 = /^\s*([-+*])\s$/;
-const BulletList = Node$1.create({
-  name: "bulletList",
-  group: "block list",
-  selectable: false,
-  content() {
-    return `${this.options.itemTypeName}+`;
-  },
+class StructuredContentBlockView extends StructuredContentViewBase {
+  constructor(props) {
+    super(props);
+  }
+  mount() {
+    this.buildView();
+  }
+  get contentDOM() {
+    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
+    return contentElement || null;
+  }
+  createElement() {
+    const element = document.createElement("div");
+    element.classList.add(structuredContentClass);
+    element.setAttribute("data-structured-content-block", "");
+    const contentElement = document.createElement("div");
+    contentElement.classList.add(structuredContentInnerClass);
+    element.append(contentElement);
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(element, { ...domAttrs });
+    return { element, contentElement };
+  }
+  buildView() {
+    const { element } = this.createElement();
+    const dragHandle = this.createDragHandle();
+    element.prepend(dragHandle);
+    element.addEventListener("dragstart", (e) => this.onDragStart(e));
+    this.root = element;
+  }
+  updateView() {
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(this.dom, { ...domAttrs });
+  }
+  update(node, decorations, innerDecorations) {
+    const result = super.update(node, decorations, innerDecorations);
+    if (!result) return false;
+    this.updateView();
+    return true;
+  }
+}
+const structuredContentClass = "sd-structured-content-block";
+const structuredContentInnerClass = "sd-structured-content-block__content";
+const StructuredContentBlock = Node$1.create({
+  name: "structuredContentBlock",
+  group: "block structuredContent",
+  content: "block*",
+  isolating: true,
+  atom: false,
+  // false - has editable content.
+  draggable: true,
   addOptions() {
     return {
-      itemTypeName: "listItem",
       htmlAttributes: {
-        "aria-label": "Bullet list node"
-      },
-      keepMarks: true,
-      keepAttributes: false
+        class: structuredContentClass,
+        "aria-label": "Structured content block node"
+      }
     };
   },
-  parseDOM() {
-    return [{ tag: "ul" }];
-  },
-  renderDOM({ htmlAttributes }) {
-    const attributes = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
-    return ["ul", attributes, 0];
-  },
   addAttributes() {
     return {
-      "list-style-type": {
-        default: "bullet",
-        rendered: false
+      id: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-id"),
+        renderDOM: (attrs) => {
+          if (!attrs.id) return {};
+          return { "data-id": attrs.id };
+        }
       },
-      listId: {
-        rendered: false
+      tag: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-tag"),
+        renderDOM: (attrs) => {
+          if (!attrs.tag) return {};
+          return { "data-tag": attrs.tag };
+        }
       },
-      sdBlockId: {
+      alias: {
         default: null,
-        keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+        parseDOM: (elem) => elem.getAttribute("data-alias"),
         renderDOM: (attrs) => {
-          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+          if (!attrs.alias) return {};
+          return { "data-alias": attrs.alias };
         }
       },
-      attributes: {
-        rendered: false,
-        keepOnSplit: true
+      sdtPr: {
+        rendered: false
       }
     };
   },
+  parseDOM() {
+    return [{ tag: "div[data-structured-content-block]" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    return [
+      "div",
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+        "data-structured-content-block": ""
+      }),
+      0
+    ];
+  },
+  addNodeView() {
+    return (props) => {
+      return new StructuredContentBlockView({ ...props });
+    };
+  }
+});
+function getStructuredContentTagsById(idOrIds, state) {
+  const result = findChildren$5(state.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(state) {
+  const result = findChildren$5(state.doc, (node) => {
+    return node.type.name === "structuredContent" || node.type.name === "structuredContentBlock";
+  });
+  return result;
+}
+function getStructuredContentInlineTags(state) {
+  const result = findChildren$5(state.doc, (node) => node.type.name === "structuredContent");
+  return result;
+}
+function getStructuredContentBlockTags(state) {
+  const result = findChildren$5(state.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() {
-    return {
-      "Mod-Shift-8": () => {
-        return this.editor.commands.toggleBulletList();
-      }
-    };
-  },
-  addInputRules() {
-    return [
-      new InputRule({
-        match: inputRegex$1,
-        handler: ({ state, range }) => {
-          const $pos = state.selection.$from;
-          const listItemType = state.schema.nodes.listItem;
-          for (let depth = $pos.depth; depth >= 0; depth--) {
-            if ($pos.node(depth).type === listItemType) {
-              return null;
-            }
+      insertStructuredContentInline: (options = {}) => ({ editor, dispatch, state, tr }) => {
+        const { schema } = editor;
+        let { from: from2, to } = state.selection;
+        if (dispatch) {
+          const selectionText = state.doc.textBetween(from2, to);
+          let content = null;
+          if (selectionText) {
+            content = schema.text(selectionText);
           }
-          const { tr } = state;
-          tr.delete(range.from, range.to);
-          ListHelpers.createNewList({
-            listType: this.type,
-            tr,
-            editor: this.editor
-          });
-        }
-      })
-    ];
-  }
-});
-const inputRegex = /^(\d+)\.\s$/;
-const OrderedList = Node$1.create({
-  name: "orderedList",
-  group: "block list",
-  selectable: false,
-  content() {
-    return `${this.options.itemTypeName}+`;
-  },
-  addOptions() {
-    return {
-      itemTypeName: "listItem",
-      htmlAttributes: {
-        "aria-label": "Ordered list node"
-      },
-      keepMarks: true,
-      keepAttributes: false,
-      listStyleTypes: ["decimal", "lowerAlpha", "lowerRoman"]
-    };
-  },
-  addAttributes() {
-    return {
-      order: {
-        default: 1,
-        parseDOM: (element) => {
-          return element.hasAttribute("start") ? parseInt(element.getAttribute("start") || "", 10) : 1;
-        },
-        renderDOM: (attrs) => {
-          return {
-            start: attrs.order
+          if (options.text) {
+            content = schema.text(options.text);
+          }
+          if (options.json) {
+            content = schema.nodeFromJSON(options.json);
+          }
+          if (!content) {
+            content = schema.text(" ");
+          }
+          const attrs = {
+            ...options.attrs,
+            id: options.attrs?.id || randomId(),
+            tag: "inline_text_sdt",
+            alias: options.attrs?.alias || "Structured content"
           };
+          const node = schema.nodes.structuredContent.create(attrs, content, null);
+          const parent = findParentNode((node2) => node2.type.name === "structuredContent")(state.selection);
+          if (parent) {
+            const insertPos = parent.pos + parent.node.nodeSize;
+            from2 = to = insertPos;
+          }
+          tr.replaceWith(from2, to, node);
         }
+        return true;
       },
-      sdBlockId: {
-        default: null,
-        keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
-        renderDOM: (attrs) => {
-          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
-        }
-      },
-      syncId: {
-        default: null,
-        parseDOM: (elem) => elem.getAttribute("data-sync-id"),
-        renderDOM: (attrs) => {
-          if (!attrs.syncId) return {};
-          return {
-            "data-sync-id": attrs.syncId
+      /**
+       * Inserts a structured content block at selection.
+       * @category Command
+       * @param {StructuredContentBlockInsert} options
+       */
+      insertStructuredContentBlock: (options = {}) => ({ editor, dispatch, state, tr }) => {
+        const { schema } = editor;
+        let { from: from2, to } = state.selection;
+        if (dispatch) {
+          const selectionContent = state.selection.content();
+          let content = null;
+          if (selectionContent.size) {
+            content = selectionContent.content;
+          }
+          if (options.html) {
+            const html = htmlHandler(options.html, editor);
+            const doc2 = DOMParser$1.fromSchema(schema).parse(html);
+            content = doc2.content;
+          }
+          if (options.json) {
+            content = schema.nodeFromJSON(options.json);
+          }
+          if (!content) {
+            content = schema.nodeFromJSON({ type: "paragraph", content: [] });
+          }
+          const attrs = {
+            ...options.attrs,
+            id: options.attrs?.id || randomId(),
+            tag: "block_table_sdt",
+            alias: options.attrs?.alias || "Structured content"
           };
+          const node = schema.nodes.structuredContentBlock.create(attrs, content, null);
+          const parent = findParentNode((node2) => node2.type.name === "structuredContentBlock")(state.selection);
+          if (parent) {
+            const insertPos = parent.pos + parent.node.nodeSize;
+            from2 = to = insertPos;
+          }
+          tr.replaceRangeWith(from2, to, node);
         }
-        // rendered: false,
+        return true;
       },
-      listId: {
-        keepOnSplit: true,
-        parseDOM: (elem) => elem.getAttribute("data-list-id"),
-        renderDOM: (attrs) => {
-          if (!attrs.listId) return {};
-          return {
-            "data-list-id": attrs.listId
-          };
+      /**
+       * 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, tr }) => {
+        const structuredContentTags = getStructuredContentTagsById(id, state);
+        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;
       },
-      "list-style-type": {
-        default: "decimal",
-        rendered: false
-      },
-      attributes: {
-        rendered: false,
-        keepOnSplit: true
-      }
-    };
-  },
-  parseDOM() {
-    return [{ tag: "ol" }];
-  },
-  renderDOM({ htmlAttributes }) {
-    const { start: start2, ...restAttributes } = htmlAttributes;
-    return start2 === 1 ? ["ol", Attribute.mergeAttributes(this.options.htmlAttributes, restAttributes), 0] : ["ol", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-  },
-  addCommands() {
-    return {
       /**
-       * Toggle ordered list formatting
+       * Removes a structured content.
        * @category Command
-       * @example
-       * editor.commands.toggleOrderedList()
-       * @note Converts selection to ordered list or back to paragraphs
+       * @param {Array<{ node: Node, pos: number }>} structuredContentTags
        */
-      toggleOrderedList: () => (params2) => {
-        return toggleList(this.type)(params2);
+      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;
       },
       /**
-       * Restart list node numbering
+       * Removes a structured content by ID.
        * @category Command
-       * @param {Array} followingNodes - Nodes to restart
-       * @param {number} pos - Starting position
-       * @example
-       * editor.commands.restartListNodes(nodes, position)
-       * @note Resets list numbering for specified nodes
+       * @param {string | string[]} idOrIds
        */
-      restartListNodes: (followingNodes, pos) => ({ tr }) => {
-        let currentNodePos = pos;
-        const nodes = followingNodes.map((node) => {
-          const resultNode = {
-            node,
-            pos: currentNodePos
-          };
-          currentNodePos += node.nodeSize;
-          return resultNode;
-        });
-        nodes.forEach((item) => {
-          const { pos: pos2 } = item;
-          const newPos = tr.mapping.map(pos2);
-          tr.setNodeMarkup(newPos, void 0, {});
-        });
+      deleteStructuredContentById: (idOrIds) => ({ dispatch, state, tr }) => {
+        const structuredContentTags = getStructuredContentTagsById(idOrIds, state);
+        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;
       },
       /**
-       * Update ordered list style type based on nesting level
+       * Removes a structured content at cursor, preserving its content.
        * @category Command
-       * @example
-       * editor.commands.updateOrderedListStyleType()
-       * @note Cycles through decimal -> lowerAlpha -> lowerRoman based on depth
        */
-      updateOrderedListStyleType: () => ({ dispatch, tr }) => {
-        let list = findParentNode((node) => node.type.name === this.name)(tr.selection);
-        if (!list) {
+      deleteStructuredContentAtSelection: () => ({ editor, dispatch, state, tr }) => {
+        const predicate = (node) => STRUCTURED_CONTENT_NAMES.includes(node.type.name);
+        const structuredContent = findParentNode(predicate)(state.selection);
+        if (!structuredContent) {
           return true;
         }
         if (dispatch) {
-          let listLevel = (list.depth - 1) / 2;
-          let listStyleTypes = this.options.listStyleTypes;
-          let listStyle = listStyleTypes[listLevel % listStyleTypes.length];
-          let currentListStyle = list.node.attrs["list-style-type"];
-          let nodeAtPos = tr.doc.nodeAt(list.pos);
-          if (currentListStyle !== listStyle && nodeAtPos.eq(list.node)) {
-            tr.setNodeMarkup(list.pos, void 0, {
-              ...list.node.attrs,
-              ...{
-                "list-style-type": listStyle
-              }
-            });
-          }
+          const { node, pos } = structuredContent;
+          const posFrom = pos;
+          const posTo = posFrom + node.nodeSize;
+          const content = node.content;
+          tr.replaceWith(posFrom, posTo, content);
         }
         return true;
       }
     };
   },
-  addShortcuts() {
+  addHelpers() {
     return {
-      "Mod-Shift-7": () => {
-        return this.editor.commands.toggleOrderedList();
-      }
+      ...structuredContentHelpers
     };
-  },
-  addInputRules() {
-    return [
-      new InputRule({
-        match: inputRegex,
-        handler: ({ state, range }) => {
-          const $pos = state.selection.$from;
-          const listItemType = state.schema.nodes.listItem;
-          for (let depth = $pos.depth; depth >= 0; depth--) {
-            if ($pos.node(depth).type === listItemType) {
-              return null;
-            }
-          }
-          const { tr } = state;
-          tr.delete(range.from, range.to);
-          ListHelpers.createNewList({
-            listType: this.type,
-            tr,
-            editor: this.editor
-          });
-        }
-      })
-    ];
   }
 });
-const generateOrderedListIndex = ({ listLevel, lvlText, listNumberingType, customFormat }) => {
-  const handler = listIndexMap[listNumberingType];
-  return handler ? handler(listLevel, lvlText, customFormat) : null;
-};
-const handleDecimal = (path, lvlText) => generateNumbering(path, lvlText, String);
-const handleRoman = (path, lvlText) => generateNumbering(path, lvlText, intToRoman);
-const handleLowerRoman = (path, lvlText) => handleRoman(path, lvlText).toLowerCase();
-const handleLowerAlpha = (path, lvlText) => handleAlpha(path, lvlText).toLowerCase();
-const handleAlpha = (path, lvlText) => generateNumbering(path, lvlText, (p) => intToAlpha(p));
-const handleOrdinal = (path, lvlText) => generateNumbering(path, lvlText, ordinalFormatter);
-const handleCustom = (path, lvlText, customFormat) => generateFromCustom(path, lvlText, customFormat);
-const handleJapaneseCounting = (path, lvlText) => generateNumbering(path, lvlText, intToJapaneseCounting);
-const listIndexMap = {
-  decimal: handleDecimal,
-  lowerRoman: handleLowerRoman,
-  upperRoman: handleRoman,
-  lowerLetter: handleLowerAlpha,
-  upperLetter: handleAlpha,
-  ordinal: handleOrdinal,
-  custom: handleCustom,
-  japaneseCounting: handleJapaneseCounting
-};
-const createNumbering = (values, lvlText) => {
-  return values.reduce((acc, value, index2) => {
-    return value > 9 ? acc.replace(/^0/, "").replace(`%${index2 + 1}`, value) : acc.replace(`%${index2 + 1}`, value);
-  }, lvlText);
+const randomId = () => {
+  return Math.floor(Math.random() * 4294967295).toString();
 };
-const generateNumbering = (path, lvlText, formatter) => {
-  const formattedValues = path.map(formatter);
-  return createNumbering(formattedValues, lvlText);
-};
-const ordinalFormatter = (level) => {
-  const suffixes = ["th", "st", "nd", "rd"];
-  const value = level % 100;
-  const suffix = suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
-  const p = level + suffix;
-  return p;
-};
-const generateFromCustom = (path, lvlText, customFormat) => {
-  if (customFormat !== "001, 002, 003, ...") return generateNumbering(path, lvlText, String);
-  const match = customFormat.match(/(\d+)/);
-  if (!match) throw new Error("Invalid format string: no numeric pattern found");
-  const sample = match[1];
-  const digitCount = sample.length;
-  const index2 = path.pop();
-  return String(index2).padStart(digitCount, "0");
-};
-const intToRoman = (num) => {
-  const romanNumeralMap = [
-    { value: 1e3, numeral: "M" },
-    { value: 900, numeral: "CM" },
-    { value: 500, numeral: "D" },
-    { value: 400, numeral: "CD" },
-    { value: 100, numeral: "C" },
-    { value: 90, numeral: "XC" },
-    { value: 50, numeral: "L" },
-    { value: 40, numeral: "XL" },
-    { value: 10, numeral: "X" },
-    { value: 9, numeral: "IX" },
-    { value: 5, numeral: "V" },
-    { value: 4, numeral: "IV" },
-    { value: 1, numeral: "I" }
-  ];
-  let result = "";
-  for (const { value, numeral } of romanNumeralMap) {
-    while (num >= value) {
-      result += numeral;
-      num -= value;
-    }
+class DocumentSectionView {
+  constructor(node, getPos, decorations, editor) {
+    __privateAdd(this, _DocumentSectionView_instances);
+    this.node = node;
+    this.editor = editor;
+    this.decorations = decorations;
+    this.view = editor.view;
+    this.getPos = getPos;
+    __privateMethod(this, _DocumentSectionView_instances, init_fn2).call(this);
   }
-  return result;
+}
+_DocumentSectionView_instances = 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(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);
 };
-const intToAlpha = (num) => {
-  let result = "";
-  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-  while (num > 0) {
-    let index2 = (num - 1) % 26;
-    result = alphabet[index2] + result;
-    num = Math.floor((num - 1) / 26);
-  }
-  return result;
+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 intToJapaneseCounting = (num) => {
-  const digits = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
-  const units = ["", "十", "百", "千"];
-  if (num === 0) return "零";
-  if (num < 10) return digits[num];
-  let result = "";
-  let tempNum = num;
-  let unitIndex = 0;
-  while (tempNum > 0) {
-    const digit = tempNum % 10;
-    if (digit !== 0) {
-      const digitStr = digit === 1 && unitIndex > 0 ? "" : digits[digit];
-      result = digitStr + (unitIndex > 0 ? units[unitIndex] : "") + result;
-    } else if (result && tempNum > 0) {
-      if (!result.startsWith("零") && tempNum % 100 !== 0) {
-        result = "零" + result;
-      }
+const getAllSections = (editor) => {
+  if (!editor) return [];
+  const type = editor.schema.nodes.documentSection;
+  if (!type) return [];
+  const sections = [];
+  const { state } = editor;
+  state.doc.descendants((node, pos) => {
+    if (node.type.name === type.name) {
+      sections.push({ node, pos });
     }
-    tempNum = Math.floor(tempNum / 10);
-    unitIndex++;
-    if (unitIndex > 3) break;
-  }
-  if (num >= 10 && num < 20) {
-    result = result.replace(/^一十/, "十");
-  }
+  });
+  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 CustomSelectionPluginKey = new PluginKey("CustomSelection");
-const shouldAllowNativeContextMenu = (event) => {
-  if (!event) return false;
-  if (event.ctrlKey || event.metaKey) {
-    return true;
-  }
-  const isKeyboardInvocation = event.type === "contextmenu" && typeof event.detail === "number" && event.detail === 0 && (event.button === 0 || event.button === void 0) && event.clientX === 0 && event.clientY === 0;
-  return Boolean(isKeyboardInvocation);
+const 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 handleClickOutside = (event, editor) => {
-  const editorElem = editor?.options?.element;
-  if (!editorElem) return;
-  const isInsideEditor = editorElem?.contains(event.target);
-  if (!isInsideEditor) {
-    editor.setOptions({
-      focusTarget: event.target
-    });
-  } else {
-    editor.setOptions({
-      focusTarget: null
+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;
 };
-function getFocusMeta(tr) {
-  return tr.getMeta(CustomSelectionPluginKey);
-}
-function setFocusMeta(tr, value) {
-  return tr.setMeta(CustomSelectionPluginKey, value);
-}
-function getFocusState(state) {
-  return CustomSelectionPluginKey.getState(state);
-}
-const isToolbarInput = (target) => {
-  return !!target?.closest(".button-text-input") || target?.classList?.contains("button-text-input");
+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 isToolbarButton = (target) => {
-  return !!target?.closest(".toolbar-button") || target?.classList?.contains("toolbar-button");
+const SectionHelpers = {
+  getAllSections,
+  exportSectionsToHTML,
+  exportSectionsToJSON,
+  getLinkedSectionEditor
 };
-const CustomSelection = Extension.create({
-  name: "customSelection",
-  addPmPlugins() {
-    const editor = this.editor;
-    const customSelectionPlugin = new Plugin({
-      key: CustomSelectionPluginKey,
-      state: {
-        init: () => ({
-          focused: false,
-          preservedSelection: null,
-          showVisualSelection: false
-        }),
-        apply: (tr, value) => {
-          const meta = getFocusMeta(tr);
-          if (meta !== void 0) {
-            return { ...value, ...meta };
-          }
-          return value;
+const DocumentSection = Node$1.create({
+  name: "documentSection",
+  group: "block",
+  content: "block*",
+  atom: true,
+  isolating: true,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        class: "sd-document-section-block",
+        "aria-label": "Structured content block"
+      }
+    };
+  },
+  parseDOM() {
+    return [
+      {
+        tag: "div.sd-document-section-block",
+        priority: 60
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  },
+  addAttributes() {
+    return {
+      id: {},
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
         }
       },
-      view: () => {
-        const clickHandler = (event) => handleClickOutside(event, editor);
-        document?.addEventListener("mousedown", clickHandler);
-        return {
-          destroy: () => {
-            document?.removeEventListener("mousedown", clickHandler);
-          }
-        };
-      },
+      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, dispatch, editor }) => {
+        const { selection } = state;
+        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, view, tr } = props;
+  const { $from, empty: empty2 } = state.selection;
+  if (!empty2) return false;
+  if ($from.parent.type.name !== "run") return false;
+  const handled = splitBlock(state, (transaction) => {
+    view.dispatch(transaction);
+  });
+  if (handled) {
+    tr.setMeta("preventDispatch", true);
+  }
+  return handled;
+};
+const Run = OxmlNode.create({
+  name: "run",
+  oXmlName: "w:r",
+  group: "inline",
+  inline: true,
+  content: "inline*",
+  selectable: false,
+  childToAttributes: ["runProperties"],
+  addOptions() {
+    return {
+      htmlAttributes: {
+        "data-run": "1"
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      runProperties: {
+        default: null,
+        rendered: false,
+        keepOnSplit: true
+      },
+      rsidR: {
+        default: null,
+        rendered: false,
+        keepOnSplit: true
+      },
+      rsidRPr: {
+        default: null,
+        rendered: false,
+        keepOnSplit: true
+      },
+      rsidDel: {
+        default: null,
+        rendered: false,
+        keepOnSplit: true
+      }
+    };
+  },
+  addCommands() {
+    return {
+      splitRun
+    };
+  },
+  parseDOM() {
+    return [{ tag: "span[data-run]" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    const base2 = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+    return ["span", base2, 0];
+  }
+});
+const inputRegex$1 = /^\s*([-+*])\s$/;
+const BulletList = Node$1.create({
+  name: "bulletList",
+  group: "block list",
+  selectable: false,
+  content() {
+    return `${this.options.itemTypeName}+`;
+  },
+  addOptions() {
+    return {
+      itemTypeName: "listItem",
+      htmlAttributes: {
+        "aria-label": "Bullet list node"
+      },
+      keepMarks: true,
+      keepAttributes: false
+    };
+  },
+  parseDOM() {
+    return [{ tag: "ul" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    const attributes = Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes);
+    return ["ul", attributes, 0];
+  },
+  addAttributes() {
+    return {
+      "list-style-type": {
+        default: "bullet",
+        rendered: false
+      },
+      listId: {
+        rendered: false
+      },
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+        }
+      },
+      attributes: {
+        rendered: false,
+        keepOnSplit: true
+      }
+    };
+  },
+  addCommands() {
+    return {
+      /**
+       * Toggle a bullet list at the current selection
+       * @category Command
+       * @example
+       * // Toggle bullet list on selected text
+       * editor.commands.toggleBulletList()
+       * @note Converts selected paragraphs to list items or removes list formatting
+       */
+      toggleBulletList: () => (params2) => {
+        return toggleList(this.type)(params2);
+      }
+    };
+  },
+  addShortcuts() {
+    return {
+      "Mod-Shift-8": () => {
+        return this.editor.commands.toggleBulletList();
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      new InputRule({
+        match: inputRegex$1,
+        handler: ({ state, range }) => {
+          const $pos = state.selection.$from;
+          const listItemType = state.schema.nodes.listItem;
+          for (let depth = $pos.depth; depth >= 0; depth--) {
+            if ($pos.node(depth).type === listItemType) {
+              return null;
+            }
+          }
+          const { tr } = state;
+          tr.delete(range.from, range.to);
+          ListHelpers.createNewList({
+            listType: this.type,
+            tr,
+            editor: this.editor
+          });
+        }
+      })
+    ];
+  }
+});
+const inputRegex = /^(\d+)\.\s$/;
+const OrderedList = Node$1.create({
+  name: "orderedList",
+  group: "block list",
+  selectable: false,
+  content() {
+    return `${this.options.itemTypeName}+`;
+  },
+  addOptions() {
+    return {
+      itemTypeName: "listItem",
+      htmlAttributes: {
+        "aria-label": "Ordered list node"
+      },
+      keepMarks: true,
+      keepAttributes: false,
+      listStyleTypes: ["decimal", "lowerAlpha", "lowerRoman"]
+    };
+  },
+  addAttributes() {
+    return {
+      order: {
+        default: 1,
+        parseDOM: (element) => {
+          return element.hasAttribute("start") ? parseInt(element.getAttribute("start") || "", 10) : 1;
+        },
+        renderDOM: (attrs) => {
+          return {
+            start: attrs.order
+          };
+        }
+      },
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+        }
+      },
+      syncId: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-sync-id"),
+        renderDOM: (attrs) => {
+          if (!attrs.syncId) return {};
+          return {
+            "data-sync-id": attrs.syncId
+          };
+        }
+        // rendered: false,
+      },
+      listId: {
+        keepOnSplit: true,
+        parseDOM: (elem) => elem.getAttribute("data-list-id"),
+        renderDOM: (attrs) => {
+          if (!attrs.listId) return {};
+          return {
+            "data-list-id": attrs.listId
+          };
+        }
+      },
+      "list-style-type": {
+        default: "decimal",
+        rendered: false
+      },
+      attributes: {
+        rendered: false,
+        keepOnSplit: true
+      }
+    };
+  },
+  parseDOM() {
+    return [{ tag: "ol" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    const { start: start2, ...restAttributes } = htmlAttributes;
+    return start2 === 1 ? ["ol", Attribute.mergeAttributes(this.options.htmlAttributes, restAttributes), 0] : ["ol", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  },
+  addCommands() {
+    return {
+      /**
+       * Toggle ordered list formatting
+       * @category Command
+       * @example
+       * editor.commands.toggleOrderedList()
+       * @note Converts selection to ordered list or back to paragraphs
+       */
+      toggleOrderedList: () => (params2) => {
+        return toggleList(this.type)(params2);
+      },
+      /**
+       * Restart list node numbering
+       * @category Command
+       * @param {Array} followingNodes - Nodes to restart
+       * @param {number} pos - Starting position
+       * @example
+       * editor.commands.restartListNodes(nodes, position)
+       * @note Resets list numbering for specified nodes
+       */
+      restartListNodes: (followingNodes, pos) => ({ tr }) => {
+        let currentNodePos = pos;
+        const nodes = followingNodes.map((node) => {
+          const resultNode = {
+            node,
+            pos: currentNodePos
+          };
+          currentNodePos += node.nodeSize;
+          return resultNode;
+        });
+        nodes.forEach((item) => {
+          const { pos: pos2 } = item;
+          const newPos = tr.mapping.map(pos2);
+          tr.setNodeMarkup(newPos, void 0, {});
+        });
+        return true;
+      },
+      /**
+       * Update ordered list style type based on nesting level
+       * @category Command
+       * @example
+       * editor.commands.updateOrderedListStyleType()
+       * @note Cycles through decimal -> lowerAlpha -> lowerRoman based on depth
+       */
+      updateOrderedListStyleType: () => ({ dispatch, tr }) => {
+        let list = findParentNode((node) => node.type.name === this.name)(tr.selection);
+        if (!list) {
+          return true;
+        }
+        if (dispatch) {
+          let listLevel = (list.depth - 1) / 2;
+          let listStyleTypes = this.options.listStyleTypes;
+          let listStyle = listStyleTypes[listLevel % listStyleTypes.length];
+          let currentListStyle = list.node.attrs["list-style-type"];
+          let nodeAtPos = tr.doc.nodeAt(list.pos);
+          if (currentListStyle !== listStyle && nodeAtPos.eq(list.node)) {
+            tr.setNodeMarkup(list.pos, void 0, {
+              ...list.node.attrs,
+              ...{
+                "list-style-type": listStyle
+              }
+            });
+          }
+        }
+        return true;
+      }
+    };
+  },
+  addShortcuts() {
+    return {
+      "Mod-Shift-7": () => {
+        return this.editor.commands.toggleOrderedList();
+      }
+    };
+  },
+  addInputRules() {
+    return [
+      new InputRule({
+        match: inputRegex,
+        handler: ({ state, range }) => {
+          const $pos = state.selection.$from;
+          const listItemType = state.schema.nodes.listItem;
+          for (let depth = $pos.depth; depth >= 0; depth--) {
+            if ($pos.node(depth).type === listItemType) {
+              return null;
+            }
+          }
+          const { tr } = state;
+          tr.delete(range.from, range.to);
+          ListHelpers.createNewList({
+            listType: this.type,
+            tr,
+            editor: this.editor
+          });
+        }
+      })
+    ];
+  }
+});
+const generateOrderedListIndex = ({ listLevel, lvlText, listNumberingType, customFormat }) => {
+  const handler = listIndexMap[listNumberingType];
+  return handler ? handler(listLevel, lvlText, customFormat) : null;
+};
+const handleDecimal = (path, lvlText) => generateNumbering(path, lvlText, String);
+const handleRoman = (path, lvlText) => generateNumbering(path, lvlText, intToRoman);
+const handleLowerRoman = (path, lvlText) => handleRoman(path, lvlText).toLowerCase();
+const handleLowerAlpha = (path, lvlText) => handleAlpha(path, lvlText).toLowerCase();
+const handleAlpha = (path, lvlText) => generateNumbering(path, lvlText, (p) => intToAlpha(p));
+const handleOrdinal = (path, lvlText) => generateNumbering(path, lvlText, ordinalFormatter);
+const handleCustom = (path, lvlText, customFormat) => generateFromCustom(path, lvlText, customFormat);
+const handleJapaneseCounting = (path, lvlText) => generateNumbering(path, lvlText, intToJapaneseCounting);
+const listIndexMap = {
+  decimal: handleDecimal,
+  lowerRoman: handleLowerRoman,
+  upperRoman: handleRoman,
+  lowerLetter: handleLowerAlpha,
+  upperLetter: handleAlpha,
+  ordinal: handleOrdinal,
+  custom: handleCustom,
+  japaneseCounting: handleJapaneseCounting
+};
+const createNumbering = (values, lvlText) => {
+  return values.reduce((acc, value, index2) => {
+    return value > 9 ? acc.replace(/^0/, "").replace(`%${index2 + 1}`, value) : acc.replace(`%${index2 + 1}`, value);
+  }, lvlText);
+};
+const generateNumbering = (path, lvlText, formatter) => {
+  const formattedValues = path.map(formatter);
+  return createNumbering(formattedValues, lvlText);
+};
+const ordinalFormatter = (level) => {
+  const suffixes = ["th", "st", "nd", "rd"];
+  const value = level % 100;
+  const suffix = suffixes[(value - 20) % 10] || suffixes[value] || suffixes[0];
+  const p = level + suffix;
+  return p;
+};
+const generateFromCustom = (path, lvlText, customFormat) => {
+  if (customFormat !== "001, 002, 003, ...") return generateNumbering(path, lvlText, String);
+  const match = customFormat.match(/(\d+)/);
+  if (!match) throw new Error("Invalid format string: no numeric pattern found");
+  const sample = match[1];
+  const digitCount = sample.length;
+  const index2 = path.pop();
+  return String(index2).padStart(digitCount, "0");
+};
+const intToRoman = (num) => {
+  const romanNumeralMap = [
+    { value: 1e3, numeral: "M" },
+    { value: 900, numeral: "CM" },
+    { value: 500, numeral: "D" },
+    { value: 400, numeral: "CD" },
+    { value: 100, numeral: "C" },
+    { value: 90, numeral: "XC" },
+    { value: 50, numeral: "L" },
+    { value: 40, numeral: "XL" },
+    { value: 10, numeral: "X" },
+    { value: 9, numeral: "IX" },
+    { value: 5, numeral: "V" },
+    { value: 4, numeral: "IV" },
+    { value: 1, numeral: "I" }
+  ];
+  let result = "";
+  for (const { value, numeral } of romanNumeralMap) {
+    while (num >= value) {
+      result += numeral;
+      num -= value;
+    }
+  }
+  return result;
+};
+const intToAlpha = (num) => {
+  let result = "";
+  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  while (num > 0) {
+    let index2 = (num - 1) % 26;
+    result = alphabet[index2] + result;
+    num = Math.floor((num - 1) / 26);
+  }
+  return result;
+};
+const intToJapaneseCounting = (num) => {
+  const digits = ["", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
+  const units = ["", "十", "百", "千"];
+  if (num === 0) return "零";
+  if (num < 10) return digits[num];
+  let result = "";
+  let tempNum = num;
+  let unitIndex = 0;
+  while (tempNum > 0) {
+    const digit = tempNum % 10;
+    if (digit !== 0) {
+      const digitStr = digit === 1 && unitIndex > 0 ? "" : digits[digit];
+      result = digitStr + (unitIndex > 0 ? units[unitIndex] : "") + result;
+    } else if (result && tempNum > 0) {
+      if (!result.startsWith("零") && tempNum % 100 !== 0) {
+        result = "零" + result;
+      }
+    }
+    tempNum = Math.floor(tempNum / 10);
+    unitIndex++;
+    if (unitIndex > 3) break;
+  }
+  if (num >= 10 && num < 20) {
+    result = result.replace(/^一十/, "十");
+  }
+  return result;
+};
+const isKeyboardInvocation = (event) => {
+  return event.type === "contextmenu" && typeof event.detail === "number" && event.detail === 0 && (event.button === 0 || event.button === void 0) && event.clientX === 0 && event.clientY === 0;
+};
+const prefersNativeMenu = (event) => {
+  if (!event) return false;
+  if (event.ctrlKey || event.metaKey) {
+    return true;
+  }
+  return isKeyboardInvocation(event);
+};
+const shouldAllowNativeContextMenu = (event) => {
+  return prefersNativeMenu(event);
+};
+const shouldBypassContextMenu = shouldAllowNativeContextMenu;
+const DEFAULT_SELECTION_STATE = Object.freeze({
+  focused: false,
+  preservedSelection: null,
+  showVisualSelection: false,
+  skipFocusReset: false
+});
+const normalizeSelectionState = (state = {}) => ({
+  ...DEFAULT_SELECTION_STATE,
+  ...state
+});
+const CustomSelectionPluginKey = new PluginKey("CustomSelection");
+const handleClickOutside = (event, editor) => {
+  const editorElem = editor?.options?.element;
+  if (!editorElem) return;
+  const isInsideEditor = editorElem?.contains(event.target);
+  if (!isInsideEditor) {
+    editor.setOptions({
+      focusTarget: event.target
+    });
+  } else {
+    editor.setOptions({
+      focusTarget: null
+    });
+  }
+};
+function getFocusMeta(tr) {
+  return tr.getMeta(CustomSelectionPluginKey);
+}
+function setFocusMeta(tr, value) {
+  return tr.setMeta(CustomSelectionPluginKey, value);
+}
+function getFocusState(state) {
+  return CustomSelectionPluginKey.getState(state);
+}
+const isToolbarInput = (target) => {
+  return !!target?.closest(".button-text-input") || target?.classList?.contains("button-text-input");
+};
+const isToolbarButton = (target) => {
+  return !!target?.closest(".toolbar-button") || target?.classList?.contains("toolbar-button");
+};
+const CustomSelection = Extension.create({
+  name: "customSelection",
+  addPmPlugins() {
+    const editor = this.editor;
+    const customSelectionPlugin = new Plugin({
+      key: CustomSelectionPluginKey,
+      state: {
+        init: () => ({ ...DEFAULT_SELECTION_STATE }),
+        apply: (tr, value) => {
+          const meta = getFocusMeta(tr);
+          if (meta !== void 0) {
+            return { ...value, ...meta };
+          }
+          return value;
+        }
+      },
+      view: () => {
+        const clickHandler = (event) => handleClickOutside(event, editor);
+        document?.addEventListener("mousedown", clickHandler);
+        return {
+          destroy: () => {
+            document?.removeEventListener("mousedown", clickHandler);
+          }
+        };
+      },
       props: {
         handleDOMEvents: {
           contextmenu: (view, event) => {
@@ -17560,7 +18564,8 @@ const CustomSelection = Extension.create({
                 setFocusMeta(view.state.tr, {
                   focused: true,
                   preservedSelection: selection,
-                  showVisualSelection: true
+                  showVisualSelection: true,
+                  skipFocusReset: true
                 })
               );
             }
@@ -17581,7 +18586,8 @@ const CustomSelection = Extension.create({
                   setFocusMeta(view.state.tr, {
                     focused: true,
                     preservedSelection: selection2,
-                    showVisualSelection: true
+                    showVisualSelection: true,
+                    skipFocusReset: true
                   })
                 );
                 this.editor.setOptions({
@@ -17604,7 +18610,8 @@ const CustomSelection = Extension.create({
                 setFocusMeta(view.state.tr, {
                   focused: true,
                   preservedSelection: selection,
-                  showVisualSelection: true
+                  showVisualSelection: true,
+                  skipFocusReset: false
                 })
               );
               this.editor.setOptions({
@@ -17622,7 +18629,8 @@ const CustomSelection = Extension.create({
                   setFocusMeta(view.state.tr, {
                     focused: true,
                     preservedSelection: selection,
-                    showVisualSelection: true
+                    showVisualSelection: true,
+                    skipFocusReset: false
                   })
                 );
               }
@@ -17633,7 +18641,8 @@ const CustomSelection = Extension.create({
                 setFocusMeta(view.state.tr, {
                   focused: false,
                   preservedSelection: null,
-                  showVisualSelection: false
+                  showVisualSelection: false,
+                  skipFocusReset: false
                 })
               );
               if (!selection.empty && !this.editor.options.element?.contains(target)) {
@@ -17650,12 +18659,20 @@ const CustomSelection = Extension.create({
             const isElement2 = target instanceof Element;
             const isToolbarBtn = isElement2 && isToolbarButton(target);
             const isToolbarInp = isElement2 && isToolbarInput(target);
+            const focusState = getFocusState(view.state);
+            if (focusState?.skipFocusReset) {
+              view.dispatch(
+                setFocusMeta(view.state.tr, normalizeSelectionState({ ...focusState, skipFocusReset: false }))
+              );
+              return false;
+            }
             if (!isToolbarBtn && !isToolbarInp) {
               view.dispatch(
                 setFocusMeta(view.state.tr, {
                   focused: false,
                   preservedSelection: null,
-                  showVisualSelection: false
+                  showVisualSelection: false,
+                  skipFocusReset: false
                 })
               );
             }
@@ -17666,12 +18683,16 @@ const CustomSelection = Extension.create({
             const isToolbarBtn = isElement2 && isToolbarButton(target);
             const isToolbarInp = isElement2 && isToolbarInput(target);
             const state = getFocusState(view.state);
+            if (state?.skipFocusReset) {
+              return false;
+            }
             if (isToolbarBtn || isToolbarInp) {
               view.dispatch(
                 setFocusMeta(view.state.tr, {
                   focused: true,
                   preservedSelection: state.preservedSelection || view.state.selection,
-                  showVisualSelection: true
+                  showVisualSelection: true,
+                  skipFocusReset: false
                 })
               );
             } else {
@@ -17679,7 +18700,8 @@ const CustomSelection = Extension.create({
                 setFocusMeta(view.state.tr, {
                   focused: false,
                   preservedSelection: null,
-                  showVisualSelection: false
+                  showVisualSelection: false,
+                  skipFocusReset: false
                 })
               );
             }
@@ -18525,7 +19547,7 @@ class ListItemNodeView {
     this.decorations = decorations;
     this.view = editor.view;
     this.getPos = getPos;
-    __privateMethod(this, _ListItemNodeView_instances, init_fn2).call(this);
+    __privateMethod(this, _ListItemNodeView_instances, init_fn3).call(this);
     activeListItemNodeViews.add(this);
   }
   refreshIndentStyling() {
@@ -18586,7 +19608,7 @@ class ListItemNodeView {
   }
 }
 _ListItemNodeView_instances = new WeakSet();
-init_fn2 = function() {
+init_fn3 = function() {
   const { attrs } = this.node;
   const { listLevel, listNumberingType, lvlText, numId, level, customFormat } = attrs;
   let orderMarker = "";
@@ -25695,984 +26717,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", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
-  },
-  addCommands() {
-    return {
-      /**
-       * Insert an automatic page number
-       * @category Command
-       * @returns {Function} Command function
-       * @example
-       * editor.commands.addAutoPageNumber()
-       * @note Only works in header/footer contexts
-       */
-      addAutoPageNumber: () => ({ tr, dispatch, state, editor }) => {
-        const { options } = editor;
-        if (!options.isHeaderOrFooter) return false;
-        const { schema } = state;
-        const pageNumberType = schema?.nodes?.["page-number"];
-        if (!pageNumberType) return false;
-        const pageNumberNodeJSON = { type: "page-number" };
-        const pageNumberNode = schema.nodeFromJSON(pageNumberNodeJSON);
-        if (dispatch) {
-          tr.replaceSelectionWith(pageNumberNode, false);
-          tr.setMeta("forceUpdatePagination", true);
-        }
-        return true;
-      }
-    };
-  },
-  addShortcuts() {
-    return {
-      "Mod-Shift-alt-p": () => this.editor.commands.addAutoPageNumber()
-    };
-  }
-});
-const TotalPageCount = Node$1.create({
-  name: "total-page-number",
-  group: "inline",
-  inline: true,
-  atom: true,
-  draggable: false,
-  selectable: false,
-  content: "text*",
-  addOptions() {
-    return {
-      htmlAttributes: {
-        contenteditable: false,
-        "data-id": "auto-total-pages",
-        "aria-label": "Total page count node",
-        class: "sd-editor-auto-total-pages"
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      marksAsAttrs: {
-        default: null,
-        rendered: false
-      }
-    };
-  },
-  addNodeView() {
-    return ({ node, editor, getPos, decorations }) => {
-      const htmlAttributes = this.options.htmlAttributes;
-      return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
-    };
-  },
-  parseDOM() {
-    return [{ tag: 'span[data-id="auto-total-pages"' }];
-  },
-  renderDOM({ htmlAttributes }) {
-    return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-  },
-  addCommands() {
-    return {
-      /**
-       * Insert total page count
-       * @category Command
-       * @returns {Function} Command function
-       * @example
-       * editor.commands.addTotalPageCount()
-       * @note Only works in header/footer contexts
-       */
-      addTotalPageCount: () => ({ tr, dispatch, state, editor }) => {
-        const { options } = editor;
-        if (!options.isHeaderOrFooter) return false;
-        const { schema } = state;
-        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(this, _AutoPageNumberNodeView_instances);
-    this.node = node;
-    this.editor = editor;
-    this.view = editor.view;
-    this.getPos = getPos;
-    this.editor = editor;
-    this.dom = __privateMethod(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 = 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(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 } = this.editor;
-    const { dispatch } = this.view;
-    const node = state.doc.nodeAt(pos);
-    if (!node || node.isText) return;
-    const currentMarks = node.attrs.marksAsAttrs || [];
-    const newMarks = marks.map((m) => ({ type: m.type.name, attrs: m.attrs }));
-    const isEqual = JSON.stringify(currentMarks) === JSON.stringify(newMarks);
-    if (isEqual) return;
-    const newAttrs = {
-      ...node.attrs,
-      marksAsAttrs: newMarks
-    };
-    const tr = state.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, attrs } = mark;
-    switch (type.name) {
-      case "textStyle":
-        if (attrs.fontFamily) styles["font-family"] = attrs.fontFamily;
-        if (attrs.fontSize) styles["font-size"] = attrs.fontSize;
-        if (attrs.color) styles["color"] = attrs.color;
-        if (attrs.backgroundColor) styles["background-color"] = attrs.backgroundColor;
-        break;
-      case "bold":
-        styles["font-weight"] = "bold";
-        break;
-      case "italic":
-        styles["font-style"] = "italic";
-        break;
-      case "underline":
-        styles["text-decoration"] = (styles["text-decoration"] || "") + " underline";
-        break;
-      case "strike":
-        styles["text-decoration"] = (styles["text-decoration"] || "") + " line-through";
-        break;
-      default:
-        if (attrs?.style) {
-          Object.entries(attrs.style).forEach(([key2, value]) => {
-            styles[key2] = value;
-          });
-        }
-        break;
-    }
-  });
-  return styles;
-};
-const ShapeContainer = Node$1.create({
-  name: "shapeContainer",
-  group: "block",
-  content: "block+",
-  isolating: true,
-  addOptions() {
-    return {
-      htmlAttributes: {
-        class: "sd-editor-shape-container",
-        "aria-label": "Shape container node"
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      fillcolor: {
-        renderDOM: (attrs) => {
-          if (!attrs.fillcolor) return {};
-          return {
-            style: `background-color: ${attrs.fillcolor}`
-          };
-        }
-      },
-      sdBlockId: {
-        default: null,
-        keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
-        renderDOM: (attrs) => {
-          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
-        }
-      },
-      style: {
-        renderDOM: (attrs) => {
-          if (!attrs.style) return {};
-          return {
-            style: attrs.style
-          };
-        }
-      },
-      wrapAttributes: {
-        rendered: false
-      },
-      attributes: {
-        rendered: false
-      }
-    };
-  },
-  parseDOM() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`
-      }
-    ];
-  },
-  renderDOM({ htmlAttributes }) {
-    return [
-      "div",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
-      0
-    ];
-  }
-});
-const ShapeTextbox = Node$1.create({
-  name: "shapeTextbox",
-  group: "block",
-  content: "paragraph* block*",
-  isolating: true,
-  addOptions() {
-    return {
-      htmlAttributes: {
-        class: "sd-editor-shape-textbox",
-        "aria-label": "Shape textbox node"
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      sdBlockId: {
-        default: null,
-        keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
-        renderDOM: (attrs) => {
-          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
-        }
-      },
-      attributes: {
-        rendered: false
-      }
-    };
-  },
-  parseDOM() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`
-      }
-    ];
-  },
-  renderDOM({ htmlAttributes }) {
-    return [
-      "div",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
-      0
-    ];
-  }
-});
-const ContentBlock = Node$1.create({
-  name: "contentBlock",
-  group: "inline",
-  content: "",
-  isolating: true,
-  atom: true,
-  inline: true,
-  addOptions() {
-    return {
-      htmlAttributes: {
-        contenteditable: false
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      horizontalRule: {
-        default: false,
-        renderDOM: ({ horizontalRule }) => {
-          if (!horizontalRule) return {};
-          return { "data-horizontal-rule": "true" };
-        }
-      },
-      size: {
-        default: null,
-        renderDOM: ({ size }) => {
-          if (!size) return {};
-          let style = "";
-          if (size.top) style += `top: ${size.top}px; `;
-          if (size.left) style += `left: ${size.left}px; `;
-          if (size.width) style += `width: ${size.width.toString().endsWith("%") ? size.width : `${size.width}px`}; `;
-          if (size.height)
-            style += `height: ${size.height.toString().endsWith("%") ? size.height : `${size.height}px`}; `;
-          return { style };
-        }
-      },
-      background: {
-        default: null,
-        renderDOM: (attrs) => {
-          if (!attrs.background) return {};
-          return {
-            style: `background-color: ${attrs.background}`
-          };
-        }
-      },
-      drawingContent: {
-        rendered: false
-      },
-      attributes: {
+  addAttributes() {
+    return {
+      marksAsAttrs: {
+        default: null,
         rendered: false
       }
     };
   },
+  addNodeView() {
+    return ({ node, editor, getPos, decorations }) => {
+      const htmlAttributes = this.options.htmlAttributes;
+      return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
+    };
+  },
   parseDOM() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`
-      }
-    ];
+    return [{ tag: 'span[data-id="auto-page-number"' }];
   },
   renderDOM({ htmlAttributes }) {
-    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
+    return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
   },
   addCommands() {
     return {
       /**
-       * Insert a horizontal rule
-       * @category Command
-       * @example
-       * editor.commands.insertHorizontalRule()
-       * @note Creates a visual separator between content sections
-       */
-      insertHorizontalRule: () => ({ commands: commands2 }) => {
-        return commands2.insertContent({
-          type: this.name,
-          attrs: {
-            horizontalRule: true,
-            size: { width: "100%", height: 2 },
-            background: "#e5e7eb"
-          }
-        });
-      },
-      /**
-       * Insert a content block
+       * Insert an automatic page number
        * @category Command
-       * @param {ContentBlockConfig} config - Block configuration
-       * @example
-       * // Insert a spacer block
-       * editor.commands.insertContentBlock({ size: { height: 20 } })
-       *
+       * @returns {Function} Command function
        * @example
-       * // Insert a colored divider
-       * editor.commands.insertContentBlock({
-       *   size: { width: '50%', height: 3 },
-       *   background: '#3b82f6'
-       * })
-       * @note Used for spacing, dividers, and special inline content
+       * editor.commands.addAutoPageNumber()
+       * @note Only works in header/footer contexts
        */
-      insertContentBlock: (config) => ({ commands: commands2 }) => {
-        return commands2.insertContent({
-          type: this.name,
-          attrs: config
-        });
+      addAutoPageNumber: () => ({ tr, dispatch, state, editor }) => {
+        const { options } = editor;
+        if (!options.isHeaderOrFooter) return false;
+        const { schema } = state;
+        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(this, "node");
-    __publicField(this, "view");
-    __publicField(this, "getPos");
-    __publicField(this, "decorations");
-    __publicField(this, "innerDecorations");
-    __publicField(this, "editor");
-    __publicField(this, "extension");
-    __publicField(this, "htmlAttributes");
-    __publicField(this, "root");
-    __publicField(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 = Attribute.getAttributesToRender(this.node, extensionAttrs);
-  }
-  createDragHandle() {
-    const dragHandle = document.createElement("span");
-    dragHandle.classList.add("sd-structured-content-draggable");
-    dragHandle.draggable = true;
-    dragHandle.contentEditable = "false";
-    dragHandle.dataset.dragHandle = "";
-    const textElement = document.createElement("span");
-    textElement.textContent = "Structured content";
-    dragHandle.append(textElement);
-    return dragHandle;
-  }
-  onDragStart(event) {
-    const { view } = this.editor;
-    const target = event.target;
-    const dragHandle = target.nodeType === 3 ? target.parentElement?.closest("[data-drag-handle]") : target.closest("[data-drag-handle]");
-    if (!this.dom || this.contentDOM?.contains(target) || !dragHandle) {
-      return;
-    }
-    let x = 0;
-    let y = 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;
-      y = handleBox.y - domBox.y + offsetY;
-    }
-    event.dataTransfer?.setDragImage(this.dom, x, y);
-    const pos = this.getPos();
-    if (typeof pos !== "number") {
-      return;
-    }
-    const selection = NodeSelection.create(view.state.doc, pos);
-    const transaction = view.state.tr.setSelection(selection);
-    view.dispatch(transaction);
-  }
-}
-class StructuredContentInlineView extends StructuredContentViewBase {
-  constructor(props) {
-    super(props);
-  }
-  mount() {
-    this.buildView();
-  }
-  get contentDOM() {
-    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
-    return contentElement || null;
-  }
-  createElement() {
-    const element = document.createElement("span");
-    element.classList.add(structuredContentClass$1);
-    element.setAttribute("data-structured-content", "");
-    const contentElement = document.createElement("span");
-    contentElement.classList.add(structuredContentInnerClass$1);
-    element.append(contentElement);
-    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(element, { ...domAttrs });
-    return { element, contentElement };
-  }
-  buildView() {
-    const { element } = this.createElement();
-    const dragHandle = this.createDragHandle();
-    element.prepend(dragHandle);
-    element.addEventListener("dragstart", (e) => this.onDragStart(e));
-    this.root = element;
-  }
-  updateView() {
-    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(this.dom, { ...domAttrs });
-  }
-  update(node, decorations, innerDecorations) {
-    const result = super.update(node, decorations, innerDecorations);
-    if (!result) return false;
-    this.updateView();
-    return true;
-  }
-}
-const structuredContentClass$1 = "sd-structured-content";
-const structuredContentInnerClass$1 = "sd-structured-content__content";
-const StructuredContent = Node$1.create({
-  name: "structuredContent",
-  group: "inline structuredContent",
+const TotalPageCount = Node$1.create({
+  name: "total-page-number",
+  group: "inline",
   inline: true,
-  content: "inline*",
-  isolating: true,
-  atom: false,
-  // false - has editable content.
-  draggable: true,
+  atom: true,
+  draggable: false,
+  selectable: false,
+  content: "text*",
   addOptions() {
     return {
       htmlAttributes: {
-        class: structuredContentClass$1,
-        "aria-label": "Structured content node"
+        contenteditable: false,
+        "data-id": "auto-total-pages",
+        "aria-label": "Total page count node",
+        class: "sd-editor-auto-total-pages"
       }
     };
   },
   addAttributes() {
     return {
-      id: {
+      marksAsAttrs: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute("data-id"),
-        renderDOM: (attrs) => {
-          if (!attrs.id) return {};
-          return { "data-id": attrs.id };
-        }
-      },
-      sdtPr: {
         rendered: false
       }
     };
   },
+  addNodeView() {
+    return ({ node, editor, getPos, decorations }) => {
+      const htmlAttributes = this.options.htmlAttributes;
+      return new AutoPageNumberNodeView(node, getPos, decorations, editor, htmlAttributes);
+    };
+  },
   parseDOM() {
-    return [{ tag: "span[data-structured-content]" }];
+    return [{ tag: 'span[data-id="auto-total-pages"' }];
   },
   renderDOM({ htmlAttributes }) {
-    return [
-      "span",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-        "data-structured-content": ""
-      }),
-      0
-    ];
+    return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
   },
-  addNodeView() {
-    return (props) => {
-      return new StructuredContentInlineView({ ...props });
+  addCommands() {
+    return {
+      /**
+       * Insert total page count
+       * @category Command
+       * @returns {Function} Command function
+       * @example
+       * editor.commands.addTotalPageCount()
+       * @note Only works in header/footer contexts
+       */
+      addTotalPageCount: () => ({ tr, dispatch, state, editor }) => {
+        const { options } = editor;
+        if (!options.isHeaderOrFooter) return false;
+        const { schema } = state;
+        const pageNumberType = schema.nodes?.["total-page-number"];
+        if (!pageNumberType) return false;
+        const currentPages = editor?.options?.parentEditor?.currentTotalPages || 1;
+        const pageNumberNode = {
+          type: "total-page-number",
+          content: [{ type: "text", text: String(currentPages) }]
+        };
+        const pageNode = schema.nodeFromJSON(pageNumberNode);
+        if (dispatch) {
+          tr.replaceSelectionWith(pageNode, false);
+        }
+        return true;
+      }
+    };
+  },
+  addShortcuts() {
+    return {
+      "Mod-Shift-alt-c": () => this.editor.commands.addTotalPageCount()
     };
   }
 });
-class StructuredContentBlockView extends StructuredContentViewBase {
-  constructor(props) {
-    super(props);
-  }
-  mount() {
-    this.buildView();
-  }
-  get contentDOM() {
-    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
-    return contentElement || null;
-  }
-  createElement() {
-    const element = document.createElement("div");
-    element.classList.add(structuredContentClass);
-    element.setAttribute("data-structured-content-block", "");
-    const contentElement = document.createElement("div");
-    contentElement.classList.add(structuredContentInnerClass);
-    element.append(contentElement);
-    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(element, { ...domAttrs });
-    return { element, contentElement };
-  }
-  buildView() {
-    const { element } = this.createElement();
-    const dragHandle = this.createDragHandle();
-    element.prepend(dragHandle);
-    element.addEventListener("dragstart", (e) => this.onDragStart(e));
-    this.root = element;
+const getNodeAttributes = (nodeName, editor) => {
+  switch (nodeName) {
+    case "page-number":
+      return {
+        text: editor.options.currentPageNumber || "1",
+        className: "sd-editor-auto-page-number",
+        dataId: "auto-page-number",
+        ariaLabel: "Page number node"
+      };
+    case "total-page-number":
+      return {
+        text: editor.options.parentEditor?.currentTotalPages || "1",
+        className: "sd-editor-auto-total-pages",
+        dataId: "auto-total-pages",
+        ariaLabel: "Total page count node"
+      };
+    default:
+      return {};
   }
-  updateView() {
-    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(this.dom, { ...domAttrs });
+};
+class AutoPageNumberNodeView {
+  constructor(node, getPos, decorations, editor, htmlAttributes = {}) {
+    __privateAdd(this, _AutoPageNumberNodeView_instances);
+    this.node = node;
+    this.editor = editor;
+    this.view = editor.view;
+    this.getPos = getPos;
+    this.editor = editor;
+    this.dom = __privateMethod(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 = 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(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 } = this.editor;
+    const { dispatch } = this.view;
+    const node = state.doc.nodeAt(pos);
+    if (!node || node.isText) return;
+    const currentMarks = node.attrs.marksAsAttrs || [];
+    const newMarks = marks.map((m) => ({ type: m.type.name, attrs: m.attrs }));
+    const isEqual = JSON.stringify(currentMarks) === JSON.stringify(newMarks);
+    if (isEqual) return;
+    const newAttrs = {
+      ...node.attrs,
+      marksAsAttrs: newMarks
+    };
+    const tr = state.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, attrs } = mark;
+    switch (type.name) {
+      case "textStyle":
+        if (attrs.fontFamily) styles["font-family"] = attrs.fontFamily;
+        if (attrs.fontSize) styles["font-size"] = attrs.fontSize;
+        if (attrs.color) styles["color"] = attrs.color;
+        if (attrs.backgroundColor) styles["background-color"] = attrs.backgroundColor;
+        break;
+      case "bold":
+        styles["font-weight"] = "bold";
+        break;
+      case "italic":
+        styles["font-style"] = "italic";
+        break;
+      case "underline":
+        styles["text-decoration"] = (styles["text-decoration"] || "") + " underline";
+        break;
+      case "strike":
+        styles["text-decoration"] = (styles["text-decoration"] || "") + " line-through";
+        break;
+      default:
+        if (attrs?.style) {
+          Object.entries(attrs.style).forEach(([key2, value]) => {
+            styles[key2] = value;
+          });
+        }
+        break;
+    }
+  });
+  return styles;
+};
+const ShapeContainer = Node$1.create({
+  name: "shapeContainer",
+  group: "block",
+  content: "block+",
   isolating: true,
-  atom: false,
-  // false - has editable content.
-  draggable: true,
   addOptions() {
     return {
       htmlAttributes: {
-        class: structuredContentClass,
-        "aria-label": "Structured content block node"
+        class: "sd-editor-shape-container",
+        "aria-label": "Shape container node"
       }
     };
   },
   addAttributes() {
     return {
-      id: {
+      fillcolor: {
+        renderDOM: (attrs) => {
+          if (!attrs.fillcolor) return {};
+          return {
+            style: `background-color: ${attrs.fillcolor}`
+          };
+        }
+      },
+      sdBlockId: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute("data-id"),
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
         renderDOM: (attrs) => {
-          if (!attrs.id) return {};
-          return { "data-id": attrs.id };
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
         }
       },
-      sdtPr: {
+      style: {
+        renderDOM: (attrs) => {
+          if (!attrs.style) return {};
+          return {
+            style: attrs.style
+          };
+        }
+      },
+      wrapAttributes: {
+        rendered: false
+      },
+      attributes: {
         rendered: false
       }
     };
   },
   parseDOM() {
-    return [{ tag: "div[data-structured-content-block]" }];
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`
+      }
+    ];
   },
   renderDOM({ htmlAttributes }) {
     return [
       "div",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-        "data-structured-content-block": ""
-      }),
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
       0
     ];
-  },
-  addNodeView() {
-    return (props) => {
-      return new StructuredContentBlockView({ ...props });
-    };
   }
 });
-class DocumentSectionView {
-  constructor(node, getPos, decorations, editor) {
-    __privateAdd(this, _DocumentSectionView_instances);
-    this.node = node;
-    this.editor = editor;
-    this.decorations = decorations;
-    this.view = editor.view;
-    this.getPos = getPos;
-    __privateMethod(this, _DocumentSectionView_instances, init_fn3).call(this);
-  }
-}
-_DocumentSectionView_instances = 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(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 type = editor.schema.nodes.documentSection;
-  if (!type) return [];
-  const sections = [];
-  const { state } = editor;
-  state.doc.descendants((node, pos) => {
-    if (node.type.name === type.name) {
-      sections.push({ node, pos });
-    }
-  });
-  return sections;
-};
-const exportSectionsToHTML = (editor) => {
-  const sections = getAllSections(editor);
-  const processedSections = /* @__PURE__ */ new Set();
-  const result = [];
-  sections.forEach(({ node }) => {
-    const { attrs } = node;
-    const { id, title, description } = attrs;
-    if (processedSections.has(id)) return;
-    processedSections.add(id);
-    const html = getHTMLFromNode(node, editor);
-    result.push({
-      id,
-      title,
-      description,
-      html
-    });
-  });
-  return result;
-};
-const getHTMLFromNode = (node, editor) => {
-  const tempDocument = document.implementation.createHTMLDocument();
-  const container = tempDocument.createElement("div");
-  const fragment = DOMSerializer.fromSchema(editor.schema).serializeFragment(node.content);
-  container.appendChild(fragment);
-  let html = container.innerHTML;
-  return html;
-};
-const exportSectionsToJSON = (editor) => {
-  const sections = getAllSections(editor);
-  const processedSections = /* @__PURE__ */ new Set();
-  const result = [];
-  sections.forEach(({ node }) => {
-    const { attrs } = node;
-    const { id, title, description } = attrs;
-    if (processedSections.has(id)) return;
-    processedSections.add(id);
-    result.push({
-      id,
-      title,
-      description,
-      content: node.toJSON()
-    });
-  });
-  return result;
-};
-const getLinkedSectionEditor = (id, options, editor) => {
-  const sections = getAllSections(editor);
-  const section = sections.find((s) => s.node.attrs.id === id);
-  if (!section) return null;
-  const child = editor.createChildEditor({
-    ...options,
-    onUpdate: ({ editor: childEditor, transaction }) => {
-      const isFromtLinkedParent = transaction.getMeta("fromLinkedParent");
-      if (isFromtLinkedParent) return;
-      const updatedContent = childEditor.state.doc.content;
-      const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
-      if (!sectionNode) return;
-      const { pos, node } = sectionNode;
-      const newNode = node.type.create(node.attrs, updatedContent, node.marks);
-      const tr = editor.state.tr.replaceWith(pos, pos + node.nodeSize, newNode);
-      tr.setMeta("fromLinkedChild", true);
-      editor.view.dispatch(tr);
-    }
-  });
-  editor.on("update", ({ transaction }) => {
-    const isFromLinkedChild = transaction.getMeta("fromLinkedChild");
-    if (isFromLinkedChild) return;
-    const sectionNode = getAllSections(editor)?.find((s) => s.node.attrs.id === id);
-    if (!sectionNode) return;
-    const sectionContent = sectionNode.node.content;
-    const json = {
-      type: "doc",
-      content: sectionContent.content.map((node) => node.toJSON())
-    };
-    const childTr = child.state.tr;
-    childTr.setMeta("fromLinkedParent", true);
-    childTr.replaceWith(0, child.state.doc.content.size, child.schema.nodeFromJSON(json));
-    child.view.dispatch(childTr);
-  });
-  return child;
-};
-const SectionHelpers = {
-  getAllSections,
-  exportSectionsToHTML,
-  exportSectionsToJSON,
-  getLinkedSectionEditor
-};
-const DocumentSection = Node$1.create({
-  name: "documentSection",
+const ShapeTextbox = Node$1.create({
+  name: "shapeTextbox",
   group: "block",
-  content: "block*",
-  atom: true,
+  content: "paragraph* block*",
   isolating: true,
   addOptions() {
     return {
       htmlAttributes: {
-        class: "sd-document-section-block",
-        "aria-label": "Structured content block"
+        class: "sd-editor-shape-textbox",
+        "aria-label": "Shape textbox node"
       }
     };
   },
-  parseDOM() {
-    return [
-      {
-        tag: "div.sd-document-section-block",
-        priority: 60
-      }
-    ];
-  },
-  renderDOM({ htmlAttributes }) {
-    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-  },
   addAttributes() {
     return {
-      id: {},
       sdBlockId: {
         default: null,
         keepOnSplit: false,
@@ -26681,212 +27054,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",
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
+      0
+    ];
+  }
+});
+const ContentBlock = Node$1.create({
+  name: "contentBlock",
+  group: "inline",
+  content: "",
+  isolating: true,
+  atom: true,
+  inline: true,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        contenteditable: false
+      }
     };
   },
-  addCommands() {
+  addAttributes() {
     return {
-      /**
-       * Create a lockable content section
-       * @category Command
-       * @param {SectionCreate} [options={}] - Section configuration
-       * @example
-       * editor.commands.createDocumentSection({
-       *   id: 1,
-       *   title: 'Terms & Conditions',
-       *   isLocked: true,
-       *   html: '<p>Legal content...</p>'
-       * })
-       */
-      createDocumentSection: (options = {}) => ({ tr, state, dispatch, editor }) => {
-        const { selection } = state;
-        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 }) => {
+          if (!size) return {};
+          let style = "";
+          if (size.top) style += `top: ${size.top}px; `;
+          if (size.left) style += `left: ${size.left}px; `;
+          if (size.width) style += `width: ${size.width.toString().endsWith("%") ? size.width : `${size.width}px`}; `;
+          if (size.height)
+            style += `height: ${size.height.toString().endsWith("%") ? size.height : `${size.height}px`}; `;
+          return { style };
         }
-        return true;
       },
-      /**
-       * Delete section and all its content
-       * @category Command
-       * @param {number} id - Section to delete
-       * @example
-       * editor.commands.removeSectionById(123)
-       */
-      removeSectionById: (id) => ({ tr, dispatch }) => {
-        const sections = SectionHelpers.getAllSections(this.editor);
-        const sectionToRemove = sections.find(({ node: node2 }) => node2.attrs.id === id);
-        if (!sectionToRemove) return false;
-        const { pos, node } = sectionToRemove;
-        const nodeStart = pos;
-        const nodeEnd = nodeStart + node.nodeSize;
-        tr.delete(nodeStart, nodeEnd);
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "delete", id });
-          dispatch(tr);
+      background: {
+        default: null,
+        renderDOM: (attrs) => {
+          if (!attrs.background) return {};
+          return {
+            style: `background-color: ${attrs.background}`
+          };
         }
-        return true;
       },
+      drawingContent: {
+        rendered: false
+      },
+      attributes: {
+        rendered: false
+      }
+    };
+  },
+  parseDOM() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
+  },
+  addCommands() {
+    return {
       /**
-       * Lock section against edits
+       * Insert a horizontal rule
        * @category Command
-       * @param {number} id - Section to lock
        * @example
-       * editor.commands.lockSectionById(123)
+       * editor.commands.insertHorizontalRule()
+       * @note Creates a visual separator between content sections
        */
-      lockSectionById: (id) => ({ tr, dispatch }) => {
-        const sections = SectionHelpers.getAllSections(this.editor);
-        const sectionToLock = sections.find(({ node }) => node.attrs.id === id);
-        if (!sectionToLock) return false;
-        tr.setNodeMarkup(sectionToLock.pos, null, { ...sectionToLock.node.attrs, isLocked: true });
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "lock", id });
-          dispatch(tr);
-        }
-        return true;
+      insertHorizontalRule: () => ({ commands: commands2 }) => {
+        return commands2.insertContent({
+          type: this.name,
+          attrs: {
+            horizontalRule: true,
+            size: { width: "100%", height: 2 },
+            background: "#e5e7eb"
+          }
+        });
       },
       /**
-       * Modify section attributes or content
+       * Insert a content block
        * @category Command
-       * @param {SectionUpdate} options - Changes to apply
+       * @param {ContentBlockConfig} config - Block configuration
        * @example
-       * editor.commands.updateSectionById({ id: 123, attrs: { isLocked: false } })
-       * editor.commands.updateSectionById({ id: 123, html: '<p>New content</p>' })
-       * editor.commands.updateSectionById({
-       *   id: 123,
-       *   html: '<p>Updated</p>',
-       *   attrs: { title: 'New Title' }
+       * // Insert a spacer block
+       * editor.commands.insertContentBlock({ size: { height: 20 } })
+       *
+       * @example
+       * // Insert a colored divider
+       * editor.commands.insertContentBlock({
+       *   size: { width: '50%', height: 3 },
+       *   background: '#3b82f6'
        * })
+       * @note Used for spacing, dividers, and special inline content
        */
-      updateSectionById: ({ id, html, json, attrs }) => ({ tr, dispatch, editor }) => {
-        const sections = SectionHelpers.getAllSections(editor || this.editor);
-        const sectionToUpdate = sections.find(({ node: node2 }) => node2.attrs.id === id);
-        if (!sectionToUpdate) return false;
-        const { pos, node } = sectionToUpdate;
-        let newContent = null;
-        if (html) {
-          const htmlDoc = htmlHandler(html, editor || this.editor);
-          const doc2 = DOMParser$1.fromSchema((editor || this.editor).schema).parse(htmlDoc);
-          newContent = doc2.content;
-        }
-        if (json) {
-          newContent = (editor || this.editor).schema.nodeFromJSON(json);
-        }
-        if (!newContent) {
-          newContent = node.content;
-        }
-        const updatedNode = node.type.create({ ...node.attrs, ...attrs }, newContent, node.marks);
-        tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "update", id, attrs });
-          dispatch(tr);
-        }
-        return true;
+      insertContentBlock: (config) => ({ commands: commands2 }) => {
+        return commands2.insertContent({
+          type: this.name,
+          attrs: config
+        });
       }
     };
-  },
-  addHelpers() {
-    return {
-      ...SectionHelpers
-    };
   }
 });
 const { findChildren } = helpers;
@@ -33454,7 +33746,8 @@ const nodeResizer = (nodeNames = ["image"], editor) => {
           const prevSelection = prevState.selection;
           if (selection.from !== prevSelection.from || selection.to !== prevSelection.to) {
             setTimeout(() => {
-              const selectedResizableWrapper = document.querySelector(".sd-editor-resizable-wrapper");
+              const searchRoot = editorView?.dom;
+              const selectedResizableWrapper = searchRoot?.querySelector(".sd-editor-resizable-wrapper");
               if (selectedResizableWrapper) {
                 showResizeHandles(view2, selectedResizableWrapper);
               } else {
@@ -33735,6 +34028,7 @@ const getStarterExtensions = () => {
     Search,
     StructuredContent,
     StructuredContentBlock,
+    StructuredContentCommands,
     DocumentSection,
     NodeResizer,
     CustomSelection,
@@ -33768,6 +34062,7 @@ export {
   SectionHelpers as o,
   getAllowedImageDimensions as p,
   replaceSelectionWithImagePlaceholder as r,
+  shouldBypassContextMenu as s,
   useHighContrastMode as u,
   yUndoPluginKey as y
 };