@stll/folio-react 0.20.2 → 0.21.0

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

@@ -1,9 +1,10 @@
-import { d as containedHandler } from "./renderAsync-dUCMzc_W.js";
+import { d as containedHandler } from "./renderAsync-D5P4hvJg.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/{TablePropertiesDialog-BW4RRZLZ.js → TablePropertiesDialog-DOUiX1KZ.js}

@@ -5,6 +5,7 @@ import { c } from "react-compiler-runtime";
 import { useEffect, useId, useState } from "react";
 import { useTranslations } from "use-intl";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { TABLE_PROPERTY_JUSTIFICATIONS, toTablePropertyJustification } from "@stll/folio-core/utils/tableOperations";
 //#region src/components/dialogs/TablePropertiesDialog.tsx
 /**
 * Table Properties Dialog — width type, width value, alignment.
@@ -17,15 +18,15 @@ const editableWidthType = (value) => {
 		default: return "auto";
 	}
 };
-const editableJustification = (value) => {
-	switch (value) {
-		case "center":
-		case "right": return value;
-		default: return "left";
-	}
+const TABLE_JUSTIFICATION_LABEL_KEYS = {
+	center: "dialogs.tableProperties.alignOptions.center",
+	end: "dialogs.tableProperties.alignOptions.end",
+	left: "dialogs.tableProperties.alignOptions.left",
+	right: "dialogs.tableProperties.alignOptions.right",
+	start: "dialogs.tableProperties.alignOptions.start"
 };
 function TablePropertiesDialog(t0) {
-	const $ = c(119);
+	const $ = c(107);
 	const { isOpen, onClose, onApply, currentProps } = t0;
 	const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
 	const handleOpenChange = useCloseOnDialogOpenChange(onClose);
@@ -40,10 +41,10 @@ function TablePropertiesDialog(t0) {
 		$[1] = t2;
 	} else t2 = $[1];
 	const [widthType, setWidthType] = useState(t2);
-	const t3 = currentProps?.justification ?? "left";
+	const t3 = currentProps?.justification;
 	let t4;
 	if ($[2] !== t3) {
-		t4 = editableJustification(t3);
+		t4 = toTablePropertyJustification(t3);
 		$[2] = t3;
 		$[3] = t4;
 	} else t4 = $[3];
@@ -54,7 +55,7 @@ function TablePropertiesDialog(t0) {
 			if (isOpen) {
 				setWidth(currentProps?.width ?? 0);
 				setWidthType(editableWidthType(currentProps?.widthType ?? "auto"));
-				setJustification(editableJustification(currentProps?.justification ?? "left"));
+				setJustification(toTablePropertyJustification(currentProps?.justification));
 			}
 		};
 		$[4] = currentProps?.justification;
@@ -74,7 +75,7 @@ function TablePropertiesDialog(t0) {
 	let t7;
 	if ($[12] !== justification || $[13] !== onApply || $[14] !== onClose || $[15] !== width || $[16] !== widthType) {
 		t7 = () => {
-			const props = { justification: justification === "left" || justification === "center" || justification === "right" ? justification : "left" };
+			const props = { justification };
 			if (widthType === "auto") {
 				props.width = null;
 				props.widthType = "auto";
@@ -282,181 +283,139 @@ function TablePropertiesDialog(t0) {
 	const t32 = fieldIds.align;
 	let t33;
 	if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
-		t33 = (e_1) => setJustification(editableJustification(e_1.target.value));
+		t33 = (e_1) => setJustification(toTablePropertyJustification(e_1.target.value));
 		$[66] = t33;
 	} else t33 = $[66];
 	let t34;
 	if ($[67] !== t) {
-		t34 = t("dialogs.tableProperties.alignOptions.left");
+		t34 = TABLE_PROPERTY_JUSTIFICATIONS.map((value) => /* @__PURE__ */ jsx("option", {
+			value,
+			children: t(TABLE_JUSTIFICATION_LABEL_KEYS[value])
+		}, value));
 		$[67] = t;
 		$[68] = t34;
 	} else t34 = $[68];
 	let t35;
-	if ($[69] !== t34) {
-		t35 = /* @__PURE__ */ jsx("option", {
-			value: "left",
-			children: t34
-		});
-		$[69] = t34;
-		$[70] = t35;
-	} else t35 = $[70];
-	let t36;
-	if ($[71] !== t) {
-		t36 = t("dialogs.tableProperties.alignOptions.center");
-		$[71] = t;
-		$[72] = t36;
-	} else t36 = $[72];
-	let t37;
-	if ($[73] !== t36) {
-		t37 = /* @__PURE__ */ jsx("option", {
-			value: "center",
-			children: t36
-		});
-		$[73] = t36;
-		$[74] = t37;
-	} else t37 = $[74];
-	let t38;
-	if ($[75] !== t) {
-		t38 = t("dialogs.tableProperties.alignOptions.right");
-		$[75] = t;
-		$[76] = t38;
-	} else t38 = $[76];
-	let t39;
-	if ($[77] !== t38) {
-		t39 = /* @__PURE__ */ jsx("option", {
-			value: "right",
-			children: t38
-		});
-		$[77] = t38;
-		$[78] = t39;
-	} else t39 = $[78];
-	let t40;
-	if ($[79] !== fieldIds.align || $[80] !== justification || $[81] !== t35 || $[82] !== t37 || $[83] !== t39) {
-		t40 = /* @__PURE__ */ jsxs("select", {
+	if ($[69] !== fieldIds.align || $[70] !== justification || $[71] !== t34) {
+		t35 = /* @__PURE__ */ jsx("select", {
 			className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
 			id: t32,
 			onChange: t33,
 			value: justification,
-			children: [
-				t35,
-				t37,
-				t39
-			]
+			children: t34
 		});
-		$[79] = fieldIds.align;
-		$[80] = justification;
-		$[81] = t35;
-		$[82] = t37;
-		$[83] = t39;
-		$[84] = t40;
-	} else t40 = $[84];
-	let t41;
-	if ($[85] !== t31 || $[86] !== t40) {
-		t41 = /* @__PURE__ */ jsxs("div", {
+		$[69] = fieldIds.align;
+		$[70] = justification;
+		$[71] = t34;
+		$[72] = t35;
+	} else t35 = $[72];
+	let t36;
+	if ($[73] !== t31 || $[74] !== t35) {
+		t36 = /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-3",
-			children: [t31, t40]
+			children: [t31, t35]
 		});
-		$[85] = t31;
-		$[86] = t40;
-		$[87] = t41;
-	} else t41 = $[87];
-	let t42;
-	if ($[88] !== t27 || $[89] !== t28 || $[90] !== t41) {
-		t42 = /* @__PURE__ */ jsxs("div", {
+		$[73] = t31;
+		$[74] = t35;
+		$[75] = t36;
+	} else t36 = $[75];
+	let t37;
+	if ($[76] !== t27 || $[77] !== t28 || $[78] !== t36) {
+		t37 = /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-3 px-5 py-4",
 			children: [
 				t27,
 				t28,
-				t41
+				t36
 			]
 		});
-		$[88] = t27;
-		$[89] = t28;
-		$[90] = t41;
-		$[91] = t42;
-	} else t42 = $[91];
-	let t43;
-	if ($[92] !== t) {
-		t43 = t("common.cancel");
-		$[92] = t;
-		$[93] = t43;
-	} else t43 = $[93];
-	let t44;
-	if ($[94] !== DialogClose || $[95] !== t43) {
-		t44 = /* @__PURE__ */ jsx(DialogClose, {
+		$[76] = t27;
+		$[77] = t28;
+		$[78] = t36;
+		$[79] = t37;
+	} else t37 = $[79];
+	let t38;
+	if ($[80] !== t) {
+		t38 = t("common.cancel");
+		$[80] = t;
+		$[81] = t38;
+	} else t38 = $[81];
+	let t39;
+	if ($[82] !== DialogClose || $[83] !== t38) {
+		t39 = /* @__PURE__ */ jsx(DialogClose, {
 			className: "border-input rounded border px-4 py-1.5 text-[13px]",
-			children: t43
+			children: t38
 		});
-		$[94] = DialogClose;
-		$[95] = t43;
-		$[96] = t44;
-	} else t44 = $[96];
-	let t45;
-	if ($[97] !== t) {
-		t45 = t("common.apply");
-		$[97] = t;
-		$[98] = t45;
-	} else t45 = $[98];
-	let t46;
-	if ($[99] !== handleApply || $[100] !== t45) {
-		t46 = /* @__PURE__ */ jsx("button", {
+		$[82] = DialogClose;
+		$[83] = t38;
+		$[84] = t39;
+	} else t39 = $[84];
+	let t40;
+	if ($[85] !== t) {
+		t40 = t("common.apply");
+		$[85] = t;
+		$[86] = t40;
+	} else t40 = $[86];
+	let t41;
+	if ($[87] !== handleApply || $[88] !== t40) {
+		t41 = /* @__PURE__ */ jsx("button", {
 			className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
 			onClick: handleApply,
 			type: "button",
-			children: t45
+			children: t40
 		});
-		$[99] = handleApply;
-		$[100] = t45;
-		$[101] = t46;
-	} else t46 = $[101];
-	let t47;
-	if ($[102] !== t44 || $[103] !== t46) {
-		t47 = /* @__PURE__ */ jsxs("div", {
+		$[87] = handleApply;
+		$[88] = t40;
+		$[89] = t41;
+	} else t41 = $[89];
+	let t42;
+	if ($[90] !== t39 || $[91] !== t41) {
+		t42 = /* @__PURE__ */ jsxs("div", {
 			className: "flex justify-end gap-2 border-t px-5 py-3",
-			children: [t44, t46]
+			children: [t39, t41]
 		});
-		$[102] = t44;
-		$[103] = t46;
-		$[104] = t47;
-	} else t47 = $[104];
-	let t48;
-	if ($[105] !== DialogPopup || $[106] !== t14 || $[107] !== t42 || $[108] !== t47) {
-		t48 = /* @__PURE__ */ jsxs(DialogPopup, {
+		$[90] = t39;
+		$[91] = t41;
+		$[92] = t42;
+	} else t42 = $[92];
+	let t43;
+	if ($[93] !== DialogPopup || $[94] !== t14 || $[95] !== t37 || $[96] !== t42) {
+		t43 = /* @__PURE__ */ jsxs(DialogPopup, {
 			className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[440px] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
 			children: [
 				t14,
-				t42,
-				t47
+				t37,
+				t42
 			]
 		});
-		$[105] = DialogPopup;
-		$[106] = t14;
-		$[107] = t42;
-		$[108] = t47;
-		$[109] = t48;
-	} else t48 = $[109];
-	let t49;
-	if ($[110] !== DialogPortal || $[111] !== t12 || $[112] !== t48) {
-		t49 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t12, t48] });
-		$[110] = DialogPortal;
-		$[111] = t12;
-		$[112] = t48;
-		$[113] = t49;
-	} else t49 = $[113];
-	let t50;
-	if ($[114] !== Dialog || $[115] !== handleOpenChange || $[116] !== isOpen || $[117] !== t49) {
-		t50 = /* @__PURE__ */ jsx(Dialog, {
+		$[93] = DialogPopup;
+		$[94] = t14;
+		$[95] = t37;
+		$[96] = t42;
+		$[97] = t43;
+	} else t43 = $[97];
+	let t44;
+	if ($[98] !== DialogPortal || $[99] !== t12 || $[100] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t12, t43] });
+		$[98] = DialogPortal;
+		$[99] = t12;
+		$[100] = t43;
+		$[101] = t44;
+	} else t44 = $[101];
+	let t45;
+	if ($[102] !== Dialog || $[103] !== handleOpenChange || $[104] !== isOpen || $[105] !== t44) {
+		t45 = /* @__PURE__ */ jsx(Dialog, {
 			open: isOpen,
 			onOpenChange: handleOpenChange,
-			children: t49
+			children: t44
 		});
-		$[114] = Dialog;
-		$[115] = handleOpenChange;
-		$[116] = isOpen;
-		$[117] = t49;
-		$[118] = t50;
-	} else t50 = $[118];
-	return t50;
+		$[102] = Dialog;
+		$[103] = handleOpenChange;
+		$[104] = isOpen;
+		$[105] = t44;
+		$[106] = t45;
+	} else t45 = $[106];
+	return t45;
 }
 //#endregion
 export { TablePropertiesDialog_exports as n, TablePropertiesDialog as t };

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-yY4eNo9i.js";
+import { c as DocxEditorRef, i as renderAsync, n as EditorHandle, r as RenderAsyncOptions, s as DocxEditorProps, t as DocxEditorHandle } from "../renderAsync-CpeG0afF.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-dUCMzc_W.js";
+import { n as DocxEditor$1, t as renderAsync } from "../renderAsync-D5P4hvJg.js";
 import { t as messages_exports } from "../messages.js";
 import { c } from "react-compiler-runtime";
 import { forwardRef } from "react";

package/dist/dialogs.js

@@ -5,5 +5,5 @@ import { t as ImagePositionDialog } from "./ImagePositionDialog-DNodkoI2.js";
 import { t as ImagePropertiesDialog } from "./ImagePropertiesDialog-CLsDIUWb.js";
 import { t as InsertSymbolDialog } from "./InsertSymbolDialog-DCFLmfzn.js";
 import { t as PageSetupDialog } from "./PageSetupDialog-COkgeOQn.js";
-import { t as TablePropertiesDialog } from "./TablePropertiesDialog-BW4RRZLZ.js";
+import { t as TablePropertiesDialog } from "./TablePropertiesDialog-DOUiX1KZ.js";
 export { FindReplaceDialog, FootnotePropertiesDialog, HyperlinkDialog, ImagePositionDialog, ImagePropertiesDialog, InsertImageDialog, InsertSymbolDialog, InsertTableDialog, PageSetupDialog, PasteSpecialDialog, SplitCellDialog, TablePropertiesDialog, WatermarkDialog };