@harbour-enterprises/superdoc 0.22.0-next.9 → 0.23.0-next.1

package/dist/super-editor/chunks/{editor-CFqh_xBx.js → editor-C2IwVkIp.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-BgedUNCW.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 generateRandomSigned32BitIntStrId, ak as InputRule, al as kebabCase, am as findParentNodeClosestToPos, an as getListItemStyleDefinitions, ao as docxNumberigHelpers, ap as parseIndentElement, aq as combineIndents, ar as SelectionRange, as as Transform, at as isInTable$1, au as generateDocxRandomId, av as insertNewRelationship } from "./converter-C08GQjNi.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-ByLK3trM.js";
+import { D as DocxZipper } from "./docx-zipper-C3-uf2tI.js";
 var GOOD_LEAF_SIZE = 200;
 var RopeSequence = function RopeSequence2() {
 };
@@ -12107,7 +12107,7 @@ const handleTrackedChangeTransaction = (trackedChangeMeta, trackedChanges, newEd
   if (emitParams) editor.emit("commentsUpdate", emitParams);
   return newTrackedChanges;
 };
-const getTrackedChangeText = ({ state, nodes, mark, marks, trackedChangeType, isDeletionInsertion }) => {
+const getTrackedChangeText = ({ nodes, mark, trackedChangeType, isDeletionInsertion }) => {
   let trackedChangeText = "";
   let deletionText = "";
   if (trackedChangeType === TrackInsertMarkName) {
@@ -12149,10 +12149,8 @@ const createOrUpdateTrackedChangeComment = ({ event, marks, deletionNodes, nodes
     if (hasMatchingId) nodesWithMark.push(node2);
   });
   const { deletionText, trackedChangeText } = getTrackedChangeText({
-    state: newEditorState,
     nodes: nodesWithMark.length ? nodesWithMark : [node],
     mark: trackedMark,
-    marks,
     trackedChangeType,
     isDeletionInsertion
   });
@@ -14878,7 +14876,7 @@ const _Editor = class _Editor extends EventEmitter {
    * @returns {Object | void} Migration results
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "0.21.0");
+    console.debug("[checkVersionMigrations] Current editor version", "0.22.0");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -16967,6 +16965,1043 @@ const SlashMenu = Extension.create({
     return this.editor.options.isHeadless ? [] : [slashMenuPlugin];
   }
 });
+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 = 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);
+  }
+}
+class StructuredContentInlineView extends StructuredContentViewBase {
+  constructor(props) {
+    super(props);
+  }
+  mount() {
+    this.buildView();
+  }
+  get contentDOM() {
+    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass$1}`);
+    return contentElement || null;
+  }
+  createElement() {
+    const element = document.createElement("span");
+    element.classList.add(structuredContentClass$1);
+    element.setAttribute("data-structured-content", "");
+    const contentElement = document.createElement("span");
+    contentElement.classList.add(structuredContentInnerClass$1);
+    element.append(contentElement);
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(element, { ...domAttrs });
+    return { element, contentElement };
+  }
+  buildView() {
+    const { element } = this.createElement();
+    const dragHandle = this.createDragHandle();
+    element.prepend(dragHandle);
+    element.addEventListener("dragstart", (e) => this.onDragStart(e));
+    this.root = element;
+  }
+  updateView() {
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(this.dom, { ...domAttrs });
+  }
+  update(node, decorations, innerDecorations) {
+    const result = super.update(node, decorations, innerDecorations);
+    if (!result) return false;
+    this.updateView();
+    return true;
+  }
+}
+const structuredContentClass$1 = "sd-structured-content";
+const structuredContentInnerClass$1 = "sd-structured-content__content";
+const StructuredContent = Node$1.create({
+  name: "structuredContent",
+  group: "inline structuredContent",
+  inline: true,
+  content: "inline*",
+  isolating: true,
+  atom: false,
+  // false - has editable content.
+  draggable: true,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        class: structuredContentClass$1,
+        "aria-label": "Structured content node"
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-id"),
+        renderDOM: (attrs) => {
+          if (!attrs.id) return {};
+          return { "data-id": attrs.id };
+        }
+      },
+      tag: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-tag"),
+        renderDOM: (attrs) => {
+          if (!attrs.tag) return {};
+          return { "data-tag": attrs.tag };
+        }
+      },
+      alias: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-alias"),
+        renderDOM: (attrs) => {
+          if (!attrs.alias) return {};
+          return { "data-alias": attrs.alias };
+        }
+      },
+      sdtPr: {
+        rendered: false
+      }
+    };
+  },
+  parseDOM() {
+    return [{ tag: "span[data-structured-content]" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    return [
+      "span",
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+        "data-structured-content": ""
+      }),
+      0
+    ];
+  },
+  addNodeView() {
+    return (props) => {
+      return new StructuredContentInlineView({ ...props });
+    };
+  }
+});
+class StructuredContentBlockView extends StructuredContentViewBase {
+  constructor(props) {
+    super(props);
+  }
+  mount() {
+    this.buildView();
+  }
+  get contentDOM() {
+    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
+    return contentElement || null;
+  }
+  createElement() {
+    const element = document.createElement("div");
+    element.classList.add(structuredContentClass);
+    element.setAttribute("data-structured-content-block", "");
+    const contentElement = document.createElement("div");
+    contentElement.classList.add(structuredContentInnerClass);
+    element.append(contentElement);
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(element, { ...domAttrs });
+    return { element, contentElement };
+  }
+  buildView() {
+    const { element } = this.createElement();
+    const dragHandle = this.createDragHandle();
+    element.prepend(dragHandle);
+    element.addEventListener("dragstart", (e) => this.onDragStart(e));
+    this.root = element;
+  }
+  updateView() {
+    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
+    updateDOMAttributes(this.dom, { ...domAttrs });
+  }
+  update(node, decorations, innerDecorations) {
+    const result = super.update(node, decorations, innerDecorations);
+    if (!result) return false;
+    this.updateView();
+    return true;
+  }
+}
+const structuredContentClass = "sd-structured-content-block";
+const structuredContentInnerClass = "sd-structured-content-block__content";
+const StructuredContentBlock = Node$1.create({
+  name: "structuredContentBlock",
+  group: "block structuredContent",
+  content: "block*",
+  isolating: true,
+  atom: false,
+  // false - has editable content.
+  draggable: true,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        class: structuredContentClass,
+        "aria-label": "Structured content block node"
+      }
+    };
+  },
+  addAttributes() {
+    return {
+      id: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-id"),
+        renderDOM: (attrs) => {
+          if (!attrs.id) return {};
+          return { "data-id": attrs.id };
+        }
+      },
+      tag: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-tag"),
+        renderDOM: (attrs) => {
+          if (!attrs.tag) return {};
+          return { "data-tag": attrs.tag };
+        }
+      },
+      alias: {
+        default: null,
+        parseDOM: (elem) => elem.getAttribute("data-alias"),
+        renderDOM: (attrs) => {
+          if (!attrs.alias) return {};
+          return { "data-alias": attrs.alias };
+        }
+      },
+      sdtPr: {
+        rendered: false
+      }
+    };
+  },
+  parseDOM() {
+    return [{ tag: "div[data-structured-content-block]" }];
+  },
+  renderDOM({ htmlAttributes }) {
+    return [
+      "div",
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
+        "data-structured-content-block": ""
+      }),
+      0
+    ];
+  },
+  addNodeView() {
+    return (props) => {
+      return new StructuredContentBlockView({ ...props });
+    };
+  }
+});
+function getStructuredContentTagsById(idOrIds, 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 {
+      /**
+       * Inserts a structured content inline at selection.
+       * @category Command
+       * @param {StructuredContentInlineInsert} options
+       */
+      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);
+          }
+          if (options.text) {
+            content = schema.text(options.text);
+          }
+          if (options.json) {
+            content = schema.nodeFromJSON(options.json);
+          }
+          if (!content) {
+            content = schema.text(" ");
+          }
+          const attrs = {
+            ...options.attrs,
+            id: options.attrs?.id || generateRandomSigned32BitIntStrId(),
+            tag: "inline_text_sdt",
+            alias: options.attrs?.alias || "Structured content"
+          };
+          const node = schema.nodes.structuredContent.create(attrs, content, null);
+          const parent = findParentNode((node2) => node2.type.name === "structuredContent")(state.selection);
+          if (parent) {
+            const insertPos = parent.pos + parent.node.nodeSize;
+            from2 = to = insertPos;
+          }
+          tr.replaceWith(from2, to, node);
+        }
+        return true;
+      },
+      /**
+       * Inserts a structured content block at selection.
+       * @category Command
+       * @param {StructuredContentBlockInsert} options
+       */
+      insertStructuredContentBlock: (options = {}) => ({ editor, dispatch, state, 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 || generateRandomSigned32BitIntStrId(),
+            tag: "block_table_sdt",
+            alias: options.attrs?.alias || "Structured content"
+          };
+          const node = schema.nodes.structuredContentBlock.create(attrs, content, null);
+          const parent = findParentNode((node2) => node2.type.name === "structuredContentBlock")(state.selection);
+          if (parent) {
+            const insertPos = parent.pos + parent.node.nodeSize;
+            from2 = to = insertPos;
+          }
+          tr.replaceRangeWith(from2, to, node);
+        }
+        return true;
+      },
+      /**
+       * Updates a structured content attributes or content.
+       * If the updated node does not match the schema, it will not be updated.
+       * @category Command
+       * @param {string} id
+       * @param {StructuredContentUpdate} options
+       */
+      updateStructuredContentById: (id, options = {}) => ({ editor, dispatch, state, 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;
+      },
+      /**
+       * Removes a structured content.
+       * @category Command
+       * @param {Array<{ node: Node, pos: number }>} structuredContentTags
+       */
+      deleteStructuredContent: (structuredContentTags) => ({ dispatch, tr }) => {
+        if (!structuredContentTags.length) {
+          return true;
+        }
+        if (dispatch) {
+          structuredContentTags.forEach((structuredContent) => {
+            const { pos, node } = structuredContent;
+            const posFrom = tr.mapping.map(pos);
+            const posTo = tr.mapping.map(pos + node.nodeSize);
+            const currentNode = tr.doc.nodeAt(posFrom);
+            if (currentNode && node.eq(currentNode)) {
+              tr.delete(posFrom, posTo);
+            }
+          });
+        }
+        return true;
+      },
+      /**
+       * Removes a structured content by ID.
+       * @category Command
+       * @param {string | string[]} idOrIds
+       */
+      deleteStructuredContentById: (idOrIds) => ({ dispatch, state, 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;
+      },
+      /**
+       * Removes a structured content at cursor, preserving its content.
+       * @category Command
+       */
+      deleteStructuredContentAtSelection: () => ({ 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) {
+          const { node, pos } = structuredContent;
+          const posFrom = pos;
+          const posTo = posFrom + node.nodeSize;
+          const content = node.content;
+          tr.replaceWith(posFrom, posTo, content);
+        }
+        return true;
+      }
+    };
+  },
+  addHelpers() {
+    return {
+      ...structuredContentHelpers
+    };
+  }
+});
+class DocumentSectionView {
+  constructor(node, getPos, decorations, editor) {
+    __privateAdd(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);
+  }
+}
+_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);
+};
+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",
+  group: "block",
+  content: "block*",
+  atom: true,
+  isolating: true,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        class: "sd-document-section-block",
+        "aria-label": "Structured content block"
+      }
+    };
+  },
+  parseDOM() {
+    return [
+      {
+        tag: "div.sd-document-section-block",
+        priority: 60
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  },
+  addAttributes() {
+    return {
+      id: {},
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+        }
+      },
+      title: {},
+      description: {},
+      sectionType: {},
+      isLocked: { default: false }
+    };
+  },
+  addNodeView() {
+    return ({ node, editor, getPos, decorations }) => {
+      return new DocumentSectionView(node, getPos, decorations, editor);
+    };
+  },
+  addCommands() {
+    return {
+      /**
+       * Create a lockable content section
+       * @category Command
+       * @param {SectionCreate} [options={}] - Section configuration
+       * @example
+       * editor.commands.createDocumentSection({
+       *   id: 1,
+       *   title: 'Terms & Conditions',
+       *   isLocked: true,
+       *   html: '<p>Legal content...</p>'
+       * })
+       */
+      createDocumentSection: (options = {}) => ({ tr, state, 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 DocumentPartObject = Node$1.create({
+  name: "documentPartObject",
+  group: "block",
+  content: "block*",
+  isolating: true,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        class: "sd-document-part-object-block",
+        "aria-label": "Structured document part block"
+      }
+    };
+  },
+  parseDOM() {
+    return [
+      {
+        tag: "div.sd-document-part-object-block",
+        priority: 60
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  },
+  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 } : {};
+        }
+      },
+      id: {},
+      docPartGallery: {},
+      docPartUnique: {
+        default: true
+      }
+    };
+  }
+});
 const Document = Node$1.create({
   name: "doc",
   topNode: true,
@@ -18103,7 +19138,12 @@ const generateDecorations = (state, styles) => {
       return { ...base2, ...linkedStyle.definition?.styles || {} };
     };
     const pMap = buildStyleMap(paragraphStyleId);
-    const tMap = buildStyleMap(inlineTextStyleId);
+    let tMap;
+    if (paragraphStyleId?.startsWith("TOC")) {
+      tMap = {};
+    } else {
+      tMap = buildStyleMap(inlineTextStyleId);
+    }
     const rMap = buildStyleMap(runStyleId);
     const finalStyles = { ...pMap, ...tMap, ...rMap };
     if (Object.keys(finalStyles).length === 0) return;
@@ -18549,7 +19589,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() {
@@ -18610,7 +19650,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 = "";
@@ -19400,7 +20440,7 @@ const CommentsMark = Mark.create({
 });
 const defaultTabDistance = 48;
 const defaultLineLength = 816;
-const getTabDecorations = (doc2, view, from2 = 0, to = null) => {
+const getTabDecorations = (doc2, view, helpers2, from2 = 0, to = null) => {
   const decorations = [];
   const paragraphCache = /* @__PURE__ */ new Map();
   const end2 = to ?? doc2.content.size;
@@ -19408,7 +20448,7 @@ const getTabDecorations = (doc2, view, from2 = 0, to = null) => {
     if (node.type.name !== "tab") return;
     let extraStyles = "";
     const $pos = doc2.resolve(pos);
-    const paragraphContext = getParagraphContext($pos, paragraphCache);
+    const paragraphContext = getParagraphContext($pos, paragraphCache, helpers2);
     if (!paragraphContext) return;
     try {
       const { tabStops, flattened, startPos } = paragraphContext;
@@ -19463,18 +20503,27 @@ const getTabDecorations = (doc2, view, from2 = 0, to = null) => {
   });
   return decorations;
 };
-function getParagraphContext($pos, cache) {
+function getParagraphContext($pos, cache, helpers2) {
   for (let depth = $pos.depth; depth >= 0; depth--) {
     const node = $pos.node(depth);
     if (node?.type?.name === "paragraph") {
       const startPos = $pos.start(depth);
       if (!cache.has(startPos)) {
+        let tabStops = [];
+        if (Array.isArray(node.attrs?.tabStops)) {
+          tabStops = node.attrs.tabStops;
+        } else {
+          const style = helpers2.linkedStyles.getStyleById(node.attrs?.styleId);
+          if (Array.isArray(style?.definition?.styles?.tabStops)) {
+            tabStops = style.definition.styles.tabStops;
+          }
+        }
         cache.set(startPos, {
           paragraph: node,
           paragraphDepth: depth,
           startPos,
           indent: node.attrs?.indent || {},
-          tabStops: Array.isArray(node.attrs?.tabStops) ? node.attrs.tabStops : [],
+          tabStops,
           flattened: flattenParagraph(node, startPos),
           accumulatedTabWidth: 0
         });
@@ -19640,7 +20689,7 @@ const TabNode = Node$1.create({
     };
   },
   addPmPlugins() {
-    const { view } = this.editor;
+    const { view, helpers: helpers2 } = this.editor;
     const tabPlugin = new Plugin({
       name: "tabPlugin",
       key: new PluginKey("tabPlugin"),
@@ -19650,7 +20699,7 @@ const TabNode = Node$1.create({
         },
         apply(tr, { decorations }, _oldState, newState) {
           if (!decorations) {
-            decorations = DecorationSet.create(newState.doc, getTabDecorations(newState.doc, view));
+            decorations = DecorationSet.create(newState.doc, getTabDecorations(newState.doc, view, helpers2));
           }
           if (!tr.docChanged) {
             return { decorations };
@@ -19690,7 +20739,7 @@ const TabNode = Node$1.create({
           rangesToRecalculate.forEach(([start2, end2]) => {
             const oldDecorations = decorations.find(start2, end2);
             decorations = decorations.remove(oldDecorations);
-            const newDecorations = getTabDecorations(newState.doc, view, start2, end2);
+            const newDecorations = getTabDecorations(newState.doc, view, helpers2, start2, end2);
             decorations = decorations.add(newState.doc, newDecorations);
           });
           return { decorations };
@@ -25971,83 +27020,66 @@ const processMarks = (marks) => {
   });
   return styles;
 };
-const ShapeContainer = Node$1.create({
-  name: "shapeContainer",
-  group: "block",
-  content: "block+",
-  isolating: true,
+const PageReference = Node$1.create({
+  name: "pageReference",
+  group: "inline",
+  inline: true,
+  atom: true,
+  draggable: false,
+  selectable: false,
+  content: "inline*",
   addOptions() {
     return {
       htmlAttributes: {
-        class: "sd-editor-shape-container",
-        "aria-label": "Shape container node"
+        contenteditable: false,
+        "data-id": "auto-page-reference",
+        "aria-label": "Page reference node",
+        class: "sd-editor-page-reference"
       }
     };
   },
   addAttributes() {
     return {
-      fillcolor: {
-        renderDOM: (attrs) => {
-          if (!attrs.fillcolor) return {};
-          return {
-            style: `background-color: ${attrs.fillcolor}`
-          };
-        }
-      },
-      sdBlockId: {
+      marksAsAttrs: {
         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: {
+      instruction: {
+        default: "",
         rendered: false
       }
     };
   },
   parseDOM() {
-    return [
-      {
-        tag: `div[data-type="${this.name}"]`
-      }
-    ];
+    return [{ tag: 'span[data-id="auto-page-reference"]' }];
   },
   renderDOM({ htmlAttributes }) {
-    return [
-      "div",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
-      0
-    ];
+    return ["span", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
   }
 });
-const ShapeTextbox = Node$1.create({
-  name: "shapeTextbox",
+const ShapeContainer = Node$1.create({
+  name: "shapeContainer",
   group: "block",
-  content: "paragraph* block*",
+  content: "block+",
   isolating: true,
   addOptions() {
     return {
       htmlAttributes: {
-        class: "sd-editor-shape-textbox",
-        "aria-label": "Shape textbox node"
+        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,
@@ -26056,72 +27088,15 @@ const ShapeTextbox = Node$1.create({
           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,
+      style: {
         renderDOM: (attrs) => {
-          if (!attrs.background) return {};
+          if (!attrs.style) return {};
           return {
-            style: `background-color: ${attrs.background}`
+            style: attrs.style
           };
         }
       },
-      drawingContent: {
+      wrapAttributes: {
         rendered: false
       },
       attributes: {
@@ -26131,786 +27106,167 @@ const ContentBlock = Node$1.create({
   },
   parseDOM() {
     return [
-      {
-        tag: `div[data-type="${this.name}"]`
-      }
-    ];
-  },
-  renderDOM({ htmlAttributes }) {
-    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
-  },
-  addCommands() {
-    return {
-      /**
-       * Insert a horizontal rule
-       * @category Command
-       * @example
-       * editor.commands.insertHorizontalRule()
-       * @note Creates a visual separator between content sections
-       */
-      insertHorizontalRule: () => ({ commands: commands2 }) => {
-        return commands2.insertContent({
-          type: this.name,
-          attrs: {
-            horizontalRule: true,
-            size: { width: "100%", height: 2 },
-            background: "#e5e7eb"
-          }
-        });
-      },
-      /**
-       * Insert a content block
-       * @category Command
-       * @param {ContentBlockConfig} config - Block configuration
-       * @example
-       * // Insert a spacer block
-       * editor.commands.insertContentBlock({ size: { height: 20 } })
-       *
-       * @example
-       * // Insert a colored divider
-       * editor.commands.insertContentBlock({
-       *   size: { width: '50%', height: 3 },
-       *   background: '#3b82f6'
-       * })
-       * @note Used for spacing, dividers, and special inline content
-       */
-      insertContentBlock: (config) => ({ commands: commands2 }) => {
-        return commands2.insertContent({
-          type: this.name,
-          attrs: config
-        });
-      }
-    };
-  }
-});
-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",
-  inline: true,
-  content: "inline*",
-  isolating: true,
-  atom: false,
-  // false - has editable content.
-  draggable: true,
-  addOptions() {
-    return {
-      htmlAttributes: {
-        class: structuredContentClass$1,
-        "aria-label": "Structured content node"
-      }
-    };
-  },
-  addAttributes() {
-    return {
-      id: {
-        default: null,
-        parseDOM: (elem) => elem.getAttribute("data-id"),
-        renderDOM: (attrs) => {
-          if (!attrs.id) return {};
-          return { "data-id": attrs.id };
-        }
-      },
-      sdtPr: {
-        rendered: false
-      }
-    };
-  },
-  parseDOM() {
-    return [{ tag: "span[data-structured-content]" }];
-  },
-  renderDOM({ htmlAttributes }) {
-    return [
-      "span",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-        "data-structured-content": ""
-      }),
-      0
-    ];
-  },
-  addNodeView() {
-    return (props) => {
-      return new StructuredContentInlineView({ ...props });
-    };
-  }
-});
-class StructuredContentBlockView extends StructuredContentViewBase {
-  constructor(props) {
-    super(props);
-  }
-  mount() {
-    this.buildView();
-  }
-  get contentDOM() {
-    const contentElement = this.dom?.querySelector(`.${structuredContentInnerClass}`);
-    return contentElement || null;
-  }
-  createElement() {
-    const element = document.createElement("div");
-    element.classList.add(structuredContentClass);
-    element.setAttribute("data-structured-content-block", "");
-    const contentElement = document.createElement("div");
-    contentElement.classList.add(structuredContentInnerClass);
-    element.append(contentElement);
-    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(element, { ...domAttrs });
-    return { element, contentElement };
-  }
-  buildView() {
-    const { element } = this.createElement();
-    const dragHandle = this.createDragHandle();
-    element.prepend(dragHandle);
-    element.addEventListener("dragstart", (e) => this.onDragStart(e));
-    this.root = element;
-  }
-  updateView() {
-    const domAttrs = Attribute.mergeAttributes(this.htmlAttributes);
-    updateDOMAttributes(this.dom, { ...domAttrs });
-  }
-  update(node, decorations, innerDecorations) {
-    const result = super.update(node, decorations, innerDecorations);
-    if (!result) return false;
-    this.updateView();
-    return true;
+      {
+        tag: `div[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return [
+      "div",
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
+      0
+    ];
   }
-}
-const structuredContentClass = "sd-structured-content-block";
-const structuredContentInnerClass = "sd-structured-content-block__content";
-const StructuredContentBlock = Node$1.create({
-  name: "structuredContentBlock",
-  group: "block structuredContent",
-  content: "block*",
+});
+const ShapeTextbox = Node$1.create({
+  name: "shapeTextbox",
+  group: "block",
+  content: "paragraph* block*",
   isolating: true,
-  atom: false,
-  // false - has editable content.
-  draggable: true,
   addOptions() {
     return {
       htmlAttributes: {
-        class: structuredContentClass,
-        "aria-label": "Structured content block node"
+        class: "sd-editor-shape-textbox",
+        "aria-label": "Shape textbox node"
       }
     };
   },
   addAttributes() {
     return {
-      id: {
+      sdBlockId: {
         default: null,
-        parseDOM: (elem) => elem.getAttribute("data-id"),
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
         renderDOM: (attrs) => {
-          if (!attrs.id) return {};
-          return { "data-id": attrs.id };
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
         }
       },
-      sdtPr: {
+      attributes: {
         rendered: false
       }
     };
   },
   parseDOM() {
-    return [{ tag: "div[data-structured-content-block]" }];
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`
+      }
+    ];
   },
   renderDOM({ htmlAttributes }) {
     return [
       "div",
-      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, {
-        "data-structured-content-block": ""
-      }),
+      Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name }),
       0
     ];
-  },
-  addNodeView() {
-    return (props) => {
-      return new StructuredContentBlockView({ ...props });
-    };
   }
 });
-class DocumentSectionView {
-  constructor(node, getPos, decorations, editor) {
-    __privateAdd(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",
-  group: "block",
-  content: "block*",
-  atom: true,
+const ContentBlock = Node$1.create({
+  name: "contentBlock",
+  group: "inline",
+  content: "",
   isolating: true,
+  atom: true,
+  inline: true,
   addOptions() {
     return {
       htmlAttributes: {
-        class: "sd-document-section-block",
-        "aria-label": "Structured content block"
+        contenteditable: false
       }
     };
   },
-  parseDOM() {
-    return [
-      {
-        tag: "div.sd-document-section-block",
-        priority: 60
-      }
-    ];
-  },
-  renderDOM({ htmlAttributes }) {
-    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
-  },
   addAttributes() {
     return {
-      id: {},
-      sdBlockId: {
+      horizontalRule: {
+        default: false,
+        renderDOM: ({ horizontalRule }) => {
+          if (!horizontalRule) return {};
+          return { "data-horizontal-rule": "true" };
+        }
+      },
+      size: {
+        default: null,
+        renderDOM: ({ size }) => {
+          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,
-        keepOnSplit: false,
-        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
         renderDOM: (attrs) => {
-          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+          if (!attrs.background) return {};
+          return {
+            style: `background-color: ${attrs.background}`
+          };
         }
       },
-      title: {},
-      description: {},
-      sectionType: {},
-      isLocked: { default: false }
+      drawingContent: {
+        rendered: false
+      },
+      attributes: {
+        rendered: false
+      }
     };
   },
-  addNodeView() {
-    return ({ node, editor, getPos, decorations }) => {
-      return new DocumentSectionView(node, getPos, decorations, editor);
-    };
+  parseDOM() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes, { "data-type": this.name })];
   },
   addCommands() {
     return {
       /**
-       * Create a lockable content section
+       * Insert a horizontal rule
        * @category Command
-       * @param {SectionCreate} [options={}] - Section configuration
        * @example
-       * editor.commands.createDocumentSection({
-       *   id: 1,
-       *   title: 'Terms & Conditions',
-       *   isLocked: true,
-       *   html: '<p>Legal content...</p>'
-       * })
+       * editor.commands.insertHorizontalRule()
+       * @note Creates a visual separator between content sections
        */
-      createDocumentSection: (options = {}) => ({ tr, state, 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;
-            }
+      insertHorizontalRule: () => ({ commands: commands2 }) => {
+        return commands2.insertContent({
+          type: this.name,
+          attrs: {
+            horizontalRule: true,
+            size: { width: "100%", height: 2 },
+            background: "#e5e7eb"
           }
-        }
-        if (shouldInsertParagraph) {
-          const emptyParagraph = tr.doc.type.schema.nodes.paragraph.create();
-          tr.insert(insertPos, emptyParagraph);
-        }
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "create" });
-          dispatch(tr);
-          setTimeout(() => {
-            try {
-              const currentState = editor.state;
-              const docSize = currentState.doc.content.size;
-              let targetPos = from2 + node.nodeSize;
-              if (shouldInsertParagraph) {
-                targetPos += 1;
-              }
-              targetPos = Math.min(targetPos, docSize);
-              if (targetPos < docSize && targetPos > 0) {
-                const newSelection = Selection.near(currentState.doc.resolve(targetPos));
-                const newTr = currentState.tr.setSelection(newSelection);
-                editor.view.dispatch(newTr);
-              }
-            } catch (e) {
-              console.warn("Could not set delayed selection:", e);
-            }
-          }, 0);
-        }
-        return true;
-      },
-      /**
-       * Remove section wrapper at cursor, preserving its content
-       * @category Command
-       * @example
-       * editor.commands.removeSectionAtSelection()
-       * @note Content stays in document, only section wrapper is removed
-       */
-      removeSectionAtSelection: () => ({ tr, dispatch }) => {
-        const sdtNode = findParentNode((node2) => node2.type.name === "documentSection")(tr.selection);
-        if (!sdtNode) return false;
-        const { node, pos } = sdtNode;
-        const nodeStart = pos;
-        const nodeEnd = nodeStart + node.nodeSize;
-        const contentToPreserve = node.content;
-        tr.delete(nodeStart, nodeEnd);
-        if (contentToPreserve.size > 0) {
-          tr.insert(nodeStart, contentToPreserve);
-        }
-        const newPos = Math.min(nodeStart, tr.doc.content.size);
-        tr.setSelection(Selection.near(tr.doc.resolve(newPos)));
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "delete" });
-          dispatch(tr);
-        }
-        return true;
-      },
-      /**
-       * Delete section and all its content
-       * @category Command
-       * @param {number} id - Section to delete
-       * @example
-       * editor.commands.removeSectionById(123)
-       */
-      removeSectionById: (id) => ({ tr, dispatch }) => {
-        const sections = SectionHelpers.getAllSections(this.editor);
-        const sectionToRemove = sections.find(({ node: node2 }) => node2.attrs.id === id);
-        if (!sectionToRemove) return false;
-        const { pos, node } = sectionToRemove;
-        const nodeStart = pos;
-        const nodeEnd = nodeStart + node.nodeSize;
-        tr.delete(nodeStart, nodeEnd);
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "delete", id });
-          dispatch(tr);
-        }
-        return true;
+        });
       },
       /**
-       * Lock section against edits
+       * Insert a content block
        * @category Command
-       * @param {number} id - Section to lock
+       * @param {ContentBlockConfig} config - Block configuration
        * @example
-       * editor.commands.lockSectionById(123)
-       */
-      lockSectionById: (id) => ({ tr, dispatch }) => {
-        const sections = SectionHelpers.getAllSections(this.editor);
-        const sectionToLock = sections.find(({ node }) => node.attrs.id === id);
-        if (!sectionToLock) return false;
-        tr.setNodeMarkup(sectionToLock.pos, null, { ...sectionToLock.node.attrs, isLocked: true });
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "lock", id });
-          dispatch(tr);
-        }
-        return true;
-      },
-      /**
-       * Modify section attributes or content
-       * @category Command
-       * @param {SectionUpdate} options - Changes to apply
+       * // Insert a spacer block
+       * editor.commands.insertContentBlock({ size: { height: 20 } })
+       *
        * @example
-       * editor.commands.updateSectionById({ id: 123, attrs: { isLocked: false } })
-       * editor.commands.updateSectionById({ id: 123, html: '<p>New content</p>' })
-       * editor.commands.updateSectionById({
-       *   id: 123,
-       *   html: '<p>Updated</p>',
-       *   attrs: { title: 'New Title' }
+       * // Insert a colored divider
+       * editor.commands.insertContentBlock({
+       *   size: { width: '50%', height: 3 },
+       *   background: '#3b82f6'
        * })
+       * @note Used for spacing, dividers, and special inline content
        */
-      updateSectionById: ({ id, html, json, attrs }) => ({ tr, dispatch, editor }) => {
-        const sections = SectionHelpers.getAllSections(editor || this.editor);
-        const sectionToUpdate = sections.find(({ node: node2 }) => node2.attrs.id === id);
-        if (!sectionToUpdate) return false;
-        const { pos, node } = sectionToUpdate;
-        let newContent = null;
-        if (html) {
-          const htmlDoc = htmlHandler(html, editor || this.editor);
-          const doc2 = DOMParser$1.fromSchema((editor || this.editor).schema).parse(htmlDoc);
-          newContent = doc2.content;
-        }
-        if (json) {
-          newContent = (editor || this.editor).schema.nodeFromJSON(json);
-        }
-        if (!newContent) {
-          newContent = node.content;
-        }
-        const updatedNode = node.type.create({ ...node.attrs, ...attrs }, newContent, node.marks);
-        tr.replaceWith(pos, pos + node.nodeSize, updatedNode);
-        if (dispatch) {
-          tr.setMeta("documentSection", { action: "update", id, attrs });
-          dispatch(tr);
-        }
-        return true;
+      insertContentBlock: (config) => ({ commands: commands2 }) => {
+        return commands2.insertContent({
+          type: this.name,
+          attrs: config
+        });
       }
     };
-  },
-  addHelpers() {
-    return {
-      ...SectionHelpers
-    };
   }
 });
 const { findChildren } = helpers;
@@ -27114,6 +27470,51 @@ const checkForNewBlockNodesInTrs = (transactions) => {
     });
   });
 };
+const TableOfContents = Node$1.create({
+  name: "tableOfContents",
+  group: "block",
+  content: "paragraph+",
+  inline: false,
+  addOptions() {
+    return {
+      htmlAttributes: {
+        "data-id": "table-of-contents",
+        "aria-label": "Table of Contents"
+      }
+    };
+  },
+  parseDOM() {
+    return [
+      {
+        tag: 'div[data-id="table-of-contents"]'
+      }
+    ];
+  },
+  renderDOM({ htmlAttributes }) {
+    return ["div", Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes), 0];
+  },
+  addAttributes() {
+    return {
+      instruction: {
+        default: null,
+        rendered: false
+      },
+      /**
+       * @private
+       * @category Attribute
+       * @param {string} [sdBlockId] - Internal block tracking ID (not user-configurable)
+       */
+      sdBlockId: {
+        default: null,
+        keepOnSplit: false,
+        parseDOM: (elem) => elem.getAttribute("data-sd-block-id"),
+        renderDOM: (attrs) => {
+          return attrs.sdBlockId ? { "data-sd-block-id": attrs.sdBlockId } : {};
+        }
+      }
+    };
+  }
+});
 const TextStyle = Mark.create({
   name: "textStyle",
   addOptions() {
@@ -33720,6 +34121,7 @@ const getStarterExtensions = () => {
     SlashMenu,
     Strike,
     TabNode,
+    TableOfContents,
     Text,
     TextAlign,
     TextIndent,
@@ -33754,13 +34156,16 @@ const getStarterExtensions = () => {
     AiLoaderNode,
     PageNumber,
     TotalPageCount,
+    PageReference,
     ShapeContainer,
     ShapeTextbox,
     ContentBlock,
     Search,
     StructuredContent,
     StructuredContentBlock,
+    StructuredContentCommands,
     DocumentSection,
+    DocumentPartObject,
     NodeResizer,
     CustomSelection,
     TextTransform