@stll/folio-core 0.47.7 → 0.48.0

package/dist/layout-painter/renderPage.js

@@ -1,8 +1,9 @@
 import { resolveFloatingTableX } from "../layout-engine/measure/floatingTablePosition.js";
 import { rectsToFloatingZones } from "../layout-engine/measure/floatingZones.js";
+import { DEFAULT_FONT_FAMILY } from "../layout-engine/measure/measureHelpers.js";
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { resolveTableInlineOffset } from "../layout-engine/measure/tableInlinePlacement.js";
-import { floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun } from "../layout-engine/types.js";
+import { NOTE_SEPARATOR_RULE_THICKNESS, NOTE_SEPARATOR_WIDTH_FRACTION, floatingTextBoxReservesBand, floatingTextBoxWrapsText, isFloatingImageRun, isFloatingTextBoxBlock, isTextWrappingFloatingImageRun, stripFlowBlockPmAnchors } from "../layout-engine/types.js";
 import { cssBorderStyle } from "../utils/borderCss.js";
 import { resolveFontFamily } from "../utils/fontResolver.js";
 import { borderToStyle } from "../utils/formatToStyle.js";
@@ -43,7 +44,7 @@ const PAGE_CLASS_NAMES = {
 };
 const HEADER_FOOTER_RULE_CLIP_MARGIN = pointsToPixels(1.5);
 const DEFAULT_MARGIN_GUIDE_COLOR = "#c0c0c0";
-const getDefaultPageFontFamily = () => resolveFontFamily("Calibri").cssFallback;
+const getDefaultPageFontFamily = () => resolveFontFamily(DEFAULT_FONT_FAMILY).cssFallback;
 /**
 * Apply page styles to an element
 */
@@ -603,6 +604,25 @@ function calculateFootnoteAreaRenderHeight(footnotes) {
 	}
 	return height;
 }
+/** A note separator rule: the canvas ink colour, `NOTE_SEPARATOR_RULE_THICKNESS` high. */
+function applyNoteSeparatorRuleStyles(element, width) {
+	element.style.width = `${width}px`;
+	element.style.height = `${NOTE_SEPARATOR_RULE_THICKNESS}px`;
+	element.style.backgroundColor = "var(--doc-canvas-text, #000)";
+}
+/** The separator rules of a note area that flows with the body (endnotes). */
+function renderFlowedNoteSeparators(page, contentEl, doc) {
+	for (const rule of page.noteSeparators ?? []) {
+		const ruleEl = doc.createElement("div");
+		ruleEl.className = "layout-note-separator";
+		applyNoteSeparatorRuleStyles(ruleEl, rule.width);
+		ruleEl.style.position = "absolute";
+		ruleEl.style.left = `${rule.x - page.margins.left}px`;
+		ruleEl.style.top = `${rule.y - page.margins.top}px`;
+		ruleEl.style.pointerEvents = "none";
+		contentEl.append(ruleEl);
+	}
+}
 /**
 * Render the footnote area at the bottom of a page.
 * Includes a separator line (33% width) and footnote entries.
@@ -612,11 +632,8 @@ function renderFootnoteArea(footnotes, contentWidth, doc, context) {
 	container.className = "layout-footnote-area";
 	container.style.width = `${contentWidth}px`;
 	const separator = doc.createElement("div");
-	const separatorRuleHeight = .5;
-	const separatorMargin = (12 - separatorRuleHeight) / 2;
-	separator.style.width = "33%";
-	separator.style.height = `${separatorRuleHeight}px`;
-	separator.style.backgroundColor = "var(--doc-canvas-text, #000)";
+	const separatorMargin = (12 - NOTE_SEPARATOR_RULE_THICKNESS) / 2;
+	applyNoteSeparatorRuleStyles(separator, contentWidth * NOTE_SEPARATOR_WIDTH_FRACTION);
 	separator.style.marginTop = `${separatorMargin}px`;
 	separator.style.marginBottom = `${separatorMargin}px`;
 	container.append(separator);
@@ -674,7 +691,7 @@ function renderFootnoteContent(footnote, contentWidth, doc, context) {
 	return wrapper;
 }
 function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
-	const renderBlock = stripFootnotePmAnchors(block);
+	const renderBlock = stripFlowBlockPmAnchors(block);
 	if (renderBlock.kind === "paragraph" && measure.kind === "paragraph") {
 		const element = renderParagraphFragment({
 			kind: "paragraph",
@@ -732,81 +749,6 @@ function renderFootnoteBlock(block, measure, contentWidth, y, context, doc) {
 	}
 	return null;
 }
-function stripFootnotePmAnchors(block) {
-	switch (block.kind) {
-		case "paragraph": return stripFootnoteParagraphPmAnchors(block);
-		case "table": return stripFootnoteTablePmAnchors(block);
-		case "image": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...image } = block;
-			return image;
-		}
-		case "textBox": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...textBox } = block;
-			return {
-				...textBox,
-				content: textBox.content.map((contentBlock) => contentBlock.kind === "table" ? stripFootnoteTablePmAnchors(contentBlock) : stripFootnoteParagraphPmAnchors(contentBlock))
-			};
-		}
-		case "pageBreak":
-		case "columnBreak": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...breakBlock } = block;
-			return breakBlock;
-		}
-		case "sectionBreak": return block;
-		default: return block;
-	}
-}
-function stripFootnoteTablePmAnchors(block) {
-	const { pmStart: _pmStart, pmEnd: _pmEnd, ...table } = block;
-	return {
-		...table,
-		rows: table.rows.map(stripFootnoteTableRowPmAnchors)
-	};
-}
-function stripFootnoteTableRowPmAnchors(row) {
-	return {
-		...row,
-		cells: row.cells.map(stripFootnoteTableCellPmAnchors)
-	};
-}
-function stripFootnoteTableCellPmAnchors(cell) {
-	return {
-		...cell,
-		blocks: cell.blocks.map(stripFootnotePmAnchors)
-	};
-}
-function stripFootnoteParagraphPmAnchors(block) {
-	const { pmStart: _pmStart, pmEnd: _pmEnd, ...paragraph } = block;
-	return {
-		...paragraph,
-		runs: paragraph.runs.map(stripFootnoteRunPmAnchors)
-	};
-}
-function stripFootnoteRunPmAnchors(run) {
-	switch (run.kind) {
-		case "text": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...textRun } = run;
-			return textRun;
-		}
-		case "tab": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...tabRun } = run;
-			return tabRun;
-		}
-		case "image": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...imageRun } = run;
-			return imageRun;
-		}
-		case "lineBreak": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...lineBreakRun } = run;
-			return lineBreakRun;
-		}
-		case "field": {
-			const { pmStart: _pmStart, pmEnd: _pmEnd, ...fieldRun } = run;
-			return fieldRun;
-		}
-		default: return run;
-	}
-}
 function positionFootnoteBlock(element, top, width, height) {
 	element.style.position = "absolute";
 	element.style.left = "0";
@@ -1040,6 +982,11 @@ function renderPage(page, context, options = {}) {
 			left: page.margins.left,
 			top: page.margins.top
 		});
+		const noteStory = options.blockLookup?.get(String(fragment.blockId))?.noteStory;
+		if (noteStory) {
+			fragmentEl.dataset["noteKind"] = noteStory.kind;
+			fragmentEl.dataset["noteId"] = String(noteStory.noteId);
+		}
 		contentEl.append(fragmentEl);
 	}
 	if (frontFloatingImages.length > 0) {
@@ -1064,6 +1011,7 @@ function renderPage(page, context, options = {}) {
 			contentEl.append(line);
 		}
 	}
+	renderFlowedNoteSeparators(page, contentEl, doc);
 	if (options.footnoteArea && options.footnoteArea.length > 0) {
 		const fnAreaEl = renderFootnoteArea(options.footnoteArea, contentWidth, doc, context);
 		fnAreaEl.style.position = "absolute";
@@ -1425,6 +1373,7 @@ function runContentKey(run) {
 	if (run.forceComplexScript !== void 0) parts.push(`cs-force:${run.forceComplexScript}`);
 	if (run.eastAsiaFontFamily) parts.push(`ea:${run.eastAsiaFontFamily}`);
 	if (run.eastAsiaAlternateFontFamily) parts.push(`ea-alt:${run.eastAsiaAlternateFontFamily}`);
+	if (run.eastAsiaHint !== void 0) parts.push(`ea-hint:${run.eastAsiaHint}`);
 	if (run.fontSize !== void 0) parts.push(`fs:${run.fontSize}`);
 	if (run.letterSpacing !== void 0) parts.push(`ls:${run.letterSpacing}`);
 	if (run.superscript) parts.push("sup");

package/dist/layout-painter/renderParagraph.d.ts

@@ -30,6 +30,11 @@ type RenderParagraphOptions = {
   renderedInlineImageKeys?: Set<string>;
 };
 declare function getRenderableTextColor(run: TextRun | TabRun): string | undefined;
+/**
+ * The colour a list marker paints in, or undefined for the canvas text colour.
+ * Black and `auto` fall back to the canvas colour, as they do for runs.
+ */
+declare function getRenderableListMarkerColor(color: string | undefined): string | undefined;
 /**
  * How CSS spells each bidirectional wrapper: an override switches the
  * bidirectional algorithm off for its content, an embedding opens a level and
@@ -147,4 +152,4 @@ declare const paragraphHasTrackedChanges: (block: ParagraphBlock) => boolean;
  */
 declare function renderParagraphFragment(fragment: ParagraphFragment, block: ParagraphBlock, measure: ParagraphMeasure, context: RenderContext, options?: RenderParagraphOptions): HTMLElement;
 //#endregion
-export { PARAGRAPH_CLASS_NAMES, RenderParagraphOptions, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };
+export { PARAGRAPH_CLASS_NAMES, RenderParagraphOptions, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableListMarkerColor, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };

package/dist/layout-painter/renderParagraph.js

@@ -4,7 +4,7 @@ import { evaluateFieldInstruction } from "../fields/evaluateField.js";
 import { applyComplexScriptFormatting, hasComplexScriptFormatting, resolveComplexScriptFormatting } from "../layout-engine/measure/complexScriptFormatting.js";
 import { getHyperlinkInstanceIndex } from "../layout-engine/measure/hyperlinkInstance.js";
 import { getListMarkerInlineWidth, getListMarkerVisualOffset, resolveListMarkerFont } from "../layout-engine/measure/listMarkerWidth.js";
-import { DOCX_SCRIPT_FONT_SCALE } from "../layout-engine/measure/measureHelpers.js";
+import { DEFAULT_FONT_FAMILY, docxScriptFontSize } from "../layout-engine/measure/measureHelpers.js";
 import { calculateTabWidth } from "../layout-engine/measure/tabCalculator.js";
 import { FONT_KERNING_MODE, countCompressibleSpaces, getFontKerningMode, getRunFontKerningMode, toPaintedText } from "../layout-engine/measure/textMeasurementPolicy.js";
 import { isFloatingImageRun } from "../layout-engine/types.js";
@@ -17,7 +17,8 @@ import { getHorizontalScaleFactor } from "../utils/horizontalScale.js";
 import { resolvePhysicalParagraphInlineLayout } from "../utils/paragraphInlineLayout.js";
 import { inlineImageBoundingBox, parseRotationDegrees, rotatedBoundingBox } from "../utils/rotationBoundingBox.js";
 import { sanitizeImageSrc } from "../utils/sanitizeImageSrc.js";
-import { SCRIPT_CLASS, hasCjk, hasComplexScript, segmentByScript } from "../utils/scriptSegments.js";
+import { SCRIPT_CLASS, eastAsiaHintApplies, hasComplexScript, hasEastAsiaSlotText, segmentByScript } from "../utils/scriptSegments.js";
+import { trailingSpaceStart } from "../utils/trailingText.js";
 import { anchorTargetAttrs, sanitizeExternalUrl } from "../utils/urlSecurity.js";
 import { borderStrokeToCss, resolveParagraphBorderHorizontalOutsets } from "./borderStroke.js";
 import { planCursiveJoiners, withCursiveJoiners } from "./cursiveJoiners.js";
@@ -146,6 +147,14 @@ function getRenderableTextColor(run) {
 	if (!shouldRenderTextColor(textColor, run.highlight, run.textColorSource)) return;
 	return textColor.trim();
 }
+/**
+* The colour a list marker paints in, or undefined for the canvas text colour.
+* Black and `auto` fall back to the canvas colour, as they do for runs.
+*/
+function getRenderableListMarkerColor(color) {
+	if (!color || isAutomaticTextColor(color) || isDefaultBlackTextColor(color)) return;
+	return color.trim();
+}
 function getHyperlinkTextColor(run, inheritedColor) {
 	const textColor = run.color?.trim();
 	if (textColor && !isAutomaticTextColor(textColor) && run.textColorSource === "direct") return textColor;
@@ -155,8 +164,7 @@ function fontSizePtToPx(fontSizePt) {
 	return fontSizePt * 96 / 72;
 }
 function getRaisedRunFontSize(run) {
-	if (run.fontSize) return `${fontSizePtToPx(run.fontSize) * DOCX_SCRIPT_FONT_SCALE}px`;
-	return `${DOCX_SCRIPT_FONT_SCALE}em`;
+	return `${fontSizePtToPx(docxScriptFontSize(run.fontSize || 11))}px`;
 }
 function applyHorizontalScaleTransform(element, horizontalScale) {
 	const horizontalScaleFactor = getHorizontalScaleFactor(horizontalScale);
@@ -717,7 +725,7 @@ function renderFieldRun(run, doc, { context, visualSpaceContractionPx }) {
 		const horizontalScaleFactor = getHorizontalScaleFactor(resolvedRun.horizontalScale);
 		applyHorizontalScaleTransform(wrapper, resolvedRun.horizontalScale);
 		const { pmStart: _pmStart, pmEnd: _pmEnd, horizontalScale: _horizontalScale, ...segmentBase } = resolvedRun;
-		for (const segment of segmentByScript(text)) {
+		for (const segment of segmentByScript(text, eastAsiaHintApplies(resolvedRun))) {
 			const segmentRun = formatTextRunForScript({
 				...segmentBase,
 				text: segment.text
@@ -864,7 +872,7 @@ const formatTextRunForScript = (run, script) => {
 */
 const needsPerScriptSpans = (run) => {
 	if (run.letterSpacing) return false;
-	if (run.eastAsiaFontFamily !== void 0 && hasCjk(run.text)) return true;
+	if (run.eastAsiaFontFamily !== void 0 && hasEastAsiaSlotText(run.text, eastAsiaHintApplies(run))) return true;
 	return hasComplexScriptFormatting(run) && hasComplexScript(run.text);
 };
 /**
@@ -888,7 +896,7 @@ function splitTextRunsByEastAsia(runs) {
 			continue;
 		}
 		let offset = 0;
-		for (const segment of segmentByScript(run.text)) {
+		for (const segment of segmentByScript(run.text, eastAsiaHintApplies(run))) {
 			result.push(formatTextRunForScript({
 				...run,
 				text: segment.text,
@@ -933,13 +941,13 @@ const splitCollapsibleLineEdgeSpaces = (sourceRuns, collapseLeading) => {
 		const run = runs[index];
 		if (!run || !isTextRun(run)) break;
 		if (run.text.length === 0) continue;
-		const trailingSpaces = / +$/u.exec(run.text);
-		if (!trailingSpaces || paintsLineEdgeSpaces(run)) break;
-		if (trailingSpaces.index === 0) {
+		const spacesStart = trailingSpaceStart(run.text);
+		if (spacesStart === run.text.length || paintsLineEdgeSpaces(run)) break;
+		if (spacesStart === 0) {
 			collapsedTrailingRuns.add(run);
 			continue;
 		}
-		const [leading, trailing] = splitTextRunAt(run, trailingSpaces.index);
+		const [leading, trailing] = splitTextRunAt(run, spacesStart);
 		runs.splice(index, 1, leading, trailing);
 		collapsedTrailingRuns.add(trailing);
 		break;
@@ -1005,6 +1013,7 @@ function runMeasureStyle(run) {
 		...run.alternateFontFamily !== void 0 ? { alternateFontFamily: run.alternateFontFamily } : {},
 		...run.eastAsiaFontFamily !== void 0 ? { eastAsiaFontFamily: run.eastAsiaFontFamily } : {},
 		...run.eastAsiaAlternateFontFamily !== void 0 ? { eastAsiaAlternateFontFamily: run.eastAsiaAlternateFontFamily } : {},
+		...eastAsiaHintApplies(run) ? { eastAsiaHint: true } : {},
 		...run.complexScriptFontFamily !== void 0 ? { complexScriptFontFamily: run.complexScriptFontFamily } : {},
 		...run.complexScriptAlternateFontFamily !== void 0 ? { complexScriptAlternateFontFamily: run.complexScriptAlternateFontFamily } : {},
 		...run.complexScriptFontSize !== void 0 ? { complexScriptFontSize: run.complexScriptFontSize } : {},
@@ -1028,10 +1037,10 @@ function measureFollowingContentWidth(runs, tabRunIndex, measureText, context) {
 		if (isTabRun(run) || isLineBreakRun(run)) break;
 		if (isTextRun(run)) {
 			const text = run.allCaps ? run.text.toLocaleUpperCase() : run.text;
-			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
+			width += measureText(text, run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isFieldRun(run)) {
 			const fieldText = resolveFieldText(run, context);
-			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
+			width += measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 		} else if (isImageRun(run) && !isFloatingImageRun(run)) width += inlineImageBoundingBox(run).width || 0;
 		else if (isMathRun(run)) width += measureText(run.plainText, run.fontSize ?? 11, run.fontFamily ?? "Cambria Math", runMeasureStyle(run)) * getHorizontalScaleFactor(run.horizontalScale);
 	}
@@ -1061,7 +1070,7 @@ function measureDecimalPrefixWidth(runs, tabRunIndex, decimalIndex, measureText,
 		const take = Math.min(runText.length, decimalIndex - consumed);
 		if (take > 0) {
 			const horizontalScaleFactor = getHorizontalScaleFactor(run.horizontalScale);
-			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Calibri", runMeasureStyle(run)) * horizontalScaleFactor;
+			width += measureText(runText.slice(0, take), run.fontSize ?? 11, run.fontFamily ?? "Times New Roman", runMeasureStyle(run)) * horizontalScaleFactor;
 		}
 		consumed += runText.length;
 	}
@@ -1113,7 +1122,7 @@ function applyLetterSpacingToMeasuredWidth(width, text, letterSpacing) {
 }
 function createTextMeasurer(doc) {
 	const ctx = doc.createElement("canvas").getContext("2d");
-	return (text, fontSize = 11, fontFamily = "Calibri", style = {}) => {
+	return (text, fontSize = 11, fontFamily = DEFAULT_FONT_FAMILY, style = {}) => {
 		if (!ctx) return applyLetterSpacingToMeasuredWidth(text.length * 7, text, style.letterSpacing);
 		ctx.fontKerning = getFontKerningMode(style);
 		const fontString = (family, size, bold, italic, alternateFamily) => {
@@ -1131,9 +1140,9 @@ function createTextMeasurer(doc) {
 			ctx.font = complexFont;
 			return applyLetterSpacingToMeasuredWidth(ctx.measureText(text).width, text, style.letterSpacing);
 		}
-		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasCjk(text) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
+		if (!style.letterSpacing && (style.eastAsiaFontFamily && hasEastAsiaSlotText(text, style.eastAsiaHint) || hasComplexScriptFormatting(style) && hasComplexScript(text))) {
 			let segmentedWidth = 0;
-			for (const segment of segmentByScript(text)) {
+			for (const segment of segmentByScript(text, style.eastAsiaHint)) {
 				if (segment.script === SCRIPT_CLASS.eastAsia && style.eastAsiaFontFamily) ctx.font = fontString(style.eastAsiaFontFamily, fontSize, style.bold, style.italic, style.eastAsiaAlternateFontFamily);
 				else if (segment.script === SCRIPT_CLASS.complex) ctx.font = complexFont;
 				else ctx.font = baseFont;
@@ -1189,7 +1198,7 @@ function renderLine(block, line, alignment, doc, options) {
 		if (collapsedLeadingSpaceRuns.has(run)) runEl.dataset["collapsedLeadingSpaces"] = "true";
 		if (collapsedTrailingSpaceRuns.has(run)) runEl.dataset["collapsedTrailingSpaces"] = "true";
 		if (isCollapsedLineEdgeSpaceRun(run)) {
-			const spaceAdvance = (collapsedSpaceMeasureText?.(" ", run.fontSize || 11, run.fontFamily || "Calibri", runMeasureStyle(run)) ?? 0) * getHorizontalScaleFactor(run.horizontalScale);
+			const spaceAdvance = (collapsedSpaceMeasureText?.(" ", run.fontSize || 11, run.fontFamily || "Times New Roman", runMeasureStyle(run)) ?? 0) * getHorizontalScaleFactor(run.horizontalScale);
 			runEl.dataset["collapsedSpaceAdvance"] = String(spaceAdvance);
 			runEl.style.fontSize = "0";
 			runEl.style.letterSpacing = "0";
@@ -1340,7 +1349,8 @@ function renderLine(block, line, alignment, doc, options) {
 			}
 			let tabWidth = tabResult.width;
 			const landsOnLeftIndent = tabResult.alignment === "start" && tabLeftIndentPx > 0 && Math.abs(currentX + tabWidth - tabLeftIndentPx) <= RIGHT_EDGE_EPSILON_PX;
-			if (!preservesAuthoredEndStop && !landsOnLeftIndent && lineRightEdgeX !== void 0 && canClampTabToRightEdge(tabResult.alignment, i > 0, runsForLine.slice(0, i).some(isTabRun), options?.isLastLine === true) && currentX + tabWidth + followingWidthForCheck > lineRightEdgeX) tabWidth = Math.max(1, lineRightEdgeX - currentX - followingWidthForCheck);
+			const followingContentEndsOnLine = options?.isLastLine === true || runsForLine.slice(i + 1).some((next) => isTabRun(next) || isLineBreakRun(next));
+			if (!(preservesAuthoredEndStop || activeContentRightEdge !== void 0 && tabResult.explicit === true && followingContentEndsOnLine && authoredEndpoint <= activeContentRightEdge + RIGHT_EDGE_EPSILON_PX) && !landsOnLeftIndent && lineRightEdgeX !== void 0 && canClampTabToRightEdge(tabResult.alignment, i > 0, runsForLine.slice(0, i).some(isTabRun), options?.isLastLine === true) && currentX + tabWidth + followingWidthForCheck > lineRightEdgeX) tabWidth = Math.max(1, lineRightEdgeX - currentX - followingWidthForCheck);
 			const tabEl = renderTabRun(run, doc, tabWidth, tabResult.leader);
 			lineEl.append(tabEl);
 			currentX += tabWidth;
@@ -1350,7 +1360,7 @@ function renderLine(block, line, alignment, doc, options) {
 			if (isCollapsedLineEdgeSpaceRun(run)) continue;
 			if (!measureText) continue;
 			const fontSize = run.fontSize || 11;
-			const fontFamily = run.fontFamily || "Calibri";
+			const fontFamily = run.fontFamily || "Times New Roman";
 			const measuredWidth = measureText(run.allCaps ? run.text.toLocaleUpperCase() : run.text, fontSize, fontFamily, runMeasureStyle(run));
 			const runContractionPx = runVisualSpaceContraction({
 				text: run.text,
@@ -1383,7 +1393,7 @@ function renderLine(block, line, alignment, doc, options) {
 			if (!measureText) continue;
 			const fieldText = resolveFieldText(run, options.context);
 			const fontSize = run.fontSize || 11;
-			const fontFamily = run.fontFamily || "Calibri";
+			const fontFamily = run.fontFamily || "Times New Roman";
 			const measuredWidth = measureText(run.allCaps ? fieldText.toLocaleUpperCase() : fieldText, fontSize, fontFamily, runMeasureStyle(run));
 			const runContractionPx = runVisualSpaceContraction({
 				text: fieldText,
@@ -1628,6 +1638,8 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	if (formatting.bold !== void 0) span.style.fontWeight = formatting.bold ? "700" : "normal";
 	if (formatting.italic !== void 0) span.style.fontStyle = formatting.italic ? "italic" : "normal";
 	if (formatting.rtl !== void 0) span.dir = formatting.rtl ? "rtl" : "ltr";
+	const markerColor = revision ? void 0 : getRenderableListMarkerColor(formatting.color);
+	if (markerColor) setAuthoredTextColor(span.style, markerColor);
 	span.style.textAlign = physicalStart;
 	span.style.textAlignLast = physicalStart;
 	span.style.boxSizing = "border-box";
@@ -1673,4 +1685,4 @@ function renderListMarker({ marker, inlineWidth, visualOffset, doc, formatting,
 	return span;
 }
 //#endregion
-export { PARAGRAPH_CLASS_NAMES, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };
+export { PARAGRAPH_CLASS_NAMES, UNICODE_BIDI_BY_WRAPPER_CONTROL, getLeaderChar, getRenderableListMarkerColor, getRenderableTextColor, paragraphHasTrackedChanges, renderLine, renderParagraphFragment, sliceRunsForLine, splitCollapsibleLineEdgeSpaces, splitTextRunsByEastAsia, startsAfterSoftWrap };

package/dist/layout-painter/renderTable.js

@@ -1,7 +1,7 @@
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
 import { buildTableCellFloatingZones, getTableCellContentWidth, getTableCellFloatingImages } from "../layout-engine/measure/tableCellFloating.js";
 import { createTableCellFlowState, finishTableCellFlow, placeTableCellBlock } from "../layout-engine/measure/tableCellFlow.js";
-import { buildTableCellGrid, buildTableCellPlacements, getSourceCellAt } from "../layout-engine/measure/tableCellGrid.js";
+import { buildTableCellGrid, buildTableCellPlacements, getSourceCellAt, getTableCellSpacingInsetsY } from "../layout-engine/measure/tableCellGrid.js";
 import { tableFragmentBottomBorders } from "../layout-engine/measure/tableFragmentBorderGeometry.js";
 import { resolveTableInlineOffset, resolveTableInlinePlacement } from "../layout-engine/measure/tableInlinePlacement.js";
 import { isFloatingImageRun, isFloatingTextBoxBlock, resolveTableCellPadding, tableColumnsArePinned } from "../layout-engine/types.js";
@@ -293,7 +293,8 @@ function renderNestedTable(block, measure, context, doc, frameWidth = context.co
 	const cellPlacements = buildTableCellPlacements({
 		grid: cellGrid,
 		columnWidths: measure.columnWidths,
-		bidi: block.bidi === true
+		bidi: block.bidi === true,
+		cellSpacing: block.cellSpacing
 	});
 	let y = 0;
 	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
@@ -318,6 +319,7 @@ function renderNestedTable(block, measure, context, doc, frameWidth = context.co
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			cellSpacing: block.cellSpacing,
 			inlineOffset: resolveTableInlineOffset({
 				table: block,
 				rowJustification: row.justification,
@@ -375,12 +377,12 @@ function renderCellDiagonalBorder({ border, direction, cellWidth, cellHeight, do
 	}
 	return line;
 }
-function renderTableCell({ cell, cellMeasure, x, width, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
+function renderTableCell({ cell, cellMeasure, x, y = 0, width, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
 	const cellEl = doc.createElement("div");
 	cellEl.className = TABLE_CLASS_NAMES.cell;
 	cellEl.style.position = "absolute";
 	cellEl.style.left = `${x}px`;
-	cellEl.style.top = "0";
+	cellEl.style.top = `${y}px`;
 	cellEl.style.width = `${width}px`;
 	cellEl.style.height = `${rowHeight}px`;
 	cellEl.style.overflow = "hidden";
@@ -499,7 +501,8 @@ const continuationRowBottomBorderOffsets = (fragment, block, measure, cellGrid)
 		snapAfterRow
 	});
 };
-function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, cellPlacements, contentClip, pageContentPosition, inlineOffset = 0, bottomBorderOffset = 0 }) {
+function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, cellPlacements, cellSpacing, contentClip, pageContentPosition, inlineOffset = 0, bottomBorderOffset = 0 }) {
+	const bordersSeparated = (cellSpacing ?? 0) > 0;
 	const rowEl = doc.createElement("div");
 	rowEl.className = TABLE_CLASS_NAMES.row;
 	rowEl.style.position = "absolute";
@@ -530,15 +533,22 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 		const isLastCol = bidi ? atLogicalStart : atLogicalEnd;
 		const aboveCell = getSourceCellAt(cellGrid, rowIndex - 1, columnIndex);
 		const leftCell = getSourceCellAt(cellGrid, rowIndex, bidi ? columnIndex + colSpan : columnIndex - 1);
-		const drawTop = isFirstRow || !hasVisibleBorder(aboveCell?.borders?.bottom);
-		const drawLeft = isFirstCol || !hasVisibleBorder(leftCell?.borders?.right);
+		const drawTop = bordersSeparated || isFirstRow || !hasVisibleBorder(aboveCell?.borders?.bottom);
+		const drawLeft = bordersSeparated || isFirstCol || !hasVisibleBorder(leftCell?.borders?.right);
+		const spacing = getTableCellSpacingInsetsY(cellSpacing, rowIndex, rowSpan, totalRows);
+		const boxHeight = Math.max(0, cellHeight - spacing.top - spacing.bottom);
+		const boxClip = contentClip ? {
+			top: contentClip.top - spacing.top,
+			bottom: contentClip.bottom - spacing.top
+		} : void 0;
 		const paintBottomBorderSeparately = bottomBorderOffset > 0 && hasVisibleBorder(cell.borders?.bottom);
 		const cellEl = renderTableCell({
 			cell,
 			cellMeasure,
 			x: cellLeft,
+			y: spacing.top,
 			width,
-			rowHeight: cellHeight,
+			rowHeight: boxHeight,
 			borderFlags: {
 				drawTop,
 				drawBottom: !paintBottomBorderSeparately,
@@ -549,11 +559,11 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 			columnsPinned,
 			context,
 			doc,
-			...contentClip ? { contentClip } : {},
+			...boxClip ? { contentClip: boxClip } : {},
 			...pageContentPosition ? { pageContentPosition: {
 				geometry: pageContentPosition.geometry,
 				x: pageContentPosition.x + inlineOffset + cellLeft,
-				y: pageContentPosition.y
+				y: pageContentPosition.y + spacing.top
 			} } : {}
 		});
 		cellEl.dataset["cellIndex"] = String(cellIndex);
@@ -565,9 +575,9 @@ function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows,
 			bottomBorderEl.className = CELL_BOTTOM_BORDER_CLASS;
 			bottomBorderEl.style.position = "absolute";
 			bottomBorderEl.style.left = `${cellLeft}px`;
-			bottomBorderEl.style.top = "0";
+			bottomBorderEl.style.top = `${spacing.top}px`;
 			bottomBorderEl.style.width = `${width}px`;
-			bottomBorderEl.style.height = `${cellHeight + bottomBorderOffset}px`;
+			bottomBorderEl.style.height = `${boxHeight + bottomBorderOffset}px`;
 			bottomBorderEl.style.boxSizing = "border-box";
 			bottomBorderEl.style.pointerEvents = "none";
 			bottomBorderEl.style.zIndex = "1";
@@ -637,7 +647,8 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 	const cellPlacements = buildTableCellPlacements({
 		grid: cellGrid,
 		columnWidths: measure.columnWidths,
-		bidi: block.bidi === true
+		bidi: block.bidi === true,
+		cellSpacing: block.cellSpacing
 	});
 	const contentRowBottomBorderOffsets = continuationRowBottomBorderOffsets(fragment, block, measure, cellGrid);
 	const headerRowCount = fragment.headerRowCount ?? 0;
@@ -665,6 +676,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			cellSpacing: block.cellSpacing,
 			...tablePageContentPosition ? { pageContentPosition: {
 				...tablePageContentPosition,
 				y: tablePageContentPosition.y + y
@@ -718,6 +730,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			columnsPinned,
 			cellGrid,
 			cellPlacements,
+			cellSpacing: block.cellSpacing,
 			bottomBorderOffset: contentRowBottomBorderOffsets[rowIndex - fragment.fromRow] ?? 0,
 			...contentClip ? { contentClip } : {},
 			...tablePageContentPosition ? { pageContentPosition: {

package/dist/prosemirror/attrs/index.d.ts

@@ -4,18 +4,18 @@ import "../schema/index.js";
 import { Mark, Node } from "prosemirror-model";
 //#region src/prosemirror/attrs/index.d.ts
 type ProseMirrorAttrIssue = {
-  path: string;
-  message: string;
+  readonly path: string;
+  readonly message: string;
 };
 type ReadProseMirrorAttrsResult<T> = {
   ok: true;
   value: T;
 } | {
   ok: false;
-  issues: ProseMirrorAttrIssue[];
+  issues: readonly ProseMirrorAttrIssue[];
 };
-declare const readParagraphAttrs: (node: Node) => ReadProseMirrorAttrsResult<ParagraphAttrs>;
-declare const expectParagraphAttrs: (node: Node) => ParagraphAttrs;
+declare const readParagraphAttrs: (node: Node) => ReadProseMirrorAttrsResult<Readonly<ParagraphAttrs>>;
+declare const expectParagraphAttrs: (node: Node) => Readonly<ParagraphAttrs>;
 declare const readHardBreakAttrs: (node: Node) => ReadProseMirrorAttrsResult<HardBreakAttrs>;
 declare const expectHardBreakAttrs: (node: Node) => HardBreakAttrs;
 declare const readPageBreakRunAttrs: (node: Node) => ReadProseMirrorAttrsResult<PageBreakRunAttrs>;
@@ -28,10 +28,10 @@ declare const readPreservedXmlAttrs: (node: Node) => ReadProseMirrorAttrsResult<
 declare const expectPreservedXmlAttrs: (node: Node) => PreservedXmlAttrs;
 declare const readPreservedBlockAttrs: (node: Node) => ReadProseMirrorAttrsResult<PreservedBlockAttrs>;
 declare const expectPreservedBlockAttrs: (node: Node) => PreservedBlockAttrs;
-declare const readTableAttrs: (node: Node) => ReadProseMirrorAttrsResult<TableAttrs>;
-declare const expectTableAttrs: (node: Node) => TableAttrs;
-declare const readTableRowAttrs: (node: Node) => ReadProseMirrorAttrsResult<TableRowAttrs>;
-declare const expectTableRowAttrs: (node: Node) => TableRowAttrs;
+declare const readTableAttrs: (node: Node) => ReadProseMirrorAttrsResult<Readonly<TableAttrs>>;
+declare const expectTableAttrs: (node: Node) => Readonly<TableAttrs>;
+declare const readTableRowAttrs: (node: Node) => ReadProseMirrorAttrsResult<Readonly<TableRowAttrs>>;
+declare const expectTableRowAttrs: (node: Node) => Readonly<TableRowAttrs>;
 declare const readTableCellAttrs: (node: Node) => ReadProseMirrorAttrsResult<TableCellAttrs>;
 declare const expectTableCellAttrs: (node: Node) => TableCellAttrs;
 declare const readImageAttrs: (node: Node) => ReadProseMirrorAttrsResult<ImageAttrs>;