@underverse-ui/underverse 1.0.128 → 1.0.130

package/dist/index.d.cts

@@ -3576,6 +3576,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -3843,6 +3844,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -4109,6 +4111,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -4375,6 +4378,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -4645,6 +4649,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 } | {
@@ -4911,6 +4916,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 } | {
@@ -5176,6 +5182,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 } | {
@@ -5441,6 +5448,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 };

package/dist/index.d.ts

@@ -3576,6 +3576,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -3843,6 +3844,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -4109,6 +4111,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -4375,6 +4378,7 @@ declare const underverseMessages: {
                 alignLeft: string;
                 alignCenter: string;
                 alignRight: string;
+                cellBackground: string;
             };
         };
     };
@@ -4645,6 +4649,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 } | {
@@ -4911,6 +4916,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 } | {
@@ -5176,6 +5182,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 } | {
@@ -5441,6 +5448,7 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             alignLeft: string;
             alignCenter: string;
             alignRight: string;
+            cellBackground: string;
         };
     };
 };

package/dist/index.js

@@ -828,7 +828,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"
     }
   }
 };
@@ -1097,7 +1098,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"
     }
   }
 };
@@ -1365,7 +1367,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"
     }
   }
 };
@@ -1633,7 +1636,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"
     }
   }
 };
@@ -23836,6 +23840,7 @@ import React78, { useEffect as useEffect36, useImperativeHandle as useImperative
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
+import { mergeAttributes as mergeAttributes2 } from "@tiptap/core";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
@@ -25161,6 +25166,64 @@ var UEditorTable = Table3.extend({
 var table_align_default = UEditorTable;
 
 // src/components/UEditor/extensions.ts
+var CustomTableCell = TableCell2.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",
+      mergeAttributes2(this.options.HTMLAttributes, HTMLAttributes, mergedStyle ? { style: mergedStyle } : {}),
+      0
+    ];
+  }
+});
+var CustomTableHeader = TableHeader2.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",
+      mergeAttributes2(this.options.HTMLAttributes, HTMLAttributes, mergedStyle ? { style: mergedStyle } : {}),
+      0
+    ];
+  }
+});
 var lowlight = createLowlight(common);
 function buildUEditorExtensions({
   placeholder,
@@ -25259,12 +25322,12 @@ function buildUEditorExtensions({
       }
     }),
     table_row_default,
-    TableCell2.configure({
+    CustomTableCell.configure({
       HTMLAttributes: {
         class: "border border-border p-2 min-w-25"
       }
     }),
-    TableHeader2.configure({
+    CustomTableHeader.configure({
       HTMLAttributes: {
         class: "border border-border p-2 bg-muted font-semibold min-w-25"
       }
@@ -25340,7 +25403,7 @@ import {
 
 // src/components/UEditor/colors.tsx
 import { useMemo as useMemo22, useRef as useRef29 } from "react";
-import { Check as Check10, Highlighter, Palette as Palette2 } from "lucide-react";
+import { Check as Check10, Highlighter, Palette as Palette2, Paintbrush } from "lucide-react";
 import { jsx as jsx78, jsxs as jsxs65 } from "react/jsx-runtime";
 var TextColorIcon = ({ color }) => {
   const underlineColor = color && color !== "inherit" ? color : "currentColor";
@@ -25370,6 +25433,20 @@ var HighlightColorIcon = ({ color }) => {
     )
   ] });
 };
+var CellBgColorIcon = ({ 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(Paintbrush, { 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",
@@ -26682,6 +26759,7 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 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 { isInTable as isSelectionInTable, setCellAttr } from "@tiptap/pm/tables";
 import { createPortal as createPortal8 } from "react-dom";
 import {
   AlignCenter as AlignCenter2,
@@ -26754,6 +26832,16 @@ var FloatingMenuContent = ({ editor }) => {
     }
   );
 };
+function applyTableCellBackground(editor, color) {
+  const value = color || null;
+  const { state, view } = editor;
+  const applied = setCellAttr("backgroundColor", value)(state, view.dispatch.bind(view));
+  if (applied) {
+    view.focus();
+    return;
+  }
+  editor.chain().focus().setCellAttribute("backgroundColor", value).run();
+}
 var BubbleMenuContent = ({
   editor,
   onKeepOpenChange,
@@ -26778,6 +26866,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 = isSelectionInTable(editor.state);
   const currentFontSize = normalizeStyleValue(textStyleAttrs.fontSize);
   const currentLineHeight = normalizeStyleValue(textStyleAttrs.lineHeight);
   const quickFontSizes = useMemo23(
@@ -26835,40 +26925,33 @@ var BubbleMenuContent = ({
   }
   if (activeColorPalette) {
     const isTextPalette = activeColorPalette === "text";
-    return /* @__PURE__ */ jsxs68("div", { className: "w-56", children: [
-      /* @__PURE__ */ jsx82(
-        EditorColorPalette,
-        {
-          colors: isTextPalette ? textColors : highlightColors,
-          currentColor: isTextPalette ? currentTextColor : currentHighlightColor,
-          onSelect: (color) => {
-            if (isTextPalette) {
-              if (color === "inherit") {
-                editor.chain().focus().unsetColor().run();
-              } else {
-                editor.chain().focus().setColor(color).run();
-              }
+    const isHighlightPalette = activeColorPalette === "highlight";
+    return /* @__PURE__ */ jsx82("div", { className: "w-56", children: /* @__PURE__ */ jsx82(
+      EditorColorPalette,
+      {
+        colors: isTextPalette ? textColors : highlightColors,
+        currentColor: isTextPalette ? currentTextColor : isHighlightPalette ? currentHighlightColor : currentCellBgColor,
+        onSelect: (color) => {
+          if (isTextPalette) {
+            if (color === "inherit") {
+              editor.chain().focus().unsetColor().run();
             } else {
-              if (color === "") {
-                editor.chain().focus().unsetHighlight().run();
-              } else {
-                editor.chain().focus().toggleHighlight({ color }).run();
-              }
+              editor.chain().focus().setColor(color).run();
             }
-          },
-          label: isTextPalette ? t("colors.textColor") : t("colors.highlight")
-        }
-      ),
-      /* @__PURE__ */ jsx82("div", { className: "p-2 border-t", children: /* @__PURE__ */ jsx82(
-        "button",
-        {
-          type: "button",
-          onClick: () => setActiveColorPalette(null),
-          className: "w-full py-1.5 text-sm rounded-lg hover:bg-muted transition-colors",
-          children: t("colors.done")
-        }
-      ) })
-    ] });
+          } else if (isHighlightPalette) {
+            if (color === "") {
+              editor.chain().focus().unsetHighlight().run();
+            } else {
+              editor.chain().focus().toggleHighlight({ color }).run();
+            }
+          } else {
+            applyTableCellBackground(editor, color);
+          }
+          setActiveColorPalette(null);
+        },
+        label: isTextPalette ? t("colors.textColor") : isHighlightPalette ? t("colors.highlight") : t("tableMenu.cellBackground") || "Cell background"
+      }
+    ) });
   }
   if (isImageSelected) {
     return /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-0.5 p-1", children: [
@@ -27071,7 +27154,7 @@ var BubbleMenuContent = ({
     ),
     /* @__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" }),
+    isInTable2 && /* @__PURE__ */ jsx82(ToolbarButton, { onClick: () => setActiveColorPalette("cell-bg"), active: Boolean(currentCellBgColor), title: t("tableMenu.cellBackground") || "Cell background", children: /* @__PURE__ */ jsx82(CellBgColorIcon, { color: currentCellBgColor }) }),
     /* @__PURE__ */ jsx82(
       ToolbarButton,
       {
@@ -32044,11 +32127,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;