@stll/folio-react 0.20.1 → 0.20.3

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

@@ -1,9 +1,10 @@
-import { d as containedHandler } from "./renderAsync-B4R5bi9J.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-B4R5bi9J.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-B4R5bi9J.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-B4R5bi9J.js → renderAsync-DMNxIBO9.js}

@@ -103,11 +103,12 @@ import { DISPLAY_MODES, EditorModeManager, isReadOnlyMode, isTrackChangesMode, t
 import { FindReplaceManager } from "@stll/folio-core/managers/FindReplaceManager";
 import { createEmptyHeaderFooter, pickActiveHeaderFooterRId, removeHeaderFooter, resolveEffectiveSectionProperties, resolveHeaderFooterContent, saveHeaderFooterContent } from "@stll/folio-core/utils/headerFooter";
 import { editHyperlinkAtCursor, removeHyperlinkAtCursor } from "@stll/folio-core/prosemirror/commands/hyperlink";
-import { sanitizeExternalUrl } from "@stll/folio-core/utils/urlSecurity";
+import { anchorTargetAttrs, sanitizeExternalUrl, windowFeaturesFor } from "@stll/folio-core/utils/urlSecurity";
 import { applyImagePosition, applyImageProperties, applyImageTransform, applyImageWrapType, insertImageFromFile } from "@stll/folio-core/prosemirror/commands/image";
 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;
@@ -10350,7 +10355,10 @@ const useHyperlinkHandlers = (t0) => {
 };
 function _temp$3(href) {
 	const safeHref = sanitizeExternalUrl(href);
-	if (safeHref) window.open(safeHref, "_blank", "noopener,noreferrer");
+	if (safeHref) {
+		const anchor = anchorTargetAttrs(void 0);
+		window.open(safeHref, anchor.target, windowFeaturesFor(anchor));
+	}
 }
 function _temp2$2(href_0) {
 	navigator.clipboard.writeText(href_0);
@@ -11321,7 +11329,7 @@ function areSelectionFormattingEqual(a, b) {
 * Edit mode: text + URL inputs with Apply.
 */
 function HyperlinkPopup(t0) {
-	const $ = c(88);
+	const $ = c(89);
 	const { data, onNavigate, onCopy, onEdit, onRemove, onClose, readOnly } = t0;
 	const t = useTranslations("folio");
 	const [mode, setMode] = useState("view");
@@ -11641,70 +11649,75 @@ function HyperlinkPopup(t0) {
 		t15 = /* @__PURE__ */ jsx(GlobeIcon, { className: "text-muted-foreground size-4.5 shrink-0" });
 		$[60] = t15;
 	} else t15 = $[60];
-	let t16;
+	const t16 = data.href;
+	let t17;
 	if ($[61] !== data.href || $[62] !== onNavigate) {
-		t16 = (e_6) => {
+		t17 = (e_6) => {
 			e_6.preventDefault();
 			onNavigate(data.href);
 		};
 		$[61] = data.href;
 		$[62] = onNavigate;
-		$[63] = t16;
-	} else t16 = $[63];
-	let t17;
-	if ($[64] !== data.href || $[65] !== t16) {
-		t17 = /* @__PURE__ */ jsx("a", {
+		$[63] = t17;
+	} else t17 = $[63];
+	let t18;
+	if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = anchorTargetAttrs(void 0);
+		$[64] = t18;
+	} else t18 = $[64];
+	let t19;
+	if ($[65] !== data.href || $[66] !== t17) {
+		t19 = /* @__PURE__ */ jsx("a", {
 			className: "text-primary truncate text-sm hover:underline",
-			href: data.href,
-			onClick: t16,
-			rel: "noopener noreferrer",
-			target: "_blank",
+			href: t16,
+			onClick: t17,
+			...t18,
 			title: data.href,
 			children: data.href
 		});
-		$[64] = data.href;
-		$[65] = t16;
+		$[65] = data.href;
 		$[66] = t17;
-	} else t17 = $[66];
-	let t18;
-	if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = /* @__PURE__ */ jsx("span", { className: "bg-border h-5 w-px shrink-0" });
-		$[67] = t18;
-	} else t18 = $[67];
-	let t19;
-	if ($[68] !== data.href || $[69] !== onCopy) {
-		t19 = () => onCopy(data.href);
-		$[68] = data.href;
-		$[69] = onCopy;
-		$[70] = t19;
-	} else t19 = $[70];
+		$[67] = t19;
+	} else t19 = $[67];
 	let t20;
-	if ($[71] !== t) {
-		t20 = t("copyLink");
-		$[71] = t;
-		$[72] = t20;
-	} else t20 = $[72];
+	if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx("span", { className: "bg-border h-5 w-px shrink-0" });
+		$[68] = t20;
+	} else t20 = $[68];
 	let t21;
-	if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
-		t21 = /* @__PURE__ */ jsx(ClipboardCopyIcon, { size: 16 });
-		$[73] = t21;
-	} else t21 = $[73];
+	if ($[69] !== data.href || $[70] !== onCopy) {
+		t21 = () => onCopy(data.href);
+		$[69] = data.href;
+		$[70] = onCopy;
+		$[71] = t21;
+	} else t21 = $[71];
 	let t22;
-	if ($[74] !== t19 || $[75] !== t20) {
-		t22 = /* @__PURE__ */ jsx("button", {
+	if ($[72] !== t) {
+		t22 = t("copyLink");
+		$[72] = t;
+		$[73] = t22;
+	} else t22 = $[73];
+	let t23;
+	if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
+		t23 = /* @__PURE__ */ jsx(ClipboardCopyIcon, { size: 16 });
+		$[74] = t23;
+	} else t23 = $[74];
+	let t24;
+	if ($[75] !== t21 || $[76] !== t22) {
+		t24 = /* @__PURE__ */ jsx("button", {
 			className: "flex size-7 items-center justify-center rounded text-[var(--doc-text-muted)] hover:bg-[var(--doc-bg-hover)] transition-colors",
-			onClick: t19,
-			title: t20,
+			onClick: t21,
+			title: t22,
 			type: "button",
-			children: t21
+			children: t23
 		});
-		$[74] = t19;
-		$[75] = t20;
+		$[75] = t21;
 		$[76] = t22;
-	} else t22 = $[76];
-	let t23;
-	if ($[77] !== data.displayText || $[78] !== data.href || $[79] !== onRemove || $[80] !== readOnly || $[81] !== t) {
-		t23 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		$[77] = t24;
+	} else t24 = $[77];
+	let t25;
+	if ($[78] !== data.displayText || $[79] !== data.href || $[80] !== onRemove || $[81] !== readOnly || $[82] !== t) {
+		t25 = !readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
 			className: "flex size-7 items-center justify-center rounded text-[var(--doc-text-muted)] hover:bg-[var(--doc-bg-hover)] transition-colors",
 			onClick: () => {
 				setEditText(data.displayText);
@@ -11721,16 +11734,16 @@ function HyperlinkPopup(t0) {
 			type: "button",
 			children: /* @__PURE__ */ jsx(UnlinkIcon, { size: 16 })
 		})] });
-		$[77] = data.displayText;
-		$[78] = data.href;
-		$[79] = onRemove;
-		$[80] = readOnly;
-		$[81] = t;
-		$[82] = t23;
-	} else t23 = $[82];
-	let t24;
-	if ($[83] !== t14 || $[84] !== t17 || $[85] !== t22 || $[86] !== t23) {
-		t24 = /* @__PURE__ */ jsxs("div", {
+		$[78] = data.displayText;
+		$[79] = data.href;
+		$[80] = onRemove;
+		$[81] = readOnly;
+		$[82] = t;
+		$[83] = t25;
+	} else t25 = $[83];
+	let t26;
+	if ($[84] !== t14 || $[85] !== t19 || $[86] !== t24 || $[87] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
 			ref: popupRef,
 			className: "fixed z-[10000] flex max-w-[400px] items-center gap-2 rounded-lg border border-[var(--doc-border)] bg-[var(--doc-page)] px-3 py-2 shadow-lg",
 			onMouseDown: t13,
@@ -11738,19 +11751,19 @@ function HyperlinkPopup(t0) {
 			style: t14,
 			children: [
 				t15,
-				t17,
-				t18,
-				t22,
-				t23
+				t19,
+				t20,
+				t24,
+				t25
 			]
 		});
-		$[83] = t14;
-		$[84] = t17;
-		$[85] = t22;
-		$[86] = t23;
-		$[87] = t24;
-	} else t24 = $[87];
-	return t24;
+		$[84] = t14;
+		$[85] = t19;
+		$[86] = t24;
+		$[87] = t25;
+		$[88] = t26;
+	} else t26 = $[88];
+	return t26;
 }
 function _temp2(e_5) {
 	return e_5.stopPropagation();
@@ -12189,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";
@@ -12271,7 +12284,7 @@ function useFolioComments({ doc, autoOpenReviewSidebar, anchorPositions, editorC
 * - Error boundary
 * - Loading states
 */
-const CommentsSidebar = lazy(() => import("./CommentsSidebar-BBbiecN2.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");
@@ -12533,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);
@@ -12680,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;
@@ -12747,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;
@@ -12757,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.1",
+  "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.44.0",
+    "@stll/folio-core": "^0.46.0",
     "better-result": "3.0.1",
     "lucide-react": "1.24.0",
     "prosemirror-history": "^1.5.0",