@stll/folio-react 0.25.2 → 0.26.0

package/README.md

@@ -48,7 +48,7 @@ layout engine, DOCX ↔ Markdown), depend on `@stll/folio-core` directly.
 
 ## Peer dependencies
 
-`react` ^18 or ^19 · `react-dom` ^18 or ^19 · `use-intl` >=4
+`react` ^19.2 · `react-dom` ^19.2 · `use-intl` >=4
 
 ## Acknowledgements
 

package/dist/{CommentsSidebar-IR9uTkkk.js → CommentsSidebar-C4IpXib8.js}

@@ -1,5 +1,5 @@
-import { f as containedHandler, u as useDrawerFocus } from "./renderAsync-C0_y_c9Y.js";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { f as containedHandler, u as useDrawerFocus } from "./renderAsync-T2p_qqNU.js";
+import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { CheckIcon, MoreVerticalIcon } from "lucide-react";
 import { useLocale, useTranslations } from "use-intl";
 import { scrollEditorTo } from "@stll/folio-core/paged-layout/editorScrollRoot";
@@ -105,12 +105,14 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 	const [replyingTo, setReplyingTo] = useState(null);
 	const [replyText, setReplyText] = useState("");
 	const [newCommentText, setNewCommentText] = useState("");
-	const [expandedCard, setExpandedCard] = useState(null);
+	const [expandedCard, setExpandedCard] = useState(activeCommentId === null ? null : `comment-${activeCommentId}`);
 	const [menuOpenFor, setMenuOpenFor] = useState(null);
-	const [cardPositions, setCardPositions] = useState(/* @__PURE__ */ new Map());
+	const [{ positions: cardPositions, knownCards }, setCardGeometry] = useState(() => ({
+		positions: /* @__PURE__ */ new Map(),
+		knownCards: /* @__PURE__ */ new Set()
+	}));
 	const [measuredLeft, setMeasuredLeft] = useState(null);
 	const [initialPositionsDone, setInitialPositionsDone] = useState(false);
-	const knownCardsRef = useRef(/* @__PURE__ */ new Set());
 	const lastKnownCardPositionsRef = useRef(/* @__PURE__ */ new Map());
 	const sidebarRef = useRef(null);
 	const cardRefs = useRef(/* @__PURE__ */ new Map());
@@ -157,8 +159,13 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 		const maxVisibleLeft = Math.max(8, offsetParent.clientWidth - SIDEBAR_WIDTH - 8);
 		setMeasuredLeft(Math.max(8, Math.min(rawLeft, maxVisibleLeft)));
 	}, [editorContainerRef, isDrawer]);
+	const measureSidebarCommit = useEffectEvent((_layout, measure) => measure());
 	useLayoutEffect(() => {
-		updateSidebarLeft();
+		measureSidebarCommit({
+			pageWidth,
+			isAddingComment,
+			commentCount: comments.length
+		}, updateSidebarLeft);
 	}, [
 		updateSidebarLeft,
 		pageWidth,
@@ -257,7 +264,15 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 			resolvedPositions.set(pos.id, y);
 			lastBottom = y + pos.height;
 		}
-		setCardPositions((prev) => arePositionMapsEqual(prev, resolvedPositions) ? prev : resolvedPositions);
+		setCardGeometry((previous) => {
+			if (arePositionMapsEqual(previous.positions, resolvedPositions)) return previous;
+			const nextKnownCards = new Set(previous.knownCards);
+			for (const cardId_0 of previous.positions.keys()) nextKnownCards.add(cardId_0);
+			return {
+				positions: resolvedPositions,
+				knownCards: nextKnownCards
+			};
+		});
 		const visiblePositionIds = new Set(resolvedPositions.keys());
 		for (const key of lastKnownCardPositionsRef.current.keys()) if (!visiblePositionIds.has(key) && key !== "new-comment-input") lastKnownCardPositionsRef.current.delete(key);
 	}, [
@@ -326,10 +341,14 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 			container_2.removeEventListener("scroll", scheduleUpdate);
 		};
 	}, [editorContainerRef, updateCardPositions]);
-	useEffect(() => {
-		const raf = requestAnimationFrame(updateCardPositions);
+	const measureCardsCommit = useEffectEvent((_layout_0, measure_0) => {
+		const raf = requestAnimationFrame(measure_0);
 		return () => cancelAnimationFrame(raf);
-	}, [
+	});
+	useEffect(() => measureCardsCommit({
+		expandedCard,
+		isAddingComment
+	}, updateCardPositions), [
 		expandedCard,
 		isAddingComment,
 		updateCardPositions
@@ -359,20 +378,21 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 			if (onAddComment?.(newCommentText.trim()) !== false) setNewCommentText("");
 		}
 	};
-	useEffect(() => {
-		if (activeCommentId === null) return;
-		setExpandedCard(`comment-${activeCommentId}`);
-	}, [activeCommentId]);
-	const handleCardClick = (cardId_0, commentId_0) => {
-		const nextExpandedCard = expandedCard === cardId_0 ? null : cardId_0;
+	const [previousActiveCommentId, setPreviousActiveCommentId] = useState(activeCommentId);
+	if (previousActiveCommentId !== activeCommentId) {
+		setPreviousActiveCommentId(activeCommentId);
+		if (activeCommentId !== null) setExpandedCard(`comment-${activeCommentId}`);
+	}
+	const handleCardClick = (cardId_1, commentId_0) => {
+		const nextExpandedCard = expandedCard === cardId_1 ? null : cardId_1;
 		setExpandedCard(nextExpandedCard);
 		setMenuOpenFor(null);
 		if (commentId_0 !== void 0) onCommentClick?.(nextExpandedCard === null && activeCommentId === commentId_0 ? null : commentId_0);
-		if (isDrawer && commentId_0 !== void 0 && nextExpandedCard !== null) revealAnchor(cardId_0);
+		if (isDrawer && commentId_0 !== void 0 && nextExpandedCard !== null) revealAnchor(cardId_1);
 	};
-	const revealAnchor = (cardId_1) => {
+	const revealAnchor = (cardId_2) => {
 		const scrollEl_1 = editorContainerRef?.current;
-		const anchorY = lastKnownCardPositionsRef.current.get(cardId_1) ?? anchorPositions?.get(cardId_1);
+		const anchorY = lastKnownCardPositionsRef.current.get(cardId_2) ?? anchorPositions?.get(cardId_2);
 		if (!scrollEl_1 || anchorY === void 0) return;
 		scrollEditorTo(scrollEl_1, {
 			top: Math.max(0, anchorY - scrollEl_1.clientHeight / 3),
@@ -405,10 +425,8 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 		fontWeight: 500,
 		fontFamily: "inherit"
 	});
-	const cardContainerStyle = (cardId_2, isExpanded, yPos) => {
-		const isKnown = knownCardsRef.current.has(cardId_2);
-		if (yPos !== void 0) knownCardsRef.current.add(cardId_2);
-		const isNewCard = !isKnown && yPos !== void 0;
+	const cardContainerStyle = (cardId_3, isExpanded, yPos) => {
+		const isNewCard = !knownCards.has(cardId_3) && yPos !== void 0;
 		const noPosition = hasPositions && yPos === void 0;
 		const positionStyle = (() => {
 			if (!hasPositions) return { marginBottom: 6 };
@@ -593,24 +611,26 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 	});
 	const renderCommentCard = (comment_0) => {
 		const replies_0 = getReplies(comment_0.id);
-		const cardId_3 = `comment-${comment_0.id}`;
-		const isExpanded_1 = expandedCard === cardId_3;
+		const cardId_4 = `comment-${comment_0.id}`;
+		const isExpanded_1 = expandedCard === cardId_4;
 		const isActive = activeCommentId === comment_0.id;
-		const yPos_0 = cardPositions.get(cardId_3) ?? lastKnownCardPositionsRef.current.get(cardId_3);
+		const yPos_0 = cardPositions.get(cardId_4);
 		return /* @__PURE__ */ jsxs("div", {
 			ref: (el_3) => {
-				if (el_3) cardRefs.current.set(cardId_3, el_3);
-				else cardRefs.current.delete(cardId_3);
+				if (el_3) cardRefs.current.set(cardId_4, el_3);
+				else cardRefs.current.delete(cardId_4);
 			},
 			"data-comment-id": comment_0.id,
 			className: "docx-comment-card",
-			onClick: containedHandler(() => handleCardClick(cardId_3, comment_0.id)),
+			onClick: (event) => {
+				containedHandler(() => handleCardClick(cardId_4, comment_0.id))(event);
+			},
 			onKeyDown: (e_9) => {
-				if (e_9.key === "Enter" || e_9.key === " ") handleCardClick(cardId_3, comment_0.id);
+				if (e_9.key === "Enter" || e_9.key === " ") handleCardClick(cardId_4, comment_0.id);
 			},
 			onMouseDown: containedHandler((e_10) => e_10.stopPropagation()),
 			style: {
-				...cardContainerStyle(cardId_3, isExpanded_1, yPos_0),
+				...cardContainerStyle(cardId_4, isExpanded_1, yPos_0),
 				opacity: comment_0.done ? .6 : 1,
 				outline: isActive ? "2px solid var(--doc-primary, var(--primary))" : "none",
 				outlineOffset: 2
@@ -669,13 +689,13 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 									type: "button",
 									onClick: (e_12) => {
 										e_12.stopPropagation();
-										setMenuOpenFor(menuOpenFor === cardId_3 ? null : cardId_3);
+										setMenuOpenFor(menuOpenFor === cardId_4 ? null : cardId_4);
 									},
 									title: "More options",
 									style: ICON_BUTTON_STYLE,
 									children: /* @__PURE__ */ jsx(MoreVerticalIcon, { size: 16 })
 								}),
-								menuOpenFor === cardId_3 && /* @__PURE__ */ jsx("div", {
+								menuOpenFor === cardId_4 && /* @__PURE__ */ jsx("div", {
 									onClick: (e_13) => e_13.stopPropagation(),
 									onKeyDown: (e_14) => e_14.stopPropagation(),
 									onMouseDown: (e_15) => e_15.stopPropagation(),

package/dist/{FindReplaceDialog-BUwFQWaq.js → FindReplaceDialog-LlVMe3EW.js}

@@ -1,24 +1,11 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-DO95voaI.js";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
+import { c } from "react-compiler-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { ChevronDownIcon, ChevronUpIcon, SearchIcon, XIcon } from "lucide-react";
 import { useTranslations } from "use-intl";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "@stll/folio-core/managers/FindReplaceManager";
-//#region src/components/dialogs/findReplaceDialogBehavior.ts
-const getFindDialogOpenBehavior = ({ isOpen, initialSearchText }) => {
-	if (!isOpen) return {
-		type: "closed",
-		shouldClearHighlights: true
-	};
-	return {
-		type: "open",
-		searchText: initialSearchText,
-		shouldFindInitialText: initialSearchText.length > 0
-	};
-};
-const shouldRefreshFindDialogSearch = ({ isOpen, searchText }) => isOpen && searchText.trim().length > 0;
-//#endregion
 //#region src/components/dialogs/findReplaceDialogLayout.ts
 const FIND_REPLACE_DIALOG_TOP = "var(--folio-find-replace-top, 7rem)";
 const FIND_REPLACE_DIALOG_LEFT = "var(--folio-find-replace-left, 5.5rem)";
@@ -53,115 +40,157 @@ var FindReplaceDialog_exports = /* @__PURE__ */ __exportAll({ FindReplaceDialog:
 /**
 * FindReplaceDialog component - Modal for finding and replacing text
 */
-function FindReplaceDialog({ isOpen, onClose, onFind, onFindNext, onFindPrevious, onHighlightMatches, onClearHighlights, initialSearchText = "", currentResult, className, style }) {
+function FindReplaceDialog(props) {
+	const $ = c(8);
+	const [matchCase, setMatchCase] = useState(false);
+	const [matchWholeWord, setMatchWholeWord] = useState(false);
+	const { isOpen, onClearHighlights } = props;
+	let t0;
+	let t1;
+	if ($[0] !== isOpen || $[1] !== onClearHighlights) {
+		t0 = () => {
+			if (!isOpen) onClearHighlights?.();
+		};
+		t1 = [isOpen, onClearHighlights];
+		$[0] = isOpen;
+		$[1] = onClearHighlights;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+	if (!isOpen) return null;
+	let t2;
+	if ($[4] !== matchCase || $[5] !== matchWholeWord || $[6] !== props) {
+		t2 = /* @__PURE__ */ jsx(FindReplaceDialogForm, {
+			...props,
+			matchCase,
+			matchWholeWord,
+			onMatchCaseChange: setMatchCase,
+			onMatchWholeWordChange: setMatchWholeWord
+		}, props.initialSearchText);
+		$[4] = matchCase;
+		$[5] = matchWholeWord;
+		$[6] = props;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+const getFindQueryKey = (text, { matchCase, matchWholeWord }) => JSON.stringify([
+	text,
+	matchCase,
+	matchWholeWord
+]);
+const getQueryResult = (state, queryKey) => {
+	switch (state.status) {
+		case "cleared": return null;
+		case "ready": return state.queryKey === queryKey ? state.result : null;
+		default: return state;
+	}
+};
+function FindReplaceDialogForm({ isOpen, onClose, onFind, onFindNext, onFindPrevious, onHighlightMatches, onClearHighlights, initialSearchText = "", currentResult, className, style, matchCase, matchWholeWord, onMatchCaseChange, onMatchWholeWordChange }) {
 	const id = React.useId();
 	const t = useTranslations("folio");
 	const { Button, Input, Checkbox } = useFolioUI();
-	const [searchText, setSearchText] = useState("");
-	const [matchCase, setMatchCase] = useState(false);
-	const [matchWholeWord, setMatchWholeWord] = useState(false);
-	const [result, setResult] = useState(null);
-	const searchInputRef = useRef(null);
-	const latestFindCallbacksRef = useRef({
-		onFind,
-		onHighlightMatches,
-		onClearHighlights
-	});
-	latestFindCallbacksRef.current = {
-		onFind,
-		onHighlightMatches,
-		onClearHighlights
-	};
-	const latestFindOptionsRef = useRef({
-		matchCase,
-		matchWholeWord
-	});
-	latestFindOptionsRef.current = {
+	const [searchText, setSearchText] = useState(initialSearchText);
+	const queryKey = getFindQueryKey(searchText, {
 		matchCase,
 		matchWholeWord
-	};
-	const latestSearchStateRef = useRef({
-		isOpen,
-		searchText
 	});
-	latestSearchStateRef.current = {
-		isOpen,
-		searchText
-	};
-	useEffect(() => {
-		if (currentResult !== void 0) setResult(currentResult);
-	}, [currentResult]);
+	const [findResult, setFindResult] = useState({ status: "cleared" });
+	const [previousCurrentResult, setPreviousCurrentResult] = useState(currentResult);
+	if (currentResult !== previousCurrentResult) {
+		setPreviousCurrentResult(currentResult);
+		if (findResult.status === "ready" && findResult.queryKey === queryKey && currentResult !== void 0) setFindResult(currentResult ? {
+			status: "ready",
+			queryKey,
+			result: currentResult
+		} : { status: "cleared" });
+	}
+	const result = getQueryResult(findResult, queryKey);
+	const searchInputRef = useRef(null);
 	useEffect(() => {
-		const behavior = getFindDialogOpenBehavior({
-			isOpen,
-			initialSearchText
-		});
-		if (behavior.type === "closed") {
-			latestFindCallbacksRef.current.onClearHighlights?.();
-			return;
-		}
-		setSearchText(behavior.searchText);
-		setResult(null);
-		setTimeout(() => {
+		const timeout = setTimeout(() => {
 			searchInputRef.current?.focus();
 			searchInputRef.current?.select();
 		}, 100);
-		if (behavior.shouldFindInitialText) {
-			const callbacks = latestFindCallbacksRef.current;
-			const options = latestFindOptionsRef.current;
-			const searchResult = callbacks.onFind(behavior.searchText, {
-				matchCase: options.matchCase,
-				matchWholeWord: options.matchWholeWord
-			});
-			setResult(searchResult);
-			if (searchResult?.matches && callbacks.onHighlightMatches) callbacks.onHighlightMatches(searchResult.matches);
-		}
-	}, [isOpen, initialSearchText]);
-	const performSearch = useCallback(() => {
-		if (!searchText.trim()) {
-			setResult(null);
-			if (onClearHighlights) onClearHighlights();
+		return () => clearTimeout(timeout);
+	}, []);
+	const performSearch = useCallback((text = searchText, options = {
+		matchCase,
+		matchWholeWord
+	}) => {
+		if (!text.trim()) {
+			setFindResult({ status: "cleared" });
+			onClearHighlights?.();
 			return;
 		}
-		const searchResult_0 = onFind(searchText, {
-			matchCase,
-			matchWholeWord
-		});
-		setResult(searchResult_0);
-		if (searchResult_0?.matches && onHighlightMatches) onHighlightMatches(searchResult_0.matches);
-		else if (onClearHighlights) onClearHighlights();
+		const searchResult = onFind(text, options);
+		setFindResult(searchResult ? {
+			status: "ready",
+			queryKey: getFindQueryKey(text, options),
+			result: searchResult
+		} : { status: "cleared" });
+		if (searchResult?.matches && onHighlightMatches) onHighlightMatches(searchResult.matches);
+		else onClearHighlights?.();
 	}, [
 		searchText,
 		matchCase,
 		matchWholeWord,
 		onFind,
 		onHighlightMatches,
-		onClearHighlights
+		onClearHighlights,
+		setFindResult
 	]);
 	const performSearchRef = useRef(performSearch);
-	performSearchRef.current = performSearch;
+	const clearHighlightsRef = useRef(onClearHighlights);
+	useLayoutEffect(() => {
+		performSearchRef.current = performSearch;
+		clearHighlightsRef.current = onClearHighlights;
+	}, [performSearch, onClearHighlights]);
 	useEffect(() => {
-		if (shouldRefreshFindDialogSearch(latestSearchStateRef.current)) performSearchRef.current();
-	}, [matchCase, matchWholeWord]);
-	useEffect(() => {
-		if (!isOpen) return;
 		if (!searchText.trim()) {
-			setResult(null);
-			onClearHighlights?.();
+			clearHighlightsRef.current?.();
 			return;
 		}
-		const timeout = setTimeout(performSearch, 120);
-		return () => clearTimeout(timeout);
+		const timeout_0 = setTimeout(() => performSearchRef.current(searchText, {
+			matchCase,
+			matchWholeWord
+		}), 120);
+		return () => clearTimeout(timeout_0);
 	}, [
-		isOpen,
 		searchText,
-		performSearch,
-		onClearHighlights
+		matchCase,
+		matchWholeWord
 	]);
+	const handleMatchCaseChange = useCallback((value) => {
+		setFindResult({ status: "cleared" });
+		onMatchCaseChange(value);
+	}, [onMatchCaseChange, setFindResult]);
+	const handleMatchWholeWordChange = useCallback((value_0) => {
+		setFindResult({ status: "cleared" });
+		onMatchWholeWordChange(value_0);
+	}, [onMatchWholeWordChange, setFindResult]);
 	const handleSearchChange = useCallback((e) => {
-		setSearchText(e.target.value);
-		setResult(null);
-	}, []);
+		const text_0 = e.target.value;
+		setSearchText(text_0);
+		setFindResult({ status: "cleared" });
+		if (!text_0.trim()) {
+			onFind(text_0, {
+				matchCase,
+				matchWholeWord
+			});
+			onClearHighlights?.();
+		}
+	}, [
+		onFind,
+		matchCase,
+		matchWholeWord,
+		onClearHighlights,
+		setFindResult
+	]);
 	const handleFindNext = useCallback(() => {
 		if (!searchText.trim()) {
 			performSearch();
@@ -173,16 +202,22 @@ function FindReplaceDialog({ isOpen, onClose, onFind, onFindNext, onFindPrevious
 		}
 		if (onFindNext()) {
 			const newIndex = (result.currentIndex + 1) % result.totalCount;
-			setResult({
-				...result,
-				currentIndex: newIndex
+			setFindResult({
+				status: "ready",
+				queryKey,
+				result: {
+					...result,
+					currentIndex: newIndex
+				}
 			});
 		}
 	}, [
 		searchText,
 		result,
+		queryKey,
 		performSearch,
-		onFindNext
+		onFindNext,
+		setFindResult
 	]);
 	const handleFindPrevious = useCallback(() => {
 		if (!searchText.trim()) {
@@ -195,16 +230,22 @@ function FindReplaceDialog({ isOpen, onClose, onFind, onFindNext, onFindPrevious
 		}
 		if (onFindPrevious()) {
 			const newIndex_0 = result.currentIndex === 0 ? result.totalCount - 1 : result.currentIndex - 1;
-			setResult({
-				...result,
-				currentIndex: newIndex_0
+			setFindResult({
+				status: "ready",
+				queryKey,
+				result: {
+					...result,
+					currentIndex: newIndex_0
+				}
 			});
 		}
 	}, [
 		searchText,
 		result,
+		queryKey,
 		performSearch,
-		onFindPrevious
+		onFindPrevious,
+		setFindResult
 	]);
 	const handleSearchKeyDown = useCallback((e_0) => {
 		if (e_0.key === "Enter") {
@@ -345,13 +386,13 @@ function FindReplaceDialog({ isOpen, onClose, onFind, onFindNext, onFindPrevious
 							className: "text-muted-foreground flex items-center gap-2 text-xs",
 							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: matchCase,
-								onCheckedChange: setMatchCase
+								onCheckedChange: handleMatchCaseChange
 							}), t("findReplace.matchCase")]
 						}), /* @__PURE__ */ jsxs("label", {
 							className: "text-muted-foreground flex items-center gap-2 text-xs",
 							children: [/* @__PURE__ */ jsx(Checkbox, {
 								checked: matchWholeWord,
-								onCheckedChange: setMatchWholeWord
+								onCheckedChange: handleMatchWholeWordChange
 							}), t("findReplace.wholeWords")]
 						})]
 					})

package/dist/{FootnotePropertiesDialog-6XdO0zBH.js → FootnotePropertiesDialog-D73t3LNP.js}

@@ -1,5 +1,5 @@
 import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
-import { r as useFolioUI } from "./folio-ui-DO95voaI.js";
+import { r as useFolioUI } from "./folio-ui-rCHqCEG6.js";
 import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
 import { c } from "react-compiler-runtime";
 import { useId, useState } from "react";