@stll/folio-react 0.12.3 → 0.13.0

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

@@ -1,4 +1,4 @@
-import { d as containedHandler } from "./renderAsync-DFwDFNB9.js";
+import { d as containedHandler } from "./renderAsync-DLhuA3FM.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-DLhuA3FM.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-DLhuA3FM.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-DLhuA3FM.js}

@@ -10714,8 +10714,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 +10805,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 +12434,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-ZHaLP2Kq.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.0",
   "description": "React editor for folio: a Word-document (.docx) editor for the browser, built on @stll/folio-core and ProseMirror.",
   "keywords": [
     "document-editor",