@underverse-ui/underverse 1.0.128 → 1.0.129

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.128",
+  "version": "1.0.129",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

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"
     }
   }
 };
@@ -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"
       }
@@ -25491,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",
@@ -26803,6 +26880,7 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 var import_react51 = require("react");
 var import_react52 = require("@tiptap/react");
+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");
@@ -26858,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,
@@ -26882,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)(
@@ -26939,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") {
@@ -26952,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)(
@@ -27175,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,
       {
@@ -32134,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;