@underverse-ui/underverse 1.0.127 → 1.0.129

package/dist/index.cjs

@@ -1014,7 +1014,8 @@ var en_default = {
       dragColumn: "Drag Column",
       alignLeft: "Align Table Left",
       alignCenter: "Align Table Center",
-      alignRight: "Align Table Right"
+      alignRight: "Align Table Right",
+      cellBackground: "Cell Background"
     }
   }
 };
@@ -1283,7 +1284,8 @@ var vi_default = {
       dragColumn: "K\xE9o c\u1ED9t",
       alignLeft: "C\u0103n b\u1EA3ng tr\xE1i",
       alignCenter: "C\u0103n b\u1EA3ng gi\u1EEFa",
-      alignRight: "C\u0103n b\u1EA3ng ph\u1EA3i"
+      alignRight: "C\u0103n b\u1EA3ng ph\u1EA3i",
+      cellBackground: "M\xE0u n\u1EC1n \xF4"
     }
   }
 };
@@ -1551,7 +1553,8 @@ var ko_default = {
       dragColumn: "\uC5F4 \uB4DC\uB798\uADF8",
       alignLeft: "\uD45C \uC67C\uCABD \uC815\uB82C",
       alignCenter: "\uD45C \uAC00\uC6B4\uB370 \uC815\uB82C",
-      alignRight: "\uD45C \uC624\uB978\uCABD \uC815\uB82C"
+      alignRight: "\uD45C \uC624\uB978\uCABD \uC815\uB82C",
+      cellBackground: "\uC140 \uBC30\uACBD\uC0C9"
     }
   }
 };
@@ -1819,7 +1822,8 @@ var ja_default = {
       dragColumn: "\u5217\u3092\u30C9\u30E9\u30C3\u30B0",
       alignLeft: "\u8868\u3092\u5DE6\u5BC4\u305B",
       alignCenter: "\u8868\u3092\u4E2D\u592E\u63C3\u3048",
-      alignRight: "\u8868\u3092\u53F3\u5BC4\u305B"
+      alignRight: "\u8868\u3092\u53F3\u5BC4\u305B",
+      cellBackground: "\u30BB\u30EB\u80CC\u666F\u8272"
     }
   }
 };
@@ -7404,7 +7408,7 @@ var DropdownMenuItem = ({
     disabled,
     onMouseDown: (e) => e.preventDefault(),
     className: cn(
-      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group",
+      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group cursor-pointer",
       "hover:bg-accent hover:text-accent-foreground",
       "focus:bg-accent focus:text-accent-foreground focus:outline-none",
       "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -24006,6 +24010,7 @@ var import_react56 = __toESM(require("react"), 1);
 var import_react57 = require("@tiptap/react");
 
 // src/components/UEditor/extensions.ts
+var import_core10 = require("@tiptap/core");
 var import_extension_document = __toESM(require("@tiptap/extension-document"), 1);
 var import_extension_paragraph = __toESM(require("@tiptap/extension-paragraph"), 1);
 var import_extension_text = __toESM(require("@tiptap/extension-text"), 1);
@@ -25319,6 +25324,64 @@ var UEditorTable = import_extension_table.Table.extend({
 var table_align_default = UEditorTable;
 
 // src/components/UEditor/extensions.ts
+var CustomTableCell = import_extension_table_cell.default.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.style.backgroundColor || element.getAttribute("data-background-color") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+          return {
+            "data-background-color": attributes.backgroundColor
+          };
+        }
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    const style = HTMLAttributes.style || "";
+    const bg = HTMLAttributes["data-background-color"];
+    const mergedStyle = bg ? `${style}; background-color: ${bg}`.replace(/^;/, "") : style;
+    return [
+      "td",
+      (0, import_core10.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, mergedStyle ? { style: mergedStyle } : {}),
+      0
+    ];
+  }
+});
+var CustomTableHeader = import_extension_table_header.default.extend({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      backgroundColor: {
+        default: null,
+        parseHTML: (element) => element.style.backgroundColor || element.getAttribute("data-background-color") || null,
+        renderHTML: (attributes) => {
+          if (!attributes.backgroundColor) {
+            return {};
+          }
+          return {
+            "data-background-color": attributes.backgroundColor
+          };
+        }
+      }
+    };
+  },
+  renderHTML({ HTMLAttributes }) {
+    const style = HTMLAttributes.style || "";
+    const bg = HTMLAttributes["data-background-color"];
+    const mergedStyle = bg ? `${style}; background-color: ${bg}`.replace(/^;/, "") : style;
+    return [
+      "th",
+      (0, import_core10.mergeAttributes)(this.options.HTMLAttributes, HTMLAttributes, mergedStyle ? { style: mergedStyle } : {}),
+      0
+    ];
+  }
+});
 var lowlight = (0, import_lowlight.createLowlight)(import_lowlight.common);
 function buildUEditorExtensions({
   placeholder,
@@ -25417,12 +25480,12 @@ function buildUEditorExtensions({
       }
     }),
     table_row_default,
-    import_extension_table_cell.default.configure({
+    CustomTableCell.configure({
       HTMLAttributes: {
         class: "border border-border p-2 min-w-25"
       }
     }),
-    import_extension_table_header.default.configure({
+    CustomTableHeader.configure({
       HTMLAttributes: {
         class: "border border-border p-2 bg-muted font-semibold min-w-25"
       }
@@ -25456,7 +25519,6 @@ 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");
 
@@ -25492,6 +25554,20 @@ var HighlightColorIcon = ({ color }) => {
     )
   ] });
 };
+var CellBgColorIcon = ({ 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)(import_lucide_react42.Paintbrush, { 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",
@@ -25951,7 +26027,7 @@ var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, a
       onClick,
       disabled,
       className: cn(
-        "flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-150",
+        "flex items-center justify-center w-7 h-7 rounded-md transition-colors duration-150 cursor-pointer",
         "gap-0.5 [&_svg+svg]:-ml-1",
         "hover:bg-accent",
         "focus:outline-none focus:ring-2 focus:ring-primary/20",
@@ -26030,11 +26106,6 @@ var EditorToolbar = ({
   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");
@@ -26060,53 +26131,6 @@ var EditorToolbar = ({
   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(() => {
-    if (document.activeElement === fontSizeControlRef.current?.querySelector("input")) return;
-    setFontSizeDraft(currentFontSize.replace(/px$/i, "") || "16");
-  }, [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));
-  };
-  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);
@@ -26146,21 +26170,11 @@ var EditorToolbar = ({
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-          "button",
-          {
-            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" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.fontFamily"), className: "px-1.5 w-auto gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Baseline, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
+        ] }),
         contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -26178,102 +26192,55 @@ 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)(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-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"
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.fontSize"), className: "px-1.5 w-auto gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronsUpDown, { className: "h-3 w-3 text-muted-foreground", strokeWidth: 2.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-xs font-bold leading-none", children: "A" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
+        ] }),
+        contentClassName: "max-h-80 overflow-y-auto min-w-32 p-2",
+        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
+            }
           ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-              "input",
-              {
-                type: "number",
-                min: 8,
-                max: 96,
-                step: 1,
-                value: fontSizeDraft,
-                onChange: (e) => setFontSizeDraft(e.target.value),
-                onBlur: applyFontSizeDraft,
-                onMouseDown: (e) => e.stopPropagation(),
-                onClick: (e) => e.stopPropagation(),
-                onKeyDown: (e) => {
-                  e.stopPropagation();
-                  if (e.key === "Enter") {
-                    e.preventDefault();
-                    applyFontSizeDraft();
-                  }
-                },
-                "aria-label": t("toolbar.fontSize"),
-                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__ */ (0, import_jsx_runtime81.jsx)(
-              "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__ */ (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
-      )
-    ] }),
+          availableFontSizes.map((option) => /* @__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
+          ))
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        contentClassName: "p-2",
+        contentClassName: "p-1",
         trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
-        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
+        }, title: t("toolbar.textStyle"), className: "px-1.5 w-auto gap-0.5", 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" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
         ] }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -26326,7 +26293,7 @@ var EditorToolbar = ({
           /* @__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",
+        contentClassName: "max-h-72 overflow-y-auto p-1",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
@@ -26357,7 +26324,7 @@ var EditorToolbar = ({
           /* @__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",
+        contentClassName: "max-h-72 overflow-y-auto p-1",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
@@ -26913,7 +26880,8 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 var import_react51 = require("react");
 var import_react52 = require("@tiptap/react");
-var import_react_dom9 = require("react-dom");
+var import_tables = require("@tiptap/pm/tables");
+var import_react_dom8 = require("react-dom");
 var import_lucide_react45 = require("lucide-react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var FloatingSlashCommandMenu = ({ editor, onClose }) => {
@@ -26968,6 +26936,16 @@ var FloatingMenuContent = ({ editor }) => {
     }
   );
 };
+function applyTableCellBackground(editor, color) {
+  const value = color || null;
+  const { state, view } = editor;
+  const applied = (0, import_tables.setCellAttr)("backgroundColor", value)(state, view.dispatch.bind(view));
+  if (applied) {
+    view.focus();
+    return;
+  }
+  editor.chain().focus().setCellAttribute("backgroundColor", value).run();
+}
 var BubbleMenuContent = ({
   editor,
   onKeepOpenChange,
@@ -26992,6 +26970,8 @@ var BubbleMenuContent = ({
   const textStyleAttrs = editor.getAttributes("textStyle");
   const currentTextColor = normalizeStyleValue(textStyleAttrs.color) || "inherit";
   const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
+  const currentCellBgColor = normalizeStyleValue(editor.getAttributes("tableCell").backgroundColor || editor.getAttributes("tableHeader").backgroundColor) || "";
+  const isInTable2 = (0, import_tables.isInTable)(editor.state);
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
   const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
   const quickFontSizes = (0, import_react51.useMemo)(
@@ -27049,12 +27029,13 @@ var BubbleMenuContent = ({
   }
   if (activeColorPalette) {
     const isTextPalette = activeColorPalette === "text";
+    const isHighlightPalette = activeColorPalette === "highlight";
     return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "w-56", children: [
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         EditorColorPalette,
         {
           colors: isTextPalette ? textColors : highlightColors,
-          currentColor: isTextPalette ? currentTextColor : currentHighlightColor,
+          currentColor: isTextPalette ? currentTextColor : isHighlightPalette ? currentHighlightColor : currentCellBgColor,
           onSelect: (color) => {
             if (isTextPalette) {
               if (color === "inherit") {
@@ -27062,15 +27043,17 @@ var BubbleMenuContent = ({
               } else {
                 editor.chain().focus().setColor(color).run();
               }
-            } else {
+            } else if (isHighlightPalette) {
               if (color === "") {
                 editor.chain().focus().unsetHighlight().run();
               } else {
                 editor.chain().focus().toggleHighlight({ color }).run();
               }
+            } else {
+              applyTableCellBackground(editor, color);
             }
           },
-          label: isTextPalette ? t("colors.textColor") : t("colors.highlight")
+          label: isTextPalette ? t("colors.textColor") : isHighlightPalette ? t("colors.highlight") : t("tableMenu.cellBackground") || "Cell background"
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "p-2 border-t", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
@@ -27285,7 +27268,7 @@ var BubbleMenuContent = ({
     ),
     /* @__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" }),
+    isInTable2 && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ToolbarButton, { onClick: () => setActiveColorPalette("cell-bg"), active: Boolean(currentCellBgColor), title: t("tableMenu.cellBackground") || "Cell background", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CellBgColorIcon, { color: currentCellBgColor }) }),
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       ToolbarButton,
       {
@@ -27361,7 +27344,7 @@ var CustomBubbleMenu = ({
     };
   }, [editor]);
   if (!isVisible) return null;
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
@@ -27417,7 +27400,7 @@ var CustomFloatingMenu = ({ editor }) => {
     };
   }, [editor]);
   if (!isVisible) return null;
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
@@ -31999,15 +31982,12 @@ var FALLBACK_TABLE_COLUMN_WIDTH = 160;
 var MENU_HOVER_PADDING = 18;
 var ROW_HANDLE_HOVER_WIDTH = 28;
 var COLUMN_HANDLE_HOVER_HEIGHT = 28;
-var ROW_HANDLE_GUTTER = 20;
 var TABLE_MENU_TOP_OFFSET = 10;
-var COLUMN_HANDLE_TOP_OFFSET = 8;
 var ADD_COLUMN_RAIL_GAP = 4;
 var ADD_ROW_RAIL_GAP = 4;
 var ADD_COLUMN_HOVER_WIDTH = 24;
 var ADD_ROW_HOVER_HEIGHT = 24;
 var HANDLE_HOVER_RADIUS = 14;
-var IDLE_HANDLE_OPACITY = "0.4";
 var IDLE_HANDLE_SCALE = "0.78";
 var DEFAULT_HOVER_STATE = {
   menuVisible: false,
@@ -32247,11 +32227,16 @@ function TableControls({ editor, containerRef }) {
     const directColumnHandleIndex = directColumnHandle instanceof HTMLElement ? Number.parseInt(directColumnHandle.dataset.columnHandleIndex ?? "", 10) : Number.NaN;
     const visibleTableWidth2 = Math.min(activeLayout.tableWidth, activeLayout.viewportWidth);
     const visibleTableHeight2 = Math.min(activeLayout.tableHeight, activeLayout.viewportHeight);
+    const isMouseInTable = relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + activeLayout.tableHeight;
     const rowHandleIndex = Number.isFinite(directRowHandleIndex) ? directRowHandleIndex : activeLayout.rowHandles.find((rowHandle) => relativeX >= activeLayout.tableLeft - ROW_HANDLE_HOVER_WIDTH && relativeX <= activeLayout.tableLeft && Math.abs(relativeY - rowHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
     const columnHandleIndex = Number.isFinite(directColumnHandleIndex) ? directColumnHandleIndex : activeLayout.columnHandles.find((columnHandle) => relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop && Math.abs(relativeX - columnHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
-    const menuVisible = Boolean(directTableMenu) || relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
-    const addColumnVisible = Boolean(directAddColumn) || relativeX >= activeLayout.tableLeft + visibleTableWidth2 && relativeX <= activeLayout.tableLeft + visibleTableWidth2 + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + visibleTableHeight2;
-    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.tableTop + visibleTableHeight2 && relativeY <= activeLayout.tableTop + visibleTableHeight2 + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + visibleTableWidth2;
+    const menuVisible = Boolean(directTableMenu) || isMouseInTable || relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
+    const lastRow = activeLayout.rowHandles[activeLayout.rowHandles.length - 1];
+    const lastCol = activeLayout.columnHandles[activeLayout.columnHandles.length - 1];
+    const isMouseInLastColumn = lastCol ? relativeX >= lastCol.start && relativeX <= lastCol.start + lastCol.size && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + visibleTableHeight2 : false;
+    const addColumnVisible = Boolean(directAddColumn) || relativeX >= activeLayout.tableLeft + visibleTableWidth2 && relativeX <= activeLayout.tableLeft + visibleTableWidth2 + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + visibleTableHeight2 || isMouseInLastColumn;
+    const isMouseInLastRow = lastRow ? relativeY >= lastRow.start && relativeY <= lastRow.start + lastRow.size && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + visibleTableWidth2 : false;
+    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.tableTop + visibleTableHeight2 && relativeY <= activeLayout.tableTop + visibleTableHeight2 + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + visibleTableWidth2 || isMouseInLastRow;
     setHoverState((prev) => {
       if (prev.menuVisible === menuVisible && prev.addColumnVisible === addColumnVisible && prev.addRowVisible === addRowVisible && prev.rowHandleIndex === rowHandleIndex && prev.columnHandleIndex === columnHandleIndex) {
         return prev;
@@ -32619,8 +32604,8 @@ function TableControls({ editor, containerRef }) {
   }
   const menuTop = Math.max(8, layout.tableTop - TABLE_MENU_TOP_OFFSET);
   const menuLeft = Math.max(8, layout.tableLeft);
-  const rowHandleLeft = Math.max(8, layout.tableLeft - ROW_HANDLE_GUTTER);
-  const columnHandleTop = Math.max(8, layout.tableTop - COLUMN_HANDLE_TOP_OFFSET);
+  const rowHandleLeft = layout.tableLeft - 12;
+  const columnHandleTop = layout.tableTop - 12;
   const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
   const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
   const columnRailTop = layout.tableTop;
@@ -32633,7 +32618,9 @@ function TableControls({ editor, containerRef }) {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
     layout.rowHandles.map((rowHandle) => {
       const menuKey = getRowMenuKey(rowHandle.index);
+      const isActive = rowHandle.index === layout.activeRowIndex;
       const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index || openMenuKey === menuKey;
+      const isShown = visible || isActive;
       return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         "div",
         {
@@ -32647,7 +32634,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "right",
-              disabled: openMenuKey === menuKey,
+              disabled: openMenuKey === menuKey || !visible && isActive,
               content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                 DropdownMenu,
@@ -32684,16 +32671,15 @@ function TableControls({ editor, containerRef }) {
                         document.body.style.cursor = "grabbing";
                       },
                       className: cn(
-                        "inline-flex h-6 w-6 items-center justify-center rounded-full",
-                        "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-                        "cursor-grab active:cursor-grabbing",
-                        "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                        "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                        visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
                       ),
                       style: {
-                        opacity: visible ? 1 : Number(IDLE_HANDLE_OPACITY),
-                        transform: visible ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`
+                        opacity: isShown ? 1 : 0,
+                        transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
+                        pointerEvents: isShown ? "auto" : "none"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripVertical, { className: "h-3.5 w-3.5" })
+                      children: visible ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                     }
                   )
                 }
@@ -32706,7 +32692,9 @@ function TableControls({ editor, containerRef }) {
     }),
     layout.columnHandles.map((columnHandle) => {
       const menuKey = getColumnMenuKey(columnHandle.index);
+      const isActive = columnHandle.index === layout.activeColumnIndex;
       const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index || openMenuKey === menuKey;
+      const isShown = visible || isActive;
       return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         "div",
         {
@@ -32720,7 +32708,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "top",
-              disabled: openMenuKey === menuKey,
+              disabled: openMenuKey === menuKey || !visible && isActive,
               content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                 DropdownMenu,
@@ -32757,16 +32745,15 @@ function TableControls({ editor, containerRef }) {
                         document.body.style.cursor = "grabbing";
                       },
                       className: cn(
-                        "inline-flex h-6 w-6 items-center justify-center rounded-full",
-                        "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-                        "cursor-grab active:cursor-grabbing",
-                        "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                        "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                        visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
                       ),
                       style: {
-                        opacity: visible ? 1 : Number(IDLE_HANDLE_OPACITY),
-                        transform: visible ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`
+                        opacity: isShown ? 1 : 0,
+                        transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
+                        pointerEvents: isShown ? "auto" : "none"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripHorizontal, { className: "h-3.5 w-3.5" })
+                      children: visible ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                     }
                   )
                 }
@@ -32814,8 +32801,9 @@ function TableControls({ editor, containerRef }) {
                       "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
                     ),
                     style: {
-                      opacity: controlsVisible || hoverState.menuVisible || tableMenuOpen ? 1 : 0.5,
-                      transform: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "scale(1)" : "scale(0.82)"
+                      opacity: controlsVisible || hoverState.menuVisible || tableMenuOpen ? 1 : 0,
+                      transform: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "scale(1)" : "scale(0.82)",
+                      pointerEvents: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "auto" : "none"
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.MoreHorizontal, { className: "h-4 w-4" })
                   }
@@ -32857,8 +32845,9 @@ function TableControls({ editor, containerRef }) {
               left: columnRailLeft,
               width: controlsVisible || hoverState.addColumnVisible ? 18 : 12,
               height: controlsVisible || hoverState.addColumnVisible ? visibleTableHeight : 48,
-              opacity: controlsVisible || hoverState.addColumnVisible ? 1 : 0.45,
-              transform: controlsVisible || hoverState.addColumnVisible ? "scale(1)" : "scale(0.92)"
+              opacity: controlsVisible || hoverState.addColumnVisible ? 1 : 0,
+              transform: controlsVisible || hoverState.addColumnVisible ? "scale(1)" : "scale(0.92)",
+              pointerEvents: controlsVisible || hoverState.addColumnVisible ? "auto" : "none"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
           }
@@ -32896,8 +32885,9 @@ function TableControls({ editor, containerRef }) {
               left: controlsVisible || hoverState.addRowVisible ? rowRailLeft : rowRailLeft + Math.max(0, visibleTableWidth / 2 - 24),
               width: controlsVisible || hoverState.addRowVisible ? visibleTableWidth : 48,
               height: controlsVisible || hoverState.addRowVisible ? 16 : 12,
-              opacity: controlsVisible || hoverState.addRowVisible ? 1 : 0.45,
-              transform: controlsVisible || hoverState.addRowVisible ? "scale(1)" : "scale(0.92)"
+              opacity: controlsVisible || hoverState.addRowVisible ? 1 : 0,
+              transform: controlsVisible || hoverState.addRowVisible ? "scale(1)" : "scale(0.92)",
+              pointerEvents: controlsVisible || hoverState.addRowVisible ? "auto" : "none"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
           }