@underverse-ui/underverse 1.0.125 → 1.0.126

package/dist/index.cjs

@@ -874,6 +874,9 @@ var en_default = {
       accent: "Accent",
       textColor: "Text Color",
       highlight: "Highlight",
+      automatic: "Automatic",
+      moreColors: "More Colors...",
+      color: "Color",
       done: "Done"
     },
     toolbar: {
@@ -888,6 +891,7 @@ var en_default = {
       subscript: "Subscript",
       superscript: "Superscript",
       link: "Link",
+      removeLink: "Remove Link",
       image: "Insert Image",
       table: "Insert Table",
       alignment: "Alignment",
@@ -1139,6 +1143,9 @@ var vi_default = {
       accent: "Nh\u1EA5n",
       textColor: "M\xE0u ch\u1EEF",
       highlight: "N\u1ED5i b\u1EADt",
+      automatic: "T\u1EF1 \u0111\u1ED9ng",
+      moreColors: "Th\xEAm m\xE0u...",
+      color: "M\xE0u",
       done: "Xong"
     },
     toolbar: {
@@ -1153,6 +1160,7 @@ var vi_default = {
       subscript: "Ch\u1EC9 s\u1ED1 d\u01B0\u1EDBi",
       superscript: "Ch\u1EC9 s\u1ED1 tr\xEAn",
       link: "Li\xEAn k\u1EBFt",
+      removeLink: "G\u1EE1 li\xEAn k\u1EBFt",
       image: "Ch\xE8n \u1EA3nh",
       table: "Ch\xE8n b\u1EA3ng",
       alignment: "C\u0103n ch\u1EC9nh",
@@ -1404,6 +1412,9 @@ var ko_default = {
       accent: "\uAC15\uC870",
       textColor: "\uD14D\uC2A4\uD2B8 \uC0C9\uC0C1",
       highlight: "\uD615\uAD11\uD39C",
+      automatic: "\uC790\uB3D9",
+      moreColors: "\uB2E4\uB978 \uC0C9...",
+      color: "\uC0C9\uC0C1",
       done: "\uC644\uB8CC"
     },
     toolbar: {
@@ -1418,6 +1429,7 @@ var ko_default = {
       subscript: "\uC544\uB798 \uCCA8\uC790",
       superscript: "\uC704 \uCCA8\uC790",
       link: "\uB9C1\uD06C",
+      removeLink: "\uB9C1\uD06C \uC81C\uAC70",
       image: "\uC774\uBBF8\uC9C0",
       table: "\uD45C",
       alignment: "\uC815\uB82C",
@@ -1668,6 +1680,9 @@ var ja_default = {
       accent: "\u30A2\u30AF\u30BB\u30F3\u30C8",
       textColor: "\u30C6\u30AD\u30B9\u30C8\u8272",
       highlight: "\u30CF\u30A4\u30E9\u30A4\u30C8",
+      automatic: "\u81EA\u52D5",
+      moreColors: "\u305D\u306E\u4ED6\u306E\u8272...",
+      color: "\u8272",
       done: "\u5B8C\u4E86"
     },
     toolbar: {
@@ -1682,6 +1697,7 @@ var ja_default = {
       subscript: "\u4E0B\u4ED8\u304D",
       superscript: "\u4E0A\u4ED8\u304D",
       link: "\u30EA\u30F3\u30AF",
+      removeLink: "\u30EA\u30F3\u30AF\u3092\u89E3\u9664",
       image: "\u753B\u50CF",
       table: "\u8868",
       alignment: "\u914D\u7F6E",
@@ -23986,8 +24002,8 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-var import_react54 = __toESM(require("react"), 1);
-var import_react55 = require("@tiptap/react");
+var import_react56 = __toESM(require("react"), 1);
+var import_react57 = require("@tiptap/react");
 
 // src/components/UEditor/extensions.ts
 var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
@@ -25440,12 +25456,113 @@ function buildUEditorExtensions({
 
 // src/components/UEditor/toolbar.tsx
 var import_react49 = __toESM(require("react"), 1);
+var import_react_dom8 = require("react-dom");
+var import_react50 = require("@tiptap/react");
 var import_lucide_react44 = require("lucide-react");
 
 // src/components/UEditor/colors.tsx
 var import_react47 = require("react");
 var import_lucide_react42 = require("lucide-react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
+var TextColorIcon = ({ color }) => {
+  const underlineColor = color && color !== "inherit" ? color : "currentColor";
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-[15px] font-semibold leading-none", children: "A" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute bottom-0 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full",
+        style: { backgroundColor: underlineColor }
+      }
+    )
+  ] });
+};
+var HighlightColorIcon = ({ color }) => {
+  const underlineColor = color || "currentColor";
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react42.Highlighter, { className: "h-4 w-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "absolute bottom-0 left-1/2 h-0.5 w-4 -translate-x-1/2 rounded-full",
+        style: { backgroundColor: underlineColor }
+      }
+    )
+  ] });
+};
+var EDITOR_COLOR_SWATCHES = [
+  "#000000",
+  "#3f3f46",
+  "#713f12",
+  "#14532d",
+  "#164e63",
+  "#1e3a8a",
+  "#3730a3",
+  "#404040",
+  "#b91c1c",
+  "#c2410c",
+  "#a16207",
+  "#15803d",
+  "#0f766e",
+  "#2563eb",
+  "#4f46e5",
+  "#737373",
+  "#ef4444",
+  "#f97316",
+  "#eab308",
+  "#22c55e",
+  "#14b8a6",
+  "#3b82f6",
+  "#7c3aed",
+  "#a3a3a3",
+  "#f43f5e",
+  "#f59e0b",
+  "#facc15",
+  "#00e676",
+  "#22d3ee",
+  "#06b6d4",
+  "#be185d",
+  "#bdbdbd",
+  "#f9a8d4",
+  "#fecaca",
+  "#fde68a",
+  "#bbf7d0",
+  "#a7f3d0",
+  "#bae6fd",
+  "#c4b5fd",
+  "#f5f5f5"
+];
+var HIGHLIGHT_COLOR_SWATCHES = [
+  "#fef08a",
+  "#fde68a",
+  "#fed7aa",
+  "#fecaca",
+  "#fbcfe8",
+  "#e9d5ff",
+  "#c7d2fe",
+  "#bfdbfe",
+  "#bae6fd",
+  "#ccfbf1",
+  "#bbf7d0",
+  "#d9f99d",
+  "#e5e7eb",
+  "#fca5a5",
+  "#fdba74",
+  "#facc15",
+  "#86efac",
+  "#5eead4",
+  "#7dd3fc",
+  "#a5b4fc",
+  "#d8b4fe",
+  "#f0abfc",
+  "#f9a8d4",
+  "#d4d4d4"
+];
+function buildColorOptions(colors, prefix) {
+  return colors.map((color, index) => ({ name: `${prefix} ${index + 1}`, color }));
+}
 var useEditorColors = () => {
   const t = useSmartTranslations("UEditor");
   const textColors = (0, import_react47.useMemo)(
@@ -25457,7 +25574,8 @@ var useEditorColors = () => {
       { name: t("colors.success"), color: "var(--success)", cssClass: "text-success" },
       { name: t("colors.warning"), color: "var(--warning)", cssClass: "text-warning" },
       { name: t("colors.destructive"), color: "var(--destructive)", cssClass: "text-destructive" },
-      { name: t("colors.info"), color: "var(--info)", cssClass: "text-info" }
+      { name: t("colors.info"), color: "var(--info)", cssClass: "text-info" },
+      ...buildColorOptions(EDITOR_COLOR_SWATCHES, t("colors.color"))
     ],
     [t]
   );
@@ -25471,7 +25589,8 @@ var useEditorColors = () => {
       { name: t("colors.warning"), color: "color-mix(in oklch, var(--warning) 20%, transparent)", cssClass: "bg-warning/20" },
       { name: t("colors.destructive"), color: "color-mix(in oklch, var(--destructive) 20%, transparent)", cssClass: "bg-destructive/20" },
       { name: t("colors.info"), color: "color-mix(in oklch, var(--info) 20%, transparent)", cssClass: "bg-info/20" },
-      { name: t("colors.accent"), color: "var(--accent)", cssClass: "bg-accent" }
+      { name: t("colors.accent"), color: "var(--accent)", cssClass: "bg-accent" },
+      ...buildColorOptions(HIGHLIGHT_COLOR_SWATCHES, t("colors.color"))
     ],
     [t]
   );
@@ -25482,26 +25601,81 @@ var EditorColorPalette = ({
   currentColor,
   onSelect,
   label
-}) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "p-2", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
-    "button",
-    {
-      type: "button",
-      onMouseDown: (e) => e.preventDefault(),
-      onClick: () => onSelect(c.color),
-      className: cn(
-        "flex items-center justify-center w-9 h-9 rounded-lg border-2 transition-all hover:scale-105",
-        currentColor === c.color ? "border-primary ring-2 ring-primary/20" : "border-border/50 hover:border-primary/50"
-      ),
-      style: { backgroundColor: c.color || "transparent" },
-      children: [
-        c.color === "" && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react42.X, { className: "w-4 h-4 text-muted-foreground" }),
-        c.color === "inherit" && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: "A" })
-      ]
-    }
-  ) }, c.name)) })
-] });
+}) => {
+  const t = useSmartTranslations("UEditor");
+  const colorInputRef = (0, import_react47.useRef)(null);
+  const automaticColor = colors[0]?.color ?? "";
+  const paletteColors = colors.slice(1);
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "w-56 p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onSelect(automaticColor),
+        className: cn(
+          "mt-2 flex h-9 w-full items-center gap-3 rounded-md border px-2 text-sm transition-colors",
+          "bg-muted/50 hover:bg-muted",
+          currentColor === automaticColor ? "border-primary text-primary" : "border-transparent text-foreground"
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "flex h-5 w-5 items-center justify-center rounded border border-border bg-background", children: currentColor === automaticColor && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react42.Check, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "flex-1 text-center", children: t("colors.automatic") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "mt-2 grid grid-cols-8 gap-1", children: paletteColors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": c.name,
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => onSelect(c.color),
+        className: cn(
+          "relative h-5 w-5 rounded-[3px] border transition-transform hover:scale-110",
+          currentColor === c.color ? "border-primary ring-2 ring-primary/25" : "border-border/70"
+        ),
+        style: { backgroundColor: c.color || "transparent" },
+        children: currentColor === c.color && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react42.Check, { className: "h-3.5 w-3.5 text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.8)]" }) })
+      }
+    ) }, `${c.name}-${c.color}`)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => colorInputRef.current?.click(),
+        className: "mt-3 flex h-9 w-full items-center gap-3 rounded-md px-2 text-sm text-foreground transition-colors hover:bg-muted",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "h-5 w-5 rounded border border-border",
+              style: {
+                background: "linear-gradient(135deg, #ff004c 0%, #fffb00 22%, #00ff66 42%, #00d5ff 62%, #2446ff 78%, #ff00d4 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "flex-1 text-center", children: t("colors.moreColors") }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react42.Palette, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            "input",
+            {
+              ref: colorInputRef,
+              type: "color",
+              value: currentColor.startsWith("#") ? currentColor : "#000000",
+              onChange: (event) => onSelect(event.target.value),
+              className: "sr-only",
+              tabIndex: -1
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
 
 // src/components/UEditor/image-commands.ts
 var import_state4 = require("@tiptap/pm/state");
@@ -25713,12 +25887,23 @@ function getDefaultFontFamilies(t) {
 }
 function getDefaultFontSizes() {
   return [
+    { label: "8", value: "8px" },
+    { label: "9", value: "9px" },
+    { label: "10", value: "10px" },
+    { label: "11", value: "11px" },
     { label: "12", value: "12px" },
     { label: "14", value: "14px" },
     { label: "16", value: "16px" },
     { label: "18", value: "18px" },
+    { label: "20", value: "20px" },
+    { label: "22", value: "22px" },
     { label: "24", value: "24px" },
-    { label: "32", value: "32px" }
+    { label: "26", value: "26px" },
+    { label: "28", value: "28px" },
+    { label: "36", value: "36px" },
+    { label: "48", value: "48px" },
+    { label: "72", value: "72px" },
+    { label: "96", value: "96px" }
   ];
 }
 function getDefaultLineHeights() {
@@ -25766,10 +25951,11 @@ var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, a
       onClick,
       disabled,
       className: cn(
-        "flex items-center justify-center w-8 h-8 rounded-lg transition-all duration-200",
-        "hover:bg-accent hover:scale-105",
+        "flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-150",
+        "gap-0.5 [&_svg+svg]:-ml-1",
+        "hover:bg-accent",
         "focus:outline-none focus:ring-2 focus:ring-primary/20",
-        "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100",
+        "disabled:opacity-40 disabled:cursor-not-allowed",
         active ? "bg-primary/10 text-primary shadow-sm" : "text-muted-foreground hover:text-foreground",
         className
       ),
@@ -25782,7 +25968,7 @@ var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, a
   return button;
 });
 ToolbarButton.displayName = "ToolbarButton";
-var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mx-0.5 h-5 w-px bg-border/60" });
 var TableInsertGrid = ({
   insertLabel,
   previewTemplate,
@@ -25793,36 +25979,29 @@ var TableInsertGrid = ({
   const maxCols = 8;
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "mb-2 rounded-xl border border-border/60 bg-muted/20 p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-2 text-sm font-medium text-foreground", children: formatTableInsertLabel(previewTemplate, selection.rows, selection.cols) }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      "div",
-      {
-        className: "grid grid-cols-8 gap-1",
-        onMouseLeave: () => setSelection((prev) => prev),
-        children: Array.from({ length: maxRows }).map(
-          (_, rowIndex) => Array.from({ length: maxCols }).map((__, colIndex) => {
-            const rows = rowIndex + 1;
-            const cols = colIndex + 1;
-            const active = rows <= selection.rows && cols <= selection.cols;
-            return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-              "button",
-              {
-                type: "button",
-                "aria-label": formatTableInsertLabel(previewTemplate, rows, cols),
-                onMouseDown: (e) => e.preventDefault(),
-                onMouseEnter: () => setSelection({ rows, cols }),
-                onFocus: () => setSelection({ rows, cols }),
-                onClick: () => onInsert(rows, cols),
-                className: cn(
-                  "h-5 w-5 rounded-sm border transition-colors",
-                  active ? "border-primary bg-primary/20" : "border-border/70 bg-background hover:border-primary/60 hover:bg-primary/10"
-                )
-              },
-              `${rows}-${cols}`
-            );
-          })
-        )
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "grid grid-cols-8 gap-1", onMouseLeave: () => setSelection((prev) => prev), children: Array.from({ length: maxRows }).map(
+      (_, rowIndex) => Array.from({ length: maxCols }).map((__, colIndex) => {
+        const rows = rowIndex + 1;
+        const cols = colIndex + 1;
+        const active = rows <= selection.rows && cols <= selection.cols;
+        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": formatTableInsertLabel(previewTemplate, rows, cols),
+            onMouseDown: (e) => e.preventDefault(),
+            onMouseEnter: () => setSelection({ rows, cols }),
+            onFocus: () => setSelection({ rows, cols }),
+            onClick: () => onInsert(rows, cols),
+            className: cn(
+              "h-5 w-5 rounded-sm border transition-colors",
+              active ? "border-primary bg-primary/20" : "border-border/70 bg-background hover:border-primary/60 hover:bg-primary/10"
+            )
+          },
+          `${rows}-${cols}`
+        );
+      })
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mt-2 text-xs text-muted-foreground", children: insertLabel })
   ] });
 };
@@ -25839,14 +26018,23 @@ var EditorToolbar = ({
   letterSpacings
 }) => {
   const t = useSmartTranslations("UEditor");
+  (0, import_react50.useEditorState)({
+    editor,
+    selector: ({ transactionNumber }) => transactionNumber
+  });
   const { textColors, highlightColors } = useEditorColors();
   const [showImageInput, setShowImageInput] = (0, import_react49.useState)(false);
+  const [showLinkInput, setShowLinkInput] = (0, import_react49.useState)(false);
   const [isTableMenuOpen, setIsTableMenuOpen] = (0, import_react49.useState)(false);
   const tableCommandAnchorPosRef = (0, import_react49.useRef)(null);
   const fileInputRef = (0, import_react49.useRef)(null);
   const [isUploadingImage, setIsUploadingImage] = (0, import_react49.useState)(false);
   const [imageUploadError, setImageUploadError] = (0, import_react49.useState)(null);
   const [fontSizeDraft, setFontSizeDraft] = (0, import_react49.useState)("");
+  const [isFontSizeMenuOpen, setIsFontSizeMenuOpen] = (0, import_react49.useState)(false);
+  const [fontSizeMenuPosition, setFontSizeMenuPosition] = (0, import_react49.useState)({ top: 0, left: 0 });
+  const fontSizeControlRef = (0, import_react49.useRef)(null);
+  const fontSizeMenuRef = (0, import_react49.useRef)(null);
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
   const tableAttrs = editor.getAttributes("table");
@@ -25858,30 +26046,23 @@ var EditorToolbar = ({
   const hasTableContext = isTableSelected || tableCommandAnchorPosRef.current !== null;
   const currentFontFamily = normalizeStyleValue(textStyleAttrs.fontFamily);
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
+  const currentTextColor = normalizeStyleValue(textStyleAttrs.color) || "inherit";
+  const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
   const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
   const currentLetterSpacing = normalizeStyleValue(textStyleAttrs.letterSpacing);
-  const availableFontFamilies = import_react49.default.useMemo(
-    () => fontFamilies ?? getDefaultFontFamilies(t),
-    [fontFamilies, t]
-  );
-  const availableFontSizes = import_react49.default.useMemo(
-    () => fontSizes ?? getDefaultFontSizes(),
-    [fontSizes]
-  );
-  const availableLineHeights = import_react49.default.useMemo(
-    () => lineHeights ?? getDefaultLineHeights(),
-    [lineHeights]
-  );
-  const availableLetterSpacings = import_react49.default.useMemo(
-    () => letterSpacings ?? getDefaultLetterSpacings(),
-    [letterSpacings]
-  );
-  const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? t("toolbar.fontDefault");
+  const availableFontFamilies = import_react49.default.useMemo(() => fontFamilies ?? getDefaultFontFamilies(t), [fontFamilies, t]);
+  const availableFontSizes = import_react49.default.useMemo(() => fontSizes ?? getDefaultFontSizes(), [fontSizes]);
+  const availableLineHeights = import_react49.default.useMemo(() => lineHeights ?? getDefaultLineHeights(), [lineHeights]);
+  const availableLetterSpacings = import_react49.default.useMemo(() => letterSpacings ?? getDefaultLetterSpacings(), [letterSpacings]);
+  const currentFontFamilyDisplayValue = currentFontFamily.split(",")[0]?.trim() ?? currentFontFamily;
+  const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? (currentFontFamilyDisplayValue || t("toolbar.fontDefault"));
   const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? t("toolbar.sizeDefault");
   const currentLineHeightLabel = availableLineHeights.find((option) => normalizeStyleValue(option.value) === currentLineHeight)?.label ?? t("toolbar.lineHeightDefault");
   const currentLetterSpacingLabel = availableLetterSpacings.find((option) => normalizeStyleValue(option.value) === currentLetterSpacing)?.label ?? t("toolbar.letterSpacingDefault");
+  const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : availableFontFamilies[0]?.label ?? t("toolbar.fontDefault");
   import_react49.default.useEffect(() => {
-    setFontSizeDraft(currentFontSize.replace(/px$/i, ""));
+    if (document.activeElement === fontSizeControlRef.current?.querySelector("input")) return;
+    setFontSizeDraft(currentFontSize.replace(/px$/i, "") || "16");
   }, [currentFontSize]);
   const applyFontSizeDraft = () => {
     const normalized = fontSizeDraft.trim();
@@ -25893,7 +26074,39 @@ var EditorToolbar = ({
     if (!Number.isFinite(parsed) || parsed <= 0) return;
     const clamped = Math.min(96, Math.max(8, parsed));
     editor.chain().focus().setFontSize(`${clamped}px`).run();
+    setFontSizeDraft(String(clamped));
+  };
+  const updateFontSizeMenuPosition = import_react49.default.useCallback(() => {
+    const rect = fontSizeControlRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setFontSizeMenuPosition({
+      top: Math.round(rect.bottom + 4),
+      left: Math.round(rect.left)
+    });
+  }, []);
+  const toggleFontSizeMenu = () => {
+    updateFontSizeMenuPosition();
+    setIsFontSizeMenuOpen((open) => !open);
   };
+  import_react49.default.useEffect(() => {
+    if (!isFontSizeMenuOpen) return;
+    updateFontSizeMenuPosition();
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (fontSizeControlRef.current?.contains(target)) return;
+      if (fontSizeMenuRef.current?.contains(target)) return;
+      setIsFontSizeMenuOpen(false);
+    };
+    const handleLayoutChange = () => updateFontSizeMenuPosition();
+    document.addEventListener("mousedown", handlePointerDown);
+    window.addEventListener("resize", handleLayoutChange);
+    window.addEventListener("scroll", handleLayoutChange, true);
+    return () => {
+      document.removeEventListener("mousedown", handlePointerDown);
+      window.removeEventListener("resize", handleLayoutChange);
+      window.removeEventListener("scroll", handleLayoutChange, true);
+    };
+  }, [isFontSizeMenuOpen, updateFontSizeMenuPosition]);
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -25915,7 +26128,7 @@ var EditorToolbar = ({
     setIsUploadingImage(false);
   };
   if (variant === "minimal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-1 border-b border-border/35 bg-muted/30 p-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Bold, { className: "w-4 h-4" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Italic, { className: "w-4 h-4" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -25929,70 +26142,23 @@ var EditorToolbar = ({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b bg-linear-to-r from-muted/30 to-transparent", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-      DropdownMenu,
-      {
-        contentClassName: "p-2",
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
-        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Type, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "w-3 h-3" })
-        ] }),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react44.Type,
-              label: t("toolbar.normal"),
-              onClick: () => editor.chain().focus().setParagraph().run(),
-              active: editor.isActive("paragraph")
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react44.Heading1,
-              label: t("toolbar.heading1"),
-              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-              active: editor.isActive("heading", { level: 1 }),
-              shortcut: "Ctrl+Alt+1"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react44.Heading2,
-              label: t("toolbar.heading2"),
-              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-              active: editor.isActive("heading", { level: 2 }),
-              shortcut: "Ctrl+Alt+2"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-            DropdownMenuItem,
-            {
-              icon: import_lucide_react44.Heading3,
-              label: t("toolbar.heading3"),
-              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-              active: editor.isActive("heading", { level: 3 }),
-              shortcut: "Ctrl+Alt+3"
-            }
-          )
-        ]
-      }
-    ),
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex flex-wrap items-center gap-0.5 border-b border-border/35 bg-linear-to-r from-muted/25 to-transparent p-1.5", children: [
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-          ToolbarButton,
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+          "button",
           {
-            onClick: () => {
-            },
-            title: t("toolbar.fontFamily"),
-            className: "relative",
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Type, { className: "w-4 h-4" })
+            type: "button",
+            "aria-label": t("toolbar.fontFamily"),
+            className: cn(
+              "flex h-8 min-w-34 max-w-42 items-center justify-between gap-2 rounded-full border border-border/60 bg-muted/30 px-2.5 text-xs text-foreground",
+              "transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary/20"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "truncate", children: displayedFontFamilyLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+            ]
           }
         ),
         contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
@@ -26012,30 +26178,24 @@ var EditorToolbar = ({
               label: option.label,
               onClick: () => editor.chain().focus().setFontFamily(option.value).run(),
               active: normalizeStyleValue(option.value) === currentFontFamily,
-              className: "font-medium"
+              className: "font-medium "
             },
             option.value
           ))
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-      DropdownMenu,
-      {
-        closeOnSelect: false,
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-          ToolbarButton,
-          {
-            onClick: () => {
-            },
-            title: t("toolbar.fontSize"),
-            className: "px-2 w-auto min-w-9",
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-[10px] font-semibold leading-none", children: currentFontSize.replace(/px$/i, "") || "T" })
-          }
-        ),
-        contentClassName: "max-h-80 overflow-y-auto min-w-44 p-2",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "mb-2 rounded-lg border border-border/60 bg-muted/30 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+        "div",
+        {
+          ref: fontSizeControlRef,
+          "aria-label": t("toolbar.fontSize"),
+          className: cn(
+            "flex h-8 min-w-16 items-center overflow-hidden rounded-full border border-border/60 bg-muted/30 text-xs font-semibold text-foreground",
+            "transition-colors focus-within:ring-2 focus-within:ring-primary/20"
+          ),
+          children: [
             /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
               "input",
               {
@@ -26045,6 +26205,7 @@ var EditorToolbar = ({
                 step: 1,
                 value: fontSizeDraft,
                 onChange: (e) => setFontSizeDraft(e.target.value),
+                onBlur: applyFontSizeDraft,
                 onMouseDown: (e) => e.stopPropagation(),
                 onClick: (e) => e.stopPropagation(),
                 onKeyDown: (e) => {
@@ -26055,48 +26216,116 @@ var EditorToolbar = ({
                   }
                 },
                 "aria-label": t("toolbar.fontSize"),
-                className: "h-8 w-full rounded-md border border-border bg-background px-2 text-sm outline-none focus:ring-2 focus:ring-primary/20"
+                className: "h-full w-10 bg-transparent px-1 text-center text-xs font-semibold outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-xs text-muted-foreground", children: "px" })
-          ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("toolbar.fontSize"),
+                "aria-expanded": isFontSizeMenuOpen,
+                onClick: toggleFontSizeMenu,
+                className: "flex h-full w-7 items-center justify-center border-l border-border/50 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        }
+      ),
+      isFontSizeMenuOpen && typeof document !== "undefined" && (0, import_react_dom8.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          "div",
+          {
+            ref: fontSizeMenuRef,
+            className: "fixed z-[10000] max-h-64 w-12 overflow-y-auto rounded-md border border-border/70 bg-popover p-0.5 text-popover-foreground shadow-md",
+            style: { top: fontSizeMenuPosition.top, left: fontSizeMenuPosition.left },
+            children: availableFontSizes.map((option) => {
+              const active = normalizeStyleValue(option.value) === currentFontSize;
+              return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => {
+                    editor.chain().focus().setFontSize(option.value).run();
+                    setFontSizeDraft(option.label);
+                    setIsFontSizeMenuOpen(false);
+                  },
+                  className: cn(
+                    "flex h-6 w-full items-center justify-center rounded text-xs leading-none transition-colors",
+                    active ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent hover:text-accent-foreground"
+                  ),
+                  children: option.label
+                },
+                option.value
+              );
+            })
+          }
+        ),
+        document.body
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+      DropdownMenu,
+      {
+        contentClassName: "p-2",
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Type, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "w-3 h-3" })
+        ] }),
+        children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
               icon: import_lucide_react44.Type,
-              label: t("toolbar.sizeDefault"),
-              onClick: () => editor.chain().focus().unsetFontSize().run(),
-              active: !currentFontSize
+              label: t("toolbar.normal"),
+              onClick: () => editor.chain().focus().setParagraph().run(),
+              active: editor.isActive("paragraph")
             }
           ),
-          availableFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
             {
-              label: option.label,
-              onClick: () => editor.chain().focus().setFontSize(option.value).run(),
-              active: normalizeStyleValue(option.value) === currentFontSize
-            },
-            option.value
-          ))
+              icon: import_lucide_react44.Heading1,
+              label: t("toolbar.heading1"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+              active: editor.isActive("heading", { level: 1 }),
+              shortcut: "Ctrl+Alt+1"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Heading2,
+              label: t("toolbar.heading2"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              active: editor.isActive("heading", { level: 2 }),
+              shortcut: "Ctrl+Alt+2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Heading3,
+              label: t("toolbar.heading3"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+              active: editor.isActive("heading", { level: 3 }),
+              shortcut: "Ctrl+Alt+3"
+            }
+          )
         ]
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-          ToolbarButton,
-          {
-            onClick: () => {
-            },
-            title: t("toolbar.lineHeight"),
-            className: "gap-0.5",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowUp, { className: "w-3 h-3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowDown, { className: "w-3 h-3" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.lineHeight"), className: "gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowUp, { className: "w-3 h-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowDown, { className: "w-3 h-3" })
+        ] }),
         contentClassName: "max-h-72 overflow-y-auto p-2",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -26123,19 +26352,11 @@ var EditorToolbar = ({
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-          ToolbarButton,
-          {
-            onClick: () => {
-            },
-            title: t("toolbar.letterSpacing"),
-            className: "gap-0.5",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowLeft, { className: "w-3 h-3" }),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowRight, { className: "w-3 h-3" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.letterSpacing"), className: "gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowLeft, { className: "w-3 h-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowRight, { className: "w-3 h-3" })
+        ] }),
         contentClassName: "max-h-72 overflow-y-auto p-2",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -26173,20 +26394,68 @@ var EditorToolbar = ({
     ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Strikethrough, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Code, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSubscript().run(),
+        active: editor.isActive("subscript"),
+        title: t("toolbar.subscript"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Subscript, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSuperscript().run(),
+        active: editor.isActive("superscript"),
+        title: t("toolbar.superscript"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Superscript, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+      DropdownMenu,
+      {
+        contentClassName: "min-w-72",
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => setShowLinkInput(!editor.isActive("link")), active: editor.isActive("link"), title: t("toolbar.link"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Link, { className: "w-4 h-4" }) }),
+        children: showLinkInput ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          LinkInput,
+          {
+            initialUrl: String(editor.getAttributes("link").href ?? ""),
+            onSubmit: (url) => {
+              editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+              setShowLinkInput(false);
+            },
+            onCancel: () => setShowLinkInput(false)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(DropdownMenuItem, { icon: import_lucide_react44.Link, label: t("toolbar.link"), onClick: () => setShowLinkInput(true), active: editor.isActive("link") }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Trash2,
+              label: t("toolbar.removeLink"),
+              onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
+              disabled: !editor.isActive("link"),
+              destructive: true
+            }
+          )
+        ] })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       DropdownMenu,
       {
         trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, title: t("colors.textColor"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Palette, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TextColorIcon, { color: currentTextColor }),
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           EditorColorPalette,
           {
             colors: textColors,
-            currentColor: editor.getAttributes("textStyle").color || "inherit",
+            currentColor: currentTextColor,
             onSelect: (color) => {
               if (color === "inherit") {
                 editor.chain().focus().unsetColor().run();
@@ -26204,14 +26473,14 @@ var EditorToolbar = ({
       {
         trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
         }, active: editor.isActive("highlight"), title: t("colors.highlight"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Highlighter, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(HighlightColorIcon, { color: currentHighlightColor }),
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "w-3 h-3" })
         ] }),
         children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           EditorColorPalette,
           {
             colors: highlightColors,
-            currentColor: editor.getAttributes("highlight").color || "",
+            currentColor: currentHighlightColor,
             onSelect: (color) => {
               if (color === "") {
                 editor.chain().focus().unsetHighlight().run();
@@ -26636,41 +26905,23 @@ var EditorToolbar = ({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().toggleSubscript().run(),
-        active: editor.isActive("subscript"),
-        title: t("toolbar.subscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Subscript, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().toggleSuperscript().run(),
-        active: editor.isActive("superscript"),
-        title: t("toolbar.superscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Superscript, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarDivider, {}),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Undo, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Redo, { className: "w-4 h-4" }) })
   ] });
 };
 
 // src/components/UEditor/menus.tsx
-var import_react50 = require("react");
-var import_react_dom8 = require("react-dom");
+var import_react51 = require("react");
+var import_react52 = require("@tiptap/react");
+var import_react_dom9 = require("react-dom");
 var import_lucide_react45 = require("lucide-react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var FloatingSlashCommandMenu = ({ editor, onClose }) => {
   const t = useSmartTranslations("UEditor");
-  const messages = (0, import_react50.useMemo)(() => buildSlashCommandMessages(t), [t]);
-  const items = (0, import_react50.useMemo)(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = (0, import_react50.useRef)(null);
-  (0, import_react50.useEffect)(() => {
+  const messages = (0, import_react51.useMemo)(() => buildSlashCommandMessages(t), [t]);
+  const items = (0, import_react51.useMemo)(() => buildSlashCommandItems({ query: "", messages }), [messages]);
+  const listRef = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -26700,7 +26951,7 @@ var FloatingSlashCommandMenu = ({ editor, onClose }) => {
 };
 var FloatingMenuContent = ({ editor }) => {
   const t = useSmartTranslations("UEditor");
-  const [showCommands, setShowCommands] = (0, import_react50.useState)(false);
+  const [showCommands, setShowCommands] = (0, import_react51.useState)(false);
   if (showCommands) {
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(FloatingSlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
   }
@@ -26724,28 +26975,52 @@ var BubbleMenuContent = ({
   lineHeights
 }) => {
   const t = useSmartTranslations("UEditor");
+  (0, import_react52.useEditorState)({
+    editor,
+    selector: ({ transactionNumber }) => transactionNumber
+  });
   const { textColors, highlightColors } = useEditorColors();
-  const [showLinkInput, setShowLinkInput] = (0, import_react50.useState)(false);
-  const [showEditorColorPalette, setShowEditorColorPalette] = (0, import_react50.useState)(false);
+  const [showLinkInput, setShowLinkInput] = (0, import_react51.useState)(false);
+  const [activeColorPalette, setActiveColorPalette] = (0, import_react51.useState)(null);
+  const [showTypographyPanel, setShowTypographyPanel] = (0, import_react51.useState)(false);
+  const [showFontSizeOptions, setShowFontSizeOptions] = (0, import_react51.useState)(false);
+  const [fontSizeDraft, setFontSizeDraft] = (0, import_react51.useState)("");
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
   const imageLayout = imageAttrs.imageLayout === "left" || imageAttrs.imageLayout === "right" ? imageAttrs.imageLayout : "block";
   const imageWidthPreset = imageAttrs.imageWidthPreset === "sm" || imageAttrs.imageWidthPreset === "md" || imageAttrs.imageWidthPreset === "lg" ? imageAttrs.imageWidthPreset : null;
   const textStyleAttrs = editor.getAttributes("textStyle");
+  const currentTextColor = normalizeStyleValue(textStyleAttrs.color) || "inherit";
+  const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
   const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
-  const quickFontSizes = (0, import_react50.useMemo)(
+  const quickFontSizes = (0, import_react51.useMemo)(
     () => (fontSizes ?? getDefaultFontSizes()).filter((option) => ["14px", "16px", "24px"].includes(option.value)),
     [fontSizes]
   );
-  const quickLineHeights = (0, import_react50.useMemo)(
+  const quickLineHeights = (0, import_react51.useMemo)(
     () => (lineHeights ?? getDefaultLineHeights()).filter((option) => ["1.2", "1.5", "1.75"].includes(option.value)),
     [lineHeights]
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
+    setFontSizeDraft(currentFontSize.replace(/px$/i, ""));
+  }, [currentFontSize]);
+  const applyFontSizeDraft = () => {
+    const normalized = fontSizeDraft.trim();
+    if (!normalized) {
+      editor.chain().focus().unsetFontSize().run();
+      return;
+    }
+    const parsed = Number.parseFloat(normalized);
+    if (!Number.isFinite(parsed) || parsed <= 0) return;
+    const clamped = Math.min(96, Math.max(8, parsed));
+    editor.chain().focus().setFontSize(`${clamped}px`).run();
+    setFontSizeDraft(String(clamped));
+  };
+  (0, import_react51.useEffect)(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!showLinkInput) return;
     const close2 = () => setShowLinkInput(false);
     editor.on("selectionUpdate", close2);
@@ -26772,44 +27047,37 @@ var BubbleMenuContent = ({
       }
     );
   }
-  if (showEditorColorPalette) {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-48", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-        EditorColorPalette,
-        {
-          colors: textColors,
-          currentColor: editor.getAttributes("textStyle").color || "inherit",
-          onSelect: (color) => {
-            if (color === "inherit") {
-              editor.chain().focus().unsetColor().run();
-            } else {
-              editor.chain().focus().setColor(color).run();
-            }
-          },
-          label: t("colors.textColor")
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "border-t my-1" }),
+  if (activeColorPalette) {
+    const isTextPalette = activeColorPalette === "text";
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-56", children: [
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         EditorColorPalette,
         {
-          colors: highlightColors,
-          currentColor: editor.getAttributes("highlight").color || "",
+          colors: isTextPalette ? textColors : highlightColors,
+          currentColor: isTextPalette ? currentTextColor : currentHighlightColor,
           onSelect: (color) => {
-            if (color === "") {
-              editor.chain().focus().unsetHighlight().run();
+            if (isTextPalette) {
+              if (color === "inherit") {
+                editor.chain().focus().unsetColor().run();
+              } else {
+                editor.chain().focus().setColor(color).run();
+              }
             } else {
-              editor.chain().focus().toggleHighlight({ color }).run();
+              if (color === "") {
+                editor.chain().focus().unsetHighlight().run();
+              } else {
+                editor.chain().focus().toggleHighlight({ color }).run();
+              }
             }
           },
-          label: t("colors.highlight")
+          label: isTextPalette ? t("colors.textColor") : t("colors.highlight")
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "p-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "button",
         {
           type: "button",
-          onClick: () => setShowEditorColorPalette(false),
+          onClick: () => setActiveColorPalette(null),
           className: "w-full py-1.5 text-sm rounded-lg hover:bg-muted transition-colors",
           children: t("colors.done")
         }
@@ -26830,6 +27098,162 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => deleteSelectedImage(editor), title: t("toolbar.imageDelete"), className: "text-destructive hover:text-destructive", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Trash2, { className: "w-4 h-4" }) })
     ] });
   }
+  if (showTypographyPanel) {
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-72 p-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t("toolbar.textStyle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setShowTypographyPanel(false),
+            className: "rounded-md px-2 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+            children: t("colors.done")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("toolbar.fontSize") }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border/60 bg-muted/40", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "input",
+              {
+                type: "number",
+                min: 8,
+                max: 96,
+                step: 1,
+                value: fontSizeDraft,
+                onChange: (event) => setFontSizeDraft(event.target.value),
+                onBlur: applyFontSizeDraft,
+                onMouseDown: (event) => event.stopPropagation(),
+                onClick: (event) => event.stopPropagation(),
+                onKeyDown: (event) => {
+                  event.stopPropagation();
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    applyFontSizeDraft();
+                  }
+                },
+                "aria-label": t("toolbar.fontSize"),
+                placeholder: "A",
+                className: "h-full min-w-0 flex-1 bg-transparent px-2 text-center text-sm font-semibold text-foreground outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "border-l border-border/50 px-2 text-[11px] text-muted-foreground", children: "px" }),
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("toolbar.fontSize"),
+                onClick: () => setShowFontSizeOptions((open) => !open),
+                className: cn(
+                  "flex h-full w-9 items-center justify-center border-l border-border/50 transition-colors hover:bg-muted",
+                  showFontSizeOptions && "bg-primary/10 text-primary"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.ChevronDown, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          showFontSizeOptions && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "mt-1 grid grid-cols-4 gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  editor.chain().focus().unsetFontSize().run();
+                  setShowFontSizeOptions(false);
+                },
+                className: cn(
+                  "h-8 rounded-md text-xs font-semibold transition-colors hover:bg-muted",
+                  !currentFontSize ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+                ),
+                children: "A"
+              }
+            ),
+            quickFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  editor.chain().focus().setFontSize(option.value).run();
+                  setShowFontSizeOptions(false);
+                },
+                className: cn(
+                  "h-8 rounded-md text-xs font-semibold transition-colors hover:bg-muted",
+                  normalizeStyleValue(option.value) === currentFontSize ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+                ),
+                children: option.label
+              },
+              option.value
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("toolbar.lineHeight") }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "grid grid-cols-4 gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => editor.chain().focus().unsetLineHeight().run(),
+                className: cn(
+                  "h-8 rounded-md text-xs font-semibold transition-colors hover:bg-muted",
+                  !currentLineHeight ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+                ),
+                children: "LH"
+              }
+            ),
+            quickLineHeights.map((option) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => editor.chain().focus().setLineHeight(option.value).run(),
+                className: cn(
+                  "h-8 rounded-md text-xs font-semibold transition-colors hover:bg-muted",
+                  normalizeStyleValue(option.value) === currentLineHeight ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+                ),
+                children: option.label
+              },
+              option.value
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "grid grid-cols-2 gap-1 border-t border-border/40 pt-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().toggleSubscript().run(),
+              className: cn(
+                "flex h-8 items-center justify-center gap-2 rounded-md text-xs font-semibold transition-colors hover:bg-muted",
+                editor.isActive("subscript") ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Subscript, { className: "h-4 w-4" }),
+                t("toolbar.subscript")
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => editor.chain().focus().toggleSuperscript().run(),
+              className: cn(
+                "flex h-8 items-center justify-center gap-2 rounded-md text-xs font-semibold transition-colors hover:bg-muted",
+                editor.isActive("superscript") ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Superscript, { className: "h-4 w-4" }),
+                t("toolbar.superscript")
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center gap-0.5 p-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Bold, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Italic, { className: "w-4 h-4" }) }),
@@ -26859,68 +27283,16 @@ var BubbleMenuContent = ({
         children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Link, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Palette, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().unsetFontSize().run(),
-        active: !currentFontSize,
-        title: t("toolbar.sizeDefault"),
-        className: "px-2 w-auto",
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-[10px] font-semibold", children: "A" })
-      }
-    ),
-    quickFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().setFontSize(option.value).run(),
-        active: normalizeStyleValue(option.value) === currentFontSize,
-        title: `${t("toolbar.fontSize")} ${option.label}`,
-        className: "px-2 w-auto",
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-[10px] font-semibold", children: option.label })
-      },
-      option.value
-    )),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().unsetLineHeight().run(),
-        active: !currentLineHeight,
-        title: t("toolbar.lineHeightDefault"),
-        className: "px-2 w-auto",
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-[10px] font-semibold leading-none", children: "LH" })
-      }
-    ),
-    quickLineHeights.map((option) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().setLineHeight(option.value).run(),
-        active: normalizeStyleValue(option.value) === currentLineHeight,
-        title: `${t("toolbar.lineHeight")} ${option.label}`,
-        className: "px-2 w-auto",
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-[10px] font-semibold", children: option.label })
-      },
-      option.value
-    )),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setActiveColorPalette("text"), title: t("colors.textColor"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TextColorIcon, { color: currentTextColor }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setActiveColorPalette("highlight"), active: editor.isActive("highlight"), title: t("colors.highlight"), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(HighlightColorIcon, { color: currentHighlightColor }) }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
-        onClick: () => editor.chain().focus().toggleSubscript().run(),
-        active: editor.isActive("subscript"),
-        title: t("toolbar.subscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Subscript, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().toggleSuperscript().run(),
-        active: editor.isActive("superscript"),
-        title: t("toolbar.superscript"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Superscript, { className: "w-4 h-4" })
+        onClick: () => setShowTypographyPanel(true),
+        active: Boolean(currentFontSize || currentLineHeight || editor.isActive("subscript") || editor.isActive("superscript")),
+        title: t("toolbar.textStyle"),
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react45.Type, { className: "w-4 h-4" })
       }
     )
   ] });
@@ -26932,16 +27304,16 @@ var CustomBubbleMenu = ({
 }) => {
   const SHOW_DELAY_MS = 180;
   const BUBBLE_MENU_OFFSET = 16;
-  const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
-  const [position, setPosition] = (0, import_react50.useState)({ top: 0, left: 0 });
-  const menuRef = (0, import_react50.useRef)(null);
-  const keepOpenRef = (0, import_react50.useRef)(false);
-  const showTimeoutRef = (0, import_react50.useRef)(null);
-  const setKeepOpen = (0, import_react50.useCallback)((next) => {
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(false);
+  const [position, setPosition] = (0, import_react51.useState)({ top: 0, left: 0 });
+  const menuRef = (0, import_react51.useRef)(null);
+  const keepOpenRef = (0, import_react51.useRef)(false);
+  const showTimeoutRef = (0, import_react51.useRef)(null);
+  const setKeepOpen = (0, import_react51.useCallback)((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
   }, []);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const clearShowTimeout = () => {
       if (showTimeoutRef.current) {
         clearTimeout(showTimeoutRef.current);
@@ -26989,12 +27361,12 @@ var CustomBubbleMenu = ({
     };
   }, [editor]);
   if (!isVisible) return null;
-  return (0, import_react_dom8.createPortal)(
+  return (0, import_react_dom9.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         ref: menuRef,
-        className: "fixed z-50 flex rounded-2xl border border-border/50 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
+        className: "fixed z-50 flex rounded-xl border border-border/40 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 zoom-in-95",
         style: {
           top: `${position.top}px`,
           left: `${position.left}px`,
@@ -27017,9 +27389,9 @@ var CustomBubbleMenu = ({
 };
 var CustomFloatingMenu = ({ editor }) => {
   const FLOATING_MENU_OFFSET = 16;
-  const [isVisible, setIsVisible] = (0, import_react50.useState)(false);
-  const [position, setPosition] = (0, import_react50.useState)({ top: 0, left: 0 });
-  (0, import_react50.useEffect)(() => {
+  const [isVisible, setIsVisible] = (0, import_react51.useState)(false);
+  const [position, setPosition] = (0, import_react51.useState)({ top: 0, left: 0 });
+  (0, import_react51.useEffect)(() => {
     const updatePosition = () => {
       const { state, view } = editor;
       const { $from, empty } = state.selection;
@@ -27045,7 +27417,7 @@ var CustomFloatingMenu = ({ editor }) => {
     };
   }, [editor]);
   if (!isVisible) return null;
-  return (0, import_react_dom8.createPortal)(
+  return (0, import_react_dom9.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
@@ -27354,7 +27726,7 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/table-controls.tsx
-var import_react51 = __toESM(require("react"), 1);
+var import_react53 = __toESM(require("react"), 1);
 
 // node_modules/prosemirror-model/dist/index.js
 function findDiffStart(a, b, pos) {
@@ -31820,16 +32192,16 @@ function collectChildren(node) {
 }
 function TableControls({ editor, containerRef }) {
   const t = useSmartTranslations("UEditor");
-  const [layout, setLayout] = import_react51.default.useState(null);
-  const [dragPreview, setDragPreview] = import_react51.default.useState(null);
-  const [hoverState, setHoverState] = import_react51.default.useState(DEFAULT_HOVER_STATE);
-  const [openMenuKey, setOpenMenuKey] = import_react51.default.useState(null);
-  const layoutRef = import_react51.default.useRef(null);
-  const dragStateRef = import_react51.default.useRef(null);
-  import_react51.default.useEffect(() => {
+  const [layout, setLayout] = import_react53.default.useState(null);
+  const [dragPreview, setDragPreview] = import_react53.default.useState(null);
+  const [hoverState, setHoverState] = import_react53.default.useState(DEFAULT_HOVER_STATE);
+  const [openMenuKey, setOpenMenuKey] = import_react53.default.useState(null);
+  const layoutRef = import_react53.default.useRef(null);
+  const dragStateRef = import_react53.default.useRef(null);
+  import_react53.default.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
-  const syncFromCell = import_react51.default.useCallback((cell) => {
+  const syncFromCell = import_react53.default.useCallback((cell) => {
     const surface = containerRef.current;
     if (!surface || !cell) {
       setLayout(null);
@@ -31837,10 +32209,10 @@ function TableControls({ editor, containerRef }) {
     }
     setLayout(buildLayout(editor, surface, cell));
   }, [containerRef, editor]);
-  const syncFromSelection = import_react51.default.useCallback(() => {
+  const syncFromSelection = import_react53.default.useCallback(() => {
     syncFromCell(getSelectedCell(editor));
   }, [editor, syncFromCell]);
-  const refreshCurrentLayout = import_react51.default.useCallback(() => {
+  const refreshCurrentLayout = import_react53.default.useCallback(() => {
     setLayout((prev) => {
       if (!prev) return prev;
       const surface = containerRef.current;
@@ -31850,12 +32222,12 @@ function TableControls({ editor, containerRef }) {
       return cell ? buildLayout(editor, surface, cell) : null;
     });
   }, [containerRef, editor]);
-  const clearDrag = import_react51.default.useCallback(() => {
+  const clearDrag = import_react53.default.useCallback(() => {
     dragStateRef.current = null;
     setDragPreview(null);
     document.body.style.cursor = "";
   }, []);
-  const updateHoverState = import_react51.default.useCallback((event) => {
+  const updateHoverState = import_react53.default.useCallback((event) => {
     const activeLayout = layoutRef.current;
     const surface = containerRef.current;
     if (!activeLayout || !surface || dragStateRef.current) {
@@ -31893,7 +32265,7 @@ function TableControls({ editor, containerRef }) {
       };
     });
   }, [containerRef]);
-  import_react51.default.useEffect(() => {
+  import_react53.default.useEffect(() => {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
@@ -31938,7 +32310,7 @@ function TableControls({ editor, containerRef }) {
       editor.off("update", refreshCurrentLayout);
     };
   }, [clearDrag, containerRef, editor, refreshCurrentLayout, syncFromCell, syncFromSelection, updateHoverState]);
-  const runAtCellPos = import_react51.default.useCallback((cellPos, command, options) => {
+  const runAtCellPos = import_react53.default.useCallback((cellPos, command, options) => {
     if (cellPos == null) return false;
     focusCell(editor, cellPos);
     const result = command(editor.chain().focus(null, { scrollIntoView: false })).run();
@@ -31947,17 +32319,17 @@ function TableControls({ editor, containerRef }) {
     }
     return result;
   }, [editor, syncFromSelection]);
-  const runAtActiveCell = import_react51.default.useCallback((command, options) => {
+  const runAtActiveCell = import_react53.default.useCallback((command, options) => {
     return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
   }, [runAtCellPos]);
-  const getCurrentCornerCellPos = import_react51.default.useCallback(() => {
+  const getCurrentCornerCellPos = import_react53.default.useCallback(() => {
     const activePos = layoutRef.current?.cellPos ?? editor.state.selection.from;
     return getLastCellPosFromState(editor, activePos);
   }, [editor]);
-  const runAtCornerCell = import_react51.default.useCallback((command, options) => {
+  const runAtCornerCell = import_react53.default.useCallback((command, options) => {
     return runAtCellPos(getCurrentCornerCellPos(), command, options);
   }, [getCurrentCornerCellPos, runAtCellPos]);
-  const replaceTableAtCellPos = import_react51.default.useCallback((cellPos, updateTable) => {
+  const replaceTableAtCellPos = import_react53.default.useCallback((cellPos, updateTable) => {
     if (cellPos == null) return false;
     const tableInfo = findTableInfo(editor, cellPos);
     if (!tableInfo) return false;
@@ -31967,10 +32339,10 @@ function TableControls({ editor, containerRef }) {
     requestAnimationFrame(syncFromSelection);
     return true;
   }, [editor, syncFromSelection]);
-  const createEmptyCellNode = import_react51.default.useCallback((cellNode) => {
+  const createEmptyCellNode = import_react53.default.useCallback((cellNode) => {
     return cellNode.type.createAndFill(cellNode.attrs) ?? cellNode;
   }, []);
-  const duplicateRowAt = import_react51.default.useCallback((rowIndex, cellPos) => {
+  const duplicateRowAt = import_react53.default.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -31979,7 +32351,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearRowAt = import_react51.default.useCallback((rowIndex, cellPos) => {
+  const clearRowAt = import_react53.default.useCallback((rowIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode);
       const rowNode = rows[rowIndex];
@@ -31989,7 +32361,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const duplicateColumnAt = import_react51.default.useCallback((columnIndex, cellPos) => {
+  const duplicateColumnAt = import_react53.default.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -32001,7 +32373,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [replaceTableAtCellPos]);
-  const clearColumnAt = import_react51.default.useCallback((columnIndex, cellPos) => {
+  const clearColumnAt = import_react53.default.useCallback((columnIndex, cellPos) => {
     return replaceTableAtCellPos(cellPos, (tableNode) => {
       const rows = collectChildren(tableNode).map((rowNode) => {
         const cells = collectChildren(rowNode);
@@ -32013,7 +32385,7 @@ function TableControls({ editor, containerRef }) {
       return tableNode.type.create(tableNode.attrs, rows);
     });
   }, [createEmptyCellNode, replaceTableAtCellPos]);
-  const expandTableBy = import_react51.default.useCallback((rows, cols) => {
+  const expandTableBy = import_react53.default.useCallback((rows, cols) => {
     let ok = true;
     for (let index = 0; index < rows; index += 1) {
       ok = runAtCornerCell((chain) => chain.addRowAfter(), { sync: false });
@@ -32029,9 +32401,9 @@ function TableControls({ editor, containerRef }) {
   const canExpandTable = Boolean(layout);
   const controlsVisible = dragPreview !== null;
   const tableMenuOpen = openMenuKey === "table";
-  const getRowMenuKey = import_react51.default.useCallback((index) => `row:${index}`, []);
-  const getColumnMenuKey = import_react51.default.useCallback((index) => `column:${index}`, []);
-  import_react51.default.useEffect(() => {
+  const getRowMenuKey = import_react53.default.useCallback((index) => `row:${index}`, []);
+  const getColumnMenuKey = import_react53.default.useCallback((index) => `column:${index}`, []);
+  import_react53.default.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
       const activeLayout = layoutRef.current;
@@ -32118,7 +32490,7 @@ function TableControls({ editor, containerRef }) {
       window.removeEventListener("blur", clearDrag);
     };
   }, [clearDrag, containerRef, editor, expandTableBy, syncFromSelection]);
-  const menuItems = import_react51.default.useMemo(() => {
+  const menuItems = import_react53.default.useMemo(() => {
     if (!layout) return [];
     return [
       {
@@ -32186,7 +32558,7 @@ function TableControls({ editor, containerRef }) {
       }
     ];
   }, [layout, runAtActiveCell, t]);
-  const getRowHandleMenuItems = import_react51.default.useCallback((rowHandle) => [
+  const getRowHandleMenuItems = import_react53.default.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
       icon: import_lucide_react46.ArrowUp,
@@ -32214,7 +32586,7 @@ function TableControls({ editor, containerRef }) {
       destructive: true
     }
   ], [clearRowAt, duplicateRowAt, runAtCellPos, t]);
-  const getColumnHandleMenuItems = import_react51.default.useCallback((columnHandle) => [
+  const getColumnHandleMenuItems = import_react53.default.useCallback((columnHandle) => [
     {
       label: t("tableMenu.addColumnBefore"),
       icon: import_lucide_react46.ArrowLeft,
@@ -32763,10 +33135,10 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
 );
 
 // src/components/UEditor/use-table-interactions.ts
-var import_react53 = __toESM(require("react"), 1);
+var import_react55 = __toESM(require("react"), 1);
 
 // src/components/UEditor/use-table-row-resize.ts
-var import_react52 = __toESM(require("react"), 1);
+var import_react54 = __toESM(require("react"), 1);
 function useTableRowResize({
   editor,
   setHoveredTableCell,
@@ -32775,9 +33147,9 @@ function useTableRowResize({
   clearAllTableResizeHover,
   scheduleTableLayoutSync
 }) {
-  const commitFrameRef = (0, import_react52.useRef)(null);
-  const stateRef = (0, import_react52.useRef)(null);
-  const commitPreview = import_react52.default.useCallback(() => {
+  const commitFrameRef = (0, import_react54.useRef)(null);
+  const stateRef = (0, import_react54.useRef)(null);
+  const commitPreview = import_react54.default.useCallback(() => {
     if (!editor) return;
     const state = stateRef.current;
     if (!state) return;
@@ -32812,22 +33184,22 @@ function useTableRowResize({
     showRowGuide(state.tableElement, state.rowElement, state.cellElement);
     scheduleTableLayoutSync();
   }, [editor, scheduleTableLayoutSync, showRowGuide]);
-  const scheduleCommit = import_react52.default.useCallback(() => {
+  const scheduleCommit = import_react54.default.useCallback(() => {
     if (commitFrameRef.current !== null) return;
     commitFrameRef.current = window.requestAnimationFrame(() => {
       commitFrameRef.current = null;
       commitPreview();
     });
   }, [commitPreview]);
-  const syncActiveGuide = import_react52.default.useCallback(() => {
+  const syncActiveGuide = import_react54.default.useCallback(() => {
     const state = stateRef.current;
     if (!state) return false;
     setHoveredTableCell(state.cellElement);
     showRowGuide(state.tableElement, state.rowElement, state.cellElement);
     return true;
   }, [setHoveredTableCell, showRowGuide]);
-  const isResizing = import_react52.default.useCallback(() => stateRef.current !== null, []);
-  const beginResize = import_react52.default.useCallback((event, table, row, cell) => {
+  const isResizing = import_react54.default.useCallback(() => stateRef.current !== null, []);
+  const beginResize = import_react54.default.useCallback((event, table, row, cell) => {
     if (!editor || !isRowResizeHotspot(cell, event.clientX, event.clientY)) {
       return false;
     }
@@ -32853,7 +33225,7 @@ function useTableRowResize({
     event.stopPropagation();
     return true;
   }, [editor, setHoveredTableCell, showRowGuide]);
-  const handlePointerMove = import_react52.default.useCallback((event) => {
+  const handlePointerMove = import_react54.default.useCallback((event) => {
     const state = stateRef.current;
     if (!state) return;
     const nextHeight = Math.max(
@@ -32869,7 +33241,7 @@ function useTableRowResize({
     document.body.style.cursor = "row-resize";
     scheduleCommit();
   }, [scheduleCommit, showRowGuide]);
-  const handlePointerUp = import_react52.default.useCallback((event) => {
+  const handlePointerUp = import_react54.default.useCallback((event) => {
     if (!editor) return;
     const state = stateRef.current;
     if (!state) return;
@@ -32899,7 +33271,7 @@ function useTableRowResize({
     clearAllTableResizeHover();
     scheduleTableLayoutSync();
   }, [clearAllTableResizeHover, clearHoveredTableCell, commitPreview, editor, scheduleTableLayoutSync]);
-  const cancelResize = import_react52.default.useCallback(() => {
+  const cancelResize = import_react54.default.useCallback(() => {
     if (!stateRef.current) return;
     if (commitFrameRef.current !== null) {
       window.cancelAnimationFrame(commitFrameRef.current);
@@ -32911,7 +33283,7 @@ function useTableRowResize({
     clearAllTableResizeHover();
     scheduleTableLayoutSync();
   }, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
-  const cleanup = import_react52.default.useCallback(() => {
+  const cleanup = import_react54.default.useCallback(() => {
     if (commitFrameRef.current !== null) {
       window.cancelAnimationFrame(commitFrameRef.current);
       commitFrameRef.current = null;
@@ -32932,40 +33304,40 @@ function useTableRowResize({
 
 // src/components/UEditor/use-table-interactions.ts
 function useUEditorTableInteractions(editor, editable = true) {
-  const editorContentRef = (0, import_react53.useRef)(null);
-  const tableColumnGuideRef = (0, import_react53.useRef)(null);
-  const tableRowGuideRef = (0, import_react53.useRef)(null);
-  const activeTableCellHighlightRef = (0, import_react53.useRef)(null);
-  const hoveredTableCellRef = (0, import_react53.useRef)(null);
-  const activeTableCellRef = (0, import_react53.useRef)(null);
-  const suppressActiveCellHighlightRef = (0, import_react53.useRef)(false);
-  const tableLayoutSyncFrameRef = (0, import_react53.useRef)(null);
-  const setEditorResizeCursor = import_react53.default.useCallback((cursor) => {
+  const editorContentRef = (0, import_react55.useRef)(null);
+  const tableColumnGuideRef = (0, import_react55.useRef)(null);
+  const tableRowGuideRef = (0, import_react55.useRef)(null);
+  const activeTableCellHighlightRef = (0, import_react55.useRef)(null);
+  const hoveredTableCellRef = (0, import_react55.useRef)(null);
+  const activeTableCellRef = (0, import_react55.useRef)(null);
+  const suppressActiveCellHighlightRef = (0, import_react55.useRef)(false);
+  const tableLayoutSyncFrameRef = (0, import_react55.useRef)(null);
+  const setEditorResizeCursor = import_react55.default.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, []);
-  const hideColumnGuide = import_react53.default.useCallback(() => {
+  const hideColumnGuide = import_react55.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const hideRowGuide = import_react53.default.useCallback(() => {
+  const hideRowGuide = import_react55.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
   }, []);
-  const clearAllTableResizeHover = import_react53.default.useCallback(() => {
+  const clearAllTableResizeHover = import_react55.default.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const updateActiveCellHighlight = import_react53.default.useCallback((cell) => {
+  const updateActiveCellHighlight = import_react55.default.useCallback((cell) => {
     const surface = editorContentRef.current;
     const highlight = activeTableCellHighlightRef.current;
     if (!highlight) return;
@@ -32980,7 +33352,7 @@ function useUEditorTableInteractions(editor, editable = true) {
     highlight.style.width = `${metrics.width}px`;
     highlight.style.height = `${metrics.height}px`;
   }, []);
-  const scheduleTableLayoutSync = import_react53.default.useCallback(() => {
+  const scheduleTableLayoutSync = import_react55.default.useCallback(() => {
     if (tableLayoutSyncFrameRef.current !== null) return;
     tableLayoutSyncFrameRef.current = window.requestAnimationFrame(() => {
       tableLayoutSyncFrameRef.current = null;
@@ -32988,22 +33360,22 @@ function useUEditorTableInteractions(editor, editable = true) {
       editorContentRef.current?.dispatchEvent(new CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT));
     });
   }, [updateActiveCellHighlight]);
-  const setActiveTableCell = import_react53.default.useCallback((cell) => {
+  const setActiveTableCell = import_react55.default.useCallback((cell) => {
     if (activeTableCellRef.current === cell) return;
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
-  const clearActiveTableCell = import_react53.default.useCallback(() => {
+  const clearActiveTableCell = import_react55.default.useCallback(() => {
     activeTableCellRef.current = null;
     updateActiveCellHighlight(null);
   }, [updateActiveCellHighlight]);
-  const setHoveredTableCell = import_react53.default.useCallback((cell) => {
+  const setHoveredTableCell = import_react55.default.useCallback((cell) => {
     hoveredTableCellRef.current = cell;
   }, []);
-  const clearHoveredTableCell = import_react53.default.useCallback(() => {
+  const clearHoveredTableCell = import_react55.default.useCallback(() => {
     hoveredTableCellRef.current = null;
   }, []);
-  const showColumnGuide = import_react53.default.useCallback((table, row, cell) => {
+  const showColumnGuide = import_react55.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -33016,7 +33388,7 @@ function useUEditorTableInteractions(editor, editable = true) {
     surface.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [setEditorResizeCursor]);
-  const showRowGuide = import_react53.default.useCallback((table, row, cell) => {
+  const showRowGuide = import_react55.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;
@@ -33045,11 +33417,11 @@ function useUEditorTableInteractions(editor, editable = true) {
     clearAllTableResizeHover,
     scheduleTableLayoutSync
   });
-  const syncActiveTableCellFromSelection = import_react53.default.useCallback(() => {
+  const syncActiveTableCellFromSelection = import_react55.default.useCallback(() => {
     if (!editor) return;
     setActiveTableCell(getSelectionTableCell(editor.view));
   }, [editor, setActiveTableCell]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (!editor || !editable) return void 0;
     const proseMirror = editor.view.dom;
     const surface = editorContentRef.current;
@@ -33210,7 +33582,7 @@ function useUEditorTableInteractions(editor, editable = true) {
 
 // src/components/UEditor/UEditor.tsx
 var import_jsx_runtime85 = require("react/jsx-runtime");
-var UEditor = import_react54.default.forwardRef(({
+var UEditor = import_react56.default.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
@@ -33241,9 +33613,9 @@ var UEditor = import_react54.default.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = (0, import_react54.useRef)(null);
-  const lastAppliedContentRef = (0, import_react54.useRef)(content ?? "");
-  const extensions = (0, import_react54.useMemo)(
+  const inFlightPrepareRef = (0, import_react56.useRef)(null);
+  const lastAppliedContentRef = (0, import_react56.useRef)(content ?? "");
+  const extensions = (0, import_react56.useMemo)(
     () => buildUEditorExtensions({
       placeholder: effectivePlaceholder,
       translate: t,
@@ -33257,7 +33629,7 @@ var UEditor = import_react54.default.forwardRef(({
     }),
     [effectivePlaceholder, t, maxCharacters, uploadImage, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable]
   );
-  const editor = (0, import_react55.useEditor)({
+  const editor = (0, import_react57.useEditor)({
     immediatelyRender: false,
     extensions,
     content,
@@ -33303,7 +33675,7 @@ var UEditor = import_react54.default.forwardRef(({
     tableRowGuideRef,
     activeTableCellHighlightRef
   } = useUEditorTableInteractions(editor, editable);
-  (0, import_react54.useImperativeHandle)(
+  (0, import_react56.useImperativeHandle)(
     ref,
     () => ({
       prepareContentForSave: async ({ throwOnError = false } = {}) => {
@@ -33326,7 +33698,7 @@ var UEditor = import_react54.default.forwardRef(({
     }),
     [content, editor, uploadImageForSave, uploadImageConcurrency]
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!editor) return;
     const nextContent = content ?? "";
     if (lastAppliedContentRef.current === nextContent) return;
@@ -33421,7 +33793,7 @@ var UEditor = import_react54.default.forwardRef(({
               ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableControls, { editor, containerRef: editorContentRef }),
               /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-                import_react55.EditorContent,
+                import_react57.EditorContent,
                 {
                   editor,
                   className: "min-h-full"