superdoc 1.2.1 → 1.3.0-next.1

package/dist/chunks/{index-MvYBJo1p.cjs → index-BNpbdx2a.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jszip = require("./jszip-C8_CqJxM.cjs");
 const helpers$1 = require("./helpers-nOdwpmwb.cjs");
-const superEditor_converter = require("./SuperConverter-D7wt-eeZ.cjs");
+const superEditor_converter = require("./SuperConverter-Dy0-KTCc.cjs");
 const vue = require("./vue-De9wkgLl.cjs");
 require("./jszip.min-BPh2MMAa.cjs");
 const eventemitter3 = require("./eventemitter3-BQuRcMPI.cjs");
@@ -14915,7 +14915,7 @@ const canUseDOM = () => {
     return false;
   }
 };
-const summaryVersion = "1.2.1";
+const summaryVersion = "1.3.0-next.1";
 const nodeKeys = ["group", "content", "marks", "inline", "atom", "defining", "code", "tableRole", "summary"];
 const markKeys = ["group", "inclusive", "excludes", "spanning", "code"];
 function mapAttributes(attrs) {
@@ -17548,7 +17548,7 @@ class Editor extends EventEmitter {
    * Process collaboration migrations
    */
   processCollaborationMigrations() {
-    console.debug("[checkVersionMigrations] Current editor version", "1.2.1");
+    console.debug("[checkVersionMigrations] Current editor version", "1.3.0-next.1");
     if (!this.options.ydoc) return;
     const metaMap = this.options.ydoc.getMap("meta");
     let docVersion = metaMap.get("version");
@@ -19807,6 +19807,15 @@ function calculateTabWidth(params2) {
     tabStopPosUsed: nextStop.pos
   };
 }
+const OOXML_PCT_DIVISOR = 5e3;
+function resolveColumnWidths(columns, availableWidth) {
+  const columnCount = columns.length;
+  const width = availableWidth / columnCount;
+  return columns.map(() => width);
+}
+function measureRowHeights(cells, _columnWidths) {
+  return cells.map(() => 20);
+}
 const SPACE_CHARS$1 = /* @__PURE__ */ new Set([" ", " "]);
 function shouldApplyJustify(params2) {
   const { alignment: alignment2, hasExplicitPositioning, isLastLineOfParagraph, paragraphEndsWithLineBreak, skipJustifyOverride } = params2;
@@ -20080,16 +20089,9 @@ function computeWrapExclusion(image, lineY, lineHeight2) {
       return null;
   }
 }
-function resolveColumnWidths(columns, availableWidth) {
-  const columnCount = columns.length;
-  const width = availableWidth / columnCount;
-  return columns.map(() => width);
-}
-function measureRowHeights(cells, _columnWidths) {
-  return cells.map(() => 20);
-}
 const Engines = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
+  OOXML_PCT_DIVISOR,
   calculateTabWidth,
   computeListIndent,
   computeTabStops: computeTabStops$1,
@@ -23191,6 +23193,37 @@ function renderListMarker(params2) {
   lineContainer.appendChild(lineEl);
   return lineContainer;
 }
+function applyParagraphBordersAndShading(paraWrapper, block) {
+  const borders = block.attrs?.borders;
+  if (borders) {
+    paraWrapper.style.boxSizing = "border-box";
+    const sideStyles = {
+      top: { width: "border-top-width", style: "border-top-style", color: "border-top-color" },
+      bottom: { width: "border-bottom-width", style: "border-bottom-style", color: "border-bottom-color" },
+      left: { width: "border-left-width", style: "border-left-style", color: "border-left-color" },
+      right: { width: "border-right-width", style: "border-right-style", color: "border-right-color" }
+    };
+    ["top", "bottom", "left", "right"].forEach((side) => {
+      const border = borders[side];
+      if (!border) return;
+      const styleValue = border.style ?? "solid";
+      let widthValue = typeof border.width === "number" ? Math.max(0, border.width) : 1;
+      if (styleValue === "none") {
+        widthValue = 0;
+      }
+      const cssKeys = sideStyles[side];
+      paraWrapper.style.setProperty(cssKeys.style, styleValue);
+      paraWrapper.style.setProperty(cssKeys.width, `${widthValue}px`);
+      if (border.color) {
+        paraWrapper.style.setProperty(cssKeys.color, border.color);
+      }
+    });
+  }
+  const shadingFill = block.attrs?.shading?.fill;
+  if (shadingFill) {
+    paraWrapper.style.backgroundColor = shadingFill;
+  }
+}
 const renderTableCell = (deps) => {
   const {
     doc: doc2,
@@ -23353,6 +23386,9 @@ const renderTableCell = (deps) => {
         paraWrapper.style.left = "0";
         paraWrapper.style.width = "100%";
         applySdtDataset(paraWrapper, block.attrs?.sdt);
+        applyParagraphBordersAndShading(paraWrapper, block);
+        applyParagraphBorderStyles(paraWrapper, block.attrs?.borders);
+        applyParagraphShadingStyles(paraWrapper, block.attrs?.shading);
         let renderedHeight = 0;
         for (let lineIdx = localStartLine; lineIdx < localEndLine && lineIdx < lines.length; lineIdx++) {
           const line = lines[lineIdx];
@@ -23383,15 +23419,26 @@ const renderTableCell = (deps) => {
             } else {
               const indent = block.attrs?.indent;
               if (indent) {
-                if (typeof indent.left === "number" && indent.left > 0) {
-                  lineEl.style.paddingLeft = `${indent.left}px`;
+                const leftIndent = typeof indent.left === "number" ? indent.left : 0;
+                const hanging = typeof indent.hanging === "number" ? indent.hanging : 0;
+                const firstLine = typeof indent.firstLine === "number" ? indent.firstLine : 0;
+                const isFirstLine = lineIdx === 0 && localStartLine === 0;
+                const firstLineOffset = firstLine - hanging;
+                if (isFirstLine) {
+                  if (leftIndent > 0) {
+                    lineEl.style.paddingLeft = `${leftIndent}px`;
+                  }
+                  if (firstLineOffset !== 0) {
+                    lineEl.style.textIndent = `${firstLineOffset}px`;
+                  }
+                } else {
+                  if (leftIndent > 0) {
+                    lineEl.style.paddingLeft = `${leftIndent}px`;
+                  }
                 }
                 if (typeof indent.right === "number" && indent.right > 0) {
                   lineEl.style.paddingRight = `${indent.right}px`;
                 }
-                if (lineIdx === 0 && typeof indent.firstLine === "number" && indent.firstLine !== 0) {
-                  lineEl.style.textIndent = `${indent.firstLine}px`;
-                }
               }
             }
             paraWrapper.appendChild(lineEl);
@@ -31499,6 +31546,27 @@ function getCellPadding(cellIdx, blockRow) {
 function getCellTotalLines(cell) {
   return getCellLines(cell).length;
 }
+const ROW_HEIGHT_EPSILON = 0.1;
+function getRowContentHeight(blockRow, rowMeasure) {
+  let contentHeight = 0;
+  for (let cellIdx = 0; cellIdx < rowMeasure.cells.length; cellIdx++) {
+    const cell = rowMeasure.cells[cellIdx];
+    const cellPadding = getCellPadding(cellIdx, blockRow);
+    const paddingTotal = cellPadding.top + cellPadding.bottom;
+    const lines = getCellLines(cell);
+    const linesHeight = lines.reduce((sum, line) => sum + (line.lineHeight || 0), 0);
+    contentHeight = Math.max(contentHeight, linesHeight + paddingTotal);
+  }
+  return contentHeight;
+}
+function hasExplicitRowHeightSlack(blockRow, rowMeasure) {
+  const rowHeightSpec = blockRow?.attrs?.rowHeight;
+  if (!rowHeightSpec || rowHeightSpec.value == null || !Number.isFinite(rowHeightSpec.value)) {
+    return false;
+  }
+  const contentHeight = getRowContentHeight(blockRow, rowMeasure);
+  return rowMeasure.height > contentHeight + ROW_HEIGHT_EPSILON;
+}
 function mergePmRange(target, range) {
   if (typeof range.pmStart === "number") {
     target.pmStart = target.pmStart == null ? range.pmStart : Math.min(target.pmStart, range.pmStart);
@@ -31668,8 +31736,12 @@ function findSplitPoint(block, measure, startRow, availableHeight, fullPageHeigh
   let lastFitRow = startRow;
   for (let i = startRow; i < block.rows.length; i++) {
     const row = block.rows[i];
-    const rowHeight = measure.rows[i]?.height || 0;
-    const cantSplit = row.attrs?.tableRowProperties?.cantSplit === true;
+    const rowMeasure = measure.rows[i];
+    const rowHeight = rowMeasure?.height || 0;
+    let cantSplit = row.attrs?.tableRowProperties?.cantSplit === true;
+    if (rowMeasure && hasExplicitRowHeightSlack(row, rowMeasure) && (!fullPageHeight || rowHeight <= fullPageHeight)) {
+      cantSplit = true;
+    }
     if (accumulatedHeight + rowHeight <= availableHeight) {
       accumulatedHeight += rowHeight;
       lastFitRow = i + 1;
@@ -31760,7 +31832,10 @@ function layoutTableBlock({
   if (hasMeasuredRows && hasPriorFragments) {
     const firstRowCantSplit = block.rows[0]?.attrs?.tableRowProperties?.cantSplit === true;
     const firstRowHeight = measure.rows[0]?.height ?? measure.totalHeight ?? 0;
-    if (firstRowCantSplit) {
+    const firstRowSlack = hasExplicitRowHeightSlack(block.rows[0], measure.rows[0]);
+    const firstRowFitsPage = firstRowHeight <= state.contentBottom;
+    const treatFirstRowAsCantSplit = firstRowCantSplit || firstRowSlack && firstRowFitsPage;
+    if (treatFirstRowAsCantSplit) {
       if (firstRowHeight > availableHeight) {
         state = advanceColumn(state);
       }
@@ -32326,6 +32401,36 @@ const DEFAULT_PARAGRAPH_LINE_HEIGHT_PX = 20;
 function hasHeight(fragment) {
   return fragment.kind === "image" || fragment.kind === "drawing" || fragment.kind === "table";
 }
+function getParagraphSpacingBefore(block) {
+  const spacing = block.attrs?.spacing;
+  const value = spacing?.before ?? spacing?.lineSpaceBefore;
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+function getParagraphSpacingAfter(block) {
+  const spacing = block.attrs?.spacing;
+  const value = spacing?.after ?? spacing?.lineSpaceAfter;
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+function getMeasureHeight(block, measure) {
+  switch (measure.kind) {
+    case "paragraph":
+      return measure.totalHeight;
+    case "table":
+      return measure.totalHeight;
+    case "list":
+      return measure.totalHeight;
+    case "image":
+    case "drawing":
+      return measure.height;
+    case "sectionBreak":
+    case "pageBreak":
+    case "columnBreak":
+      return 0;
+    default: {
+      return block.kind === "paragraph" ? DEFAULT_PARAGRAPH_LINE_HEIGHT_PX : 0;
+    }
+  }
+}
 const DEFAULT_PAGE_SIZE$2 = { w: 612, h: 792 };
 const DEFAULT_MARGINS$2 = { top: 72, right: 72, bottom: 72, left: 72 };
 const COLUMN_EPSILON = 1e-4;
@@ -33040,6 +33145,36 @@ function layoutDocument(blocks, measures, options = {}) {
           placedAnchoredTableIds.add(tableBlock.id);
         }
       }
+      if (paraBlock.attrs?.keepNext === true) {
+        const nextBlock = blocks[index2 + 1];
+        const nextMeasure = measures[index2 + 1];
+        if (nextBlock && nextMeasure && nextBlock.kind !== "sectionBreak" && nextBlock.kind !== "pageBreak" && nextBlock.kind !== "columnBreak") {
+          const shouldSkipAnchoredTable = nextBlock.kind === "table" && nextBlock.anchor?.isAnchored === true;
+          if (!shouldSkipAnchoredTable) {
+            let state = paginator.ensurePage();
+            const availableHeight = state.contentBottom - state.cursorY;
+            const spacingAfter = getParagraphSpacingAfter(paraBlock);
+            const currentHeight = getMeasureHeight(paraBlock, measure);
+            const nextHeight = getMeasureHeight(nextBlock, nextMeasure);
+            const nextIsParagraph = nextBlock.kind === "paragraph" && nextMeasure.kind === "paragraph";
+            const nextSpacingBefore = nextIsParagraph ? getParagraphSpacingBefore(nextBlock) : 0;
+            const nextFirstLineHeight = (() => {
+              if (!nextIsParagraph) {
+                return nextHeight;
+              }
+              const firstLineHeight = nextMeasure.lines[0]?.lineHeight;
+              if (typeof firstLineHeight === "number" && Number.isFinite(firstLineHeight) && firstLineHeight > 0) {
+                return firstLineHeight;
+              }
+              return nextHeight;
+            })();
+            const combinedHeight = nextIsParagraph ? currentHeight + Math.max(spacingAfter, nextSpacingBefore) + nextFirstLineHeight : currentHeight + spacingAfter + nextHeight;
+            if (combinedHeight > availableHeight && state.page.fragments.length > 0) {
+              state = paginator.advanceColumn(state);
+            }
+          }
+        }
+      }
       layoutParagraphBlock(
         {
           block,
@@ -40148,6 +40283,23 @@ const applyThemeShade = (baseHex, ratio) => {
   };
   return rgbToHex(shaded);
 };
+const getLuminance = (hexColor) => {
+  const rgb = hexToRgb(hexColor);
+  if (!rgb) return 1;
+  const toLinear = (channel) => {
+    const c2 = channel / 255;
+    return c2 <= 0.03928 ? c2 / 12.92 : Math.pow((c2 + 0.055) / 1.055, 2.4);
+  };
+  const R = toLinear(rgb.r);
+  const G = toLinear(rgb.g);
+  const B = toLinear(rgb.b);
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+};
+const WCAG_AA_LUMINANCE_THRESHOLD = 0.18;
+const resolveAutoColor = (backgroundColor) => {
+  const luminance = getLuminance(backgroundColor);
+  return luminance < WCAG_AA_LUMINANCE_THRESHOLD ? "#FFFFFF" : "#000000";
+};
 const resolveThemeColor = (attrs, themeColors) => {
   if (!attrs || !themeColors) return void 0;
   const rawKey = attrs.themeColor;
@@ -40473,8 +40625,9 @@ const applyTextStyleMark = (run, attrs, themeColors) => {
 const DEFAULT_HYPERLINK_CONFIG = {
   enableRichHyperlinks: false
 };
-const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG, themeColors) => {
+const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG, themeColors, backgroundColor) => {
   const isTabRun2 = run.kind === "tab";
+  let markSetColor = false;
   marks.forEach((mark) => {
     const forwardedDataAttrs = extractDataAttributes(mark.attrs);
     try {
@@ -40510,7 +40663,11 @@ const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG,
         }
         case "textStyle":
           if (!isTabRun2) {
+            const colorBefore = run.color;
             applyTextStyleMark(run, mark.attrs ?? {}, themeColors);
+            if (run.color !== colorBefore && run.color !== void 0) {
+              markSetColor = true;
+            }
           }
           break;
         case "commentMark":
@@ -40591,6 +40748,15 @@ const applyMarksToRun = (run, marks, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG,
       run.dataAttrs = { ...run.dataAttrs ?? {}, ...forwardedDataAttrs };
     }
   });
+  if (!isTabRun2 && !markSetColor && backgroundColor) {
+    const normalizedExisting = normalizeColor$1(run.color);
+    const normalizedUpper = normalizedExisting?.toUpperCase();
+    const isDefaultBlack = normalizedUpper === "#000000" || normalizedUpper === "#000";
+    const isAutoColorValue = typeof run.color === "string" && ["auto", "none"].includes(run.color.trim().replace(/^#/, "").toLowerCase());
+    if (!normalizedExisting || isAutoColorValue || isDefaultBlack) {
+      run.color = resolveAutoColor(backgroundColor);
+    }
+  }
 };
 function textNodeToRun(textNode, positions, defaultFont, defaultSize, inheritedMarks = [], sdtMetadata, hyperlinkConfig = DEFAULT_HYPERLINK_CONFIG$1, themeColors) {
   const run = {
@@ -44413,7 +44579,13 @@ function paragraphToFlowBlocks$1(para, nextBlockId, positions, defaultFont, defa
       const inlineStyleId = getInlineStyleId(inheritedMarks);
       applyRunStyles2(run, inlineStyleId, activeRunStyleId);
       applyBaseRunDefaults(run, baseRunDefaults, defaultFont, defaultSize);
-      applyMarksToRun(run, [...node.marks ?? [], ...inheritedMarks ?? []], hyperlinkConfig, themeColors);
+      applyMarksToRun(
+        run,
+        [...node.marks ?? [], ...inheritedMarks ?? []],
+        hyperlinkConfig,
+        themeColors,
+        converterContext?.backgroundColor
+      );
       currentRuns.push(run);
       return;
     }
@@ -45132,9 +45304,21 @@ const parseTableCell = (args) => {
     return null;
   }
   const blocks = [];
-  const cellConverterContext = tableStyleParagraphProps ? {
+  const cellBackground = cellNode.attrs?.background;
+  let cellBackgroundColor;
+  if (cellBackground && typeof cellBackground.color === "string") {
+    const rawColor = cellBackground.color.trim();
+    if (rawColor) {
+      const normalized = rawColor.startsWith("#") ? rawColor : `#${rawColor}`;
+      if (/^#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?$/.test(normalized)) {
+        cellBackgroundColor = normalized;
+      }
+    }
+  }
+  const cellConverterContext = tableStyleParagraphProps || cellBackgroundColor ? {
     ...context.converterContext,
-    tableStyleParagraphProps
+    ...tableStyleParagraphProps && { tableStyleParagraphProps },
+    ...cellBackgroundColor && { backgroundColor: cellBackgroundColor }
   } : context.converterContext;
   const paragraphToFlowBlocks2 = context.converters?.paragraphToFlowBlocks ?? context.paragraphToFlowBlocks;
   const listCounterContext = context.listCounterContext;
@@ -48514,8 +48698,33 @@ async function measureParagraphBlock(block, maxWidth) {
     ...dropCapMeasure ? { dropCap: dropCapMeasure } : {}
   };
 }
+function validateTableWidthValue(attr) {
+  const value = attr.width ?? attr.value;
+  if (typeof value === "number" && Number.isFinite(value) && value > 0) {
+    return value;
+  }
+  return void 0;
+}
+function resolveTableWidth(attrs, maxWidth) {
+  const tableWidthAttr = attrs?.tableWidth;
+  if (!tableWidthAttr || typeof tableWidthAttr !== "object") {
+    return void 0;
+  }
+  const typedAttr = tableWidthAttr;
+  const validValue = validateTableWidthValue(typedAttr);
+  if (validValue === void 0) {
+    return void 0;
+  }
+  if (typedAttr.type === "pct") {
+    return Math.round(maxWidth * (validValue / OOXML_PCT_DIVISOR));
+  } else if (typedAttr.type === "px" || typedAttr.type === "pixel") {
+    return validValue;
+  }
+  return void 0;
+}
 async function measureTableBlock(block, constraints) {
   const maxWidth = typeof constraints === "number" ? constraints : constraints.maxWidth;
+  const resolvedTableWidth = resolveTableWidth(block.attrs, maxWidth);
   let columnWidths;
   const scaleColumnWidths = (widths, targetWidth) => {
     const totalWidth2 = widths.reduce((a, b) => a + b, 0);
@@ -48546,19 +48755,26 @@ async function measureTableBlock(block, constraints) {
     return scaled;
   };
   const maxCellCount = Math.max(1, Math.max(...block.rows.map((r2) => r2.cells.length)));
+  const effectiveTargetWidth = resolvedTableWidth != null ? Math.min(resolvedTableWidth, maxWidth) : maxWidth;
   if (block.columnWidths && block.columnWidths.length > 0) {
     columnWidths = [...block.columnWidths];
-    const hasExplicitWidth = block.attrs?.tableWidth != null;
+    const hasExplicitWidth = resolvedTableWidth != null;
     const hasFixedLayout = block.attrs?.tableLayout === "fixed";
     if (hasExplicitWidth || hasFixedLayout) {
       const totalWidth2 = columnWidths.reduce((a, b) => a + b, 0);
-      if (totalWidth2 > maxWidth) {
-        columnWidths = scaleColumnWidths(columnWidths, maxWidth);
+      if (totalWidth2 !== effectiveTargetWidth && effectiveTargetWidth > 0) {
+        const scale = effectiveTargetWidth / totalWidth2;
+        columnWidths = columnWidths.map((w) => Math.max(1, Math.round(w * scale)));
+        const scaledSum = columnWidths.reduce((a, b) => a + b, 0);
+        if (scaledSum !== effectiveTargetWidth && columnWidths.length > 0) {
+          const diff = effectiveTargetWidth - scaledSum;
+          columnWidths[columnWidths.length - 1] = Math.max(1, columnWidths[columnWidths.length - 1] + diff);
+        }
       }
     } else {
       if (columnWidths.length < maxCellCount) {
         const usedWidth = columnWidths.reduce((a, b) => a + b, 0);
-        const remainingWidth = Math.max(0, maxWidth - usedWidth);
+        const remainingWidth = Math.max(0, effectiveTargetWidth - usedWidth);
         const missingColumns = maxCellCount - columnWidths.length;
         const paddingWidth = Math.max(1, Math.floor(remainingWidth / missingColumns));
         columnWidths.push(...Array.from({ length: missingColumns }, () => paddingWidth));
@@ -48566,12 +48782,12 @@ async function measureTableBlock(block, constraints) {
         columnWidths = columnWidths.slice(0, maxCellCount);
       }
       const totalWidth2 = columnWidths.reduce((a, b) => a + b, 0);
-      if (totalWidth2 > maxWidth) {
-        columnWidths = scaleColumnWidths(columnWidths, maxWidth);
+      if (totalWidth2 > effectiveTargetWidth) {
+        columnWidths = scaleColumnWidths(columnWidths, effectiveTargetWidth);
       }
     }
   } else {
-    const columnWidth = Math.max(1, Math.floor(maxWidth / maxCellCount));
+    const columnWidth = Math.max(1, Math.floor(effectiveTargetWidth / maxCellCount));
     columnWidths = Array.from({ length: maxCellCount }, () => columnWidth);
   }
   const gridColumnCount = columnWidths.length;
@@ -49103,6 +49319,7 @@ const CommentMarkName = "commentMark";
 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;
@@ -52347,6 +52564,7 @@ class PresentationEditor extends EventEmitter {
       );
       this.#domIndexObserverManager?.pause();
       painter.paint(layout, this.#painterHost);
+      this.#applyVertAlignToLayout();
       this.#rebuildDomPositionIndex();
       this.#domIndexObserverManager?.resume();
       this.#layoutEpoch = layoutEpoch;
@@ -54109,6 +54327,90 @@ class PresentationEditor extends EventEmitter {
     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 node = $pos.node(depth);
+            if (node.type.name === "run") {
+              runNode = node;
+              break;
+            }
+          }
+          let vertAlign = runNode?.attrs?.runProperties?.vertAlign ?? null;
+          let position = runNode?.attrs?.runProperties?.position ?? null;
+          let fontSizeHalfPts = runNode?.attrs?.runProperties?.fontSize ?? null;
+          if (!vertAlign && position == null && runNode) {
+            runNode.forEach((child) => {
+              if (!child.isText || !child.marks?.length) return;
+              const rpr = superEditor_converter.decodeRPrFromMarks(child.marks);
+              if (rpr.vertAlign && !vertAlign) vertAlign = rpr.vertAlign;
+              if (rpr.position != null && position == null) position = rpr.position;
+              if (rpr.fontSize != null && fontSizeHalfPts == null) fontSizeHalfPts = rpr.fontSize;
+            });
+          }
+          if (vertAlign == null && position == null) return;
+          const styleEntries = [];
+          if (position != null && Number.isFinite(position)) {
+            const pts = helpers$1.halfPointToPoints(position);
+            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 = helpers$1.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",
@@ -65650,7 +65952,63 @@ const TextStyle = Mark.create({
        * @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() {

package/dist/chunks/{index-CQcBu0ln.cjs → index-BbvMtiJY.cjs}

@@ -1,6 +1,6 @@
 "use strict";
-const index = require("./index-MvYBJo1p.cjs");
-require("./SuperConverter-D7wt-eeZ.cjs");
+const index = require("./index-BNpbdx2a.cjs");
+require("./SuperConverter-Dy0-KTCc.cjs");
 const blankDocx = require("./blank-docx-DfW3Eeh2.cjs");
 const eventemitter3 = require("./eventemitter3-BQuRcMPI.cjs");
 const provider = require("@hocuspocus/provider");
@@ -7461,7 +7461,7 @@ const _sfc_main = {
   __name: "SuperDoc",
   emits: ["selection-update"],
   setup(__props, { emit: __emit }) {
-    const PdfViewer = vue.defineAsyncComponent(() => Promise.resolve().then(() => require("./PdfViewer-DAuugJGV.cjs")));
+    const PdfViewer = vue.defineAsyncComponent(() => Promise.resolve().then(() => require("./PdfViewer-BAoRLNIo.cjs")));
     const superdocStore = useSuperdocStore();
     const commentsStore = useCommentsStore();
     const {
@@ -8367,7 +8367,7 @@ class SuperDoc extends eventemitter3.EventEmitter {
     this.config.colors = shuffleArray(this.config.colors);
     this.userColorMap = /* @__PURE__ */ new Map();
     this.colorIndex = 0;
-    this.version = "1.2.1";
+    this.version = "1.3.0-next.1";
     this.#log("🦋 [superdoc] Using SuperDoc version:", this.version);
     this.superdocId = config.superdocId || uuid.v4();
     this.colors = this.config.colors;