@stll/folio-core 0.7.0 → 0.9.0

package/dist/layout-painter/renderTable.js

@@ -1,8 +1,12 @@
 import { emuToPixels } from "../utils/units.js";
-import { isFloatingImageRun, isFloatingTextBoxBlock, tableColumnsArePinned } from "../layout-engine/types.js";
+import { getTableRowLeadingWidth, isFloatingImageRun, isFloatingTextBoxBlock, tableColumnsArePinned } from "../layout-engine/types.js";
 import { measureParagraph } from "../layout-engine/measure/measureParagraph.js";
+import { resolveAnchoredImagePosition } from "./anchoredImagePosition.js";
+import { applyImageVisualAttrs, hasImageCrop, hasImageVisualAttrs } from "./renderImage.js";
+import { borderStrokeToCss, resolveCssBorderStroke } from "./borderStroke.js";
 import { getAutomaticTextColorForBackground } from "./documentColors.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
+import { createTableCellFlowState, finishTableCellFlow, placeTableCellBlock } from "../layout-engine/measure/tableCellFlow.js";
 import { buildTableCellFloatingZones, getTableCellContentWidth, getTableCellFloatingImages } from "../layout-engine/measure/tableCellFloating.js";
 import { renderTextBoxFragment } from "./renderTextBox.js";
 //#region src/layout-painter/renderTable.ts
@@ -28,13 +32,21 @@ const TABLE_CLASS_NAMES = {
 	tableEdgeHandleBottom: "layout-table-edge-handle-bottom",
 	tableEdgeHandleRight: "layout-table-edge-handle-right"
 };
-function renderCellContent(cell, cellMeasure, context, doc) {
+const CELL_DIAGONAL_BORDER_CLASS = "layout-table-cell-diagonal-border";
+function renderCellContent({ cell, cellMeasure, context, doc, contentWidthOverride, pageContentPosition }) {
 	const contentEl = doc.createElement("div");
 	contentEl.className = TABLE_CLASS_NAMES.cellContent;
 	contentEl.style.position = "relative";
-	const contentWidth = getTableCellContentWidth(cell, cellMeasure);
+	const contentWidth = contentWidthOverride ?? getTableCellContentWidth(cell, cellMeasure);
 	contentEl.style.width = `${contentWidth}px`;
-	const cellFloatingImages = getTableCellFloatingImages(cell, cellMeasure, contentWidth);
+	const cellFloatingImages = getTableCellFloatingImages(cell, cellMeasure, contentWidth, pageContentPosition ? (run, paragraphY) => {
+		const position = resolveAnchoredImagePosition(run, pageContentPosition.y + paragraphY, pageContentPosition.geometry);
+		return {
+			x: position.x - pageContentPosition.x,
+			y: position.y - pageContentPosition.y,
+			side: position.side
+		};
+	} : void 0);
 	const floatingZones = buildTableCellFloatingZones(cellFloatingImages, contentWidth);
 	const floatingLayers = [];
 	if (cellFloatingImages.length > 0) {
@@ -62,14 +74,24 @@ function renderCellContent(cell, cellMeasure, context, doc) {
 			imgEl.style.width = `${img.width}px`;
 			imgEl.style.height = `${img.height}px`;
 			imgEl.style.display = "block";
+			imgEl.style.maxWidth = "none";
+			imgEl.style.maxHeight = "none";
 			if (img.alt) imgEl.alt = img.alt;
 			if (img.transform) imgEl.style.transform = img.transform;
+			if (hasImageVisualAttrs(img)) {
+				if (hasImageCrop(img)) {
+					imgContainer.style.width = `${img.width}px`;
+					imgContainer.style.height = `${img.height}px`;
+					imgContainer.style.overflow = "hidden";
+				}
+				applyImageVisualAttrs(imgEl, img);
+			}
 			imgContainer.append(imgEl);
 			floatingLayer.append(imgContainer);
 		}
 		floatingLayers.push(floatingLayer);
 	}
-	let cumulativeY = 0;
+	const flowState = createTableCellFlowState();
 	let anchorParagraphY = 0;
 	let floatingTextBoxesLayer;
 	for (let i = 0; i < cell.blocks.length; i++) {
@@ -78,17 +100,18 @@ function renderCellContent(cell, cellMeasure, context, doc) {
 		if (block?.kind === "paragraph" && measure?.kind === "paragraph") {
 			const paragraphBlock = block;
 			let paragraphMeasure = measure;
-			if (floatingZones.length > 0) paragraphMeasure = measureParagraph(paragraphBlock, contentWidth, {
+			if (floatingZones.length > 0 || contentWidthOverride !== void 0) paragraphMeasure = measureParagraph(paragraphBlock, contentWidth, {
 				floatingZones,
-				paragraphYOffset: cumulativeY
+				paragraphYOffset: placeTableCellBlock({ ...flowState }, paragraphBlock, paragraphMeasure).contentTop
 			});
+			const placement = placeTableCellBlock(flowState, paragraphBlock, paragraphMeasure);
 			const syntheticFragment = {
 				kind: "paragraph",
 				blockId: paragraphBlock.id,
 				x: 0,
 				y: 0,
 				width: contentWidth,
-				height: paragraphMeasure.totalHeight,
+				height: placement.contentHeight,
 				fromLine: 0,
 				toLine: paragraphMeasure.lines.length,
 				...paragraphBlock.pmStart !== void 0 ? { pmStart: paragraphBlock.pmStart } : {},
@@ -101,18 +124,23 @@ function renderCellContent(cell, cellMeasure, context, doc) {
 			const fragEl = renderParagraphFragment(syntheticFragment, paragraphBlock, paragraphMeasure, cellContext, { document: doc });
 			fragEl.style.position = "relative";
 			fragEl.style.boxSizing = "border-box";
-			fragEl.style.height = `${paragraphMeasure.totalHeight}px`;
-			const spaceBefore = paragraphBlock.attrs?.spacing?.before ?? 0;
-			if (spaceBefore > 0) fragEl.style.paddingTop = `${spaceBefore}px`;
+			fragEl.style.height = `${placement.leadingSpacing + placement.contentHeight}px`;
+			if (placement.leadingSpacing > 0) fragEl.style.paddingTop = `${placement.leadingSpacing}px`;
 			contentEl.append(fragEl);
-			anchorParagraphY = cumulativeY;
-			cumulativeY += paragraphMeasure.totalHeight;
+			anchorParagraphY = placement.contentTop;
 		} else if (block?.kind === "table" && measure?.kind === "table") {
-			const nestedTableEl = renderNestedTable(block, measure, context, doc);
+			const tableBlock = block;
+			const tableMeasure = measure;
+			const nestedTableEl = renderNestedTable(tableBlock, tableMeasure, context, doc);
 			nestedTableEl.style.position = "relative";
+			const placement = placeTableCellBlock(flowState, tableBlock, tableMeasure);
+			if (placement.leadingSpacing > 0) {
+				const spacer = doc.createElement("div");
+				spacer.style.height = `${placement.leadingSpacing}px`;
+				contentEl.append(spacer);
+			}
 			contentEl.append(nestedTableEl);
-			cumulativeY += measure.totalHeight;
-			anchorParagraphY = cumulativeY;
+			anchorParagraphY = flowState.height;
 		} else if (block?.kind === "textBox" && measure?.kind === "textBox") {
 			const textBoxBlock = block;
 			const textBoxMeasure = measure;
@@ -137,14 +165,20 @@ function renderCellContent(cell, cellMeasure, context, doc) {
 				floatingTextBoxesLayer.append(textBoxEl);
 				continue;
 			}
+			const placement = placeTableCellBlock(flowState, textBoxBlock, textBoxMeasure);
+			if (placement.leadingSpacing > 0) {
+				const spacer = doc.createElement("div");
+				spacer.style.height = `${placement.leadingSpacing}px`;
+				contentEl.append(spacer);
+			}
 			textBoxEl.style.position = "relative";
 			textBoxEl.style.left = "0";
 			textBoxEl.style.top = "0";
 			contentEl.append(textBoxEl);
-			cumulativeY += textBoxMeasure.height;
-			anchorParagraphY = cumulativeY;
+			anchorParagraphY = flowState.height;
 		}
 	}
+	contentEl.style.height = `${finishTableCellFlow(flowState)}px`;
 	if (floatingTextBoxesLayer) floatingLayers.push(floatingTextBoxesLayer);
 	return {
 		content: contentEl,
@@ -207,6 +241,7 @@ function renderNestedTable(block, measure, context, doc) {
 	rowYPositions.push(yPos);
 	const spanningCells = /* @__PURE__ */ new Map();
 	const columnsPinned = tableColumnsArePinned(block);
+	const cellGrid = buildTableCellGrid(block, measure.columnWidths.length);
 	let y = 0;
 	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
 		const row = block.rows[rowIndex];
@@ -216,7 +251,21 @@ function renderNestedTable(block, measure, context, doc) {
 			y += rowMeasure.height;
 			continue;
 		}
-		const rowEl = renderTableRow(row, rowMeasure, rowIndex, y, measure.columnWidths, block.rows.length, context, doc, spanningCells, rowYPositions, void 0, block.bidi, columnsPinned);
+		const rowEl = renderTableRow({
+			row,
+			rowMeasure,
+			rowIndex,
+			y,
+			columnWidths: measure.columnWidths,
+			totalRows: block.rows.length,
+			context,
+			doc,
+			spanningCells,
+			rowYPositions,
+			bidi: block.bidi === true,
+			columnsPinned,
+			cellGrid
+		});
 		tableEl.append(rowEl);
 		y += rowMeasure.height;
 	}
@@ -228,18 +277,46 @@ function renderNestedTable(block, measure, context, doc) {
 */
 function applyBorder(el, side, border) {
 	const styleProp = `border${side.charAt(0).toUpperCase() + side.slice(1)}`;
-	if (!border || border.style === "none" || border.style === "nil" || border.width === 0) el.style[styleProp] = "none";
-	else {
-		const width = border.width ?? 1;
-		const color = border.color ?? "#000000";
-		const style = border.style ?? "solid";
-		el.style[styleProp] = `${width}px ${style} ${color}`;
+	if (!border || border.style === "none" || border.style === "nil") el.style[styleProp] = "none";
+	else el.style[styleProp] = borderStrokeToCss(border);
+}
+function renderCellDiagonalBorder({ border, direction, cellWidth, cellHeight, doc }) {
+	if (!hasVisibleBorder(border)) return null;
+	const line = doc.createElement("div");
+	const stroke = resolveCssBorderStroke(border ?? {});
+	const strokeWidth = stroke.width;
+	const color = stroke.color;
+	const length = Math.hypot(cellWidth, cellHeight);
+	const angle = Math.atan2(cellHeight, cellWidth);
+	line.className = CELL_DIAGONAL_BORDER_CLASS;
+	line.dataset["direction"] = direction;
+	line.style.position = "absolute";
+	line.style.left = "0";
+	line.style.top = direction === "top-left-to-bottom-right" ? `${-strokeWidth / 2}px` : `${cellHeight - strokeWidth / 2}px`;
+	line.style.width = `${length}px`;
+	line.style.height = `${strokeWidth}px`;
+	line.style.transformOrigin = "0 50%";
+	line.style.transform = `rotate(${direction === "top-left-to-bottom-right" ? angle : -angle}rad)`;
+	line.style.pointerEvents = "none";
+	line.style.zIndex = "1";
+	switch (border?.style) {
+		case "dashed":
+			line.style.backgroundImage = `repeating-linear-gradient(to right, ${color} 0, ${color} ${strokeWidth * 3}px, transparent ${strokeWidth * 3}px, transparent ${strokeWidth * 5}px)`;
+			break;
+		case "dotted":
+			line.style.backgroundImage = `radial-gradient(circle at ${strokeWidth / 2}px 50%, ${color} ${strokeWidth / 2}px, transparent ${strokeWidth / 2}px)`;
+			line.style.backgroundSize = `${strokeWidth * 2}px ${strokeWidth}px`;
+			break;
+		case "double":
+			line.style.backgroundImage = `linear-gradient(to bottom, ${color} 0, ${color} 33%, transparent 33%, transparent 67%, ${color} 67%, ${color} 100%)`;
+			break;
+		default:
+			line.style.backgroundColor = color;
+			break;
 	}
+	return line;
 }
-/**
-* Render a single table cell
-*/
-function renderTableCell(cell, cellMeasure, x, rowHeight, borderFlags, columnsPinned, context, doc) {
+function renderTableCell({ cell, cellMeasure, x, rowHeight, borderFlags, columnsPinned, context, doc, contentClip, pageContentPosition }) {
 	const cellEl = doc.createElement("div");
 	cellEl.className = TABLE_CLASS_NAMES.cell;
 	cellEl.style.position = "absolute";
@@ -255,10 +332,10 @@ function renderTableCell(cell, cellMeasure, x, rowHeight, borderFlags, columnsPi
 	const padLeft = cell.padding?.left ?? 7;
 	cellEl.style.padding = `${padTop}px ${padRight}px ${padBottom}px ${padLeft}px`;
 	if (cell.borders) {
-		if (borderFlags.isFirstRow) applyBorder(cellEl, "top", cell.borders.top);
+		if (borderFlags.drawTop) applyBorder(cellEl, "top", cell.borders.top);
 		applyBorder(cellEl, "right", cell.borders.right);
 		applyBorder(cellEl, "bottom", cell.borders.bottom);
-		if (borderFlags.isFirstCol) applyBorder(cellEl, "left", cell.borders.left);
+		if (borderFlags.drawLeft) applyBorder(cellEl, "left", cell.borders.left);
 	}
 	if (cell.background) {
 		cellEl.style.backgroundColor = cell.background;
@@ -282,13 +359,55 @@ function renderTableCell(cell, cellMeasure, x, rowHeight, borderFlags, columnsPi
 			default: break;
 		}
 	}
-	const renderedContent = renderCellContent(cell, cellMeasure, context, doc);
+	const contentWidthOverride = cell.textDirection === "btLr" ? Math.max(1, rowHeight - padTop - padBottom) : void 0;
+	const renderedContent = renderCellContent({
+		cell,
+		cellMeasure,
+		context,
+		doc,
+		...contentWidthOverride !== void 0 ? { contentWidthOverride } : {},
+		...pageContentPosition ? { pageContentPosition: {
+			geometry: pageContentPosition.geometry,
+			x: pageContentPosition.x + padLeft,
+			y: pageContentPosition.y + padTop
+		} } : {}
+	});
+	if (cell.textDirection === "btLr") {
+		renderedContent.content.style.position = "absolute";
+		renderedContent.content.style.left = "50%";
+		renderedContent.content.style.top = "50%";
+		renderedContent.content.style.transform = "translate(-50%, -50%) rotate(-90deg)";
+	}
 	if (renderedContent.floatingLayers.length > 0) {
 		renderedContent.content.style.height = "100%";
 		renderedContent.content.style.overflow = "hidden";
 		cellEl.style.overflow = "visible";
 	}
+	if (contentClip) {
+		const contentHeight = Math.max(0, rowHeight - padTop - padBottom);
+		const clipTop = Math.min(contentHeight, Math.max(0, contentClip.top - padTop));
+		const clipBottom = Math.min(contentHeight, Math.max(clipTop, contentClip.bottom - padTop));
+		renderedContent.content.style.height = `${contentHeight}px`;
+		renderedContent.content.style.overflow = "hidden";
+		renderedContent.content.style.clipPath = `inset(${clipTop}px 0 ${contentHeight - clipBottom}px 0)`;
+	}
 	cellEl.append(renderedContent.content);
+	const topLeftToBottomRight = renderCellDiagonalBorder({
+		border: cell.borders?.topLeftToBottomRight,
+		direction: "top-left-to-bottom-right",
+		cellWidth: cellMeasure.width,
+		cellHeight: rowHeight,
+		doc
+	});
+	if (topLeftToBottomRight) cellEl.append(topLeftToBottomRight);
+	const topRightToBottomLeft = renderCellDiagonalBorder({
+		border: cell.borders?.topRightToBottomLeft,
+		direction: "top-right-to-bottom-left",
+		cellWidth: cellMeasure.width,
+		cellHeight: rowHeight,
+		doc
+	});
+	if (topRightToBottomLeft) cellEl.append(topRightToBottomLeft);
 	for (const floatingLayer of renderedContent.floatingLayers) {
 		floatingLayer.style.left = `${padLeft}px`;
 		floatingLayer.style.top = `${padTop}px`;
@@ -303,10 +422,27 @@ function renderTableCell(cell, cellMeasure, x, rowHeight, borderFlags, columnsPi
 	}
 	return cellEl;
 }
-/**
-* Render a table row with rowSpan support
-*/
-function renderTableRow(row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, spanningCells, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false) {
+const tableCellGridKey = (rowIndex, columnIndex) => `${rowIndex}:${columnIndex}`;
+function buildTableCellGrid(block, columnCount) {
+	const grid = /* @__PURE__ */ new Map();
+	for (let rowIndex = 0; rowIndex < block.rows.length; rowIndex++) {
+		const row = block.rows[rowIndex];
+		if (!row) continue;
+		let columnIndex = 0;
+		for (const cell of row.cells) {
+			while (grid.has(tableCellGridKey(rowIndex, columnIndex))) columnIndex += 1;
+			const colSpan = cell.colSpan ?? 1;
+			const rowSpan = cell.rowSpan ?? 1;
+			const rowEnd = Math.min(block.rows.length, rowIndex + rowSpan);
+			const columnEnd = Math.min(columnCount, columnIndex + colSpan);
+			for (let gridRow = rowIndex; gridRow < rowEnd; gridRow++) for (let gridColumn = columnIndex; gridColumn < columnEnd; gridColumn++) grid.set(tableCellGridKey(gridRow, gridColumn), cell);
+			columnIndex += colSpan;
+		}
+	}
+	return grid;
+}
+const hasVisibleBorder = (border) => border !== void 0 && border.style !== "none" && border.style !== "nil";
+function renderTableRow({ row, rowMeasure, rowIndex, y, columnWidths, totalRows, context, doc, spanningCells, rowYPositions, isFirstRowInFragment, bidi = false, columnsPinned = false, cellGrid, contentClip, pageContentPosition }) {
 	const rowEl = doc.createElement("div");
 	rowEl.className = TABLE_CLASS_NAMES.row;
 	const tableWidth = bidi ? columnWidths.reduce((sum, columnWidth) => sum + columnWidth, 0) : 0;
@@ -320,8 +456,9 @@ function renderTableRow(row, rowMeasure, rowIndex, y, columnWidths, totalRows, c
 	if (spanningCells) {
 		for (const [, spanCell] of spanningCells) if (spanCell.startRow < rowIndex && spanCell.startRow + spanCell.rowSpan > rowIndex) for (let c = 0; c < spanCell.colSpan; c++) occupiedColumns.add(spanCell.columnIndex + c);
 	}
-	let x = 0;
-	let columnIndex = 0;
+	const gridBefore = row.gridBefore ?? 0;
+	let x = getTableRowLeadingWidth(row, columnWidths);
+	let columnIndex = gridBefore;
 	while (occupiedColumns.has(columnIndex)) {
 		x += columnWidths[columnIndex] ?? 0;
 		columnIndex++;
@@ -345,12 +482,34 @@ function renderTableRow(row, rowMeasure, rowIndex, y, columnWidths, totalRows, c
 		const isLastRow = rowIndex + rowSpan >= totalRows;
 		const atLogicalStart = columnIndex === 0;
 		const atLogicalEnd = columnIndex + colSpan >= columnWidths.length;
-		const cellEl = renderTableCell(cell, cellMeasure, cellLeft, cellHeight, {
-			isFirstRow,
-			isLastRow,
-			isFirstCol: bidi ? atLogicalEnd : atLogicalStart,
-			isLastCol: bidi ? atLogicalStart : atLogicalEnd
-		}, columnsPinned, context, doc);
+		const isFirstCol = bidi ? atLogicalEnd : atLogicalStart;
+		const isLastCol = bidi ? atLogicalStart : atLogicalEnd;
+		const aboveCell = cellGrid?.get(tableCellGridKey(rowIndex - 1, columnIndex));
+		const leftNeighborColumn = bidi ? columnIndex + colSpan : columnIndex - 1;
+		const leftCell = cellGrid?.get(tableCellGridKey(rowIndex, leftNeighborColumn));
+		const drawTop = isFirstRow || !hasVisibleBorder(aboveCell?.borders?.bottom);
+		const drawLeft = isFirstCol || !hasVisibleBorder(leftCell?.borders?.right);
+		const cellEl = renderTableCell({
+			cell,
+			cellMeasure,
+			x: cellLeft,
+			rowHeight: cellHeight,
+			borderFlags: {
+				drawTop,
+				isLastRow,
+				drawLeft,
+				isLastCol
+			},
+			columnsPinned,
+			context,
+			doc,
+			...contentClip ? { contentClip } : {},
+			...pageContentPosition ? { pageContentPosition: {
+				geometry: pageContentPosition.geometry,
+				x: pageContentPosition.x + cellLeft,
+				y: pageContentPosition.y
+			} } : {}
+		});
 		cellEl.dataset["cellIndex"] = String(cellIndex);
 		cellEl.dataset["columnIndex"] = String(columnIndex);
 		if (rowSpan > 1) cellEl.dataset["rowSpan"] = String(rowSpan);
@@ -389,6 +548,11 @@ function renderTableRow(row, rowMeasure, rowIndex, y, columnWidths, totalRows, c
 */
 function renderTableFragment(fragment, block, measure, context, options = {}) {
 	const doc = options.document ?? document;
+	const tablePageContentPosition = options.pageGeometry ? {
+		geometry: options.pageGeometry,
+		x: fragment.x - options.pageGeometry.marginLeft,
+		y: fragment.y - options.pageGeometry.marginTop
+	} : void 0;
 	const tableEl = doc.createElement("div");
 	tableEl.className = TABLE_CLASS_NAMES.table;
 	tableEl.style.position = "absolute";
@@ -429,6 +593,7 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 	rowYPositions.push(yPos);
 	const spanningCells = /* @__PURE__ */ new Map();
 	const columnsPinned = tableColumnsArePinned(block);
+	const cellGrid = buildTableCellGrid(block, measure.columnWidths.length);
 	const headerRowCount = fragment.headerRowCount ?? 0;
 	let y = 0;
 	if (headerRowCount > 0 && fragment.continuesFromPrev) for (let hdrIdx = 0; hdrIdx < headerRowCount; hdrIdx++) {
@@ -439,7 +604,26 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			y += hdrRowMeasure.height;
 			continue;
 		}
-		const rowEl = renderTableRow(hdrRow, hdrRowMeasure, hdrIdx, y, measure.columnWidths, block.rows.length, context, doc, spanningCells, rowYPositions, hdrIdx === 0, block.bidi, columnsPinned);
+		const rowEl = renderTableRow({
+			row: hdrRow,
+			rowMeasure: hdrRowMeasure,
+			rowIndex: hdrIdx,
+			y,
+			columnWidths: measure.columnWidths,
+			totalRows: block.rows.length,
+			context,
+			doc,
+			spanningCells,
+			rowYPositions,
+			isFirstRowInFragment: hdrIdx === 0,
+			bidi: block.bidi === true,
+			columnsPinned,
+			cellGrid,
+			...tablePageContentPosition ? { pageContentPosition: {
+				...tablePageContentPosition,
+				y: tablePageContentPosition.y + y
+			} } : {}
+		});
 		rowEl.dataset["repeatedHeader"] = "true";
 		tableEl.append(rowEl);
 		y += hdrRowMeasure.height;
@@ -466,8 +650,34 @@ function renderTableFragment(fragment, block, measure, context, options = {}) {
 			y += rowMeasure.height;
 			continue;
 		}
-		const isFirstRowInFragment = headerRowCount > 0 && fragment.continuesFromPrev ? false : fragment.continuesFromPrev && rowIndex === fragment.fromRow;
-		const rowEl = renderTableRow(row, rowMeasure, rowIndex, y, measure.columnWidths, block.rows.length, context, doc, spanningCells, rowYPositions, isFirstRowInFragment, block.bidi, columnsPinned);
+		const isFirstRowInFragment = headerRowCount > 0 && fragment.continuesFromPrev ? false : fragment.continuesFromPrev === true && rowIndex === fragment.fromRow;
+		const rowTopClip = rowIndex === fragment.fromRow ? fragment.topClip : void 0;
+		const rowBottomClip = rowIndex === fragment.toRow - 1 ? fragment.bottomClip : void 0;
+		const contentClip = rowTopClip !== void 0 || rowBottomClip !== void 0 ? {
+			top: rowTopClip ?? 0,
+			bottom: rowBottomClip ?? rowMeasure.height
+		} : void 0;
+		const rowEl = renderTableRow({
+			row,
+			rowMeasure,
+			rowIndex,
+			y,
+			columnWidths: measure.columnWidths,
+			totalRows: block.rows.length,
+			context,
+			doc,
+			spanningCells,
+			rowYPositions,
+			isFirstRowInFragment,
+			bidi: block.bidi === true,
+			columnsPinned,
+			cellGrid,
+			...contentClip ? { contentClip } : {},
+			...tablePageContentPosition ? { pageContentPosition: {
+				...tablePageContentPosition,
+				y: tablePageContentPosition.y + y
+			} } : {}
+		});
 		contentParent.append(rowEl);
 		y += rowMeasure.height;
 	}

package/dist/layout-painter/renderTextBox.js

@@ -1,5 +1,6 @@
 import { DEFAULT_TEXTBOX_MARGINS } from "../layout-engine/types.js";
 import { renderParagraphFragment } from "./renderParagraph.js";
+import { layoutTextBoxParagraphs } from "../layout-engine/measure/textBoxParagraphLayout.js";
 //#region src/layout-painter/renderTextBox.ts
 /**
 * Text Box Renderer
@@ -38,28 +39,37 @@ function renderTextBoxFragment(fragment, block, measure, context, options = {})
 	if (fragment.pmStart !== void 0) containerEl.dataset["pmStart"] = String(fragment.pmStart);
 	if (fragment.pmEnd !== void 0) containerEl.dataset["pmEnd"] = String(fragment.pmEnd);
 	const innerWidth = fragment.width - margins.left - margins.right;
-	let yOffset = 0;
+	const paragraphLayout = layoutTextBoxParagraphs(block.content, measure.innerMeasures);
 	for (let i = 0; i < block.content.length; i++) {
 		const paraBlock = block.content[i];
 		const paraMeasure = measure.innerMeasures[i];
-		if (!paraBlock || !paraMeasure) continue;
-		const paraEl = renderParagraphFragment({
+		const placement = paragraphLayout.placements[i];
+		if (!paraBlock || !paraMeasure || !placement) continue;
+		const paraFragment = {
 			kind: "paragraph",
 			blockId: paraBlock.id,
 			x: 0,
-			y: yOffset,
+			y: 0,
 			width: innerWidth,
-			height: paraMeasure.totalHeight,
+			height: placement.contentHeight,
 			...paraBlock.pmStart !== void 0 ? { pmStart: paraBlock.pmStart } : {},
 			...paraBlock.pmEnd !== void 0 ? { pmEnd: paraBlock.pmEnd } : {},
 			fromLine: 0,
 			toLine: paraMeasure.lines.length
-		}, paraBlock, paraMeasure, context, { document: doc });
+		};
+		const prevBorders = block.content[i - 1]?.attrs?.borders;
+		const nextBorders = block.content[i + 1]?.attrs?.borders;
+		const paraEl = renderParagraphFragment(paraFragment, paraBlock, paraMeasure, context, {
+			document: doc,
+			...prevBorders !== void 0 ? { prevBorders } : {},
+			...nextBorders !== void 0 ? { nextBorders } : {}
+		});
 		paraEl.style.position = "relative";
 		paraEl.style.left = "0";
 		paraEl.style.top = "0";
+		paraEl.style.height = `${placement.contentHeight}px`;
+		paraEl.style.marginTop = `${placement.leadingSpacing}px`;
 		containerEl.append(paraEl);
-		yOffset += paraMeasure.totalHeight;
 	}
 	return containerEl;
 }

package/dist/managers/DocumentLoaderManager.d.ts

@@ -1,6 +1,6 @@
 import { document_d_exports } from "../types/document.js";
-import { DocxCompatibility } from "../docx/compatibility.js";
 import { DocxInput } from "../utils/docxInput.js";
+import { DocxCompatibility } from "../docx/compatibility.js";
 
 //#region src/managers/DocumentLoaderManager.d.ts
 type DocumentLoadState = {

package/dist/managers/DocumentLoaderManager.js

@@ -1,8 +1,8 @@
-import { resetAuthorColors } from "../utils/authorColors.js";
 import { loadFontsWithMapping } from "../utils/fontLoader.js";
 import { parseDocx } from "../docx/parser.js";
-import { recordDocumentLoadPhase } from "../layout-engine/layoutInstrumentation.js";
 import { inspectDocxCompatibility } from "../docx/compatibility.js";
+import { resetAuthorColors } from "../utils/authorColors.js";
+import { recordDocumentLoadPhase } from "../layout-engine/layoutInstrumentation.js";
 //#region src/managers/DocumentLoaderManager.ts
 /**
 * DocumentLoaderManager

package/dist/paged-layout/sectionBlockWidths.d.ts

@@ -11,6 +11,9 @@ type PerBlockMeasureInputs = {
   widths: number[];
   marginTops: number[];
   pageHeights: number[];
+  pageWidths: number[];
+  marginLefts: number[];
+  marginRights: number[];
   marginBottoms: number[];
 };
 /**

package/dist/paged-layout/sectionBlockWidths.js

@@ -35,6 +35,9 @@ function computePerBlockMeasureInputs({ blocks, bodyConfig, finalConfig }) {
 	const widths = [];
 	const marginTops = [];
 	const pageHeights = [];
+	const pageWidths = [];
+	const marginLefts = [];
+	const marginRights = [];
 	const marginBottoms = [];
 	for (let i = 0; i < blocks.length; i++) {
 		const config = sectionConfigs[sectionIdx] ?? finalConfig;
@@ -42,6 +45,9 @@ function computePerBlockMeasureInputs({ blocks, bodyConfig, finalConfig }) {
 		widths.push(colWidth(contentWidth(config), columns, columnIndex));
 		marginTops.push(config.margins.top);
 		pageHeights.push(config.pageSize.h);
+		pageWidths.push(config.pageSize.w);
+		marginLefts.push(config.margins.left);
+		marginRights.push(config.margins.right);
 		marginBottoms.push(config.margins.bottom);
 		if (sectionIdx < breakIndices.length && i === breakIndices[sectionIdx]) {
 			sectionIdx++;
@@ -53,6 +59,9 @@ function computePerBlockMeasureInputs({ blocks, bodyConfig, finalConfig }) {
 		widths,
 		marginTops,
 		pageHeights,
+		pageWidths,
+		marginLefts,
+		marginRights,
 		marginBottoms
 	};
 }

package/dist/paged-layout/sectionGeometry.js

@@ -9,7 +9,7 @@ const DEFAULT_MARGINS = {
 	bottom: 96,
 	left: 96
 };
-const twipsToPixels = (twips) => Math.round(twips / 1440 * 96);
+const twipsToPixels = (twips) => twips / 1440 * 96;
 /**
 * Convert an offset-like twip dimension to px. Explicit 0 is meaningful for
 * page margins and header/footer distances; only absence should use fallback.

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

@@ -1,5 +1,5 @@
 import { BlockSdtAttrs, FieldAttrs, HardBreakAttrs, ImageAttrs, MathAttrs, ParagraphAttrs, SdtAttrs, ShapeAttrs, TableAttrs, TableCellAttrs, TableRowAttrs, TextBoxAttrs } from "../schema/nodes.js";
-import { CharacterSpacingAttrs, CharacterStyleAttrs, CommentAttrs, EmphasisMarkAttrs, FontFamilyAttrs, FontSizeAttrs, FootnoteRefAttrs, HighlightAttrs, HyperlinkAttrs, RunFormattingOverrideAttrs, RunShadingAttrs, StrikeAttrs, TextColorAttrs, TextEffectAttrs, TrackedChangeMarkAttrs, UnderlineAttrs } from "../schema/marks.js";
+import { CharacterSpacingAttrs, CharacterStyleAttrs, CommentAttrs, EmphasisMarkAttrs, FontFamilyAttrs, FontSizeAttrs, FootnoteRefAttrs, HighlightAttrs, HyperlinkAttrs, LanguageAttrs, RunFormattingOverrideAttrs, RunShadingAttrs, StrikeAttrs, TextColorAttrs, TextEffectAttrs, TrackedChangeMarkAttrs, UnderlineAttrs } from "../schema/marks.js";
 import { Mark, Node } from "prosemirror-model";
 
 //#region src/prosemirror/attrs/index.d.ts
@@ -54,6 +54,8 @@ declare const readFontSizeMarkAttrs: (mark: Mark) => ReadProseMirrorAttrsResult<
 declare const expectFontSizeMarkAttrs: (mark: Mark) => FontSizeAttrs;
 declare const readFontFamilyMarkAttrs: (mark: Mark) => ReadProseMirrorAttrsResult<FontFamilyAttrs>;
 declare const expectFontFamilyMarkAttrs: (mark: Mark) => FontFamilyAttrs;
+declare const readLanguageMarkAttrs: (mark: Mark) => ReadProseMirrorAttrsResult<LanguageAttrs>;
+declare const expectLanguageMarkAttrs: (mark: Mark) => LanguageAttrs;
 declare const readCharacterSpacingMarkAttrs: (mark: Mark) => ReadProseMirrorAttrsResult<CharacterSpacingAttrs>;
 declare const expectCharacterSpacingMarkAttrs: (mark: Mark) => CharacterSpacingAttrs;
 declare const readEmphasisMarkAttrs: (mark: Mark) => ReadProseMirrorAttrsResult<EmphasisMarkAttrs>;
@@ -77,4 +79,4 @@ declare const mergeTableAttrs: (node: Node, patch: NodeAttrPatch<TableAttrs>) =>
 declare const mergeTableRowAttrs: (node: Node, patch: NodeAttrPatch<TableRowAttrs>) => TableRowAttrs;
 declare const mergeTableCellAttrs: (node: Node, patch: NodeAttrPatch<TableCellAttrs>) => TableCellAttrs;
 //#endregion
-export { ProseMirrorAttrIssue, ReadProseMirrorAttrsResult, expectBlockSdtAttrs, expectCharacterSpacingMarkAttrs, expectCharacterStyleMarkAttrs, expectCommentMarkAttrs, expectEmphasisMarkAttrs, expectFieldAttrs, expectFontFamilyMarkAttrs, expectFontSizeMarkAttrs, expectFootnoteRefMarkAttrs, expectHardBreakAttrs, expectHighlightMarkAttrs, expectHyperlinkMarkAttrs, expectImageAttrs, expectMathAttrs, expectParagraphAttrs, expectRunFormattingOverrideMarkAttrs, expectRunShadingMarkAttrs, expectSdtAttrs, expectShapeAttrs, expectStrikeMarkAttrs, expectTableAttrs, expectTableCellAttrs, expectTableRowAttrs, expectTextBoxAttrs, expectTextColorMarkAttrs, expectTextEffectMarkAttrs, expectTrackedChangeMarkAttrs, expectUnderlineMarkAttrs, mergeImageAttrs, mergeParagraphAttrs, mergeTableAttrs, mergeTableCellAttrs, mergeTableRowAttrs, readBlockSdtAttrs, readCharacterSpacingMarkAttrs, readCharacterStyleMarkAttrs, readCommentMarkAttrs, readEmphasisMarkAttrs, readFieldAttrs, readFontFamilyMarkAttrs, readFontSizeMarkAttrs, readFootnoteRefMarkAttrs, readHardBreakAttrs, readHighlightMarkAttrs, readHyperlinkMarkAttrs, readImageAttrs, readMathAttrs, readParagraphAttrs, readRunFormattingOverrideMarkAttrs, readRunShadingMarkAttrs, readSdtAttrs, readShapeAttrs, readStrikeMarkAttrs, readTableAttrs, readTableCellAttrs, readTableRowAttrs, readTextBoxAttrs, readTextColorMarkAttrs, readTextEffectMarkAttrs, readTrackedChangeMarkAttrs, readUnderlineMarkAttrs };
+export { ProseMirrorAttrIssue, ReadProseMirrorAttrsResult, expectBlockSdtAttrs, expectCharacterSpacingMarkAttrs, expectCharacterStyleMarkAttrs, expectCommentMarkAttrs, expectEmphasisMarkAttrs, expectFieldAttrs, expectFontFamilyMarkAttrs, expectFontSizeMarkAttrs, expectFootnoteRefMarkAttrs, expectHardBreakAttrs, expectHighlightMarkAttrs, expectHyperlinkMarkAttrs, expectImageAttrs, expectLanguageMarkAttrs, expectMathAttrs, expectParagraphAttrs, expectRunFormattingOverrideMarkAttrs, expectRunShadingMarkAttrs, expectSdtAttrs, expectShapeAttrs, expectStrikeMarkAttrs, expectTableAttrs, expectTableCellAttrs, expectTableRowAttrs, expectTextBoxAttrs, expectTextColorMarkAttrs, expectTextEffectMarkAttrs, expectTrackedChangeMarkAttrs, expectUnderlineMarkAttrs, mergeImageAttrs, mergeParagraphAttrs, mergeTableAttrs, mergeTableCellAttrs, mergeTableRowAttrs, readBlockSdtAttrs, readCharacterSpacingMarkAttrs, readCharacterStyleMarkAttrs, readCommentMarkAttrs, readEmphasisMarkAttrs, readFieldAttrs, readFontFamilyMarkAttrs, readFontSizeMarkAttrs, readFootnoteRefMarkAttrs, readHardBreakAttrs, readHighlightMarkAttrs, readHyperlinkMarkAttrs, readImageAttrs, readLanguageMarkAttrs, readMathAttrs, readParagraphAttrs, readRunFormattingOverrideMarkAttrs, readRunShadingMarkAttrs, readSdtAttrs, readShapeAttrs, readStrikeMarkAttrs, readTableAttrs, readTableCellAttrs, readTableRowAttrs, readTextBoxAttrs, readTextColorMarkAttrs, readTextEffectMarkAttrs, readTrackedChangeMarkAttrs, readUnderlineMarkAttrs };