@stll/folio-react 0.20.2 → 0.20.3

package/dist/{CommentsSidebar-D6n3ifAJ.js → CommentsSidebar-BiBt77_z.js}

@@ -1,9 +1,10 @@
-import { d as containedHandler } from "./renderAsync-dUCMzc_W.js";
+import { d as containedHandler } from "./renderAsync-DMNxIBO9.js";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { CheckIcon, MoreVerticalIcon } from "lucide-react";
 import { useLocale, useTranslations } from "use-intl";
 import { closestHtmlElement, queryHtmlElement } from "@stll/folio-core/utils/domGuards";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { commentAnchorSelector } from "@stll/folio-core/render-dom/commentAnchorAttributes";
 //#region src/components/CommentsSidebar.tsx
 /**
 * Comments Sidebar
@@ -174,7 +175,7 @@ const CommentsSidebar = ({ comments, onCommentClick, activeCommentId = null, onC
 		};
 		for (const comment of visibleComments) {
 			const cardId = `comment-${comment.id}`;
-			const el = pagesEl.querySelector(`[data-comment-id="${CSS.escape(String(comment.id))}"]`);
+			const el = pagesEl.querySelector(commentAnchorSelector(comment.id));
 			if (el) {
 				pushPosition(cardId, el.getBoundingClientRect().top - containerRect.top + scrollTop, cardRefs.current.get(cardId)?.offsetHeight || DEFAULT_CARD_HEIGHT);
 				continue;

package/dist/compat/eigenpal.js

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

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-dUCMzc_W.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-DMNxIBO9.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-dUCMzc_W.js → renderAsync-DMNxIBO9.js}

@@ -108,6 +108,7 @@ import { applyImagePosition, applyImageProperties, applyImageTransform, applyIma
 import { classifyEditorKeydown, deleteSelectedTable, isFocusInInputLike, isKeydownInShortcutScope, isMacPlatform } from "@stll/folio-core/managers/editorShortcuts";
 import { getScrollTopForZoomAnchor, getViewportCenterZoomAnchorForZoomChange } from "@stll/folio-core/paged-layout/zoomScrollAnchor";
 import { ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from "@stll/folio-core/utils/zoom";
+import { COMMENT_ANCHOR_SELECTOR, commentAnchorIds } from "@stll/folio-core/render-dom/commentAnchorAttributes";
 import { isValidHexId } from "@stll/folio-core/utils/hexId";
 import { createRoot } from "react-dom/client";
 //#region src/hooks/useHistory.ts
@@ -210,7 +211,7 @@ function useDocumentHistory(document, t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const options = t1;
-	const isEqual = _temp$11;
+	const isEqual = _temp$12;
 	let t2;
 	if ($[2] !== options) {
 		t2 = {
@@ -222,7 +223,7 @@ function useDocumentHistory(document, t0) {
 	} else t2 = $[3];
 	return useHistory(document, t2);
 }
-function _temp$11(a, b) {
+function _temp$12(a, b) {
 	if (a === b) return true;
 	const aPackage = a?.package;
 	const bPackage = b?.package;
@@ -743,7 +744,7 @@ const AISuggestionRectsOverlay = (t0) => {
 	if (groups.length === 0) return null;
 	let t1;
 	if ($[0] !== groups) {
-		t1 = groups.map(_temp$10);
+		t1 = groups.map(_temp$11);
 		$[0] = groups;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -759,7 +760,7 @@ const AISuggestionRectsOverlay = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-function _temp$10(t0) {
+function _temp$11(t0) {
 	const { suggestion, rects, focused, font } = t0;
 	const replacementAnchor = rects.at(-1);
 	const showReplacement = focused && suggestion.suggestedText.length > 0 && replacementAnchor !== void 0;
@@ -994,7 +995,7 @@ const PassageHighlightOverlay = (t0) => {
 	if (rects.length === 0) return null;
 	let t1;
 	if ($[0] !== rects) {
-		t1 = rects.map(_temp$9);
+		t1 = rects.map(_temp$10);
 		$[0] = rects;
 		$[1] = t1;
 	} else t1 = $[1];
@@ -1010,7 +1011,7 @@ const PassageHighlightOverlay = (t0) => {
 	} else t2 = $[3];
 	return t2;
 };
-function _temp$9(rect, idx) {
+function _temp$10(rect, idx) {
 	return /* @__PURE__ */ jsx("span", {
 		className: "folio-passage-highlight",
 		style: {
@@ -2471,7 +2472,7 @@ function HfCaretOverlay(t0) {
 	if (!pagesContainer) return null;
 	let t4;
 	if ($[17] !== rangeRects) {
-		t4 = rangeRects.map(_temp$8);
+		t4 = rangeRects.map(_temp$9);
 		$[17] = rangeRects;
 		$[18] = t4;
 	} else t4 = $[18];
@@ -2510,7 +2511,7 @@ function HfCaretOverlay(t0) {
 	} else t7 = $[26];
 	return t7;
 }
-function _temp$8(r, i) {
+function _temp$9(r, i) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-testid": "hf-selection-rect",
 		style: {
@@ -7108,6 +7109,7 @@ function ContentControlWidgetsOverlay(t0) {
 				"aria-label": t11,
 				style,
 				className: "bg-popover text-popover-foreground min-w-[10rem] rounded-md border p-1 shadow-md",
+				onPointerDown: _temp$8,
 				children: [t12, t13]
 			})
 		}), document.body);
@@ -7119,6 +7121,9 @@ function ContentControlWidgetsOverlay(t0) {
 	} else t14 = $[31];
 	return t14;
 }
+function _temp$8(event) {
+	return event.stopPropagation();
+}
 function ContentControlDropdownItem(t0) {
 	const $ = c(7);
 	const { item, MenuItem, onPick } = t0;
@@ -12197,17 +12202,17 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 	const syncCommentHighlightStyles = useCallback(() => {
 		const root = editorContentRef.current;
 		if (!root) return;
-		const nodes = root.querySelectorAll(".layout-run-text[data-comment-id]");
+		const nodes = root.querySelectorAll(`.layout-run-text${COMMENT_ANCHOR_SELECTOR}`);
 		for (const node of nodes) {
-			const commentId = Number.parseInt(node.dataset["commentId"] ?? "", 10);
-			if (!(commentId === -1 || visibleCommentIds.has(commentId))) {
+			const commentIds = commentAnchorIds(node).map((id) => Number.parseInt(id, 10));
+			if (!commentIds.some((commentId) => commentId === -1 || visibleCommentIds.has(commentId))) {
 				node.style.backgroundColor = "transparent";
 				node.style.borderBottom = "2px solid transparent";
 				node.style.boxShadow = "none";
 				delete node.dataset["activeComment"];
 				continue;
 			}
-			if (activeCommentId === commentId) {
+			if (activeCommentId !== null && commentIds.includes(activeCommentId)) {
 				node.style.backgroundColor = "var(--doc-comment-active-bg, rgba(255, 212, 0, 0.22))";
 				node.style.borderBottom = "1px solid var(--doc-comment-active-border, rgba(180, 130, 0, 0.62))";
 				node.style.boxShadow = "none";
@@ -12279,7 +12284,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-D6n3ifAJ.js").then((m) => ({ default: m.CommentsSidebar })));
+const CommentsSidebar = lazy(() => import("./CommentsSidebar-BiBt77_z.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");
@@ -12541,6 +12546,7 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 	const imageInputRef = useRef(null);
 	const editorContentRef = useRef(null);
 	const scrollContainerRef = useRef(null);
+	const initialScrollAppliedRef = useRef(false);
 	const [formatPainterMode, setFormatPainterModeState] = useState("off");
 	const formatPainterModeRef = useRef("off");
 	const capturedFormatMarksRef = useRef(null);
@@ -12688,6 +12694,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		onError,
 		onCompatibilityChange,
 		onReset: useCallback(() => {
+			initialScrollAppliedRef.current = false;
+			if (scrollContainerRef.current) {
+				scrollContainerRef.current.scrollTop = 0;
+				scrollContainerRef.current.scrollLeft = 0;
+			}
 			commentsDirtyRef.current = false;
 			commentsLoadedRef.current = false;
 			trackedChangesLoadedRef.current = false;
@@ -12755,7 +12766,6 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		autoOpenReviewSidebar,
 		setShowCommentsSidebar
 	]);
-	const initialScrollAppliedRef = useRef(false);
 	useEffect(() => {
 		if (initialScrollTop === void 0 || state.documentLoad.status !== "ready" || initialScrollAppliedRef.current) return;
 		initialScrollAppliedRef.current = true;
@@ -12765,7 +12775,11 @@ const DocxEditor = forwardRef(function DocxEditor({ documentBuffer, password, do
 		return () => {
 			cancelAnimationFrame(frame);
 		};
-	}, [initialScrollTop, state.documentLoad.status]);
+	}, [
+		initialScrollTop,
+		loadedDocumentIdentity,
+		state.documentLoad.status
+	]);
 	useEffect(() => {
 		return onFontsLoaded(() => {
 			onFontsLoadedCallback?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stll/folio-react",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "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.45.0",
+    "@stll/folio-core": "^0.46.0",
     "better-result": "3.0.1",
     "lucide-react": "1.24.0",
     "prosemirror-history": "^1.5.0",