@underverse-ui/underverse 1.0.125 → 1.0.127

package/dist/index.js

@@ -688,6 +688,9 @@ var en_default = {
       accent: "Accent",
       textColor: "Text Color",
       highlight: "Highlight",
+      automatic: "Automatic",
+      moreColors: "More Colors...",
+      color: "Color",
       done: "Done"
     },
     toolbar: {
@@ -702,6 +705,7 @@ var en_default = {
       subscript: "Subscript",
       superscript: "Superscript",
       link: "Link",
+      removeLink: "Remove Link",
       image: "Insert Image",
       table: "Insert Table",
       alignment: "Alignment",
@@ -953,6 +957,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: {
@@ -967,6 +974,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",
@@ -1218,6 +1226,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: {
@@ -1232,6 +1243,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",
@@ -1482,6 +1494,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: {
@@ -1496,6 +1511,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",
@@ -23816,7 +23832,7 @@ function useLocale2() {
 }
 
 // src/components/UEditor/UEditor.tsx
-import React78, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef34 } from "react";
+import React78, { useEffect as useEffect36, useImperativeHandle as useImperativeHandle3, useMemo as useMemo24, useRef as useRef35 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -25281,7 +25297,9 @@ function buildUEditorExtensions({
 }
 
 // src/components/UEditor/toolbar.tsx
-import React73, { useRef as useRef30, useState as useState44 } from "react";
+import React73, { useRef as useRef31, useState as useState44 } from "react";
+import { createPortal as createPortal8 } from "react-dom";
+import { useEditorState } from "@tiptap/react";
 import {
   AlignCenter,
   AlignJustify,
@@ -25298,14 +25316,12 @@ import {
   Heading1 as Heading1Icon,
   Heading2 as Heading2Icon,
   Heading3 as Heading3Icon,
-  Highlighter,
   Image as ImageIcon2,
   Italic as ItalicIcon,
   Link as LinkIcon,
   List as ListIcon,
   ListOrdered as ListOrderedIcon,
   ListTodo as ListTodo2,
-  Palette as Palette2,
   Quote as QuoteIcon,
   Redo as RedoIcon,
   RotateCcw as RotateCcw2,
@@ -25322,9 +25338,108 @@ import {
 } from "lucide-react";
 
 // src/components/UEditor/colors.tsx
-import { useMemo as useMemo22 } from "react";
-import { X as X18 } from "lucide-react";
+import { useMemo as useMemo22, useRef as useRef29 } from "react";
+import { Check as Check10, Highlighter, Palette as Palette2 } from "lucide-react";
 import { jsx as jsx78, jsxs as jsxs65 } from "react/jsx-runtime";
+var TextColorIcon = ({ color }) => {
+  const underlineColor = color && color !== "inherit" ? color : "currentColor";
+  return /* @__PURE__ */ jsxs65("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
+    /* @__PURE__ */ jsx78("span", { className: "text-[15px] font-semibold leading-none", children: "A" }),
+    /* @__PURE__ */ jsx78(
+      "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__ */ jsxs65("span", { className: "relative flex h-5 w-5 items-center justify-center leading-none", children: [
+    /* @__PURE__ */ jsx78(Highlighter, { className: "h-4 w-4" }),
+    /* @__PURE__ */ jsx78(
+      "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 = useMemo22(
@@ -25336,7 +25451,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]
   );
@@ -25350,7 +25466,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]
   );
@@ -25361,26 +25478,81 @@ var EditorColorPalette = ({
   currentColor,
   onSelect,
   label
-}) => /* @__PURE__ */ jsxs65("div", { className: "p-2", children: [
-  /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
-  /* @__PURE__ */ jsx78("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ jsx78(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ jsxs65(
-    "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__ */ jsx78(X18, { className: "w-4 h-4 text-muted-foreground" }),
-        c.color === "inherit" && /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium", children: "A" })
-      ]
-    }
-  ) }, c.name)) })
-] });
+}) => {
+  const t = useSmartTranslations("UEditor");
+  const colorInputRef = useRef29(null);
+  const automaticColor = colors[0]?.color ?? "";
+  const paletteColors = colors.slice(1);
+  return /* @__PURE__ */ jsxs65("div", { className: "w-56 p-2", children: [
+    /* @__PURE__ */ jsx78("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsxs65(
+      "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__ */ jsx78("span", { className: "flex h-5 w-5 items-center justify-center rounded border border-border bg-background", children: currentColor === automaticColor && /* @__PURE__ */ jsx78(Check10, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx78("span", { className: "flex-1 text-center", children: t("colors.automatic") })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx78("div", { className: "mt-2 grid grid-cols-8 gap-1", children: paletteColors.map((c) => /* @__PURE__ */ jsx78(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ jsx78(
+      "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__ */ jsx78("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx78(Check10, { 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__ */ jsxs65(
+      "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__ */ jsx78(
+            "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__ */ jsx78("span", { className: "flex-1 text-center", children: t("colors.moreColors") }),
+          /* @__PURE__ */ jsx78(Palette2, { className: "h-4 w-4 text-muted-foreground" }),
+          /* @__PURE__ */ jsx78(
+            "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
 import { NodeSelection, TextSelection } from "@tiptap/pm/state";
@@ -25473,8 +25645,8 @@ function deleteSelectedImage(editor) {
 }
 
 // src/components/UEditor/inputs.tsx
-import { useEffect as useEffect33, useRef as useRef29, useState as useState43 } from "react";
-import { Check as Check10, X as X19 } from "lucide-react";
+import { useEffect as useEffect33, useRef as useRef30, useState as useState43 } from "react";
+import { Check as Check11, X as X18 } from "lucide-react";
 import { jsx as jsx79, jsxs as jsxs66 } from "react/jsx-runtime";
 function normalizeUrl(raw) {
   return sanitizeUEditorUrl(raw, "link");
@@ -25486,7 +25658,7 @@ var LinkInput = ({
 }) => {
   const t = useSmartTranslations("UEditor");
   const [url, setUrl] = useState43(initialUrl);
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   useEffect33(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
@@ -25508,15 +25680,15 @@ var LinkInput = ({
         className: "flex-1 px-3 py-2 text-sm bg-muted/50 border-0 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/20"
       }
     ),
-    /* @__PURE__ */ jsx79("button", { type: "submit", className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ jsx79(Check10, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ jsx79("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ jsx79(X19, { className: "w-4 h-4" }) })
+    /* @__PURE__ */ jsx79("button", { type: "submit", className: "p-2 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors", children: /* @__PURE__ */ jsx79(Check11, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx79("button", { type: "button", onClick: onCancel, className: "p-2 rounded-lg hover:bg-muted transition-colors text-muted-foreground", children: /* @__PURE__ */ jsx79(X18, { className: "w-4 h-4" }) })
   ] });
 };
 var ImageInput = ({ onSubmit, onCancel }) => {
   const t = useSmartTranslations("UEditor");
   const [url, setUrl] = useState43("");
   const [alt, setAlt] = useState43("");
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   useEffect33(() => {
     inputRef.current?.focus();
   }, []);
@@ -25592,12 +25764,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() {
@@ -25645,10 +25828,11 @@ var ToolbarButton = React73.forwardRef(({ onClick, onMouseDown, active, disabled
       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
       ),
@@ -25661,7 +25845,7 @@ var ToolbarButton = React73.forwardRef(({ onClick, onMouseDown, active, disabled
   return button;
 });
 ToolbarButton.displayName = "ToolbarButton";
-var ToolbarDivider = () => /* @__PURE__ */ jsx81("div", { className: "w-px h-6 bg-border/50 mx-1" });
+var ToolbarDivider = () => /* @__PURE__ */ jsx81("div", { className: "mx-0.5 h-5 w-px bg-border/60" });
 var TableInsertGrid = ({
   insertLabel,
   previewTemplate,
@@ -25672,36 +25856,29 @@ var TableInsertGrid = ({
   const maxCols = 8;
   return /* @__PURE__ */ jsxs67("div", { className: "mb-2 rounded-xl border border-border/60 bg-muted/20 p-2", children: [
     /* @__PURE__ */ jsx81("div", { className: "mb-2 text-sm font-medium text-foreground", children: formatTableInsertLabel(previewTemplate, selection.rows, selection.cols) }),
-    /* @__PURE__ */ jsx81(
-      "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__ */ jsx81(
-              "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__ */ jsx81("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__ */ jsx81(
+          "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__ */ jsx81("div", { className: "mt-2 text-xs text-muted-foreground", children: insertLabel })
   ] });
 };
@@ -25718,14 +25895,23 @@ var EditorToolbar = ({
   letterSpacings
 }) => {
   const t = useSmartTranslations("UEditor");
+  useEditorState({
+    editor,
+    selector: ({ transactionNumber }) => transactionNumber
+  });
   const { textColors, highlightColors } = useEditorColors();
   const [showImageInput, setShowImageInput] = useState44(false);
+  const [showLinkInput, setShowLinkInput] = useState44(false);
   const [isTableMenuOpen, setIsTableMenuOpen] = useState44(false);
-  const tableCommandAnchorPosRef = useRef30(null);
-  const fileInputRef = useRef30(null);
+  const tableCommandAnchorPosRef = useRef31(null);
+  const fileInputRef = useRef31(null);
   const [isUploadingImage, setIsUploadingImage] = useState44(false);
   const [imageUploadError, setImageUploadError] = useState44(null);
   const [fontSizeDraft, setFontSizeDraft] = useState44("");
+  const [isFontSizeMenuOpen, setIsFontSizeMenuOpen] = useState44(false);
+  const [fontSizeMenuPosition, setFontSizeMenuPosition] = useState44({ top: 0, left: 0 });
+  const fontSizeControlRef = useRef31(null);
+  const fontSizeMenuRef = useRef31(null);
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
   const tableAttrs = editor.getAttributes("table");
@@ -25737,30 +25923,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 = React73.useMemo(
-    () => fontFamilies ?? getDefaultFontFamilies(t),
-    [fontFamilies, t]
-  );
-  const availableFontSizes = React73.useMemo(
-    () => fontSizes ?? getDefaultFontSizes(),
-    [fontSizes]
-  );
-  const availableLineHeights = React73.useMemo(
-    () => lineHeights ?? getDefaultLineHeights(),
-    [lineHeights]
-  );
-  const availableLetterSpacings = React73.useMemo(
-    () => letterSpacings ?? getDefaultLetterSpacings(),
-    [letterSpacings]
-  );
-  const currentFontFamilyLabel = availableFontFamilies.find((option) => normalizeStyleValue(option.value) === currentFontFamily)?.label ?? t("toolbar.fontDefault");
+  const availableFontFamilies = React73.useMemo(() => fontFamilies ?? getDefaultFontFamilies(t), [fontFamilies, t]);
+  const availableFontSizes = React73.useMemo(() => fontSizes ?? getDefaultFontSizes(), [fontSizes]);
+  const availableLineHeights = React73.useMemo(() => lineHeights ?? getDefaultLineHeights(), [lineHeights]);
+  const availableLetterSpacings = React73.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");
   React73.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();
@@ -25772,7 +25951,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 = React73.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);
   };
+  React73.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);
@@ -25794,7 +26005,7 @@ var EditorToolbar = ({
     setIsUploadingImage(false);
   };
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-1 p-2 border-b bg-muted/30", children: [
+    return /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-1 border-b border-border/35 bg-muted/30 p-2", children: [
       /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx81(BoldIcon, { className: "w-4 h-4" }) }),
       /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx81(ItalicIcon, { className: "w-4 h-4" }) }),
       /* @__PURE__ */ jsx81(
@@ -25808,70 +26019,23 @@ var EditorToolbar = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs67("div", { className: "flex flex-wrap items-center gap-1 p-2 border-b bg-linear-to-r from-muted/30 to-transparent", children: [
-    /* @__PURE__ */ jsxs67(
-      DropdownMenu,
-      {
-        contentClassName: "p-2",
-        trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
-        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
-          /* @__PURE__ */ jsx81(Type2, { className: "w-4 h-4" }),
-          /* @__PURE__ */ jsx81(ChevronDown7, { className: "w-3 h-3" })
-        ] }),
-        children: [
-          /* @__PURE__ */ jsx81(
-            DropdownMenuItem,
-            {
-              icon: Type2,
-              label: t("toolbar.normal"),
-              onClick: () => editor.chain().focus().setParagraph().run(),
-              active: editor.isActive("paragraph")
-            }
-          ),
-          /* @__PURE__ */ jsx81(
-            DropdownMenuItem,
-            {
-              icon: Heading1Icon,
-              label: t("toolbar.heading1"),
-              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-              active: editor.isActive("heading", { level: 1 }),
-              shortcut: "Ctrl+Alt+1"
-            }
-          ),
-          /* @__PURE__ */ jsx81(
-            DropdownMenuItem,
-            {
-              icon: Heading2Icon,
-              label: t("toolbar.heading2"),
-              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-              active: editor.isActive("heading", { level: 2 }),
-              shortcut: "Ctrl+Alt+2"
-            }
-          ),
-          /* @__PURE__ */ jsx81(
-            DropdownMenuItem,
-            {
-              icon: Heading3Icon,
-              label: t("toolbar.heading3"),
-              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-              active: editor.isActive("heading", { level: 3 }),
-              shortcut: "Ctrl+Alt+3"
-            }
-          )
-        ]
-      }
-    ),
+  return /* @__PURE__ */ jsxs67("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__ */ jsxs67(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ jsx81(
-          ToolbarButton,
+        trigger: /* @__PURE__ */ jsxs67(
+          "button",
           {
-            onClick: () => {
-            },
-            title: t("toolbar.fontFamily"),
-            className: "relative",
-            children: /* @__PURE__ */ jsx81(Type2, { 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__ */ jsx81("span", { className: "truncate", children: displayedFontFamilyLabel }),
+              /* @__PURE__ */ jsx81(ChevronDown7, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+            ]
           }
         ),
         contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
@@ -25891,30 +26055,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__ */ jsxs67(
-      DropdownMenu,
-      {
-        closeOnSelect: false,
-        trigger: /* @__PURE__ */ jsx81(
-          ToolbarButton,
-          {
-            onClick: () => {
-            },
-            title: t("toolbar.fontSize"),
-            className: "px-2 w-auto min-w-9",
-            children: /* @__PURE__ */ jsx81("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__ */ jsx81("div", { className: "mb-2 rounded-lg border border-border/60 bg-muted/30 p-2", children: /* @__PURE__ */ jsxs67("label", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs67(Fragment27, { children: [
+      /* @__PURE__ */ jsxs67(
+        "div",
+        {
+          ref: fontSizeControlRef,
+          "aria-label": t("toolbar.fontSize"),
+          className: cn(
+            "flex h-8 min-w-14 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__ */ jsx81(
               "input",
               {
@@ -25924,6 +26082,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) => {
@@ -25934,48 +26093,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-8 bg-transparent px-0.5 text-center text-xs font-semibold outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
               }
             ),
-            /* @__PURE__ */ jsx81("span", { className: "text-xs text-muted-foreground", children: "px" })
-          ] }) }),
+            /* @__PURE__ */ jsx81(
+              "button",
+              {
+                type: "button",
+                "aria-label": t("toolbar.fontSize"),
+                "aria-expanded": isFontSizeMenuOpen,
+                onClick: toggleFontSizeMenu,
+                className: "flex h-full w-5 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+                children: /* @__PURE__ */ jsx81(ChevronDown7, { className: "h-3.5 w-3.5" })
+              }
+            )
+          ]
+        }
+      ),
+      isFontSizeMenuOpen && typeof document !== "undefined" && createPortal8(
+        /* @__PURE__ */ jsx81(
+          "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__ */ jsx81(
+                "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__ */ jsxs67(
+      DropdownMenu,
+      {
+        contentClassName: "p-2",
+        trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
+          /* @__PURE__ */ jsx81(Type2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx81(ChevronDown7, { className: "w-3 h-3" })
+        ] }),
+        children: [
           /* @__PURE__ */ jsx81(
             DropdownMenuItem,
             {
               icon: Type2,
-              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__ */ jsx81(
+          /* @__PURE__ */ jsx81(
             DropdownMenuItem,
             {
-              label: option.label,
-              onClick: () => editor.chain().focus().setFontSize(option.value).run(),
-              active: normalizeStyleValue(option.value) === currentFontSize
-            },
-            option.value
-          ))
+              icon: Heading1Icon,
+              label: t("toolbar.heading1"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+              active: editor.isActive("heading", { level: 1 }),
+              shortcut: "Ctrl+Alt+1"
+            }
+          ),
+          /* @__PURE__ */ jsx81(
+            DropdownMenuItem,
+            {
+              icon: Heading2Icon,
+              label: t("toolbar.heading2"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+              active: editor.isActive("heading", { level: 2 }),
+              shortcut: "Ctrl+Alt+2"
+            }
+          ),
+          /* @__PURE__ */ jsx81(
+            DropdownMenuItem,
+            {
+              icon: Heading3Icon,
+              label: t("toolbar.heading3"),
+              onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+              active: editor.isActive("heading", { level: 3 }),
+              shortcut: "Ctrl+Alt+3"
+            }
+          )
         ]
       }
     ),
     /* @__PURE__ */ jsxs67(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ jsxs67(
-          ToolbarButton,
-          {
-            onClick: () => {
-            },
-            title: t("toolbar.lineHeight"),
-            className: "gap-0.5",
-            children: [
-              /* @__PURE__ */ jsx81(ArrowUp, { className: "w-3 h-3" }),
-              /* @__PURE__ */ jsx81(ArrowDown, { className: "w-3 h-3" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.lineHeight"), className: "gap-0.5", children: [
+          /* @__PURE__ */ jsx81(ArrowUp, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsx81(ArrowDown, { className: "w-3 h-3" })
+        ] }),
         contentClassName: "max-h-72 overflow-y-auto p-2",
         children: [
           /* @__PURE__ */ jsx81(
@@ -26002,19 +26229,11 @@ var EditorToolbar = ({
     /* @__PURE__ */ jsxs67(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ jsxs67(
-          ToolbarButton,
-          {
-            onClick: () => {
-            },
-            title: t("toolbar.letterSpacing"),
-            className: "gap-0.5",
-            children: [
-              /* @__PURE__ */ jsx81(ArrowLeft, { className: "w-3 h-3" }),
-              /* @__PURE__ */ jsx81(ArrowRight, { className: "w-3 h-3" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.letterSpacing"), className: "gap-0.5", children: [
+          /* @__PURE__ */ jsx81(ArrowLeft, { className: "w-3 h-3" }),
+          /* @__PURE__ */ jsx81(ArrowRight, { className: "w-3 h-3" })
+        ] }),
         contentClassName: "max-h-72 overflow-y-auto p-2",
         children: [
           /* @__PURE__ */ jsx81(
@@ -26052,20 +26271,68 @@ var EditorToolbar = ({
     ),
     /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => editor.chain().focus().toggleStrike().run(), active: editor.isActive("strike"), title: t("toolbar.strike"), children: /* @__PURE__ */ jsx81(StrikethroughIcon, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => editor.chain().focus().toggleCode().run(), active: editor.isActive("code"), title: t("toolbar.code"), children: /* @__PURE__ */ jsx81(CodeIcon, { className: "w-4 h-4" }) }),
+    /* @__PURE__ */ jsx81(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSubscript().run(),
+        active: editor.isActive("subscript"),
+        title: t("toolbar.subscript"),
+        children: /* @__PURE__ */ jsx81(SubscriptIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx81(
+      ToolbarButton,
+      {
+        onClick: () => editor.chain().focus().toggleSuperscript().run(),
+        active: editor.isActive("superscript"),
+        title: t("toolbar.superscript"),
+        children: /* @__PURE__ */ jsx81(SuperscriptIcon, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ jsx81(
+      DropdownMenu,
+      {
+        contentClassName: "min-w-72",
+        trigger: /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => setShowLinkInput(!editor.isActive("link")), active: editor.isActive("link"), title: t("toolbar.link"), children: /* @__PURE__ */ jsx81(LinkIcon, { className: "w-4 h-4" }) }),
+        children: showLinkInput ? /* @__PURE__ */ jsx81(
+          LinkInput,
+          {
+            initialUrl: String(editor.getAttributes("link").href ?? ""),
+            onSubmit: (url) => {
+              editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+              setShowLinkInput(false);
+            },
+            onCancel: () => setShowLinkInput(false)
+          }
+        ) : /* @__PURE__ */ jsxs67(Fragment27, { children: [
+          /* @__PURE__ */ jsx81(DropdownMenuItem, { icon: LinkIcon, label: t("toolbar.link"), onClick: () => setShowLinkInput(true), active: editor.isActive("link") }),
+          /* @__PURE__ */ jsx81(
+            DropdownMenuItem,
+            {
+              icon: Trash22,
+              label: t("toolbar.removeLink"),
+              onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
+              disabled: !editor.isActive("link"),
+              destructive: true
+            }
+          )
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsx81(ToolbarDivider, {}),
     /* @__PURE__ */ jsx81(
       DropdownMenu,
       {
         trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
         }, title: t("colors.textColor"), children: [
-          /* @__PURE__ */ jsx81(Palette2, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx81(TextColorIcon, { color: currentTextColor }),
           /* @__PURE__ */ jsx81(ChevronDown7, { className: "w-3 h-3" })
         ] }),
         children: /* @__PURE__ */ jsx81(
           EditorColorPalette,
           {
             colors: textColors,
-            currentColor: editor.getAttributes("textStyle").color || "inherit",
+            currentColor: currentTextColor,
             onSelect: (color) => {
               if (color === "inherit") {
                 editor.chain().focus().unsetColor().run();
@@ -26083,14 +26350,14 @@ var EditorToolbar = ({
       {
         trigger: /* @__PURE__ */ jsxs67(ToolbarButton, { onClick: () => {
         }, active: editor.isActive("highlight"), title: t("colors.highlight"), children: [
-          /* @__PURE__ */ jsx81(Highlighter, { className: "w-4 h-4" }),
+          /* @__PURE__ */ jsx81(HighlightColorIcon, { color: currentHighlightColor }),
           /* @__PURE__ */ jsx81(ChevronDown7, { className: "w-3 h-3" })
         ] }),
         children: /* @__PURE__ */ jsx81(
           EditorColorPalette,
           {
             colors: highlightColors,
-            currentColor: editor.getAttributes("highlight").color || "",
+            currentColor: currentHighlightColor,
             onSelect: (color) => {
               if (color === "") {
                 editor.chain().focus().unsetHighlight().run();
@@ -26515,47 +26782,30 @@ var EditorToolbar = ({
       }
     ),
     /* @__PURE__ */ jsx81(ToolbarDivider, {}),
-    /* @__PURE__ */ jsx81(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().toggleSubscript().run(),
-        active: editor.isActive("subscript"),
-        title: t("toolbar.subscript"),
-        children: /* @__PURE__ */ jsx81(SubscriptIcon, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx81(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().toggleSuperscript().run(),
-        active: editor.isActive("superscript"),
-        title: t("toolbar.superscript"),
-        children: /* @__PURE__ */ jsx81(SuperscriptIcon, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx81(ToolbarDivider, {}),
     /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ jsx81(UndoIcon, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx81(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ jsx81(RedoIcon, { className: "w-4 h-4" }) })
   ] });
 };
 
 // src/components/UEditor/menus.tsx
-import { useCallback as useCallback22, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef31, useState as useState45 } from "react";
-import { createPortal as createPortal8 } from "react-dom";
+import { useCallback as useCallback22, useEffect as useEffect34, useMemo as useMemo23, useRef as useRef32, useState as useState45 } from "react";
+import { useEditorState as useEditorState2 } from "@tiptap/react";
+import { createPortal as createPortal9 } from "react-dom";
 import {
   AlignCenter as AlignCenter2,
   AlignLeft as AlignLeft2,
   AlignRight as AlignRight2,
   Bold as BoldIcon2,
+  ChevronDown as ChevronDown8,
   Code as CodeIcon2,
   Italic as ItalicIcon2,
   Link as LinkIcon2,
-  Palette as Palette3,
   Plus as Plus3,
   RotateCcw as RotateCcw3,
   Subscript as SubscriptIcon2,
   Superscript as SuperscriptIcon2,
   Trash2 as Trash23,
+  Type as Type3,
   Underline as UnderlineIcon2,
   Strikethrough as StrikethroughIcon2
 } from "lucide-react";
@@ -26564,7 +26814,7 @@ var FloatingSlashCommandMenu = ({ editor, onClose }) => {
   const t = useSmartTranslations("UEditor");
   const messages = useMemo23(() => buildSlashCommandMessages(t), [t]);
   const items = useMemo23(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = useRef31(null);
+  const listRef = useRef32(null);
   useEffect34(() => {
     const handleKeyDown2 = (event) => {
       if (event.key === "Escape") {
@@ -26619,14 +26869,23 @@ var BubbleMenuContent = ({
   lineHeights
 }) => {
   const t = useSmartTranslations("UEditor");
+  useEditorState2({
+    editor,
+    selector: ({ transactionNumber }) => transactionNumber
+  });
   const { textColors, highlightColors } = useEditorColors();
   const [showLinkInput, setShowLinkInput] = useState45(false);
-  const [showEditorColorPalette, setShowEditorColorPalette] = useState45(false);
+  const [activeColorPalette, setActiveColorPalette] = useState45(null);
+  const [showTypographyPanel, setShowTypographyPanel] = useState45(false);
+  const [showFontSizeOptions, setShowFontSizeOptions] = useState45(false);
+  const [fontSizeDraft, setFontSizeDraft] = useState45("");
   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 = useMemo23(
@@ -26637,6 +26896,21 @@ var BubbleMenuContent = ({
     () => (lineHeights ?? getDefaultLineHeights()).filter((option) => ["1.2", "1.5", "1.75"].includes(option.value)),
     [lineHeights]
   );
+  useEffect34(() => {
+    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));
+  };
   useEffect34(() => {
     onKeepOpenChange?.(showLinkInput);
   }, [onKeepOpenChange, showLinkInput]);
@@ -26667,44 +26941,37 @@ var BubbleMenuContent = ({
       }
     );
   }
-  if (showEditorColorPalette) {
-    return /* @__PURE__ */ jsxs68("div", { className: "w-48", children: [
-      /* @__PURE__ */ jsx82(
-        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__ */ jsx82("div", { className: "border-t my-1" }),
+  if (activeColorPalette) {
+    const isTextPalette = activeColorPalette === "text";
+    return /* @__PURE__ */ jsxs68("div", { className: "w-56", children: [
       /* @__PURE__ */ jsx82(
         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__ */ jsx82("div", { className: "p-2 border-t", children: /* @__PURE__ */ jsx82(
         "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")
         }
@@ -26725,6 +26992,162 @@ var BubbleMenuContent = ({
       /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => deleteSelectedImage(editor), title: t("toolbar.imageDelete"), className: "text-destructive hover:text-destructive", children: /* @__PURE__ */ jsx82(Trash23, { className: "w-4 h-4" }) })
     ] });
   }
+  if (showTypographyPanel) {
+    return /* @__PURE__ */ jsxs68("div", { className: "w-72 p-2", children: [
+      /* @__PURE__ */ jsxs68("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx82("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: t("toolbar.textStyle") }),
+        /* @__PURE__ */ jsx82(
+          "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__ */ jsxs68("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs68("div", { children: [
+          /* @__PURE__ */ jsx82("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("toolbar.fontSize") }),
+          /* @__PURE__ */ jsxs68("div", { className: "flex h-9 items-center overflow-hidden rounded-md border border-border/60 bg-muted/40", children: [
+            /* @__PURE__ */ jsx82(
+              "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__ */ jsx82("span", { className: "border-l border-border/50 px-2 text-[11px] text-muted-foreground", children: "px" }),
+            /* @__PURE__ */ jsx82(
+              "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__ */ jsx82(ChevronDown8, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          showFontSizeOptions && /* @__PURE__ */ jsxs68("div", { className: "mt-1 grid grid-cols-4 gap-1", children: [
+            /* @__PURE__ */ jsx82(
+              "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__ */ jsx82(
+              "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__ */ jsxs68("div", { children: [
+          /* @__PURE__ */ jsx82("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("toolbar.lineHeight") }),
+          /* @__PURE__ */ jsxs68("div", { className: "grid grid-cols-4 gap-1", children: [
+            /* @__PURE__ */ jsx82(
+              "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__ */ jsx82(
+              "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__ */ jsxs68("div", { className: "grid grid-cols-2 gap-1 border-t border-border/40 pt-2", children: [
+          /* @__PURE__ */ jsxs68(
+            "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__ */ jsx82(SubscriptIcon2, { className: "h-4 w-4" }),
+                t("toolbar.subscript")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs68(
+            "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__ */ jsx82(SuperscriptIcon2, { className: "h-4 w-4" }),
+                t("toolbar.superscript")
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-0.5 p-1", children: [
     /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx82(BoldIcon2, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx82(ItalicIcon2, { className: "w-4 h-4" }) }),
@@ -26754,68 +27177,16 @@ var BubbleMenuContent = ({
         children: /* @__PURE__ */ jsx82(LinkIcon2, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => setShowEditorColorPalette(true), title: t("colors.textColor"), children: /* @__PURE__ */ jsx82(Palette3, { className: "w-4 h-4" }) }),
-    /* @__PURE__ */ jsx82("div", { className: "w-px h-6 bg-border/50 mx-1" }),
-    /* @__PURE__ */ jsx82(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().unsetFontSize().run(),
-        active: !currentFontSize,
-        title: t("toolbar.sizeDefault"),
-        className: "px-2 w-auto",
-        children: /* @__PURE__ */ jsx82("span", { className: "text-[10px] font-semibold", children: "A" })
-      }
-    ),
-    quickFontSizes.map((option) => /* @__PURE__ */ jsx82(
-      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__ */ jsx82("span", { className: "text-[10px] font-semibold", children: option.label })
-      },
-      option.value
-    )),
-    /* @__PURE__ */ jsx82("div", { className: "w-px h-6 bg-border/50 mx-1" }),
-    /* @__PURE__ */ jsx82(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().unsetLineHeight().run(),
-        active: !currentLineHeight,
-        title: t("toolbar.lineHeightDefault"),
-        className: "px-2 w-auto",
-        children: /* @__PURE__ */ jsx82("span", { className: "text-[10px] font-semibold leading-none", children: "LH" })
-      }
-    ),
-    quickLineHeights.map((option) => /* @__PURE__ */ jsx82(
-      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__ */ jsx82("span", { className: "text-[10px] font-semibold", children: option.label })
-      },
-      option.value
-    )),
+    /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => setActiveColorPalette("text"), title: t("colors.textColor"), children: /* @__PURE__ */ jsx82(TextColorIcon, { color: currentTextColor }) }),
+    /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => setActiveColorPalette("highlight"), active: editor.isActive("highlight"), title: t("colors.highlight"), children: /* @__PURE__ */ jsx82(HighlightColorIcon, { color: currentHighlightColor }) }),
     /* @__PURE__ */ jsx82("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ jsx82(
       ToolbarButton,
       {
-        onClick: () => editor.chain().focus().toggleSubscript().run(),
-        active: editor.isActive("subscript"),
-        title: t("toolbar.subscript"),
-        children: /* @__PURE__ */ jsx82(SubscriptIcon2, { className: "w-4 h-4" })
-      }
-    ),
-    /* @__PURE__ */ jsx82(
-      ToolbarButton,
-      {
-        onClick: () => editor.chain().focus().toggleSuperscript().run(),
-        active: editor.isActive("superscript"),
-        title: t("toolbar.superscript"),
-        children: /* @__PURE__ */ jsx82(SuperscriptIcon2, { className: "w-4 h-4" })
+        onClick: () => setShowTypographyPanel(true),
+        active: Boolean(currentFontSize || currentLineHeight || editor.isActive("subscript") || editor.isActive("superscript")),
+        title: t("toolbar.textStyle"),
+        children: /* @__PURE__ */ jsx82(Type3, { className: "w-4 h-4" })
       }
     )
   ] });
@@ -26829,9 +27200,9 @@ var CustomBubbleMenu = ({
   const BUBBLE_MENU_OFFSET = 16;
   const [isVisible, setIsVisible] = useState45(false);
   const [position, setPosition] = useState45({ top: 0, left: 0 });
-  const menuRef = useRef31(null);
-  const keepOpenRef = useRef31(false);
-  const showTimeoutRef = useRef31(null);
+  const menuRef = useRef32(null);
+  const keepOpenRef = useRef32(false);
+  const showTimeoutRef = useRef32(null);
   const setKeepOpen = useCallback22((next) => {
     keepOpenRef.current = next;
     if (next) setIsVisible(true);
@@ -26884,12 +27255,12 @@ var CustomBubbleMenu = ({
     };
   }, [editor]);
   if (!isVisible) return null;
-  return createPortal8(
+  return createPortal9(
     /* @__PURE__ */ jsx82(
       "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`,
@@ -26940,7 +27311,7 @@ var CustomFloatingMenu = ({ editor }) => {
     };
   }, [editor]);
   if (!isVisible) return null;
-  return createPortal8(
+  return createPortal9(
     /* @__PURE__ */ jsx82(
       "div",
       {
@@ -32672,10 +33043,10 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
 );
 
 // src/components/UEditor/use-table-interactions.ts
-import React77, { useEffect as useEffect35, useRef as useRef33 } from "react";
+import React77, { useEffect as useEffect35, useRef as useRef34 } from "react";
 
 // src/components/UEditor/use-table-row-resize.ts
-import React76, { useRef as useRef32 } from "react";
+import React76, { useRef as useRef33 } from "react";
 function useTableRowResize({
   editor,
   setHoveredTableCell,
@@ -32684,8 +33055,8 @@ function useTableRowResize({
   clearAllTableResizeHover,
   scheduleTableLayoutSync
 }) {
-  const commitFrameRef = useRef32(null);
-  const stateRef = useRef32(null);
+  const commitFrameRef = useRef33(null);
+  const stateRef = useRef33(null);
   const commitPreview = React76.useCallback(() => {
     if (!editor) return;
     const state = stateRef.current;
@@ -32841,14 +33212,14 @@ function useTableRowResize({
 
 // src/components/UEditor/use-table-interactions.ts
 function useUEditorTableInteractions(editor, editable = true) {
-  const editorContentRef = useRef33(null);
-  const tableColumnGuideRef = useRef33(null);
-  const tableRowGuideRef = useRef33(null);
-  const activeTableCellHighlightRef = useRef33(null);
-  const hoveredTableCellRef = useRef33(null);
-  const activeTableCellRef = useRef33(null);
-  const suppressActiveCellHighlightRef = useRef33(false);
-  const tableLayoutSyncFrameRef = useRef33(null);
+  const editorContentRef = useRef34(null);
+  const tableColumnGuideRef = useRef34(null);
+  const tableRowGuideRef = useRef34(null);
+  const activeTableCellHighlightRef = useRef34(null);
+  const hoveredTableCellRef = useRef34(null);
+  const activeTableCellRef = useRef34(null);
+  const suppressActiveCellHighlightRef = useRef34(false);
+  const tableLayoutSyncFrameRef = useRef34(null);
   const setEditorResizeCursor = React77.useCallback((cursor) => {
     const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
     if (proseMirror) {
@@ -33150,8 +33521,8 @@ var UEditor = React78.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = useRef34(null);
-  const lastAppliedContentRef = useRef34(content ?? "");
+  const inFlightPrepareRef = useRef35(null);
+  const lastAppliedContentRef = useRef35(content ?? "");
   const extensions = useMemo24(
     () => buildUEditorExtensions({
       placeholder: effectivePlaceholder,