@stll/folio-core 0.15.11 → 0.15.12

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

@@ -61,6 +61,21 @@ 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): CollapsedLineEdgeCaretGeometry | null;
 declare function getCaretPositionFromDom(container: HTMLElement, pmPos: number, overlayRect: DOMRect): DomCaretPosition | null;
 //#endregion
-export { DomCaretPosition, DomSelectionRect, clickToPositionDom, findPositionInSpan, getCaretPositionFromDom, getSelectionRectsFromDom };
+export { CollapsedLineEdgeCaretGeometry, DomCaretPosition, DomSelectionRect, clickToPositionDom, findPositionInSpan, getCaretPositionFromDom, getCollapsedLineEdgeCaretGeometry, getSelectionRectsFromDom };

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

@@ -225,6 +225,29 @@ 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) {
+	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();
+	return {
+		left: spanRect.left,
+		top: anchorRect.top,
+		height: anchorRect.height || lineRect?.height || 16
+	};
+}
 function getCaretPositionFromDom(container, pmPos, overlayRect) {
 	const spans = htmlQueryAll(container, ".layout-page-content span[data-pm-start][data-pm-end]");
 	for (const spanEl of spans) {
@@ -247,6 +270,17 @@ function getCaretPositionFromDom(container, pmPos, overlayRect) {
 			continue;
 		}
 		if (pmPos >= pmStart && pmPos <= pmEnd) {
+			const collapsedGeometry = getCollapsedLineEdgeCaretGeometry(spanEl);
+			if (collapsedGeometry) {
+				const pageEl = closestHtmlElement(spanEl, ".layout-page");
+				const pageIndex = pageEl ? Number(pageEl.dataset["pageNumber"] || 1) - 1 : 0;
+				return {
+					x: collapsedGeometry.left - overlayRect.left,
+					y: collapsedGeometry.top - overlayRect.top,
+					height: collapsedGeometry.height,
+					pageIndex
+				};
+			}
 			const textNode = spanEl.firstChild;
 			if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
 				const spanRect = spanEl.getBoundingClientRect();
@@ -301,4 +335,4 @@ function getCaretPositionFromDom(container, pmPos, overlayRect) {
 	return null;
 }
 //#endregion
-export { clickToPositionDom, findPositionInSpan, getCaretPositionFromDom, getSelectionRectsFromDom };
+export { clickToPositionDom, 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);
+			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/render-dom/RenderedDomContext.js

@@ -1,3 +1,4 @@
+import { getCollapsedLineEdgeCaretGeometry } 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
@@ -36,6 +37,12 @@ var RenderedDomContextImpl = class {
 				y: (spanRect.top - containerRect.top) / this.#zoom,
 				height: lineHeightFor(span, this.#zoom)
 			};
+			const collapsedGeometry = getCollapsedLineEdgeCaretGeometry(span);
+			if (collapsedGeometry) return {
+				x: (collapsedGeometry.left - containerRect.left) / this.#zoom,
+				y: (collapsedGeometry.top - containerRect.top) / this.#zoom,
+				height: lineHeightFor(span, this.#zoom)
+			};
 			const textNode = textNodeForSpan(span);
 			if (!textNode) return {
 				x: (spanRect.left - containerRect.left) / this.#zoom,

package/package.json

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