superdoc 1.2.2-next.1 → 1.3.0-next.2

package/dist/superdoc.umd.js

@@ -12173,8 +12173,18 @@
     if (color2) add("text-decoration-color", color2);
     return parts.join("; ");
   }
-  const INLINE_OVERRIDE_PROPERTIES = ["fontSize", "bold", "italic", "strike", "underline", "letterSpacing"];
+  const INLINE_OVERRIDE_PROPERTIES = [
+    "fontSize",
+    "bold",
+    "italic",
+    "strike",
+    "underline",
+    "letterSpacing",
+    "vertAlign",
+    "position"
+  ];
   const DEFAULT_FONT_SIZE_HALF_POINTS = 20;
+  const SUBSCRIPT_SUPERSCRIPT_SCALE$1 = 0.65;
   const resolveRunProperties = (params2, inlineRpr, resolvedPpr, isListNumber = false, numberingDefinedInline = false) => {
     const paragraphStyleId = resolvedPpr?.styleId;
     const paragraphStyleProps = resolveStyleChain$1(params2, paragraphStyleId, translator$1O);
@@ -12522,6 +12532,21 @@
           }
           break;
         }
+        case "vertAlign": {
+          if (value) {
+            textStyleAttrs.vertAlign = value;
+          }
+          break;
+        }
+        case "position": {
+          if (value != null && Number.isFinite(value)) {
+            const points2 = halfPointToPoints(value);
+            if (Number.isFinite(points2)) {
+              textStyleAttrs.position = `${points2}pt`;
+            }
+          }
+          break;
+        }
       }
     });
     if (Object.keys(textStyleAttrs).length) {
@@ -12636,6 +12661,8 @@
     let hasTextDecorationNone = false;
     let highlightColor = null;
     let hasHighlightTag = false;
+    let verticalAlignValue;
+    let fontSizeOverride;
     Object.keys(runProperties).forEach((key2) => {
       const value = runProperties[key2];
       switch (key2) {
@@ -12766,6 +12793,35 @@
           }
           break;
         }
+        case "vertAlign": {
+          if (runProperties.position != null && Number.isFinite(runProperties.position)) {
+            break;
+          }
+          if (value === "superscript" || value === "subscript") {
+            verticalAlignValue = value === "superscript" ? "super" : "sub";
+            if (runProperties.fontSize != null && Number.isFinite(runProperties.fontSize)) {
+              const scaledPoints = halfPointToPoints(runProperties.fontSize * SUBSCRIPT_SUPERSCRIPT_SCALE$1);
+              if (Number.isFinite(scaledPoints)) {
+                fontSizeOverride = `${scaledPoints}pt`;
+              }
+            } else {
+              fontSizeOverride = `${SUBSCRIPT_SUPERSCRIPT_SCALE$1 * 100}%`;
+            }
+          } else if (value === "baseline") {
+            verticalAlignValue = "baseline";
+          }
+          break;
+        }
+        case "position": {
+          if (value != null && Number.isFinite(value)) {
+            const points = halfPointToPoints(value);
+            if (Number.isFinite(points)) {
+              verticalAlignValue = `${points}pt`;
+              fontSizeOverride = void 0;
+            }
+          }
+          break;
+        }
       }
     });
     if (!hasTextDecorationNone && textDecorationLines.size) {
@@ -12780,6 +12836,12 @@
         css["color"] = "inherit";
       }
     }
+    if (fontSizeOverride) {
+      css["font-size"] = fontSizeOverride;
+    }
+    if (verticalAlignValue) {
+      css["vertical-align"] = verticalAlignValue;
+    }
     return css;
   }
   function decodeRPrFromMarks(marks) {
@@ -12856,6 +12918,20 @@
                   runProperties.fontFamily = result;
                 }
                 break;
+              case "vertAlign":
+                if (value != null) {
+                  runProperties.vertAlign = value;
+                }
+                break;
+              case "position": {
+                if (value != null) {
+                  const numeric = parseFloat(value);
+                  if (!isNaN(numeric)) {
+                    runProperties.position = numeric * 2;
+                  }
+                }
+                break;
+              }
             }
           });
           break;
@@ -35843,7 +35919,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     static getStoredSuperdocVersion(docx) {
       return SuperConverter.getStoredCustomProperty(docx, "SuperdocVersion");
     }
-    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.2.2-next.1") {
+    static setStoredSuperdocVersion(docx = this.convertedXml, version2 = "1.3.0-next.2") {
       return SuperConverter.setStoredCustomProperty(docx, "SuperdocVersion", version2, false);
     }
     /**
@@ -61465,7 +61541,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       return false;
     }
   };
-  const summaryVersion = "1.2.2-next.1";
+  const summaryVersion = "1.3.0-next.2";
   const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
   const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
   function mapAttributes(attrs) {
@@ -64099,7 +64175,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
      * Process collaboration migrations
      */
     processCollaborationMigrations() {
-      console.debug("[checkVersionMigrations] Current editor version", "1.2.2-next.1");
+      console.debug("[checkVersionMigrations] Current editor version", "1.3.0-next.2");
       if (!this.options.ydoc) return;
       const metaMap = this.options.ydoc.getMap("meta");
       let docVersion = metaMap.get("version");
@@ -66519,18 +66595,18 @@ Please report this to https://github.com/markedjs/marked.`, e) {
       case "decimal":
         return num.toString();
       case "lowerLetter":
-        return toLetter$1(num, false);
+        return toLetter(num, false);
       case "upperLetter":
-        return toLetter$1(num, true);
+        return toLetter(num, true);
       case "lowerRoman":
-        return toRoman$2(num).toLowerCase();
+        return toRoman$1(num).toLowerCase();
       case "upperRoman":
-        return toRoman$2(num);
+        return toRoman$1(num);
       default:
         return num.toString();
     }
   }
-  function toLetter$1(num, uppercase) {
+  function toLetter(num, uppercase) {
     let result = "";
     let n = num;
     while (n > 0) {
@@ -66541,7 +66617,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     }
     return result || (uppercase ? "A" : "a");
   }
-  function toRoman$2(num) {
+  function toRoman$1(num) {
     const lookup = [
       [1e3, "M"],
       [900, "CM"],
@@ -71945,7 +72021,14 @@ ${l}
           fragmentEl.dataset.continuesOnNext = "true";
         }
         const lines = fragment.lines ?? measure.lines.slice(fragment.fromLine, fragment.toLine);
-        applyParagraphBlockStyles(fragmentEl, block.attrs);
+        applyParagraphBlockStyles(fragmentEl, block.attrs, { includeBorders: false, includeShading: false });
+        const { shadingLayer, borderLayer } = createParagraphDecorationLayers(this.doc, fragment.width, block.attrs);
+        if (shadingLayer) {
+          fragmentEl.appendChild(shadingLayer);
+        }
+        if (borderLayer) {
+          fragmentEl.appendChild(borderLayer);
+        }
         if (block.attrs?.styleId) {
           fragmentEl.dataset.styleId = block.attrs.styleId;
           fragmentEl.setAttribute("styleid", block.attrs.styleId);
@@ -72329,10 +72412,18 @@ ${l}
         contentEl.classList.add("superdoc-list-content");
         this.applySdtDataset(contentEl, paragraphMetadata);
         contentEl.style.display = "inline-block";
+        contentEl.style.position = "relative";
         contentEl.style.width = `${fragment.width}px`;
         const lines = itemMeasure.paragraph.lines.slice(fragment.fromLine, fragment.toLine);
         const contentAttrs = wordLayout ? item.paragraph.attrs : stripListIndent(item.paragraph.attrs);
-        applyParagraphBlockStyles(contentEl, contentAttrs);
+        applyParagraphBlockStyles(contentEl, contentAttrs, { includeBorders: false, includeShading: false });
+        const { shadingLayer, borderLayer } = createParagraphDecorationLayers(this.doc, fragment.width, contentAttrs);
+        if (shadingLayer) {
+          contentEl.appendChild(shadingLayer);
+        }
+        if (borderLayer) {
+          contentEl.appendChild(borderLayer);
+        }
         contentEl.style.textAlign = "left";
         const paraForList = {
           ...item.paragraph,
@@ -74556,7 +74647,7 @@ ${l}
       }
     });
   };
-  const applyParagraphBlockStyles = (element2, attrs) => {
+  const applyParagraphBlockStyles = (element2, attrs, options = {}) => {
     if (!attrs) return;
     if (attrs.styleId) {
       element2.setAttribute("styleid", attrs.styleId);
@@ -74583,8 +74674,55 @@ ${l}
         }
       }
     }
-    applyParagraphBorderStyles(element2, attrs.borders);
-    applyParagraphShadingStyles(element2, attrs.shading);
+    if (options.includeBorders ?? true) {
+      applyParagraphBorderStyles(element2, attrs.borders);
+    }
+    if (options.includeShading ?? true) {
+      applyParagraphShadingStyles(element2, attrs.shading);
+    }
+  };
+  const getParagraphBorderBox = (fragmentWidth, indent2) => {
+    const indentLeft = Number.isFinite(indent2?.left) ? indent2.left : 0;
+    const indentRight = Number.isFinite(indent2?.right) ? indent2.right : 0;
+    const firstLine = Number.isFinite(indent2?.firstLine) ? indent2.firstLine : 0;
+    const hanging = Number.isFinite(indent2?.hanging) ? indent2.hanging : 0;
+    const firstLineOffset = firstLine - hanging;
+    const minLeftInset = Math.min(indentLeft, indentLeft + firstLineOffset);
+    const leftInset = Math.max(0, minLeftInset);
+    const rightInset = Math.max(0, indentRight);
+    return {
+      leftInset,
+      width: Math.max(0, fragmentWidth - leftInset - rightInset)
+    };
+  };
+  const createParagraphDecorationLayers = (doc2, fragmentWidth, attrs) => {
+    if (!attrs?.borders && !attrs?.shading) return {};
+    const borderBox = getParagraphBorderBox(fragmentWidth, attrs.indent);
+    const baseStyles = {
+      position: "absolute",
+      top: "0px",
+      bottom: "0px",
+      left: `${borderBox.leftInset}px`,
+      width: `${borderBox.width}px`,
+      pointerEvents: "none",
+      boxSizing: "border-box"
+    };
+    let shadingLayer;
+    if (attrs.shading) {
+      shadingLayer = doc2.createElement("div");
+      shadingLayer.classList.add("superdoc-paragraph-shading");
+      Object.assign(shadingLayer.style, baseStyles);
+      applyParagraphShadingStyles(shadingLayer, attrs.shading);
+    }
+    let borderLayer;
+    if (attrs.borders) {
+      borderLayer = doc2.createElement("div");
+      borderLayer.classList.add("superdoc-paragraph-border");
+      Object.assign(borderLayer.style, baseStyles);
+      borderLayer.style.zIndex = "1";
+      applyParagraphBorderStyles(borderLayer, attrs.borders);
+    }
+    return { shadingLayer, borderLayer };
   };
   const BORDER_SIDES = ["top", "right", "bottom", "left"];
   const applyParagraphBorderStyles = (element2, borders) => {
@@ -78235,33 +78373,13 @@ ${l}
       toLineByCell.push(cutLine);
       heightByCell.push(cumulativeHeight);
     }
-    const allCellsCompleteInFirstPass = toLineByCell.every((cutLine, idx) => {
-      const totalLines = getCellTotalLines(row2.cells[idx]);
-      return cutLine >= totalLines;
-    });
-    const lineAdvancements = toLineByCell.map((cutLine, idx) => cutLine - (startLines[idx] || 0));
-    const positiveAdvancements = lineAdvancements.filter((adv) => adv > 0);
-    const minLineAdvancement = positiveAdvancements.length > 0 ? Math.min(...positiveAdvancements) : 0;
     let actualPartialHeight = 0;
     let maxPaddingTotal = 0;
     for (let cellIdx = 0; cellIdx < cellCount; cellIdx++) {
-      const cell2 = row2.cells[cellIdx];
-      const startLine = startLines[cellIdx] || 0;
-      const lines = getCellLines(cell2);
       const cellPadding = cellPaddings[cellIdx];
       const paddingTotal = cellPadding.top + cellPadding.bottom;
       maxPaddingTotal = Math.max(maxPaddingTotal, paddingTotal);
-      if (allCellsCompleteInFirstPass) {
-        actualPartialHeight = Math.max(actualPartialHeight, heightByCell[cellIdx] + paddingTotal);
-      } else {
-        const targetLine = Math.min(startLine + minLineAdvancement, lines.length);
-        let cumulativeHeight = 0;
-        for (let i2 = startLine; i2 < targetLine; i2++) {
-          cumulativeHeight += lines[i2].lineHeight || 0;
-        }
-        toLineByCell[cellIdx] = targetLine;
-        actualPartialHeight = Math.max(actualPartialHeight, cumulativeHeight + paddingTotal);
-      }
+      actualPartialHeight = Math.max(actualPartialHeight, heightByCell[cellIdx] + paddingTotal);
     }
     const madeProgress = toLineByCell.some((cutLine, idx) => cutLine > (startLines[idx] || 0));
     const isFirstPart = startLines.every((l) => l === 0);
@@ -78814,7 +78932,7 @@ ${l}
   function toLowerLetter(num) {
     return toUpperLetter(num).toLowerCase();
   }
-  function formatPageNumber$1(pageNumber, format) {
+  function formatPageNumber(pageNumber, format) {
     const num = Math.max(1, pageNumber);
     switch (format) {
       case "decimal":
@@ -78827,6 +78945,8 @@ ${l}
         return toUpperLetter(num);
       case "lowerLetter":
         return toLowerLetter(num);
+      case "numberInDash":
+        return `-${num}-`;
       default:
         return String(num);
     }
@@ -78855,7 +78975,7 @@ ${l}
       const sectionMetadata = sectionMap.get(pageSectionIndex);
       const format = sectionMetadata?.numbering?.format ?? "decimal";
       const displayNumber = runningCounter;
-      const displayText = formatPageNumber$1(displayNumber, format);
+      const displayText = formatPageNumber(displayNumber, format);
       result.push({
         physicalPage: page.number,
         displayNumber,
@@ -78991,59 +79111,6 @@ ${l}
     if (!layoutDebugEnabled$1) return;
     console.log(...args);
   };
-  function formatPageNumber(num, format) {
-    switch (format) {
-      case "decimal":
-        return String(num);
-      case "lowerLetter":
-        return toLetter(num, false);
-      case "upperLetter":
-        return toLetter(num, true);
-      case "lowerRoman":
-        return toRoman$1(num).toLowerCase();
-      case "upperRoman":
-        return toRoman$1(num);
-      default:
-        return String(num);
-    }
-  }
-  function toLetter(num, uppercase) {
-    let result = "";
-    let n = Math.max(1, Math.floor(num));
-    while (n > 0) {
-      const remainder = (n - 1) % 26;
-      const char = String.fromCharCode((uppercase ? 65 : 97) + remainder);
-      result = char + result;
-      n = Math.floor((n - 1) / 26);
-    }
-    return result;
-  }
-  function toRoman$1(num) {
-    const lookup = [
-      [1e3, "M"],
-      [900, "CM"],
-      [500, "D"],
-      [400, "CD"],
-      [100, "C"],
-      [90, "XC"],
-      [50, "L"],
-      [40, "XL"],
-      [10, "X"],
-      [9, "IX"],
-      [5, "V"],
-      [4, "IV"],
-      [1, "I"]
-    ];
-    let result = "";
-    let n = Math.max(1, Math.floor(num));
-    for (const [value, numeral] of lookup) {
-      while (n >= value) {
-        result += numeral;
-        n -= value;
-      }
-    }
-    return result;
-  }
   function layoutDocument(blocks2, measures, options = {}) {
     if (blocks2.length !== measures.length) {
       throw new Error(
@@ -80499,7 +80566,7 @@ ${l}
       return `${block.id}@${safeWidth}x${safeHeight}:${hash2}`;
     }
   }
-  function resolveHeaderFooterTokens(blocks2, pageNumber, totalPages) {
+  function resolveHeaderFooterTokens(blocks2, pageNumber, totalPages, pageNumberText) {
     if (!blocks2 || blocks2.length === 0) {
       return;
     }
@@ -80511,7 +80578,7 @@ ${l}
       console.warn("[resolveHeaderFooterTokens] Invalid totalPages:", totalPages, "- using 1 as fallback");
       totalPages = 1;
     }
-    const pageNumberStr = String(pageNumber);
+    const pageNumberStr = pageNumberText ?? String(pageNumber);
     const totalPagesStr = String(totalPages);
     for (const block of blocks2) {
       if (block.kind !== "paragraph") continue;
@@ -80935,15 +81002,31 @@ ${l}
       for (const pageNum of pagesToLayout) {
         const clonedBlocks = cloneHeaderFooterBlocks(blocks2);
         const { displayText, totalPages: totalPagesForPage } = pageResolver(pageNum);
-        const resolvedPageNum = parseInt(displayText, 10) || pageNum;
-        resolveHeaderFooterTokens(clonedBlocks, resolvedPageNum, totalPagesForPage);
+        resolveHeaderFooterTokens(clonedBlocks, pageNum, totalPagesForPage, displayText);
         const measures = await cache2.measureBlocks(clonedBlocks, constraints, measureBlock2);
         const pageLayout = layoutHeaderFooter(clonedBlocks, measures, constraints);
+        const measuresById = /* @__PURE__ */ new Map();
+        for (let i2 = 0; i2 < clonedBlocks.length; i2 += 1) {
+          measuresById.set(clonedBlocks[i2].id, measures[i2]);
+        }
+        const fragmentsWithLines = pageLayout.pages[0]?.fragments.map((fragment) => {
+          if (fragment.kind !== "para") {
+            return fragment;
+          }
+          const measure = measuresById.get(fragment.blockId);
+          if (!measure || measure.kind !== "paragraph") {
+            return fragment;
+          }
+          return {
+            ...fragment,
+            lines: measure.lines.slice(fragment.fromLine, fragment.toLine)
+          };
+        }) ?? [];
         pages.push({
           number: pageNum,
           blocks: clonedBlocks,
           measures,
-          fragments: pageLayout.pages[0]?.fragments ?? []
+          fragments: fragmentsWithLines
         });
       }
       const firstPageLayout = pages[0] ? layoutHeaderFooter(pages[0].blocks, pages[0].measures, constraints) : { height: 0 };
@@ -85822,7 +85905,14 @@ ${l}
     const pgNumType = elements.find((el) => el?.name === "w:pgNumType");
     if (!pgNumType?.attributes) return void 0;
     const fmtRaw = pgNumType.attributes["w:fmt"];
-    const validFormats = ["decimal", "lowerLetter", "upperLetter", "lowerRoman", "upperRoman"];
+    const validFormats = [
+      "decimal",
+      "lowerLetter",
+      "upperLetter",
+      "lowerRoman",
+      "upperRoman",
+      "numberInDash"
+    ];
     const fmt = validFormats.includes(fmtRaw) ? fmtRaw : void 0;
     const startRaw = pgNumType.attributes["w:start"];
     const startNum = startRaw != null ? Number(startRaw) : void 0;
@@ -95818,6 +95908,7 @@ ${l}
   const TrackInsertMarkName = "trackInsert";
   const TrackDeleteMarkName = "trackDelete";
   const TrackFormatMarkName = "trackFormat";
+  const SUBSCRIPT_SUPERSCRIPT_SCALE = 0.65;
   const DEFAULT_PAGE_SIZE = { w: 612, h: 792 };
   const DEFAULT_MARGINS = { top: 72, right: 72, bottom: 72, left: 72 };
   const DEFAULT_VIRTUALIZED_PAGE_GAP = 72;
@@ -99033,6 +99124,7 @@ ${l}
         );
         this.#domIndexObserverManager?.pause();
         painter.paint(layout, this.#painterHost);
+        this.#applyVertAlignToLayout();
         this.#rebuildDomPositionIndex();
         this.#domIndexObserverManager?.resume();
         this.#layoutEpoch = layoutEpoch;
@@ -100777,6 +100869,90 @@ ${l}
       this.#errorBanner = null;
       this.#errorBannerMessage = null;
     }
+    /**
+     * Applies vertical alignment and font scaling to layout DOM elements for subscript/superscript rendering.
+     *
+     * This method post-processes the painted DOM layout to apply vertical alignment styles
+     * (super, sub, baseline, or custom position) based on run properties and text style marks.
+     * It handles both DOCX-style vertAlign ('superscript', 'subscript', 'baseline') and
+     * custom position offsets (in half-points).
+     *
+     * Processing logic:
+     * 1. Queries all text spans with ProseMirror position markers
+     * 2. For each span, resolves the ProseMirror position to find the containing run node
+     * 3. Extracts vertAlign and position from run properties and/or text style marks
+     * 4. Applies CSS vertical-align and font-size styles based on the extracted properties
+     * 5. Position takes precedence over vertAlign when both are present
+     *
+     * @throws Does not throw - DOM manipulation errors are silently caught to prevent layout corruption
+     * @private
+     */
+    #applyVertAlignToLayout() {
+      const doc2 = this.#editor?.state?.doc;
+      if (!doc2 || !this.#painterHost) return;
+      try {
+        const spans = this.#painterHost.querySelectorAll(".superdoc-line span[data-pm-start]");
+        spans.forEach((span) => {
+          try {
+            if (span.closest(".superdoc-page-header, .superdoc-page-footer")) return;
+            const pmStart = Number(span.dataset.pmStart ?? "NaN");
+            if (!Number.isFinite(pmStart)) return;
+            const pos = Math.max(0, Math.min(pmStart, doc2.content.size));
+            const $pos = doc2.resolve(pos);
+            let runNode = null;
+            for (let depth = $pos.depth; depth >= 0; depth--) {
+              const node2 = $pos.node(depth);
+              if (node2.type.name === "run") {
+                runNode = node2;
+                break;
+              }
+            }
+            let vertAlign = runNode?.attrs?.runProperties?.vertAlign ?? null;
+            let position2 = runNode?.attrs?.runProperties?.position ?? null;
+            let fontSizeHalfPts = runNode?.attrs?.runProperties?.fontSize ?? null;
+            if (!vertAlign && position2 == null && runNode) {
+              runNode.forEach((child) => {
+                if (!child.isText || !child.marks?.length) return;
+                const rpr = decodeRPrFromMarks(child.marks);
+                if (rpr.vertAlign && !vertAlign) vertAlign = rpr.vertAlign;
+                if (rpr.position != null && position2 == null) position2 = rpr.position;
+                if (rpr.fontSize != null && fontSizeHalfPts == null) fontSizeHalfPts = rpr.fontSize;
+              });
+            }
+            if (vertAlign == null && position2 == null) return;
+            const styleEntries = [];
+            if (position2 != null && Number.isFinite(position2)) {
+              const pts = halfPointToPoints(position2);
+              if (Number.isFinite(pts)) {
+                styleEntries.push(`vertical-align: ${pts}pt`);
+              }
+            } else if (vertAlign === "superscript" || vertAlign === "subscript") {
+              styleEntries.push(`vertical-align: ${vertAlign === "superscript" ? "super" : "sub"}`);
+              if (fontSizeHalfPts != null && Number.isFinite(fontSizeHalfPts)) {
+                const scaledPts = halfPointToPoints(fontSizeHalfPts * SUBSCRIPT_SUPERSCRIPT_SCALE);
+                if (Number.isFinite(scaledPts)) {
+                  styleEntries.push(`font-size: ${scaledPts}pt`);
+                } else {
+                  styleEntries.push(`font-size: ${SUBSCRIPT_SUPERSCRIPT_SCALE * 100}%`);
+                }
+              } else {
+                styleEntries.push(`font-size: ${SUBSCRIPT_SUPERSCRIPT_SCALE * 100}%`);
+              }
+            } else if (vertAlign === "baseline") {
+              styleEntries.push("vertical-align: baseline");
+            }
+            if (!styleEntries.length) return;
+            const existing = span.getAttribute("style");
+            const merged = existing ? `${existing}; ${styleEntries.join("; ")}` : styleEntries.join("; ");
+            span.setAttribute("style", merged);
+          } catch (error) {
+            console.error("Failed to apply vertical alignment to span:", error);
+          }
+        });
+      } catch (error) {
+        console.error("Failed to apply vertical alignment to layout:", error);
+      }
+    }
   }
   const Color = Extension.create({
     name: "color",
@@ -112309,7 +112485,63 @@ ${l}
          * @category Attribute
          * @param {string} [styleId] - Style identifier for referencing predefined styles
          */
-        styleId: {}
+        styleId: {},
+        /**
+         * Vertical alignment for subscript/superscript text (DOCX w:vertAlign).
+         * Standard values: 'superscript', 'subscript', 'baseline'.
+         * When both vertAlign and position are present, position takes precedence.
+         * Renders as CSS vertical-align with 65% font-size scaling for super/subscript.
+         * @category Attribute
+         * @param {string} [vertAlign] - Vertical alignment mode ('superscript' | 'subscript' | 'baseline')
+         */
+        vertAlign: {
+          default: null,
+          renderDOM: (attrs) => {
+            if (!attrs.vertAlign || attrs.position) return {};
+            if (attrs.vertAlign === "superscript") {
+              return { style: "vertical-align: super; font-size: 65%;" };
+            }
+            if (attrs.vertAlign === "subscript") {
+              return { style: "vertical-align: sub; font-size: 65%;" };
+            }
+            if (attrs.vertAlign === "baseline") {
+              return { style: "vertical-align: baseline;" };
+            }
+            return {};
+          },
+          parseDOM: (el) => {
+            const va = el.style?.verticalAlign;
+            if (va === "super") return "superscript";
+            if (va === "sub") return "subscript";
+            if (va === "baseline") return "baseline";
+            return null;
+          }
+        },
+        /**
+         * Custom vertical position offset in points (DOCX w:position).
+         * Numeric value specifying vertical offset (positive raises, negative lowers).
+         * Format: '{number}pt' (e.g., '2pt', '-1.5pt').
+         * Takes precedence over vertAlign when both are present.
+         * Renders as CSS vertical-align with the exact offset value.
+         * @category Attribute
+         * @param {string} [position] - Vertical position offset (e.g., '2pt', '-1pt')
+         */
+        position: {
+          default: null,
+          renderDOM: (attrs) => {
+            if (!attrs.position) return {};
+            return { style: `vertical-align: ${attrs.position};` };
+          },
+          parseDOM: (el) => {
+            const va = el.style?.verticalAlign;
+            if (!va) return null;
+            const numeric = parseFloat(va);
+            if (!Number.isNaN(numeric)) {
+              return `${numeric}pt`;
+            }
+            return null;
+          }
+        }
       };
     },
     addCommands() {
@@ -142960,7 +143192,7 @@ ${reason}`);
       this.config.colors = shuffleArray(this.config.colors);
       this.userColorMap = /* @__PURE__ */ new Map();
       this.colorIndex = 0;
-      this.version = "1.2.2-next.1";
+      this.version = "1.3.0-next.2";
       this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
       this.superdocId = config2.superdocId || v4();
       this.colors = this.config.colors;