@stll/folio-react 0.12.3 → 0.13.1

package/dist/{CommentsSidebar-mwa9JsIj.js → CommentsSidebar-B7waYgma.js}

@@ -1,4 +1,4 @@
-import { d as containedHandler } from "./renderAsync-DFwDFNB9.js";
+import { d as containedHandler } from "./renderAsync-vD-j-sjQ.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { CheckIcon, MoreVerticalIcon } from "lucide-react";
 import { useLocale, useTranslations } from "use-intl";

package/dist/compat/eigenpal.d.ts

@@ -1,4 +1,4 @@
-import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-CH8S7yqU.js";
+import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-B_Bi9oSr.js";
 import { ReactNode } from "react";
 import { CreateEmptyDocumentOptions, createDocumentWithText, createEmptyDocument } from "@stll/folio-core/utils/createDocument";
 //#region src/compat/eigenpal.d.ts

package/dist/compat/eigenpal.js

@@ -1,4 +1,4 @@
-import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-DFwDFNB9.js";
+import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-vD-j-sjQ.js";
 import { t as messages_exports } from "../messages.js";
 import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { _ as FolioUIProvider, a as DocxEditorApplyDocumentOperationsOptions, c as DocxEditorRef, d as ToolbarProps, f as EditorMode, g as FolioUIComponents, h as FolioButtonProps, i as renderAsync, l as HighlightPassageOptions, m as ColorPreset, n as EditorHandle, o as DocxEditorCollaboration, p as FontOption, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle, u as HighlightPassageResult, v as OutlineItem, y as FontDefinition } from "./renderAsync-CH8S7yqU.js";
+import { _ as FolioUIProvider, a as DocxEditorApplyDocumentOperationsOptions, c as DocxEditorRef, d as ToolbarProps, f as EditorMode, g as FolioUIComponents, h as FolioButtonProps, i as renderAsync, l as HighlightPassageOptions, m as ColorPreset, n as EditorHandle, o as DocxEditorCollaboration, p as FontOption, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle, u as HighlightPassageResult, v as OutlineItem, y as FontDefinition } from "./renderAsync-B_Bi9oSr.js";
 import { A as HyperlinkDialog, C as ImagePropertiesData, D as ImagePositionDialog, E as ImagePositionData, F as FindReplaceDialog, I as FindReplaceDialogProps, M as HyperlinkDialogProps, N as FootnotePropertiesDialog, O as ImagePositionDialogProps, P as FootnotePropertiesDialogProps, S as InsertImageDialogProps, T as ImagePropertiesDialogProps, _ as InsertTableStyleOption, a as TablePropertiesDialogProps, b as InsertImageDialog, c as SplitCellDialogProps, d as PasteSpecialMode, f as PageSetupDialog, g as InsertTableDialogProps, h as InsertTableDialogData, i as TablePropertiesDialog, j as HyperlinkDialogData, k as HyperlinkBookmarkOption, l as PasteSpecialDialog, m as InsertTableDialog, n as WatermarkDialogProps, o as SplitCellDialog, p as PageSetupDialogProps, r as TableProperties, s as SplitCellDialogData, t as WatermarkDialog, u as PasteSpecialDialogProps, v as InsertSymbolDialog, w as ImagePropertiesDialog, x as InsertImageDialogData, y as InsertSymbolDialogProps } from "./dialogs-lCOx21mG.js";
 import React, { CSSProperties, ReactNode, RefObject } from "react";
 import { CreateEmptyDocumentOptions, createEmptyDocument } from "@stll/folio-core/utils/createDocument";

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as formatZoom, c as FormattingBar, i as clampZoom, l as ZoomControl, n as DocxEditor, o as parseZoom, r as ZOOM_PRESETS, s as useWheelZoom, t as renderAsync, u as AutocompleteCaretOverlay } from "./renderAsync-DFwDFNB9.js";
+import { a as formatZoom, c as FormattingBar, i as clampZoom, l as ZoomControl, n as DocxEditor, o as parseZoom, r as ZOOM_PRESETS, s as useWheelZoom, t as renderAsync, u as AutocompleteCaretOverlay } from "./renderAsync-vD-j-sjQ.js";
 import { n as FolioUIProvider } from "./folio-ui-BgDDRsUX.js";
 import { t as FindReplaceDialog } from "./FindReplaceDialog-CqKK82nE.js";
 import { t as FootnotePropertiesDialog } from "./FootnotePropertiesDialog-CixRdIiT.js";

package/dist/{renderAsync-CH8S7yqU.d.ts → renderAsync-B_Bi9oSr.d.ts}

@@ -694,8 +694,12 @@ type DocxEditorProps = {
   showRuler?: boolean;
   /** Measurement unit shown on the rulers (default: 'inch'). */
   rulerUnit?: "inch" | "cm";
-  /** Initial zoom level (default: 1.0) */
-  initialZoom?: number;
+  /**
+   * Initial zoom level as a number (default: 1.0 = 100%), or `"fit-width"` to
+   * size the page to the editor's width and keep it fit as the editor resizes.
+   * A manual zoom (toolbar or `ref.setZoom`) afterwards overrides the fit.
+   */
+  initialZoom?: number | "fit-width";
   /** Whether Ctrl/Cmd+wheel and trackpad-pinch zoom are enabled (default: true) */
   enableWheelZoom?: boolean;
   /** Whether the editor is read-only. When true, hides toolbar and rulers */

package/dist/{renderAsync-DFwDFNB9.js → renderAsync-vD-j-sjQ.js}

@@ -52,7 +52,8 @@ import { documentFontsAreLoaded, getDocumentFontSet, waitForInitialLayoutFonts }
 import { getFootnoteText } from "@stll/folio-core/docx/footnoteParser";
 import { convertHeaderFooterPmDocToContent, convertHeaderFooterToContent } from "@stll/folio-core/layout-bridge/convert/headerFooterLayout";
 import { templatePreviewDirtyRange } from "@stll/folio-core/layout-bridge/convert/templatePreviewFlow";
-import { clickToPositionDom } from "@stll/folio-core/layout-bridge/dom/clickToPositionDom";
+import { clickToPositionDom, getCollapsedLineEdgeCaretGeometry } from "@stll/folio-core/layout-bridge/dom/clickToPositionDom";
+import { resetImeCaretAnchor, syncImeCaretAnchor } from "@stll/folio-core/layout-bridge/dom/imeCaretAnchor";
 import { findBodyEmptyRuns, findBodyPmAnchor, findBodyPmAnchors, findBodyPmSpans } from "@stll/folio-core/layout-bridge/dom/findBodyPmSpans";
 import { clickToPositionInHfSlot, findHfCaretSpan, findHfPmSpans, findHfSlotForTarget, findHfSlotKindForTarget } from "@stll/folio-core/layout-bridge/dom/findHfPmSpans";
 import { findNoteStoryForTarget } from "@stll/folio-core/layout-bridge/dom/noteStoryDom";
@@ -357,11 +358,13 @@ const HiddenHeaderFooterPMs = memo(forwardRef(function HiddenHeaderFooterPMs({ d
 		managerRef.current?.destroy();
 	}, []);
 	useImperativeHandle(ref, () => ({
+		getHostElement: () => hostRef.current,
 		getView: (rId) => managerRef.current?.getView(rId) ?? null,
 		listSlots: () => managerRef.current?.listSlots() ?? []
 	}), []);
 	return /* @__PURE__ */ jsx("div", {
 		ref: hostRef,
+		className: "paged-editor__hidden-hf-pm",
 		style: HOST_STYLES
 	});
 }));
@@ -1318,7 +1321,10 @@ const HiddenProseMirror = forwardRef((props, ref) => {
 	useEffect(() => {
 		managerRef.current?.syncEditable();
 	}, [readOnly]);
-	useImperativeHandle(ref, () => managerRef.current.api, []);
+	useImperativeHandle(ref, () => ({
+		...managerRef.current.api,
+		getHostElement: () => hostRef.current
+	}), []);
 	if (hasCollaboration && collaborationModulesError) {
 		let detail = "unknown error";
 		if (collaborationModulesError instanceof Error) detail = collaborationModulesError.message;
@@ -2576,8 +2582,8 @@ const loadSelectionGeometry = () => {
 	return selectionGeometryPromise;
 };
 function HfCaretOverlay(t0) {
-	const $ = c(20);
-	const { selection, pagesContainer, zoom } = t0;
+	const $ = c(22);
+	const { selection, pagesContainer, hiddenHost, editorView, zoom } = t0;
 	const [caret, setCaret] = useState(null);
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
@@ -2587,7 +2593,7 @@ function HfCaretOverlay(t0) {
 	const [rangeRects, setRangeRects] = useState(t1);
 	let t2;
 	let t3;
-	if ($[1] !== pagesContainer || $[2] !== selection.from || $[3] !== selection.kind || $[4] !== selection.pageNumber || $[5] !== selection.rId || $[6] !== selection.to || $[7] !== zoom) {
+	if ($[1] !== editorView || $[2] !== hiddenHost || $[3] !== pagesContainer || $[4] !== selection.from || $[5] !== selection.kind || $[6] !== selection.pageNumber || $[7] !== selection.rId || $[8] !== selection.to || $[9] !== zoom) {
 		t2 = () => {
 			if (!pagesContainer) return;
 			const recompute = () => {
@@ -2597,6 +2603,11 @@ function HfCaretOverlay(t0) {
 				if (selection.from === selection.to) {
 					const hit = findHfCaretSpan(pageScope, selection.kind, selection.rId, selection.from);
 					if (!hit) {
+						syncImeCaretAnchor({
+							hiddenHost,
+							editorView,
+							visibleCaret: null
+						});
 						setCaret(null);
 						setRangeRects([]);
 						return;
@@ -2628,9 +2639,22 @@ function HfCaretOverlay(t0) {
 						y: (absY - cr.top) / zoomDivisor,
 						height: absHeight / zoomDivisor
 					});
+					syncImeCaretAnchor({
+						hiddenHost,
+						editorView,
+						visibleCaret: {
+							left: absX,
+							top: absY
+						}
+					});
 					setRangeRects([]);
 					return;
 				}
+				syncImeCaretAnchor({
+					hiddenHost,
+					editorView,
+					visibleCaret: null
+				});
 				const spans = findHfPmSpans(pageScope, selection.kind, selection.rId);
 				const rects = [];
 				for (const span of spans) {
@@ -2669,9 +2693,25 @@ function HfCaretOverlay(t0) {
 			};
 			recompute();
 			const onPainted = () => recompute();
+			let animationFrame = null;
+			const scheduleRecompute = () => {
+				if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+				animationFrame = requestAnimationFrame(() => {
+					animationFrame = null;
+					recompute();
+				});
+			};
 			pagesContainer.addEventListener(PAINTER_PAINTED_EVENT, onPainted);
+			hiddenHost?.addEventListener("focusin", recompute);
+			hiddenHost?.addEventListener("compositionend", scheduleRecompute);
+			window.addEventListener("scroll", scheduleRecompute, true);
 			return () => {
+				if (animationFrame !== null) cancelAnimationFrame(animationFrame);
 				pagesContainer.removeEventListener(PAINTER_PAINTED_EVENT, onPainted);
+				hiddenHost?.removeEventListener("focusin", recompute);
+				hiddenHost?.removeEventListener("compositionend", scheduleRecompute);
+				window.removeEventListener("scroll", scheduleRecompute, true);
+				resetImeCaretAnchor(hiddenHost);
 			};
 		};
 		t3 = [
@@ -2681,31 +2721,35 @@ function HfCaretOverlay(t0) {
 			selection.to,
 			selection.pageNumber,
 			pagesContainer,
+			hiddenHost,
+			editorView,
 			zoom
 		];
-		$[1] = pagesContainer;
-		$[2] = selection.from;
-		$[3] = selection.kind;
-		$[4] = selection.pageNumber;
-		$[5] = selection.rId;
-		$[6] = selection.to;
-		$[7] = zoom;
-		$[8] = t2;
-		$[9] = t3;
+		$[1] = editorView;
+		$[2] = hiddenHost;
+		$[3] = pagesContainer;
+		$[4] = selection.from;
+		$[5] = selection.kind;
+		$[6] = selection.pageNumber;
+		$[7] = selection.rId;
+		$[8] = selection.to;
+		$[9] = zoom;
+		$[10] = t2;
+		$[11] = t3;
 	} else {
-		t2 = $[8];
-		t3 = $[9];
+		t2 = $[10];
+		t3 = $[11];
 	}
 	useEffect(t2, t3);
 	if (!pagesContainer) return null;
 	let t4;
-	if ($[10] !== rangeRects) {
+	if ($[12] !== rangeRects) {
 		t4 = rangeRects.map(_temp$8);
-		$[10] = rangeRects;
-		$[11] = t4;
-	} else t4 = $[11];
+		$[12] = rangeRects;
+		$[13] = t4;
+	} else t4 = $[13];
 	let t5;
-	if ($[12] !== caret) {
+	if ($[14] !== caret) {
 		t5 = caret && /* @__PURE__ */ jsx("div", {
 			"data-testid": "hf-caret",
 			style: {
@@ -2720,23 +2764,23 @@ function HfCaretOverlay(t0) {
 				animation: "folio-caret-blink 1060ms steps(1, end) infinite"
 			}
 		});
-		$[12] = caret;
-		$[13] = t5;
-	} else t5 = $[13];
+		$[14] = caret;
+		$[15] = t5;
+	} else t5 = $[15];
 	let t6;
-	if ($[14] !== t4 || $[15] !== t5) {
+	if ($[16] !== t4 || $[17] !== t5) {
 		t6 = /* @__PURE__ */ jsxs(Fragment, { children: [t4, t5] });
-		$[14] = t4;
-		$[15] = t5;
-		$[16] = t6;
-	} else t6 = $[16];
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else t6 = $[18];
 	let t7;
-	if ($[17] !== pagesContainer || $[18] !== t6) {
+	if ($[19] !== pagesContainer || $[20] !== t6) {
 		t7 = createPortal(t6, pagesContainer);
-		$[17] = pagesContainer;
-		$[18] = t6;
-		$[19] = t7;
-	} else t7 = $[19];
+		$[19] = pagesContainer;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
 	return t7;
 }
 function _temp$8(r_0, i) {
@@ -3510,6 +3554,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				};
 			}
 			if (pmPos_0 >= pmStart && pmPos_0 <= pmEnd && spanEl.firstChild?.nodeType === Node.TEXT_NODE) {
+				const collapsedGeometry = getCollapsedLineEdgeCaretGeometry(spanEl);
+				if (collapsedGeometry) return {
+					x: (collapsedGeometry.left - overlayRect.left) / currentZoom,
+					y: (collapsedGeometry.top - overlayRect.top) / currentZoom,
+					height: getLineHeight(spanEl),
+					pageIndex: getPageIndex(spanEl)
+				};
 				const textNode = spanEl.firstChild;
 				const charIndex = Math.min(pmPos_0 - pmStart, textNode.length);
 				const range = spanEl.ownerDocument.createRange();
@@ -3555,6 +3606,21 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		}
 		return null;
 	}, []);
+	const refreshBodyImeCaretAnchor = useCallback(() => {
+		const view_1 = hiddenPMRef.current?.getView();
+		if (!view_1) return;
+		const { selection: selection_1 } = view_1.state;
+		const domCaret = selection_1.empty ? getCaretFromDom(selection_1.head, zoom) : null;
+		const overlayRect_0 = (pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]"))?.getBoundingClientRect();
+		syncImeCaretAnchor({
+			hiddenHost: hiddenPMRef.current?.getHostElement(),
+			editorView: view_1,
+			visibleCaret: domCaret && overlayRect_0 ? {
+				left: overlayRect_0.left + domCaret.x * zoom,
+				top: overlayRect_0.top + domCaret.y * zoom
+			} : null
+		});
+	}, [getCaretFromDom, zoom]);
 	/**
 	* Update selection overlay from PM selection.
 	*/
@@ -3578,6 +3644,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (suppressSelectionOverlayRef.current) {
 			setCaretPosition(null);
 			setSelectionRects([]);
+			syncImeCaretAnchor({
+				hiddenHost: hiddenPMRef.current?.getHostElement(),
+				editorView: hiddenPMRef.current?.getView(),
+				visibleCaret: null
+			});
 			return;
 		}
 		if (pagesContainerRef.current) {
@@ -3602,36 +3673,89 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				}
 			}
 		}
-		if (!layout || blocks.length === 0) return;
+		if (!layout || blocks.length === 0) {
+			syncImeCaretAnchor({
+				hiddenHost: hiddenPMRef.current?.getHostElement(),
+				editorView: hiddenPMRef.current?.getView(),
+				visibleCaret: null
+			});
+			return;
+		}
 		if (from === to) {
-			const domCaret = getCaretFromDom(from, zoom);
-			if (domCaret) setCaretPosition(domCaret);
-			else {
-				const overlay_0 = pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+			const domCaret_0 = getCaretFromDom(from, zoom);
+			if (domCaret_0) {
+				setCaretPosition(domCaret_0);
+				const overlayRect_1 = (pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]"))?.getBoundingClientRect();
+				syncImeCaretAnchor({
+					hiddenHost: hiddenPMRef.current?.getHostElement(),
+					editorView: hiddenPMRef.current?.getView(),
+					visibleCaret: overlayRect_1 ? {
+						left: overlayRect_1.left + domCaret_0.x * zoom,
+						top: overlayRect_1.top + domCaret_0.y * zoom
+					} : null
+				});
+			} else {
+				const overlay_2 = pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
 				const firstPage = pagesContainerRef.current?.querySelector(".layout-page");
-				if (overlay_0 && firstPage) {
-					const overlayRect_0 = overlay_0.getBoundingClientRect();
+				if (overlay_2 && firstPage) {
+					const overlayRect_2 = overlay_2.getBoundingClientRect();
 					const pageRect = firstPage.getBoundingClientRect();
 					setCaretPosition(null);
 					loadSelectionGeometry().then(({ getCaretPosition }) => {
 						if (!isCurrentRequest()) return;
 						const caret = getCaretPosition(layout, blocks, measures, from);
-						if (caret) setCaretPosition({
-							...caret,
-							x: caret.x + (pageRect.left - overlayRect_0.left) / zoom,
-							y: caret.y + (pageRect.top - overlayRect_0.top) / zoom
-						});
-						else setCaretPosition(null);
+						if (caret) {
+							const fallbackCaret = {
+								...caret,
+								x: caret.x + (pageRect.left - overlayRect_2.left) / zoom,
+								y: caret.y + (pageRect.top - overlayRect_2.top) / zoom
+							};
+							setCaretPosition(fallbackCaret);
+							syncImeCaretAnchor({
+								hiddenHost: hiddenPMRef.current?.getHostElement(),
+								editorView: hiddenPMRef.current?.getView(),
+								visibleCaret: {
+									left: overlayRect_2.left + fallbackCaret.x * zoom,
+									top: overlayRect_2.top + fallbackCaret.y * zoom
+								}
+							});
+						} else {
+							setCaretPosition(null);
+							syncImeCaretAnchor({
+								hiddenHost: hiddenPMRef.current?.getHostElement(),
+								editorView: hiddenPMRef.current?.getView(),
+								visibleCaret: null
+							});
+						}
 					}, () => {
-						if (isCurrentRequest()) setCaretPosition(null);
+						if (isCurrentRequest()) {
+							setCaretPosition(null);
+							syncImeCaretAnchor({
+								hiddenHost: hiddenPMRef.current?.getHostElement(),
+								editorView: hiddenPMRef.current?.getView(),
+								visibleCaret: null
+							});
+						}
 					});
-				} else setCaretPosition(null);
+				} else {
+					setCaretPosition(null);
+					syncImeCaretAnchor({
+						hiddenHost: hiddenPMRef.current?.getHostElement(),
+						editorView: hiddenPMRef.current?.getView(),
+						visibleCaret: null
+					});
+				}
 			}
 			setSelectionRects([]);
 		} else {
-			const overlay_1 = pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
-			if (overlay_1 && pagesContainerRef.current) {
-				const overlayRect_1 = overlay_1.getBoundingClientRect();
+			syncImeCaretAnchor({
+				hiddenHost: hiddenPMRef.current?.getHostElement(),
+				editorView: hiddenPMRef.current?.getView(),
+				visibleCaret: null
+			});
+			const overlay_3 = pagesContainerRef.current?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+			if (overlay_3 && pagesContainerRef.current) {
+				const overlayRect_3 = overlay_3.getBoundingClientRect();
 				const domRects = [];
 				const spans_0 = findBodyPmSpans(pagesContainerRef.current);
 				for (const spanEl_0 of spans_0) {
@@ -3640,8 +3764,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 						if (spanEl_0.classList.contains("layout-run-tab")) {
 							const spanRect_3 = spanEl_0.getBoundingClientRect();
 							domRects.push({
-								x: (spanRect_3.left - overlayRect_1.left) / zoom,
-								y: (spanRect_3.top - overlayRect_1.top) / zoom,
+								x: (spanRect_3.left - overlayRect_3.left) / zoom,
+								y: (spanRect_3.top - overlayRect_3.top) / zoom,
 								width: spanRect_3.width / zoom,
 								height: spanRect_3.height / zoom,
 								pageIndex: getPageIndex(spanEl_0)
@@ -3662,8 +3786,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							const clientRects = range_0.getClientRects();
 							const pageIndex = getPageIndex(spanEl_0);
 							for (const rect_0 of Array.from(clientRects)) domRects.push({
-								x: (rect_0.left - overlayRect_1.left) / zoom,
-								y: (rect_0.top - overlayRect_1.top) / zoom,
+								x: (rect_0.left - overlayRect_3.left) / zoom,
+								y: (rect_0.top - overlayRect_3.top) / zoom,
 								width: rect_0.width / zoom,
 								height: rect_0.height / zoom,
 								pageIndex
@@ -3676,8 +3800,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					const firstPage_0 = pagesContainerRef.current.querySelector(".layout-page");
 					if (firstPage_0) {
 						const pageRect_0 = firstPage_0.getBoundingClientRect();
-						const pageOffsetX = (pageRect_0.left - overlayRect_1.left) / zoom;
-						const pageOffsetY = (pageRect_0.top - overlayRect_1.top) / zoom;
+						const pageOffsetX = (pageRect_0.left - overlayRect_3.left) / zoom;
+						const pageOffsetY = (pageRect_0.top - overlayRect_3.top) / zoom;
 						setSelectionRects([]);
 						loadSelectionGeometry().then(({ selectionToRects }) => {
 							if (!isCurrentRequest()) return;
@@ -3719,16 +3843,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			setAnonymizationRectGroups([]);
 			return;
 		}
-		const overlay_2 = pagesContainer.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+		const overlay_4 = pagesContainer.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
 		const firstPage_1 = pagesContainer.querySelector(".layout-page");
-		if (!overlay_2 || !firstPage_1) {
+		if (!overlay_4 || !firstPage_1) {
 			setAnonymizationRectGroups([]);
 			return;
 		}
-		const overlayRect_2 = overlay_2.getBoundingClientRect();
+		const overlayRect_4 = overlay_4.getBoundingClientRect();
 		const pageRect_1 = firstPage_1.getBoundingClientRect();
-		const pageOffsetX_0 = (pageRect_1.left - overlayRect_2.left) / zoom;
-		const pageOffsetY_0 = (pageRect_1.top - overlayRect_2.top) / zoom;
+		const pageOffsetX_0 = (pageRect_1.left - overlayRect_4.left) / zoom;
+		const pageOffsetY_0 = (pageRect_1.top - overlayRect_4.top) / zoom;
 		const pmSpans = findBodyPmSpans(pagesContainer);
 		const layoutFallbackMatches = [];
 		const rectsForMatch = (match, from_0, to_0) => {
@@ -3739,8 +3863,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				if (spanEl_1.classList.contains("layout-run-tab")) {
 					const spanRect_4 = spanEl_1.getBoundingClientRect();
 					domRects_0.push({
-						x: (spanRect_4.left - overlayRect_2.left) / zoom,
-						y: (spanRect_4.top - overlayRect_2.top) / zoom,
+						x: (spanRect_4.left - overlayRect_4.left) / zoom,
+						y: (spanRect_4.top - overlayRect_4.top) / zoom,
 						width: spanRect_4.width / zoom,
 						height: spanRect_4.height / zoom,
 						pageIndex: getPageIndex(spanEl_1)
@@ -3760,8 +3884,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				range_1.setEnd(textNode_1, endChar_0);
 				const pageIndex_0 = getPageIndex(spanEl_1);
 				for (const rect_2 of Array.from(range_1.getClientRects())) domRects_0.push({
-					x: (rect_2.left - overlayRect_2.left) / zoom,
-					y: (rect_2.top - overlayRect_2.top) / zoom,
+					x: (rect_2.left - overlayRect_4.left) / zoom,
+					y: (rect_2.top - overlayRect_4.top) / zoom,
 					width: rect_2.width / zoom,
 					height: rect_2.height / zoom,
 					pageIndex: pageIndex_0
@@ -3830,16 +3954,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				return;
 			}
 			const pagesContainer_0 = pagesContainerRef.current;
-			const overlay_3 = pagesContainer_0?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
+			const overlay_5 = pagesContainer_0?.parentElement?.querySelector("[data-testid=\"selection-overlay\"]");
 			const firstPage_2 = pagesContainer_0?.querySelector(".layout-page");
-			if (!overlay_3 || !firstPage_2) {
+			if (!overlay_5 || !firstPage_2) {
 				setAutocompleteCaret(null);
 				return;
 			}
-			const overlayRect_3 = overlay_3.getBoundingClientRect();
+			const overlayRect_5 = overlay_5.getBoundingClientRect();
 			const pageRect_2 = firstPage_2.getBoundingClientRect();
-			const pageOffsetX_1 = (pageRect_2.left - overlayRect_3.left) / zoom;
-			const pageOffsetY_1 = (pageRect_2.top - overlayRect_3.top) / zoom;
+			const pageOffsetX_1 = (pageRect_2.left - overlayRect_5.left) / zoom;
+			const pageOffsetY_1 = (pageRect_2.top - overlayRect_5.top) / zoom;
 			if (!isCurrentRequest_1()) return;
 			const caretPage = layout.pages.at(caret_0.pageIndex);
 			const maxWidth = caretPage ? Math.max(AUTOCOMPLETE_GHOST_MIN_WIDTH, caretPage.size.w - caretPage.margins.right - caret_0.x) : void 0;
@@ -4076,7 +4200,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	*/
 	const [hfCaretSelection, setHfCaretSelection] = useState(null);
 	const activeHfPageNumberRef = useRef(null);
-	const handleHfPmTransaction = useCallback((rId, kind, view_1, docChanged, selectionChanged) => {
+	const handleHfPmTransaction = useCallback((rId, kind, view_2, docChanged, selectionChanged) => {
 		if (docChanged) {
 			let bodyState = hiddenPMRef.current?.getState();
 			if (!bodyState && precomputedInitialStateRef.current) bodyState = precomputedInitialStateRef.current;
@@ -4087,7 +4211,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (bodyState) scheduleLayout(bodyState, null);
 		}
 		if (docChanged || selectionChanged) {
-			const { from: from_1, to: to_1 } = view_1.state.selection;
+			const { from: from_1, to: to_1 } = view_2.state.selection;
 			const pageNumber = activeHfPageNumberRef.current;
 			setHfCaretSelection({
 				rId,
@@ -4103,13 +4227,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			});
 		}
 	}, [scheduleLayout, ensureHiddenEditorView]);
-	const handleNoteStoryTransaction = useCallback((view_2, docChanged_0, selectionChanged_0) => {
+	const handleNoteStoryTransaction = useCallback((view_3, docChanged_0, selectionChanged_0) => {
 		if (docChanged_0) {
 			const bodyState_0 = hiddenPMRef.current?.getState();
 			if (bodyState_0) scheduleLayout(bodyState_0, null);
 		}
 		if (docChanged_0 || selectionChanged_0) {
-			const { from: from_2, to: to_2 } = view_2.state.selection;
+			const { from: from_2, to: to_2 } = view_3.state.selection;
 			onSelectionChangeRef.current?.(from_2, to_2);
 			folioEmitterRef.current.emit("selectionChange", {
 				from: from_2,
@@ -4131,18 +4255,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	* Handle selection change from PM.
 	*/
 	const handleSelectionChange = useCallback((state_5) => {
-		const { selection: selection_1 } = state_5;
-		if (selection_1 instanceof NodeSelection && selection_1.node.type.name === "image") {
+		const { selection: selection_2 } = state_5;
+		if (selection_2 instanceof NodeSelection && selection_2.node.type.name === "image") {
 			setSelectionRects([]);
 			setCaretPosition(null);
 		} else if (syncCoordinator.isSafeToRender()) updateSelectionOverlay(state_5);
 		requestAnimationFrame(() => {
-			const view_3 = hiddenPMRef.current?.getView();
-			if (!view_3) {
+			const view_4 = hiddenPMRef.current?.getView();
+			if (!view_4) {
 				setSelectedImageInfo(null);
 				return;
 			}
-			const { selection: sel_0 } = view_3.state;
+			const { selection: sel_0 } = view_4.state;
 			if (sel_0 instanceof NodeSelection && sel_0.node.type.name === "image") {
 				const pmPos_2 = sel_0.from;
 				const imgEl = pagesContainerRef.current ? findBodyPmAnchor(pagesContainerRef.current, pmPos_2) : null;
@@ -4218,9 +4342,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		return null;
 	}, []);
 	const findCellPosFromPmPos = useCallback((pmPos_4) => {
-		const view_4 = hiddenPMRef.current?.getView();
-		if (!view_4) return null;
-		return findCellPosInDoc(view_4.state.doc, pmPos_4);
+		const view_5 = hiddenPMRef.current?.getView();
+		if (!view_5) return null;
+		return findCellPosInDoc(view_5.state.doc, pmPos_4);
 	}, [findCellPosInDoc]);
 	/**
 	* Find the closest image element from a click target.
@@ -4282,8 +4406,14 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		}
 		if (!hiddenPMRef.current?.getView()) ensureHiddenEditorView();
 		hiddenPMRef.current?.focus();
+		const view_6 = hiddenPMRef.current?.getView();
+		if (view_6) updateSelectionOverlay(view_6.state);
 		setIsFocused(true);
-	}, [ensureHiddenEditorView, readOnly]);
+	}, [
+		ensureHiddenEditorView,
+		readOnly,
+		updateSelectionOverlay
+	]);
 	const startPointerTextSelection = useCallback((clientX_0, clientY_0) => {
 		const pmPos_6 = getPositionFromMouse(clientX_0, clientY_0);
 		if (pmPos_6 !== null) {
@@ -4308,10 +4438,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			cellDragAnchorPosRef.current = null;
 			cellDragContentEndRef.current = null;
 			isCellDraggingRef.current = false;
-			const view_5 = hiddenPMRef.current?.getView();
+			const view_7 = hiddenPMRef.current?.getView();
 			let endPos;
-			if (view_5) {
-				endPos = Math.max(0, view_5.state.doc.content.size - 1);
+			if (view_7) {
+				endPos = Math.max(0, view_7.state.doc.content.size - 1);
 				hiddenPMRef.current?.setSelection(endPos);
 			} else {
 				endPos = Math.max(0, (precomputedInitialStateRef.current?.doc.content.size ?? 1) - 1);
@@ -4331,11 +4461,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		queueHiddenEditorSelection
 	]);
 	const copySelectionText = useCallback(() => {
-		const view_6 = hiddenPMRef.current?.getView();
-		if (!view_6) return false;
-		const { from: from_3, to: to_3 } = view_6.state.selection;
+		const view_8 = hiddenPMRef.current?.getView();
+		if (!view_8) return false;
+		const { from: from_3, to: to_3 } = view_8.state.selection;
 		if (from_3 === to_3) return false;
-		const text_1 = view_6.state.doc.textBetween(from_3, to_3, "\n");
+		const text_1 = view_8.state.doc.textBetween(from_3, to_3, "\n");
 		if (!text_1) return false;
 		if (navigator.clipboard === void 0) return false;
 		navigator.clipboard.writeText(text_1).catch(() => void 0);
@@ -4432,9 +4562,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const colIndex = Number.parseInt(target_1.dataset["columnIndex"] ?? "0", 10);
 			resizeColumnIndexRef.current = colIndex;
 			resizeTablePmStartRef.current = Number.parseInt(target_1.dataset["tablePmStart"] ?? "0", 10);
-			const view_7 = resizeViewForRead;
-			if (view_7) {
-				const $pos_1 = view_7.state.doc.resolve(resizeTablePmStartRef.current + 1);
+			const view_9 = resizeViewForRead;
+			if (view_9) {
+				const $pos_1 = view_9.state.doc.resolve(resizeTablePmStartRef.current + 1);
 				for (let d_0 = $pos_1.depth; d_0 >= 0; d_0--) {
 					const node_1 = $pos_1.node(d_0);
 					if (node_1.type.name === "table") {
@@ -4464,9 +4594,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const rowIndex = Number.parseInt(target_1.dataset["rowIndex"] ?? "0", 10);
 			resizeRowIndexRef.current = rowIndex;
 			resizeRowTablePmStartRef.current = Number.parseInt(target_1.dataset["tablePmStart"] ?? "0", 10);
-			const view_8 = resizeViewForRead;
-			if (view_8) {
-				const $pos_2 = view_8.state.doc.resolve(resizeRowTablePmStartRef.current + 1);
+			const view_10 = resizeViewForRead;
+			if (view_10) {
+				const $pos_2 = view_10.state.doc.resolve(resizeRowTablePmStartRef.current + 1);
 				for (let d_1 = $pos_2.depth; d_1 >= 0; d_1--) {
 					const node_2 = $pos_2.node(d_1);
 					if (node_2.type.name === "table") {
@@ -4499,9 +4629,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			const colIndex_0 = Number.parseInt(target_1.dataset["columnIndex"] ?? "0", 10);
 			resizeRightEdgeColIndexRef.current = colIndex_0;
 			resizeRightEdgePmStartRef.current = Number.parseInt(target_1.dataset["tablePmStart"] ?? "0", 10);
-			const view_9 = resizeViewForRead;
-			if (view_9) {
-				const $pos_3 = view_9.state.doc.resolve(resizeRightEdgePmStartRef.current + 1);
+			const view_11 = resizeViewForRead;
+			if (view_11) {
+				const $pos_3 = view_11.state.doc.resolve(resizeRightEdgePmStartRef.current + 1);
 				for (let d_2 = $pos_3.depth; d_2 >= 0; d_2--) {
 					const node_3 = $pos_3.node(d_2);
 					if (node_3.type.name === "table") {
@@ -4700,18 +4830,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				resizeHandleRef.current.classList.remove("dragging");
 				resizeHandleRef.current = null;
 			}
-			const view_10 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
+			const view_12 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
-			if (view_10) {
+			if (view_12) {
 				const pmStart_4 = resizeTablePmStartRef.current;
 				const colIdx = resizeColumnIndexRef.current;
 				const { left: newLeft, right: newRight } = resizeOrigWidthsRef.current;
-				const $pos_5 = view_10.state.doc.resolve(pmStart_4 + 1);
+				const $pos_5 = view_12.state.doc.resolve(pmStart_4 + 1);
 				for (let d_3 = $pos_5.depth; d_3 >= 0; d_3--) {
 					const node_4 = $pos_5.node(d_3);
 					if (node_4.type.name === "table") {
 						const tablePos = $pos_5.before(d_3);
-						const tr = view_10.state.tr;
+						const tr = view_12.state.tr;
 						const tableAttrs = expectTableAttrs(node_4);
 						if (!tableAttrs.columnWidths) break;
 						const widths_1 = [...tableAttrs.columnWidths];
@@ -4737,7 +4867,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							});
 							rowOffset += row.nodeSize;
 						});
-						view_10.dispatch(tr);
+						view_12.dispatch(tr);
 						break;
 					}
 				}
@@ -4750,18 +4880,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				resizeRowHandleRef.current.classList.remove("dragging");
 				resizeRowHandleRef.current = null;
 			}
-			const view_11 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
+			const view_13 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
-			if (view_11) {
+			if (view_13) {
 				const pmStart_5 = resizeRowTablePmStartRef.current;
 				const rowIdx = resizeRowIndexRef.current;
 				const newHeight_0 = resizeRowOrigHeightRef.current;
-				const $pos_6 = view_11.state.doc.resolve(pmStart_5 + 1);
+				const $pos_6 = view_13.state.doc.resolve(pmStart_5 + 1);
 				for (let d_4 = $pos_6.depth; d_4 >= 0; d_4--) {
 					const node_5 = $pos_6.node(d_4);
 					if (node_5.type.name === "table") {
 						const tablePos_0 = $pos_6.before(d_4);
-						const tr_0 = view_11.state.tr;
+						const tr_0 = view_13.state.tr;
 						let rowOffset_0 = tablePos_0 + 1;
 						let idx = 0;
 						node_5.forEach((row_0) => {
@@ -4772,7 +4902,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							rowOffset_0 += row_0.nodeSize;
 							idx++;
 						});
-						view_11.dispatch(tr_0);
+						view_13.dispatch(tr_0);
 						break;
 					}
 				}
@@ -4785,18 +4915,18 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				resizeRightEdgeHandleRef.current.classList.remove("dragging");
 				resizeRightEdgeHandleRef.current = null;
 			}
-			const view_12 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
+			const view_14 = (resizingHfSurfaceRef.current ? hfPMsRef.current?.getView(resizingHfSurfaceRef.current.rId) : hiddenPMRef.current?.getView()) ?? null;
 			resizingHfSurfaceRef.current = null;
-			if (view_12) {
+			if (view_14) {
 				const pmStart_6 = resizeRightEdgePmStartRef.current;
 				const colIdx_0 = resizeRightEdgeColIndexRef.current;
 				const newWidth_1 = resizeRightEdgeOrigWidthRef.current;
-				const $pos_7 = view_12.state.doc.resolve(pmStart_6 + 1);
+				const $pos_7 = view_14.state.doc.resolve(pmStart_6 + 1);
 				for (let d_5 = $pos_7.depth; d_5 >= 0; d_5--) {
 					const node_6 = $pos_7.node(d_5);
 					if (node_6.type.name === "table") {
 						const tablePos_1 = $pos_7.before(d_5);
-						const tr_1 = view_12.state.tr;
+						const tr_1 = view_14.state.tr;
 						const tableAttrs_0 = expectTableAttrs(node_6);
 						if (!tableAttrs_0.columnWidths) break;
 						const widths_2 = [...tableAttrs_0.columnWidths];
@@ -4818,7 +4948,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 							});
 							rowOffset_1 += row_1.nodeSize;
 						});
-						view_12.dispatch(tr_1);
+						view_14.dispatch(tr_1);
 						break;
 					}
 				}
@@ -4960,13 +5090,13 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		e_2.preventDefault();
 		e_2.stopPropagation();
 		if (!tableInsertButton || !hiddenPMRef.current) return;
-		const view_13 = hiddenPMRef.current.getView();
-		if (!view_13) return;
+		const view_15 = hiddenPMRef.current.getView();
+		if (!view_15) return;
 		const { type, cellPmPos } = tableInsertButton;
-		const tr_2 = view_13.state.tr.setSelection(TextSelection$1.create(view_13.state.doc, cellPmPos + 1));
-		view_13.dispatch(tr_2);
-		if (type === "row") addRowBelow(view_13.state, view_13.dispatch);
-		else addColumnRight(view_13.state, view_13.dispatch);
+		const tr_2 = view_15.state.tr.setSelection(TextSelection$1.create(view_15.state.doc, cellPmPos + 1));
+		view_15.dispatch(tr_2);
+		if (type === "row") addRowBelow(view_15.state, view_15.dispatch);
+		else addColumnRight(view_15.state, view_15.dispatch);
 		setTableInsertButton(null);
 		hiddenPMRef.current.focus();
 	}, [tableInsertButton]);
@@ -4993,10 +5123,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			if (href.startsWith("#")) {
 				const bookmarkName = href.slice(1);
 				if (bookmarkName && hiddenPMRef.current) {
-					const view_14 = hiddenPMRef.current.getView();
-					if (view_14) {
+					const view_16 = hiddenPMRef.current.getView();
+					if (view_16) {
 						const targetPos = { value: null };
-						view_14.state.doc.descendants((node_7, pos_2) => {
+						view_16.state.doc.descendants((node_7, pos_2) => {
 							if (targetPos.value !== null) return false;
 							if (node_7.type.name === "paragraph") {
 								if (node_7.attrs["bookmarks"]?.some((b) => b.name === bookmarkName)) {
@@ -5085,9 +5215,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (e_3.detail === 2 && hiddenPMRef.current) {
 			const pmPos_12 = getPositionFromMouse(e_3.clientX, e_3.clientY);
 			if (pmPos_12 !== null) {
-				const view_15 = hiddenPMRef.current.getView();
-				if (view_15) {
-					const { doc: doc_0 } = view_15.state;
+				const view_17 = hiddenPMRef.current.getView();
+				if (view_17) {
+					const { doc: doc_0 } = view_17.state;
 					const $pos_9 = doc_0.resolve(pmPos_12);
 					const parent_0 = $pos_9.parent;
 					if (parent_0.isTextblock) {
@@ -5113,9 +5243,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		if (e_3.detail === 3 && hiddenPMRef.current) {
 			const pmPos_13 = getPositionFromMouse(e_3.clientX, e_3.clientY);
 			if (pmPos_13 !== null) {
-				const view_16 = hiddenPMRef.current.getView();
-				if (view_16) {
-					const { doc: doc_1 } = view_16.state;
+				const view_18 = hiddenPMRef.current.getView();
+				if (view_18) {
+					const { doc: doc_1 } = view_18.state;
 					const $pos_10 = doc_1.resolve(pmPos_13);
 					const paragraphStart = $pos_10.start($pos_10.depth);
 					const paragraphEnd = $pos_10.end($pos_10.depth);
@@ -5160,9 +5290,9 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				}
 			}
 		}
-		const view_17 = hiddenPMRef.current?.getView();
-		if (!view_17) return;
-		const { from: from_5, to: to_5 } = view_17.state.selection;
+		const view_19 = hiddenPMRef.current?.getView();
+		if (!view_19) return;
+		const { from: from_5, to: to_5 } = view_19.state.selection;
 		const pmPos_15 = getPositionFromMouse(e_4.clientX, e_4.clientY);
 		if (pmPos_15 !== null && (from_5 === to_5 || pmPos_15 < from_5 || pmPos_15 > to_5)) {
 			hiddenPMRef.current?.setSelection(pmPos_15);
@@ -5203,16 +5333,16 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	* Handle image resize from the overlay.
 	*/
 	const handleImageResize = useCallback((pmPos_16, newWidth_2, newHeight_1) => {
-		const view_18 = hiddenPMRef.current?.getView();
-		if (!view_18) return;
+		const view_20 = hiddenPMRef.current?.getView();
+		if (!view_20) return;
 		try {
-			const node_10 = view_18.state.doc.nodeAt(pmPos_16);
+			const node_10 = view_20.state.doc.nodeAt(pmPos_16);
 			if (!node_10 || node_10.type.name !== "image") return;
-			const tr_3 = view_18.state.tr.setNodeMarkup(pmPos_16, void 0, mergeImageAttrs(node_10, {
+			const tr_3 = view_20.state.tr.setNodeMarkup(pmPos_16, void 0, mergeImageAttrs(node_10, {
 				width: newWidth_2,
 				height: newHeight_1
 			}));
-			view_18.dispatch(tr_3);
+			view_20.dispatch(tr_3);
 			hiddenPMRef.current?.setNodeSelection(pmPos_16);
 		} catch {}
 	}, []);
@@ -5233,10 +5363,10 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	* to the drop position determined by mouse coordinates.
 	*/
 	const handleImageDragMove = useCallback((pmPos_17, clientX_1, clientY_1) => {
-		const view_19 = hiddenPMRef.current?.getView();
-		if (!view_19) return;
+		const view_21 = hiddenPMRef.current?.getView();
+		if (!view_21) return;
 		try {
-			const node_11 = view_19.state.doc.nodeAt(pmPos_17);
+			const node_11 = view_21.state.doc.nodeAt(pmPos_17);
 			if (!node_11 || node_11.type.name !== "image") return;
 			const attrs = expectImageAttrs(node_11);
 			if (attrs.displayMode === "float" || attrs.wrapType === "square" || attrs.wrapType === "tight" || attrs.wrapType === "through") {
@@ -5271,14 +5401,14 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 						relativeTo: "margin"
 					}
 				};
-				const tr_4 = view_19.state.tr.setNodeMarkup(pmPos_17, void 0, mergeImageAttrs(node_11, { position: newPosition }));
-				view_19.dispatch(tr_4);
+				const tr_4 = view_21.state.tr.setNodeMarkup(pmPos_17, void 0, mergeImageAttrs(node_11, { position: newPosition }));
+				view_21.dispatch(tr_4);
 				hiddenPMRef.current?.setNodeSelection(pmPos_17);
 			} else {
 				const dropPos = getPositionFromMouse(clientX_1, clientY_1);
 				if (dropPos === null) return;
 				if (dropPos === pmPos_17 || dropPos === pmPos_17 + 1) return;
-				let tr_5 = view_19.state.tr;
+				let tr_5 = view_21.state.tr;
 				tr_5 = tr_5.delete(pmPos_17, pmPos_17 + node_11.nodeSize);
 				let selectionPos;
 				if (dropPos <= pmPos_17) {
@@ -5290,7 +5420,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 					selectionPos = Math.min(adjusted, tr_5.doc.content.size - 1);
 				}
 				hiddenPMRef.current?.setNodeSelection(selectionPos);
-				view_19.dispatch(tr_5);
+				view_21.dispatch(tr_5);
 			}
 		} catch {}
 	}, [getPositionFromMouse, zoom]);
@@ -5318,11 +5448,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			return;
 		}
 		if (e_7.target instanceof HTMLElement && e_7.target.closest("[data-hf-r-id], [data-note-kind][data-note-id]")) return;
-		let view_20 = hiddenPMRef.current?.getView();
-		if (!view_20) {
+		let view_22 = hiddenPMRef.current?.getView();
+		if (!view_22) {
 			ensureHiddenEditorView({ sync: true });
-			view_20 = hiddenPMRef.current?.getView();
-			if (view_20) {
+			view_22 = hiddenPMRef.current?.getView();
+			if (view_22) {
 				if (isPlainTextInputEvent(e_7)) {
 					e_7.preventDefault();
 					queueHiddenEditorTextInput(e_7.key);
@@ -5345,11 +5475,11 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			}
 			return;
 		}
-		if (pendingHiddenEditorSelectionRef.current || queuedInputBeforeHiddenEditorRef.current.length > 0) applyPendingHiddenEditorInput(view_20);
+		if (pendingHiddenEditorSelectionRef.current || queuedInputBeforeHiddenEditorRef.current.length > 0) applyPendingHiddenEditorInput(view_22);
 		if (!hiddenPMRef.current?.isFocused()) focusHiddenEditor();
 		if (e_7.key === " " && !e_7.ctrlKey && !e_7.metaKey && !e_7.nativeEvent.isComposing) {
 			e_7.preventDefault();
-			dispatchEditorTextInput(view_20, " ");
+			dispatchEditorTextInput(view_22, " ");
 			return;
 		}
 		if (["PageUp", "PageDown"].includes(e_7.key) && !e_7.metaKey && !e_7.ctrlKey) {}
@@ -5443,19 +5573,19 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 	/**
 	* Run initial layout when document or view changes.
 	*/
-	const handleEditorViewReady = useCallback((view_21) => {
-		onEditorViewReadyRef.current?.(view_21);
-		anonymizationMatchesRef.current = anonymizationDecorationsKey.getState(view_21.state)?.matches ?? [];
-		const initialSuggestion = autocompleteSuggestionKey.getState(view_21.state)?.suggestion;
+	const handleEditorViewReady = useCallback((view_23) => {
+		onEditorViewReadyRef.current?.(view_23);
+		anonymizationMatchesRef.current = anonymizationDecorationsKey.getState(view_23.state)?.matches ?? [];
+		const initialSuggestion = autocompleteSuggestionKey.getState(view_23.state)?.suggestion;
 		if (initialSuggestion !== void 0) autocompleteSuggestionRef.current = initialSuggestion;
 		updateAutocompleteOverlay();
-		directivesRef.current = templateDirectivesKey.getState(view_21.state)?.ranges ?? [];
-		const previewState = templatePreviewValuesKey.getState(view_21.state);
+		directivesRef.current = templateDirectivesKey.getState(view_23.state)?.ranges ?? [];
+		const previewState = templatePreviewValuesKey.getState(view_23.state);
 		templatePreviewRef.current = {
 			entries: previewState?.entries ?? EMPTY_TEMPLATE_PREVIEW_ENTRIES,
 			mode: previewState?.preview?.mode ?? "plain"
 		};
-		const aiState = aiSuggestionDecorationsKey.getState(view_21.state);
+		const aiState = aiSuggestionDecorationsKey.getState(view_23.state);
 		aiSuggestionsRef.current = {
 			suggestions: aiState?.suggestions ?? EMPTY_AI_SUGGESTIONS,
 			focusedId: aiState?.focusedId ?? null
@@ -5463,16 +5593,17 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const focusReadyView = () => {
 			if (readOnly || !shouldFocusHiddenEditorOnReadyRef.current) return;
 			requestAnimationFrame(() => {
-				if (hiddenPMRef.current?.getView() !== view_21) return;
-				applyPendingHiddenEditorInput(view_21);
-				view_21.focus();
+				if (hiddenPMRef.current?.getView() !== view_23) return;
+				applyPendingHiddenEditorInput(view_23);
+				view_23.focus();
+				refreshBodyImeCaretAnchor();
 				setIsFocused(true);
 			});
 		};
-		if (layoutSessionRef.current.lastPmDoc?.eq(view_21.state.doc)) {
+		if (layoutSessionRef.current.lastPmDoc?.eq(view_23.state.doc)) {
 			const lastPreview = layoutSessionRef.current.lastTemplatePreview;
-			if (templatePreviewRef.current.mode !== lastPreview.mode || templatePreviewDirtyRange(lastPreview.entries, templatePreviewRef.current.entries) !== null) runLayoutPipeline$1(view_21.state, { reason: "manual" });
-			updateSelectionOverlay(view_21.state);
+			if (templatePreviewRef.current.mode !== lastPreview.mode || templatePreviewDirtyRange(lastPreview.entries, templatePreviewRef.current.entries) !== null) runLayoutPipeline$1(view_23.state, { reason: "manual" });
+			updateSelectionOverlay(view_23.state);
 			updateAnonymizationOverlay();
 			updateDirectivesOverlay();
 			updateAISuggestionsOverlay();
@@ -5491,7 +5622,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		const runAfterFontWait_0 = (fontsLoaded_0) => {
 			pendingInitialFontReadyLayoutRef.current = false;
 			const currentView_0 = hiddenPMRef.current?.getView();
-			if (currentView_0 !== view_21) return;
+			if (currentView_0 !== view_23) return;
 			recordLayoutPhase("initial", "initial-fonts", performance.now() - fontWaitStartedAt_0);
 			resetCanvasContext();
 			clearAllCaches();
@@ -5501,7 +5632,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 				suppressFontReadyUntilRef.current = performance.now() + INITIAL_FONT_READY_SUPPRESSION_MS;
 			}
 		};
-		waitForInitialLayoutFonts(document, view_21.state.doc).then(runAfterFontWait_0, () => runAfterFontWait_0(false));
+		waitForInitialLayoutFonts(document, view_23.state.doc).then(runAfterFontWait_0, () => runAfterFontWait_0(false));
 		focusReadyView();
 	}, [
 		applyPendingHiddenEditorInput,
@@ -5512,7 +5643,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		updateAISuggestionsOverlay,
 		document,
 		updateAutocompleteOverlay,
-		readOnly
+		readOnly,
+		refreshBodyImeCaretAnchor
 	]);
 	const handleEditorViewDestroy = useCallback(() => {
 		onEditorViewReadyRef.current?.(null);
@@ -5562,12 +5694,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		};
 		const handleFontsLoaded = () => {
 			if (pendingInitialFontReadyLayoutRef.current || performance.now() < suppressFontReadyUntilRef.current || layoutSessionRef.current.usedLoadedFonts) return;
-			const view_22 = hiddenPMRef.current?.getView();
-			if (view_22) {
+			const view_24 = hiddenPMRef.current?.getView();
+			if (view_24) {
 				resetCanvasContext();
 				clearAllCaches();
-				runLayoutPipelineRef.current(view_22.state, { reason: "font-ready" });
-				updateSelectionOverlayRef.current(view_22.state);
+				runLayoutPipelineRef.current(view_24.state, { reason: "font-ready" });
+				updateSelectionOverlayRef.current(view_24.state);
 			}
 		};
 		fontSet.addEventListener("loading", handleFontsLoading);
@@ -5592,12 +5724,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			registered = faces;
 			if (faces.length === 0 && familyMap.size === 0) return;
 			setEmbeddedFontFamilyMap(familyMap.size > 0 ? familyMap : null);
-			const view_23 = hiddenPMRef.current?.getView();
-			if (!view_23) return;
+			const view_25 = hiddenPMRef.current?.getView();
+			if (!view_25) return;
 			resetCanvasContext();
 			clearAllCaches();
-			runLayoutPipelineRef.current(view_23.state, { reason: "font-ready" });
-			updateSelectionOverlayRef.current(view_23.state);
+			runLayoutPipelineRef.current(view_25.state, { reason: "font-ready" });
+			updateSelectionOverlayRef.current(view_25.state);
 		});
 		return () => {
 			cancelled_1 = true;
@@ -5610,12 +5742,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		let cancelled_2 = false;
 		let registered_0 = [];
 		const remeasureForFontChange = () => {
-			const view_24 = hiddenPMRef.current?.getView();
-			if (!view_24) return;
+			const view_26 = hiddenPMRef.current?.getView();
+			if (!view_26) return;
 			resetCanvasContext();
 			clearAllCaches();
-			runLayoutPipelineRef.current(view_24.state, { reason: "font-ready" });
-			updateSelectionOverlayRef.current(view_24.state);
+			runLayoutPipelineRef.current(view_26.state, { reason: "font-ready" });
+			updateSelectionOverlayRef.current(view_26.state);
 		};
 		loadHostFontFaces(hostFonts).then((faces_0) => {
 			if (cancelled_2) {
@@ -5641,12 +5773,12 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			lastLayoutInputSignatureRef.current = layoutInputSignature;
 			return;
 		}
-		const view_25 = hiddenPMRef.current?.getView();
-		if (view_25) {
+		const view_27 = hiddenPMRef.current?.getView();
+		if (view_27) {
 			const layoutInputsChanged = lastLayoutInputSignatureRef.current !== layoutInputSignature;
 			lastLayoutInputSignatureRef.current = layoutInputSignature;
-			if (!layoutInputsChanged && view_25.state.doc === layoutSessionRef.current.lastPmDoc) return;
-			runLayoutPipelineRef.current(view_25.state, { reason: "layout-input" });
+			if (!layoutInputsChanged && view_27.state.doc === layoutSessionRef.current.lastPmDoc) return;
+			runLayoutPipelineRef.current(view_27.state, { reason: "layout-input" });
 		}
 	}, [document, layoutInputSignature]);
 	useEffect(() => {
@@ -5659,6 +5791,28 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		observer.observe(container);
 		return () => observer.disconnect();
 	}, [updateSelectionOverlay]);
+	useEffect(() => {
+		const hiddenHost = hiddenPMRef.current?.getHostElement();
+		if (!hiddenHost) return;
+		let animationFrame = null;
+		const scheduleRefresh = () => {
+			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+			animationFrame = requestAnimationFrame(() => {
+				animationFrame = null;
+				refreshBodyImeCaretAnchor();
+			});
+		};
+		const refreshOnFocus = () => refreshBodyImeCaretAnchor();
+		hiddenHost.addEventListener("focusin", refreshOnFocus);
+		hiddenHost.addEventListener("compositionend", scheduleRefresh);
+		window.addEventListener("scroll", scheduleRefresh, true);
+		return () => {
+			if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+			hiddenHost.removeEventListener("focusin", refreshOnFocus);
+			hiddenHost.removeEventListener("compositionend", scheduleRefresh);
+			window.removeEventListener("scroll", scheduleRefresh, true);
+		};
+	}, [refreshBodyImeCaretAnchor]);
 	useImperativeHandle(ref, () => ({
 		getEditor() {
 			return folioEditor;
@@ -5686,12 +5840,14 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			ensureHiddenEditorView(options_4);
 		},
 		focus() {
-			getActiveEditorStory().view?.focus();
+			const target_4 = getActiveEditorStory();
+			target_4.view?.focus();
+			if (target_4.type === "body") refreshBodyImeCaretAnchor();
 			setIsFocused(true);
 		},
 		blur() {
-			const view_26 = getActiveEditorStory().view;
-			if (view_26?.hasFocus() && view_26.dom instanceof HTMLElement) view_26.dom.blur();
+			const view_28 = getActiveEditorStory().view;
+			if (view_28?.hasFocus() && view_28.dom instanceof HTMLElement) view_28.dom.blur();
 			setIsFocused(false);
 		},
 		isFocused() {
@@ -5701,22 +5857,22 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 			folioEditor.dispatch(tr_6);
 		},
 		undo() {
-			const target_4 = getActiveEditorStory();
-			if (target_4.type === "none") return false;
-			return undo(target_4.view.state, target_4.view.dispatch);
-		},
-		redo() {
 			const target_5 = getActiveEditorStory();
 			if (target_5.type === "none") return false;
-			return redo(target_5.view.state, target_5.view.dispatch);
+			return undo(target_5.view.state, target_5.view.dispatch);
 		},
-		canUndo() {
+		redo() {
 			const target_6 = getActiveEditorStory();
-			return target_6.type === "none" ? false : undo(target_6.view.state);
+			if (target_6.type === "none") return false;
+			return redo(target_6.view.state, target_6.view.dispatch);
 		},
-		canRedo() {
+		canUndo() {
 			const target_7 = getActiveEditorStory();
-			return target_7.type === "none" ? false : redo(target_7.view.state);
+			return target_7.type === "none" ? false : undo(target_7.view.state);
+		},
+		canRedo() {
+			const target_8 = getActiveEditorStory();
+			return target_8.type === "none" ? false : redo(target_8.view.state);
 		},
 		setSelection(anchor_3, head_1) {
 			folioEditor.setSelection(anchor_3, head_1);
@@ -5770,6 +5926,7 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 		ensureHiddenEditorView,
 		folioEditor,
 		getActiveEditorStory,
+		refreshBodyImeCaretAnchor,
 		scrollToPageImpl,
 		scrollToParaIdImpl,
 		scrollToPositionImpl,
@@ -5920,6 +6077,8 @@ const PagedEditor = forwardRef(function PagedEditor(props, ref) {
 						hfCaretSelection && /* @__PURE__ */ jsx(HfCaretOverlay, {
 							selection: hfCaretSelection,
 							pagesContainer: pagesContainerRef.current,
+							hiddenHost: hfPMsRef.current?.getHostElement() ?? null,
+							editorView: hfPMsRef.current?.getView(hfCaretSelection.rId) ?? null,
 							zoom
 						}),
 						layout && remoteSelections.map((remoteSelection) => /* @__PURE__ */ jsx(RemoteSelectionOverlay, {
@@ -10714,8 +10873,12 @@ function useKeyboardShortcuts({ pagedEditorRef, findReplace, tableSelection, onD
 //#endregion
 //#region src/components/hooks/useZoomAndPageInfo.ts
 const PAGE_INFO_FADE_MS = 600;
+const FIT_TO_WIDTH_PADDING_PX = 16;
+const FIT_TO_WIDTH_MIN_ZOOM = .1;
+const FIT_TO_WIDTH_MAX_ZOOM = 1;
 function useZoomAndPageInfo({ scrollContainerRef, pagedEditorRef, initialZoom }) {
-	const [zoom, setZoom] = useState(initialZoom);
+	const fitToWidth = initialZoom === "fit-width";
+	const [zoom, setZoom] = useState(typeof initialZoom === "number" ? initialZoom : 1);
 	const zoomRef = useRef(zoom);
 	const pendingZoomAnchorRef = useRef(null);
 	const [scrollPageInfo, setScrollPageInfo] = useState({
@@ -10801,6 +10964,36 @@ function useZoomAndPageInfo({ scrollContainerRef, pagedEditorRef, initialZoom })
 		scheduleScrollPageInfoFade,
 		updateScrollPageInfo
 	]);
+	useEffect(() => {
+		if (!fitToWidth || !scrollContainerEl) return;
+		let rafId = 0;
+		const applyFit = () => {
+			const pageWidth = pagedEditorRef.current?.getLayout()?.pages[0]?.size.w ?? 0;
+			if (pageWidth <= 0) {
+				rafId = requestAnimationFrame(applyFit);
+				return;
+			}
+			const available = scrollContainerEl.clientWidth - FIT_TO_WIDTH_PADDING_PX;
+			if (available <= 0) return;
+			const target = Math.min(FIT_TO_WIDTH_MAX_ZOOM, Math.max(FIT_TO_WIDTH_MIN_ZOOM, Math.round(available / pageWidth * 100) / 100));
+			if (Math.abs(target - zoomRef.current) > .005) setZoomWithViewportAnchor(target);
+		};
+		const observer = new ResizeObserver(() => {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(applyFit);
+		});
+		observer.observe(scrollContainerEl);
+		applyFit();
+		return () => {
+			cancelAnimationFrame(rafId);
+			observer.disconnect();
+		};
+	}, [
+		fitToWidth,
+		scrollContainerEl,
+		pagedEditorRef,
+		setZoomWithViewportAnchor
+	]);
 	return {
 		zoom,
 		zoomRef,
@@ -12400,7 +12593,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-mwa9JsIj.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-B7waYgma.js").then((m) => ({ default: m.CommentsSidebar })));
 const TextContextMenu = lazy(() => import("./TextContextMenu-Ci7-M4oU.js").then((m) => ({ default: m.TextContextMenu })));
 const loadAttemptSelectiveSave = async () => {
 	const { attemptSelectiveSave } = await import("@stll/folio-core/docx/selectiveSave");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-react",
-  "version": "0.12.3",
+  "version": "0.13.1",
   "description": "React editor for folio: a Word-document (.docx) editor for the browser, built on @stll/folio-core and ProseMirror.",
   "keywords": [
     "document-editor",
@@ -68,7 +68,7 @@
     "@fontsource/noto-sans-arabic": "^5.2.7",
     "@fontsource/source-sans-3": "^5.2.9",
     "@fontsource/tinos": "^5.2.7",
-    "@stll/folio-core": "^0.15.1",
+    "@stll/folio-core": "^0.15.12",
     "better-result": "2.10.0",
     "lucide-react": "1.24.0",
     "prosemirror-history": "^1.5.0",