@stll/folio-core 0.15.11 → 0.15.13

package/dist/ai-edits/apply.js

@@ -42,6 +42,10 @@ const applyReplaceBlockStyleId = ({ item, tr }) => {
 		styleId: item.operation.styleId
 	});
 };
+const REPLACEMENT_BACKGROUND_CLEAR_FORMATTING = {
+	highlight: false,
+	runShading: false
+};
 const applyInlineFormatting = ({ tr, schema, from, to, formatting }) => {
 	for (const [name, enabled] of Object.entries(formatting)) {
 		const markType = schema.marks[name];
@@ -60,6 +64,29 @@ const formattingWouldChange = (marks, formatting) => Object.entries(formatting).
 	if (name === "underline") return mark?.attrs["style"] !== "single";
 	return mark === void 0;
 });
+const clearReplacementBackground = ({ tr, schema, from, to, mode, revisionId, author, date, initials, suggestionId = null }) => {
+	if (![schema.marks["highlight"], schema.marks["runShading"]].some((markType) => markType !== void 0 && tr.doc.rangeHasMark(from, to, markType))) return tr;
+	if (mode === "direct") return applyInlineFormatting({
+		tr,
+		schema,
+		from,
+		to,
+		formatting: REPLACEMENT_BACKGROUND_CLEAR_FORMATTING
+	});
+	return applyTrackedInlineFormatting({
+		tr,
+		schema,
+		doc: tr.doc,
+		from,
+		to,
+		formatting: REPLACEMENT_BACKGROUND_CLEAR_FORMATTING,
+		revisionId,
+		author,
+		date,
+		initials,
+		suggestionId
+	});
+};
 const applyTrackedInlineFormatting = ({ tr, schema, doc, from, to, formatting, revisionId, author, date, initials, suggestionId = null }) => {
 	const propertyChangeType = schema.marks["runPropertyChange"];
 	if (!propertyChangeType) return tr;
@@ -418,6 +445,21 @@ const applyFolioAIEditOperationsInternal = ({ view, snapshot, operations, mode =
 			case "replaceRange": {
 				const revisionIdDelete = revisionSeed++;
 				const revisionIdInsert = revisionSeed++;
+				const revisionIdBackground = revisionSeed++;
+				const stepsBeforeBackgroundClear = tr.steps.length;
+				tr = clearReplacementBackground({
+					tr,
+					schema: view.state.schema,
+					from: item.from,
+					to: item.to,
+					mode,
+					revisionId: revisionIdBackground,
+					author,
+					date,
+					initials,
+					suggestionId
+				});
+				const clearedBackground = tr.steps.length > stepsBeforeBackgroundClear;
 				tr = applyTextReplacement({
 					tr,
 					item,
@@ -430,7 +472,11 @@ const applyFolioAIEditOperationsInternal = ({ view, snapshot, operations, mode =
 					suggestionId,
 					initials
 				});
-				if (producesTrackedChanges) appliedRevisionIds = [revisionIdDelete, revisionIdInsert];
+				if (producesTrackedChanges) appliedRevisionIds = [
+					revisionIdDelete,
+					revisionIdInsert,
+					...clearedBackground ? [revisionIdBackground] : []
+				];
 				break;
 			}
 			case "commentOnRange":
@@ -466,6 +512,7 @@ const applyFolioAIEditOperationsInternal = ({ view, snapshot, operations, mode =
 			case "replaceBlock": {
 				const revisionIdDelete = revisionSeed++;
 				const revisionIdInsert = revisionSeed++;
+				const revisionIdBackground = revisionSeed++;
 				if (item.operation.preserveFormatting === false && mode === "direct") {
 					const replacement = item.operation.text;
 					const paragraphType = view.state.schema.nodes["paragraph"];
@@ -485,6 +532,20 @@ const applyFolioAIEditOperationsInternal = ({ view, snapshot, operations, mode =
 					tr = tr.replaceWith(item.blockFrom, item.blockTo, node);
 					break;
 				}
+				const stepsBeforeBackgroundClear = tr.steps.length;
+				tr = clearReplacementBackground({
+					tr,
+					schema: view.state.schema,
+					from: item.from,
+					to: item.to,
+					mode,
+					revisionId: revisionIdBackground,
+					author,
+					date,
+					initials,
+					suggestionId
+				});
+				const clearedBackground = tr.steps.length > stepsBeforeBackgroundClear;
 				tr = applyTextReplacement({
 					tr,
 					item,
@@ -501,7 +562,11 @@ const applyFolioAIEditOperationsInternal = ({ view, snapshot, operations, mode =
 					item,
 					tr
 				});
-				if (producesTrackedChanges) appliedRevisionIds = [revisionIdDelete, revisionIdInsert];
+				if (producesTrackedChanges) appliedRevisionIds = [
+					revisionIdDelete,
+					revisionIdInsert,
+					...clearedBackground ? [revisionIdBackground] : []
+				];
 				break;
 			}
 			case "insertAfterBlock":

package/dist/layout-bridge/convert/toFlowBlocks.js

@@ -69,7 +69,7 @@ function formatNumberedMarker(counters, level) {
 	const parts = [];
 	for (let i = 0; i <= level; i += 1) {
 		const value = counters[i] ?? 0;
-		if (value <= 0) break;
+		if (!Number.isFinite(value) || value <= 0) break;
 		parts.push(value);
 	}
 	if (parts.length === 0) return "1.";
@@ -156,23 +156,23 @@ function computeListMarker(pmAttrs, listCounters, abstractCounters, seenNumIds)
 	const abstractNumId = pmAttrs.listAbstractNumId;
 	if (level > 0) {
 		const latestAbstractCounters = abstractNumId === void 0 ? void 0 : abstractCounters.get(abstractNumId);
-		if (counters.slice(0, level).every(Number.isNaN)) for (let i = 0; i < level; i += 1) {
+		if (counters.slice(0, level).every((counter) => !Number.isFinite(counter))) for (let i = 0; i < level; i += 1) {
 			const latestCounter = latestAbstractCounters?.[i];
-			counters[i] = latestCounter !== void 0 && !Number.isNaN(latestCounter) ? latestCounter : pmAttrs.listLevelStarts?.[i] ?? 1;
+			counters[i] = latestCounter !== void 0 && Number.isFinite(latestCounter) ? latestCounter : pmAttrs.listLevelStarts?.[i] ?? 1;
 		}
 	}
 	const seenKey = `${numId}:${level}`;
 	if (!seenNumIds.has(seenKey)) {
 		seenNumIds.add(seenKey);
 		if (pmAttrs.listStartOverride != null) counters[level] = pmAttrs.listStartOverride - 1;
-		else if (Number.isNaN(counters[level])) counters[level] = (pmAttrs.listLevelStarts?.[level] ?? 1) - 1;
 	}
+	if (!Number.isFinite(counters[level])) counters[level] = (pmAttrs.listLevelStarts?.[level] ?? 1) - 1;
 	counters[level] = (counters[level] ?? 0) + 1;
 	for (let i = level + 1; i < counters.length; i += 1) counters[i] = NaN;
 	const childAdvances = pmAttrs.listImplicitChildLevelAdvances ?? 0;
 	if (childAdvances > 0 && level + 1 < counters.length) {
 		const childCounter = counters[level + 1];
-		counters[level + 1] = (childCounter === void 0 || Number.isNaN(childCounter) ? 0 : childCounter) + childAdvances;
+		counters[level + 1] = (childCounter === void 0 || !Number.isFinite(childCounter) ? 0 : childCounter) + childAdvances;
 	}
 	listCounters.set(numId, counters);
 	if (abstractNumId !== void 0) abstractCounters.set(abstractNumId, [...counters]);

package/dist/layout-bridge/dom/clickToPositionDom.d.ts

@@ -61,6 +61,31 @@ type DomCaretPosition = {
   height: number;
   pageIndex: number;
 };
+type CollapsedLineEdgeCaretGeometry = {
+  left: number;
+  top: number;
+  /** Viewport height of the visual anchor. Full-line caret painters retain
+   * their own line-height policy instead of using this glyph-box height. */
+  height: number;
+};
+/**
+ * Resolve viewport geometry for a line-edge space span that the painter keeps
+ * addressable but collapses to zero font size. Browser ranges inside those
+ * spans report their zero-height baseline as `top`, which makes a caret appear
+ * below the line until visible text is typed. Anchor the caret to the nearest
+ * painted sibling instead; an all-whitespace line falls back to its line box.
+ */
+declare function getCollapsedLineEdgeCaretGeometry(spanEl: HTMLElement, pmPos?: number): CollapsedLineEdgeCaretGeometry | null;
+type CollapsedLineEdgeCaretTarget = {
+  span: HTMLElement;
+  geometry: CollapsedLineEdgeCaretGeometry;
+};
+/**
+ * Prefer a collapsed line-edge span when multiple painted spans share the PM
+ * position. Generic text runs use inclusive endpoints, so DOM order alone
+ * cannot decide which span owns a boundary.
+ */
+declare function findCollapsedLineEdgeCaretTarget(spans: readonly HTMLElement[], pmPos: number): CollapsedLineEdgeCaretTarget | null;
 declare function getCaretPositionFromDom(container: HTMLElement, pmPos: number, overlayRect: DOMRect): DomCaretPosition | null;
 //#endregion
-export { DomCaretPosition, DomSelectionRect, clickToPositionDom, findPositionInSpan, getCaretPositionFromDom, getSelectionRectsFromDom };
+export { CollapsedLineEdgeCaretGeometry, CollapsedLineEdgeCaretTarget, DomCaretPosition, DomSelectionRect, clickToPositionDom, findCollapsedLineEdgeCaretTarget, findPositionInSpan, getCaretPositionFromDom, getCollapsedLineEdgeCaretGeometry, getSelectionRectsFromDom };

package/dist/layout-bridge/dom/clickToPositionDom.js

@@ -225,8 +225,67 @@ function getSelectionRectsFromDom(container, from, to, overlayRect) {
 	}
 	return rects;
 }
+/**
+* Resolve viewport geometry for a line-edge space span that the painter keeps
+* addressable but collapses to zero font size. Browser ranges inside those
+* spans report their zero-height baseline as `top`, which makes a caret appear
+* below the line until visible text is typed. Anchor the caret to the nearest
+* painted sibling instead; an all-whitespace line falls back to its line box.
+*/
+function getCollapsedLineEdgeCaretGeometry(spanEl, pmPos) {
+	const isLeading = spanEl.dataset["collapsedLeadingSpaces"] === "true";
+	const isTrailing = spanEl.dataset["collapsedTrailingSpaces"] === "true";
+	if (!isLeading && !isTrailing) return null;
+	let sibling = isTrailing ? spanEl.previousElementSibling : spanEl.nextElementSibling;
+	while (sibling && (sibling.getAttribute("data-collapsed-leading-spaces") === "true" || sibling.getAttribute("data-collapsed-trailing-spaces") === "true")) sibling = isTrailing ? sibling.previousElementSibling : sibling.nextElementSibling;
+	const spanRect = spanEl.getBoundingClientRect();
+	const line = closestHtmlElement(spanEl, ".layout-line");
+	const anchorRect = sibling?.getBoundingClientRect() ?? line?.getBoundingClientRect() ?? spanRect;
+	const lineRect = line?.getBoundingClientRect();
+	const pmStart = Number(spanEl.dataset["pmStart"]);
+	const pmEnd = Number(spanEl.dataset["pmEnd"]);
+	const storedSpaceAdvance = Number(spanEl.dataset["collapsedSpaceAdvance"]);
+	const lineScale = line && line.offsetWidth > 0 && lineRect ? lineRect.width / line.offsetWidth : 1;
+	const trailingSpaceCount = isTrailing && pmPos !== void 0 && Number.isFinite(pmStart) && Number.isFinite(pmEnd) ? Math.max(0, Math.min(pmPos, pmEnd) - pmStart) : 0;
+	const inlineDirection = spanRect.left <= anchorRect.left ? -1 : 1;
+	const trailingAdvance = Number.isFinite(storedSpaceAdvance) && lineScale > 0 ? trailingSpaceCount * storedSpaceAdvance * lineScale * inlineDirection : 0;
+	return {
+		left: spanRect.left + trailingAdvance,
+		top: anchorRect.top,
+		height: anchorRect.height || lineRect?.height || 16
+	};
+}
+/**
+* Prefer a collapsed line-edge span when multiple painted spans share the PM
+* position. Generic text runs use inclusive endpoints, so DOM order alone
+* cannot decide which span owns a boundary.
+*/
+function findCollapsedLineEdgeCaretTarget(spans, pmPos) {
+	for (const span of spans) {
+		const pmStart = Number(span.dataset["pmStart"]);
+		const pmEnd = Number(span.dataset["pmEnd"]);
+		if (pmPos < pmStart || pmPos > pmEnd) continue;
+		const geometry = getCollapsedLineEdgeCaretGeometry(span, pmPos);
+		if (geometry) return {
+			span,
+			geometry
+		};
+	}
+	return null;
+}
 function getCaretPositionFromDom(container, pmPos, overlayRect) {
 	const spans = htmlQueryAll(container, ".layout-page-content span[data-pm-start][data-pm-end]");
+	const collapsedTarget = findCollapsedLineEdgeCaretTarget(spans, pmPos);
+	if (collapsedTarget) {
+		const pageEl = closestHtmlElement(collapsedTarget.span, ".layout-page");
+		const pageIndex = pageEl ? Number(pageEl.dataset["pageNumber"] || 1) - 1 : 0;
+		return {
+			x: collapsedTarget.geometry.left - overlayRect.left,
+			y: collapsedTarget.geometry.top - overlayRect.top,
+			height: collapsedTarget.geometry.height,
+			pageIndex
+		};
+	}
 	for (const spanEl of spans) {
 		const pmStart = Number(spanEl.dataset["pmStart"]);
 		const pmEnd = Number(spanEl.dataset["pmEnd"]);
@@ -301,4 +360,4 @@ function getCaretPositionFromDom(container, pmPos, overlayRect) {
 	return null;
 }
 //#endregion
-export { clickToPositionDom, findPositionInSpan, getCaretPositionFromDom, getSelectionRectsFromDom };
+export { clickToPositionDom, findCollapsedLineEdgeCaretTarget, findPositionInSpan, getCaretPositionFromDom, getCollapsedLineEdgeCaretGeometry, getSelectionRectsFromDom };

package/dist/layout-bridge/dom/imeCaretAnchor.d.ts

@@ -0,0 +1,42 @@
+//#region src/layout-bridge/dom/imeCaretAnchor.d.ts
+type ImeCaretHost = {
+  style: {
+    transform: string;
+  };
+};
+type ImeCaretEditorView = {
+  readonly composing: boolean;
+  readonly dom?: HTMLElement;
+  readonly state: {
+    readonly selection: {
+      readonly empty: boolean;
+      readonly head: number;
+    };
+  };
+  hasFocus: () => boolean;
+  coordsAtPos: (position: number) => {
+    left: number;
+    top: number;
+  };
+};
+type VisibleCaretViewportRect = {
+  left: number;
+  top: number;
+};
+type SyncImeCaretAnchorOptions = {
+  hiddenHost: ImeCaretHost | null | undefined;
+  editorView: ImeCaretEditorView | null | undefined;
+  visibleCaret: VisibleCaretViewportRect | null | undefined;
+};
+/**
+ * Align the real off-screen ProseMirror caret with the painted document caret.
+ *
+ * Native IME candidate windows follow the focused contenteditable selection,
+ * not folio's visual caret overlay. Translating the hidden input host preserves
+ * split rendering while anchoring CJK candidate UI at the visible insertion
+ * point.
+ */
+declare const syncImeCaretAnchor: ({ hiddenHost, editorView, visibleCaret }: SyncImeCaretAnchorOptions) => boolean;
+declare const resetImeCaretAnchor: (hiddenHost: ImeCaretHost | null | undefined) => void;
+//#endregion
+export { resetImeCaretAnchor, syncImeCaretAnchor };

package/dist/layout-bridge/dom/imeCaretAnchor.js

@@ -0,0 +1,59 @@
+//#region src/layout-bridge/dom/imeCaretAnchor.ts
+const resetHostTransform = (hiddenHost) => {
+	if (hiddenHost) hiddenHost.style.transform = "";
+};
+const getNativeSelectionCaret = (editorView) => {
+	const editorDom = editorView.dom;
+	const selection = editorDom?.ownerDocument.getSelection();
+	if (!editorDom || !selection || selection.rangeCount === 0) return null;
+	const range = selection.getRangeAt(0);
+	if (!editorDom.contains(range.startContainer)) return null;
+	const rect = range.getBoundingClientRect();
+	if (range.getClientRects().length === 0 || rect.left === 0 && rect.top === 0 && rect.width === 0 && rect.height === 0) return null;
+	return {
+		left: rect.left,
+		top: rect.top
+	};
+};
+/**
+* Align the real off-screen ProseMirror caret with the painted document caret.
+*
+* Native IME candidate windows follow the focused contenteditable selection,
+* not folio's visual caret overlay. Translating the hidden input host preserves
+* split rendering while anchoring CJK candidate UI at the visible insertion
+* point.
+*/
+const syncImeCaretAnchor = ({ hiddenHost, editorView, visibleCaret }) => {
+	if (!hiddenHost) return false;
+	if (!editorView) {
+		resetHostTransform(hiddenHost);
+		return false;
+	}
+	if (editorView.composing) return false;
+	if (!visibleCaret || !editorView.hasFocus() || !editorView.state.selection.empty) {
+		resetHostTransform(hiddenHost);
+		return false;
+	}
+	const previousTransform = hiddenHost.style.transform;
+	hiddenHost.style.transform = "";
+	let hiddenCaret;
+	try {
+		hiddenCaret = getNativeSelectionCaret(editorView) ?? editorView.coordsAtPos(editorView.state.selection.head);
+	} catch {
+		hiddenHost.style.transform = previousTransform;
+		return false;
+	}
+	if (!Number.isFinite(hiddenCaret.left) || !Number.isFinite(hiddenCaret.top) || !Number.isFinite(visibleCaret.left) || !Number.isFinite(visibleCaret.top)) {
+		resetHostTransform(hiddenHost);
+		return false;
+	}
+	const dx = Math.round(visibleCaret.left - hiddenCaret.left);
+	const dy = Math.round(visibleCaret.top - hiddenCaret.top);
+	hiddenHost.style.transform = `translate3d(${dx}px, ${dy}px, 0)`;
+	return true;
+};
+const resetImeCaretAnchor = (hiddenHost) => {
+	resetHostTransform(hiddenHost);
+};
+//#endregion
+export { resetImeCaretAnchor, syncImeCaretAnchor };

package/dist/layout-bridge/headerFooterLayout.js

@@ -1,3 +1,4 @@
+import { getCollapsedLineEdgeCaretGeometry } from "./dom/clickToPositionDom.js";
 //#region src/layout-bridge/headerFooterLayout.ts
 const hfDomCache = {
 	header: null,
@@ -68,6 +69,12 @@ function computeHfCaretRectFromView(view, section, doc = globalThis.document) {
 		const end = Number(span.dataset["pmEnd"]);
 		if (!Number.isFinite(start) || !Number.isFinite(end)) continue;
 		if (pmPos >= start && pmPos <= end) {
+			const collapsedGeometry = getCollapsedLineEdgeCaretGeometry(span, pmPos);
+			if (collapsedGeometry) return {
+				top: collapsedGeometry.top,
+				left: collapsedGeometry.left,
+				height: collapsedGeometry.height
+			};
 			const range = host.ownerDocument.createRange();
 			const walker = host.ownerDocument.createTreeWalker(span, NodeFilter.SHOW_TEXT);
 			let remaining = pmPos - start;

package/dist/layout-painter/renderParagraph.js

@@ -988,11 +988,14 @@ function renderLine(block, line, alignment, doc, options) {
 	const splitRuns = splitTextRunsByEastAsia(sliceRunsForLine(block, line));
 	const { runs: runsForLine, collapsedLeadingRuns: collapsedLeadingSpaceRuns, collapsedTrailingRuns: collapsedTrailingSpaceRuns } = splitCollapsibleLineEdgeSpaces(splitRuns, startsAfterSoftWrap(block, line));
 	const isCollapsedLineEdgeSpaceRun = (run) => collapsedLeadingSpaceRuns.has(run) || collapsedTrailingSpaceRuns.has(run);
+	const collapsedSpaceMeasureText = collapsedLeadingSpaceRuns.size > 0 || collapsedTrailingSpaceRuns.size > 0 ? createTextMeasurer(doc) : void 0;
 	const renderLineTextRun = (run) => {
 		const runEl = renderTextRun(run, doc);
 		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) * ((run.horizontalScale ?? 100) / 100);
+			runEl.dataset["collapsedSpaceAdvance"] = String(spaceAdvance);
 			runEl.style.fontSize = "0";
 			runEl.style.letterSpacing = "0";
 			runEl.style.wordSpacing = "0";
@@ -1055,7 +1058,7 @@ function renderLine(block, line, alignment, doc, options) {
 	lineEl.style.overflow = "visible";
 	let tabContext;
 	const hasScaledTextRun = runsForLine.some((run) => (isTextRun(run) || isFieldRun(run) || isMathRun(run)) && run.horizontalScale !== void 0 && run.horizontalScale !== 100);
-	const measureText = hasTabRuns || hasScaledTextRun ? createTextMeasurer(doc) : void 0;
+	const measureText = collapsedSpaceMeasureText ?? (hasTabRuns || hasScaledTextRun ? createTextMeasurer(doc) : void 0);
 	if (hasTabRuns) {
 		const explicitStops = options?.tabStops?.map(convertTabStopToCalc);
 		const leftIndentTwips = options?.leftIndentPx ? Math.round(options.leftIndentPx * 15) : 0;

package/dist/render-dom/RenderedDomContext.js

@@ -1,3 +1,4 @@
+import { findCollapsedLineEdgeCaretTarget } from "../layout-bridge/dom/clickToPositionDom.js";
 import { findBodyEmptyRuns, findBodyPmSpans } from "../layout-bridge/dom/findBodyPmSpans.js";
 import { closestHtmlElement } from "../utils/domGuards.js";
 //#region src/render-dom/RenderedDomContext.ts
@@ -26,7 +27,14 @@ var RenderedDomContextImpl = class {
 	}
 	getCoordinatesForPosition(pmPos) {
 		const containerRect = this.#pagesContainer.getBoundingClientRect();
-		for (const span of findBodyPmSpans(this.#pagesContainer)) {
+		const spans = findBodyPmSpans(this.#pagesContainer);
+		const collapsedTarget = findCollapsedLineEdgeCaretTarget(spans, pmPos);
+		if (collapsedTarget) return {
+			x: (collapsedTarget.geometry.left - containerRect.left) / this.#zoom,
+			y: (collapsedTarget.geometry.top - containerRect.top) / this.#zoom,
+			height: lineHeightFor(collapsedTarget.span, this.#zoom)
+		};
+		for (const span of spans) {
 			const pmStart = Number(span.dataset["pmStart"]);
 			const pmEnd = Number(span.dataset["pmEnd"]);
 			if (!(span.classList.contains("layout-run-tab") ? pmPos >= pmStart && pmPos < pmEnd : pmPos >= pmStart && pmPos <= pmEnd)) continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-core",
-  "version": "0.15.11",
+  "version": "0.15.13",
   "description": "Headless, framework-neutral core of folio: the OOXML (.docx) parser, document model, ProseMirror integration, and page-layout engine. No React.",
   "keywords": [
     "document-model",