@underverse-ui/underverse 2.0.12 → 2.0.13

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.12",
+  "version": "2.0.13",
   "sourceEntry": "src/index.ts",
   "totalExports": 257,
   "exports": [

package/dist/{chunk-EVS5YWTO.js → chunk-MMMCBJ2L.js}

@@ -2371,6 +2371,18 @@ var EditorColorPalette = ({
   const automaticColor = colors[0]?.color ?? "";
   const paletteColors = colors.slice(1);
   const customColorSelect = onCustomColorSelect ?? onSelect;
+  const [hexInput, setHexInput] = React6.useState(currentColor.startsWith("#") ? currentColor : "");
+  React6.useEffect(() => {
+    setHexInput(currentColor.startsWith("#") ? currentColor : "");
+  }, [currentColor]);
+  const commitHex = (val) => {
+    let formatted = val.trim();
+    if (!formatted) return;
+    if (!formatted.startsWith("#")) formatted = `#${formatted}`;
+    if (/^#([0-9A-F]{3}){1,2}$/i.test(formatted)) {
+      customColorSelect(formatted);
+    }
+  };
   React6.useEffect(() => {
     const input = colorInputRef.current;
     if (!input) return;
@@ -2382,7 +2394,7 @@ var EditorColorPalette = ({
     const input = colorInputRef.current;
     if (input) input.value = currentColor.startsWith("#") ? currentColor : "#000000";
   }, [currentColor]);
-  return /* @__PURE__ */ jsxs4("div", { className: "w-56 p-2", children: [
+  return /* @__PURE__ */ jsxs4("div", { className: "w-56 p-2", "data-ueditor-keep-open": true, children: [
     /* @__PURE__ */ jsx6("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
     /* @__PURE__ */ jsxs4(
       "button",
@@ -2416,29 +2428,48 @@ var EditorColorPalette = ({
         children: currentColor === c.color && /* @__PURE__ */ jsx6("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx6(Check2, { className: cn("h-3.5 w-3.5", getSwatchCheckClass(c.color)) }) })
       }
     ) }, `${c.name}-${c.color}`)) }),
-    /* @__PURE__ */ jsxs4(
-      "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__ */ jsx6(
-            "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__ */ jsxs4("div", { className: "mt-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex h-8 flex-1 items-center gap-1.5 rounded-md border border-input bg-muted/30 px-2", children: [
+        /* @__PURE__ */ jsx6(
+          "span",
+          {
+            className: "h-4 w-4 shrink-0 rounded-[2px] border border-border",
+            style: { backgroundColor: hexInput.startsWith("#") ? hexInput : currentColor.startsWith("#") ? currentColor : "transparent" }
+          }
+        ),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            type: "text",
+            value: hexInput,
+            onChange: (e) => setHexInput(e.target.value),
+            onBlur: () => commitHex(hexInput),
+            onMouseDown: (e) => e.stopPropagation(),
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => {
+              e.stopPropagation();
+              if (e.key === "Enter") {
+                e.preventDefault();
+                commitHex(hexInput);
               }
-            }
-          ),
-          /* @__PURE__ */ jsx6("span", { className: "flex-1 text-center", children: t("colors.moreColors") }),
-          /* @__PURE__ */ jsx6(Palette, { className: "h-4 w-4 text-muted-foreground" })
-        ]
-      }
-    ),
+            },
+            placeholder: "#HEX",
+            className: "h-full w-full bg-transparent text-xs font-mono text-foreground outline-none placeholder:text-muted-foreground"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          onMouseDown: (e) => e.stopPropagation(),
+          onClick: () => colorInputRef.current?.click(),
+          title: t("colors.moreColors"),
+          className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-input bg-muted/30 text-foreground transition-colors hover:bg-muted",
+          children: /* @__PURE__ */ jsx6(Palette, { className: "h-4 w-4 text-muted-foreground" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx6(
       "input",
       {
@@ -2584,8 +2615,9 @@ var DEFAULT_TABLE_ROW_HEIGHT = 25;
 var MIN_TABLE_ROW_HEIGHT = DEFAULT_TABLE_ROW_HEIGHT;
 var COLUMN_RESIZE_LINE_THICKNESS = 2;
 var ROW_RESIZE_LINE_THICKNESS = 2;
-var UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor-table-layout-change";
-var TABLE_RESIZE_HIT_ZONE = 10;
+var UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor:table-layout-change";
+var isRowResizingGlobal = { active: false };
+var TABLE_RESIZE_HIT_ZONE = 5;
 function findTableRowNodeInfo(view, rowElement) {
   const firstCell = rowElement.querySelector("th,td");
   if (!firstCell) return null;
@@ -2639,17 +2671,60 @@ function getSelectionTableCell(view) {
   const cell = element?.closest?.("th,td");
   return cell instanceof HTMLElement ? cell : null;
 }
-function isRowResizeHotspot(cell, clientX, clientY) {
+function resolveRowResizeTarget(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  return nearBottom && !nearRight;
+  const row = cell.closest("tr");
+  if (!(row instanceof HTMLTableRowElement) || !(cell instanceof HTMLTableCellElement)) {
+    return null;
+  }
+  const distToBottom = Math.abs(clientY - rect.bottom);
+  const distToTop = Math.abs(clientY - rect.top);
+  const distToRight = Math.abs(clientX - rect.right);
+  const distToLeft = Math.abs(clientX - rect.left);
+  if (distToRight <= 3 || distToLeft <= 3) {
+    return null;
+  }
+  if (distToBottom <= TABLE_RESIZE_HIT_ZONE) {
+    return { row, cell };
+  }
+  if (distToTop <= TABLE_RESIZE_HIT_ZONE) {
+    const prevRow = row.previousElementSibling;
+    if (prevRow instanceof HTMLTableRowElement) {
+      const cellIndex = cell.cellIndex;
+      const prevCell = prevRow.children[cellIndex] ?? prevRow.firstElementChild;
+      if (prevCell instanceof HTMLTableCellElement) {
+        return { row: prevRow, cell: prevCell };
+      }
+    }
+  }
+  return null;
 }
-function isColumnResizeHotspot(cell, clientX, clientY) {
+function resolveColumnResizeTarget(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  return nearRight && !nearBottom;
+  const row = cell.closest("tr");
+  if (!(row instanceof HTMLTableRowElement) || !(cell instanceof HTMLTableCellElement)) {
+    return null;
+  }
+  const distToRight = Math.abs(clientX - rect.right);
+  const distToLeft = Math.abs(clientX - rect.left);
+  const distToBottom = Math.abs(clientY - rect.bottom);
+  const distToTop = Math.abs(clientY - rect.top);
+  if (distToBottom <= 3 || distToTop <= 3) {
+    return null;
+  }
+  if (distToRight <= TABLE_RESIZE_HIT_ZONE) {
+    return { row, cell };
+  }
+  if (distToLeft <= TABLE_RESIZE_HIT_ZONE) {
+    const prevCell = cell.previousElementSibling;
+    if (prevCell instanceof HTMLTableCellElement) {
+      return { row, cell: prevCell };
+    }
+  }
+  return null;
+}
+function isRowResizeHotspot(cell, clientX, clientY) {
+  return resolveRowResizeTarget(cell, clientX, clientY) !== null;
 }
 function getRelativeBoundaryMetrics(surface, table, row, cell) {
   const surfaceRect = surface.getBoundingClientRect();
@@ -3280,7 +3355,7 @@ var ToolbarButton = React7.forwardRef(({ onClick, onMouseDown, active, disabled,
   return button;
 });
 ToolbarButton.displayName = "ToolbarButton";
-var ToolbarDivider = () => /* @__PURE__ */ jsx7("div", { "aria-hidden": "true", className: "mx-1.5 h-7 w-px shrink-0 bg-[rgba(123,129,132,0.24)]" });
+var ToolbarDivider = () => /* @__PURE__ */ jsx7("div", { "aria-hidden": "true", className: "mx-1 h-5 w-px shrink-0 bg-[rgba(123,129,132,0.24)]" });
 var TableInsertGrid = ({
   insertLabel,
   previewTemplate,
@@ -3334,6 +3409,7 @@ var EditorToolbar = ({
   maxImageFileSize = DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
   allowedImageMimeTypes = DEFAULT_UEDITOR_IMAGE_MIME_TYPES,
   fontFamilies,
+  defaultFontFamily = "Inter",
   fontSizes,
   lineHeights,
   letterSpacings
@@ -3376,9 +3452,9 @@ var EditorToolbar = ({
   const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? "13";
   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 defaultFontFamily = availableFontFamilies[0];
-  const defaultFontFamilyValue = defaultFontFamily?.value ?? "";
-  const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : defaultFontFamily?.label ?? t("toolbar.fontDefault");
+  const defaultFontFamilyOption = availableFontFamilies.find((opt) => normalizeStyleValue(opt.value) === normalizeStyleValue(defaultFontFamily)) ?? availableFontFamilies[0];
+  const defaultFontFamilyValue = defaultFontFamilyOption?.value ?? defaultFontFamily ?? "Inter";
+  const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : defaultFontFamilyOption?.label ?? defaultFontFamily ?? t("toolbar.fontDefault");
   const displayedFontFamilyValue = currentFontFamily || defaultFontFamilyValue;
   const displayedFontSizeLabel = currentFontSize ? currentFontSizeLabel : "13";
   const activeFontSize = currentFontSize || "13px";
@@ -3510,7 +3586,7 @@ var EditorToolbar = ({
     "div",
     {
       role: "toolbar",
-      className: "flex min-h-12 flex-nowrap items-center gap-0.5 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-2 py-2 dark:bg-muted/60",
+      className: "flex min-h-9 flex-nowrap items-center gap-0.5 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-1.5 py-1 dark:bg-muted/60",
       children: [
         isFull && /* @__PURE__ */ jsx7(
           DropdownMenu,
@@ -3521,9 +3597,9 @@ var EditorToolbar = ({
                 onClick: () => {
                 },
                 title: t("toolbar.fontFamily"),
-                className: "h-8 w-44 max-w-44 justify-between gap-2 border border-[rgba(196,197,213,0.6)] bg-white px-2.5 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
+                className: "h-7 w-40 max-w-40 justify-between gap-1.5 border border-[rgba(196,197,213,0.6)] bg-white px-2 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-normal", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
+                  /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-left text-xs font-normal", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
                   /* @__PURE__ */ jsx7(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })
                 ]
               }
@@ -3550,9 +3626,9 @@ var EditorToolbar = ({
                 onClick: () => {
                 },
                 title: t("toolbar.fontSize"),
-                className: "h-8 w-16 justify-between gap-2 border border-[rgba(196,197,213,0.6)] bg-white px-2.5 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
+                className: "h-7 w-14 justify-between gap-1 border border-[rgba(196,197,213,0.6)] bg-white px-2 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
                 children: [
-                  /* @__PURE__ */ jsx7("span", { className: "text-sm font-normal leading-none", children: displayedFontSizeLabel }),
+                  /* @__PURE__ */ jsx7("span", { className: "text-xs font-normal leading-none", children: displayedFontSizeLabel }),
                   /* @__PURE__ */ jsx7(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })
                 ]
               }
@@ -3677,6 +3753,27 @@ var EditorToolbar = ({
           )
         ] }),
         /* @__PURE__ */ jsx7(ToolbarDivider, {}),
+        (isMediumFull || isFull) && /* @__PURE__ */ jsx7(
+          DropdownMenu,
+          {
+            isOpen: isTableMenuOpen,
+            onOpenChange: setIsTableMenuOpen,
+            trigger: /* @__PURE__ */ jsx7(ToolbarButton, { onClick: () => {
+            }, title: t("toolbar.table"), children: /* @__PURE__ */ jsx7(FigmaTableIcon, { className: "h-4 w-4" }) }),
+            contentClassName: "p-2 min-w-56",
+            children: /* @__PURE__ */ jsx7(
+              TableInsertGrid,
+              {
+                insertLabel: t("tableMenu.insertTable"),
+                previewTemplate: t("tableMenu.gridPreview"),
+                onInsert: (rows, cols) => {
+                  editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                  setIsTableMenuOpen(false);
+                }
+              }
+            )
+          }
+        ),
         /* @__PURE__ */ jsx7(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ jsx7(FigmaBoldIcon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsx7(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ jsx7(FigmaItalicIcon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsx7(
@@ -4147,27 +4244,6 @@ var EditorToolbar = ({
             ] })
           }
         ),
-        (isMediumFull || isFull) && /* @__PURE__ */ jsx7(
-          DropdownMenu,
-          {
-            isOpen: isTableMenuOpen,
-            onOpenChange: setIsTableMenuOpen,
-            trigger: /* @__PURE__ */ jsx7(ToolbarButton, { onClick: () => {
-            }, title: t("toolbar.table"), children: /* @__PURE__ */ jsx7(FigmaTableIcon, { className: "h-4 w-4" }) }),
-            contentClassName: "p-2 min-w-56",
-            children: /* @__PURE__ */ jsx7(
-              TableInsertGrid,
-              {
-                insertLabel: t("tableMenu.insertTable"),
-                previewTemplate: t("tableMenu.gridPreview"),
-                onInsert: (rows, cols) => {
-                  editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
-                  setIsTableMenuOpen(false);
-                }
-              }
-            )
-          }
-        ),
         /* @__PURE__ */ jsx7(ToolbarDivider, {}),
         /* @__PURE__ */ jsx7(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ jsx7(FigmaUndoIcon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsx7(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ jsx7(FigmaRedoIcon, { className: "h-4 w-4" }) }),
@@ -4359,7 +4435,7 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
   "[&_.selectedCell]:after:absolute",
   "[&_.selectedCell]:after:inset-0",
   "[&_.selectedCell]:after:z-[2]",
-  "[&_.selectedCell]:after:bg-primary/15",
+  "[&_.selectedCell]:after:bg-primary/8",
   "[&_.selectedCell]:after:pointer-events-none",
   "[&_.column-resize-handle]:pointer-events-auto",
   "[&_.column-resize-handle]:cursor-col-resize",
@@ -4373,17 +4449,10 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
   "[&_.column-resize-handle]:rounded-none",
   "[&_.column-resize-handle]:opacity-0",
   "[&_.column-resize-handle]:transition-opacity",
-  "[&_.column-resize-handle]:after:absolute",
-  "[&_.column-resize-handle]:after:top-0",
-  "[&_.column-resize-handle]:after:bottom-0",
-  "[&_.column-resize-handle]:after:left-1/2",
-  "[&_.column-resize-handle]:after:w-0.5",
-  "[&_.column-resize-handle]:after:-translate-x-1/2",
-  "[&_.column-resize-handle]:after:rounded-full",
-  "[&_.column-resize-handle]:after:bg-primary/75",
-  "[&_.column-resize-handle]:after:content-['']",
-  "[&.resize-cursor_.column-resize-handle]:opacity-100",
-  "[&.resize-cursor_.column-resize-handle]:after:bg-primary",
+  "[&_.column-resize-handle]:duration-200",
+  "[&_.column-resize-handle]:delay-100",
+  "[&_.column-resize-handle]:ease-out",
+  "[&_.column-resize-handle]:after:hidden",
   "[&_.column-resize-dragging]:min-w-0",
   "[&.resize-cursor]:cursor-col-resize",
   "[&.resize-row-cursor]:cursor-row-resize",
@@ -4471,12 +4540,14 @@ export {
   COLUMN_RESIZE_LINE_THICKNESS,
   ROW_RESIZE_LINE_THICKNESS,
   UEDITOR_TABLE_LAYOUT_CHANGE_EVENT,
+  isRowResizingGlobal,
   findTableRowNodeInfo,
   resolveEventElement,
   isPointOverRenderedText,
   getSelectionTableCell,
+  resolveRowResizeTarget,
+  resolveColumnResizeTarget,
   isRowResizeHotspot,
-  isColumnResizeHotspot,
   getRelativeBoundaryMetrics,
   getRelativeCellMetrics,
   getRelativeSelectedCellsMetrics,
@@ -4515,4 +4586,4 @@ export {
   EditorToolbar,
   UEDITOR_PROSEMIRROR_CLASS_NAME
 };
-//# sourceMappingURL=chunk-EVS5YWTO.js.map
+//# sourceMappingURL=chunk-MMMCBJ2L.js.map