@underverse-ui/underverse 1.0.143 → 1.0.144

package/api-reference.json

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

package/dist/index.cjs

@@ -25896,6 +25896,45 @@ function getImageFiles(dataTransfer) {
   }
   return Array.from(byKey.values());
 }
+function getClipboardData(dataTransfer, type) {
+  try {
+    return dataTransfer.getData(type) ?? "";
+  } catch {
+    return "";
+  }
+}
+function extractClipboardHtmlFragment(html) {
+  const startMarker = "<!--StartFragment-->";
+  const endMarker = "<!--EndFragment-->";
+  const start = html.indexOf(startMarker);
+  const end = html.indexOf(endMarker);
+  if (start >= 0 && end > start) {
+    return html.slice(start + startMarker.length, end);
+  }
+  return html;
+}
+function getClipboardTableHtml(dataTransfer) {
+  const html = getClipboardData(dataTransfer, "text/html");
+  if (!/<table(?:\s|>)/i.test(html)) return "";
+  const fragment = extractClipboardHtmlFragment(html);
+  if (typeof DOMParser !== "undefined") {
+    const doc = new DOMParser().parseFromString(fragment, "text/html");
+    const table = doc.querySelector("table");
+    if (table) return table.outerHTML;
+  }
+  return fragment;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function getClipboardTsvTableHtml(dataTransfer) {
+  const text = getClipboardData(dataTransfer, "text/plain").replace(/\r\n/g, "\n").replace(/\r/g, "\n").replace(/\n+$/, "");
+  if (!text.includes("	")) return "";
+  const rows = text.split("\n").map((row) => row.split("	"));
+  if (rows.length === 0 || rows.every((row) => row.length < 2)) return "";
+  const body = rows.map((row) => `<tr>${row.map((cell) => `<td>${escapeHtml(cell)}</td>`).join("")}</tr>`).join("");
+  return `<table><tbody>${body}</tbody></table>`;
+}
 function fileToDataUrl(file) {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -25950,6 +25989,18 @@ var ClipboardImages = import_core5.Extension.create({
         props: {
           handlePaste: (_view, event) => {
             if (!event || !event.clipboardData) return false;
+            const tableHtml = getClipboardTableHtml(event.clipboardData);
+            if (tableHtml) {
+              event.preventDefault();
+              editor.chain().focus().insertContent(tableHtml).run();
+              return true;
+            }
+            const tsvTableHtml = getClipboardTsvTableHtml(event.clipboardData);
+            if (tsvTableHtml) {
+              event.preventDefault();
+              editor.chain().focus().insertContent(tsvTableHtml).run();
+              return true;
+            }
             const files = getImageFiles(event.clipboardData);
             if (files.length === 0) return false;
             event.preventDefault();
@@ -29080,58 +29131,6 @@ var import_tables2 = require("@tiptap/pm/tables");
 var import_react_dom8 = require("react-dom");
 var import_lucide_react49 = require("lucide-react");
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var FloatingSlashCommandMenu = ({ editor, onClose }) => {
-  const t = useSmartTranslations("UEditor");
-  const messages = (0, import_react62.useMemo)(() => buildSlashCommandMessages(t), [t]);
-  const items = (0, import_react62.useMemo)(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = (0, import_react62.useRef)(null);
-  (0, import_react62.useEffect)(() => {
-    const handleKeyDown2 = (event) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        onClose();
-        return;
-      }
-      const handled = listRef.current?.onKeyDown({ event }) ?? false;
-      if (handled) {
-        event.preventDefault();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown2);
-    return () => document.removeEventListener("keydown", handleKeyDown2);
-  }, [onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    SlashCommandList,
-    {
-      ref: listRef,
-      items,
-      messages,
-      command: (item) => {
-        item.command({ editor });
-        onClose();
-      }
-    }
-  );
-};
-var FloatingMenuContent = ({ editor }) => {
-  const t = useSmartTranslations("UEditor");
-  const [showCommands, setShowCommands] = (0, import_react62.useState)(false);
-  if (showCommands) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FloatingSlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-    "button",
-    {
-      type: "button",
-      onClick: () => setShowCommands(true),
-      className: "flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-accent transition-all group",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_lucide_react49.Plus, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm text-muted-foreground group-hover:text-foreground", children: t("floatingMenu.addBlock") })
-      ]
-    }
-  );
-};
 function applyTableCellBackground(editor, color) {
   const value = color || null;
   const { state, view } = editor;
@@ -29758,54 +29757,6 @@ var CustomBubbleMenu = ({
     document.body
   );
 };
-var CustomFloatingMenu = ({ editor }) => {
-  const FLOATING_MENU_OFFSET = 16;
-  const [isVisible, setIsVisible] = (0, import_react62.useState)(false);
-  const [position, setPosition] = (0, import_react62.useState)({ top: 0, left: 0 });
-  (0, import_react62.useEffect)(() => {
-    const updatePosition = () => {
-      const { state, view } = editor;
-      const { $from, empty } = state.selection;
-      const isEmptyTextBlock = $from.parent.isTextblock && $from.parent.type.name === "paragraph" && $from.parent.textContent === "" && empty;
-      if (!isEmptyTextBlock || !view.hasFocus()) {
-        setIsVisible(false);
-        return;
-      }
-      const coords = view.coordsAtPos($from.pos);
-      setPosition({ top: coords.top - FLOATING_MENU_OFFSET, left: coords.left });
-      setIsVisible(true);
-    };
-    const handleBlur = () => setIsVisible(false);
-    editor.on("selectionUpdate", updatePosition);
-    editor.on("focus", updatePosition);
-    editor.on("blur", handleBlur);
-    editor.on("update", updatePosition);
-    return () => {
-      editor.off("selectionUpdate", updatePosition);
-      editor.off("focus", updatePosition);
-      editor.off("blur", handleBlur);
-      editor.off("update", updatePosition);
-    };
-  }, [editor]);
-  if (!isVisible) return null;
-  return (0, import_react_dom8.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      "div",
-      {
-        "data-popover": true,
-        className: "fixed z-99999 rounded-2xl border border-border/50 bg-card text-card-foreground shadow-lg backdrop-blur-sm overflow-hidden animate-in fade-in-0 slide-in-from-bottom-2",
-        style: {
-          top: `${position.top}px`,
-          left: `${position.left}px`,
-          transform: "translate(-50%, -100%)"
-        },
-        onMouseDown: (e) => e.preventDefault(),
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(FloatingMenuContent, { editor })
-      }
-    ),
-    document.body
-  );
-};
 
 // src/components/UEditor/CharacterCount.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -34580,8 +34531,8 @@ function TableAddRails({
   const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
   const columnRailTop = layout.tableTop;
   const columnRailLeft = layout.tableLeft + visibleTableWidth + ADD_COLUMN_RAIL_GAP;
-  const rowRailTop = layout.tableTop + visibleTableHeight + ADD_ROW_RAIL_GAP;
-  const rowRailLeft = layout.tableLeft;
+  const rowRailTop = layout.wrapperTop + layout.wrapperHeight + ADD_ROW_RAIL_GAP;
+  const rowRailLeft = Math.max(layout.tableLeft, layout.wrapperLeft);
   const showColumnRail = controlsVisible || addColumnVisible;
   const showRowRail = controlsVisible || addRowVisible;
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
@@ -35211,6 +35162,7 @@ function TableControls({ editor, containerRef }) {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
+    const scrollListenerOptions = { passive: true, capture: true };
     const handleMouseOver = (event) => {
       if (dragStateRef.current) return;
       const cell = getCellFromTarget(event.target);
@@ -35236,7 +35188,7 @@ function TableControls({ editor, containerRef }) {
     proseMirror.addEventListener("focusin", handleFocusIn);
     surface.addEventListener("mouseover", handleSurfaceMouseMove);
     surface.addEventListener("mousemove", handleSurfaceMouseMove);
-    surface.addEventListener("scroll", refreshCurrentLayout, { passive: true });
+    surface.addEventListener("scroll", refreshCurrentLayout, scrollListenerOptions);
     surface.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, refreshCurrentLayout);
     window.addEventListener("resize", refreshCurrentLayout);
     editor.on("selectionUpdate", syncFromSelection);
@@ -35250,7 +35202,7 @@ function TableControls({ editor, containerRef }) {
       proseMirror.removeEventListener("focusin", handleFocusIn);
       surface.removeEventListener("mouseover", handleSurfaceMouseMove);
       surface.removeEventListener("mousemove", handleSurfaceMouseMove);
-      surface.removeEventListener("scroll", refreshCurrentLayout);
+      surface.removeEventListener("scroll", refreshCurrentLayout, scrollListenerOptions);
       surface.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, refreshCurrentLayout);
       window.removeEventListener("resize", refreshCurrentLayout);
       editor.off("selectionUpdate", syncFromSelection);
@@ -35720,7 +35672,7 @@ var UEDITOR_PROSEMIRROR_CLASS_NAME = cn(
   "[&_.column-resize-handle]:top-[-1px]",
   "[&_.column-resize-handle]:bottom-[-1px]",
   "[&_.column-resize-handle]:right-[-5px]",
-  "[&_.column-resize-handle]:z-10",
+  "[&_.column-resize-handle]:z-30",
   "[&_.column-resize-handle]:w-2.5",
   "[&_.column-resize-handle]:bg-transparent",
   "[&_.column-resize-handle]:rounded-none",
@@ -35974,26 +35926,31 @@ function useUEditorTableInteractions(editor, editable = true) {
   const activeTableCellRef = (0, import_react66.useRef)(null);
   const suppressActiveCellHighlightRef = (0, import_react66.useRef)(false);
   const tableLayoutSyncFrameRef = (0, import_react66.useRef)(null);
+  const getProseMirrorElement = import_react66.default.useCallback(() => {
+    return editorContentRef.current?.querySelector(".ProseMirror");
+  }, []);
   const setEditorResizeCursor = import_react66.default.useCallback((cursor) => {
-    const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
+    const proseMirror = getProseMirrorElement();
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const hideColumnGuide = import_react66.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
+    getProseMirrorElement()?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const hideRowGuide = import_react66.default.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
+    getProseMirrorElement()?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
     if (guide) {
       guide.style.opacity = "0";
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const clearAllTableResizeHover = import_react66.default.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
@@ -36023,7 +35980,10 @@ function useUEditorTableInteractions(editor, editable = true) {
     });
   }, [updateActiveCellHighlight]);
   const setActiveTableCell = import_react66.default.useCallback((cell) => {
-    if (activeTableCellRef.current === cell) return;
+    if (activeTableCellRef.current === cell) {
+      updateActiveCellHighlight(cell);
+      return;
+    }
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
@@ -36048,8 +36008,9 @@ function useUEditorTableInteractions(editor, editable = true) {
     guide.style.height = `${metrics.height}px`;
     guide.style.opacity = "1";
     surface.classList.add("resize-cursor");
+    getProseMirrorElement()?.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
-  }, [setEditorResizeCursor]);
+  }, [getProseMirrorElement, setEditorResizeCursor]);
   const showRowGuide = import_react66.default.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
@@ -36061,8 +36022,9 @@ function useUEditorTableInteractions(editor, editable = true) {
     guide.style.height = `${ROW_RESIZE_LINE_THICKNESS}px`;
     guide.style.opacity = "1";
     surface.classList.add("resize-row-cursor");
+    getProseMirrorElement()?.classList.add("resize-row-cursor");
     setEditorResizeCursor("row-resize");
-  }, [setEditorResizeCursor]);
+  }, [getProseMirrorElement, setEditorResizeCursor]);
   const {
     beginResize,
     cancelResize,
@@ -36081,19 +36043,32 @@ function useUEditorTableInteractions(editor, editable = true) {
   });
   const syncActiveTableCellFromSelection = import_react66.default.useCallback(() => {
     if (!editor) return;
+    if (!editor.isFocused) {
+      clearActiveTableCell();
+      return;
+    }
     setActiveTableCell(getSelectionTableCell(editor.view));
-  }, [editor, setActiveTableCell]);
+  }, [clearActiveTableCell, editor, setActiveTableCell]);
   (0, import_react66.useEffect)(() => {
     if (!editor || !editable) return void 0;
     const proseMirror = editor.view.dom;
     const surface = editorContentRef.current;
     let selectionSyncTimeoutId = 0;
+    const scrollListenerOptions = { passive: true, capture: true };
     const scheduleActiveCellSync = (fallbackCell = null) => {
       requestAnimationFrame(() => {
+        if (!editor.isFocused) {
+          clearActiveTableCell();
+          return;
+        }
         setActiveTableCell(getSelectionTableCell(editor.view) ?? fallbackCell);
       });
       window.clearTimeout(selectionSyncTimeoutId);
       selectionSyncTimeoutId = window.setTimeout(() => {
+        if (!editor.isFocused) {
+          clearActiveTableCell();
+          return;
+        }
         setActiveTableCell(getSelectionTableCell(editor.view) ?? fallbackCell);
       }, 0);
     };
@@ -36197,13 +36172,15 @@ function useUEditorTableInteractions(editor, editable = true) {
     proseMirror.addEventListener("keyup", handleSelectionChange);
     proseMirror.addEventListener("focusin", handleSelectionChange);
     document.addEventListener("selectionchange", handleSelectionChange);
-    surface?.addEventListener("scroll", handleActiveCellLayoutChange, { passive: true });
+    surface?.addEventListener("scroll", handleActiveCellLayoutChange, scrollListenerOptions);
     window.addEventListener("resize", handleActiveCellLayoutChange);
     document.addEventListener("pointermove", handlePointerMove);
     document.addEventListener("pointerup", handlePointerUp);
     window.addEventListener("blur", handleWindowBlur);
     editor.on("selectionUpdate", syncActiveTableCellFromSelection);
     editor.on("focus", syncActiveTableCellFromSelection);
+    editor.on("blur", clearActiveTableCell);
+    editor.on("update", scheduleTableLayoutSync);
     syncActiveTableCellFromSelection();
     return () => {
       proseMirror.removeEventListener("mousemove", handleEditorMouseMove);
@@ -36214,13 +36191,15 @@ function useUEditorTableInteractions(editor, editable = true) {
       proseMirror.removeEventListener("keyup", handleSelectionChange);
       proseMirror.removeEventListener("focusin", handleSelectionChange);
       document.removeEventListener("selectionchange", handleSelectionChange);
-      surface?.removeEventListener("scroll", handleActiveCellLayoutChange);
+      surface?.removeEventListener("scroll", handleActiveCellLayoutChange, scrollListenerOptions);
       window.removeEventListener("resize", handleActiveCellLayoutChange);
       document.removeEventListener("pointermove", handlePointerMove);
       document.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("blur", handleWindowBlur);
       editor.off("selectionUpdate", syncActiveTableCellFromSelection);
       editor.off("focus", syncActiveTableCellFromSelection);
+      editor.off("blur", clearActiveTableCell);
+      editor.off("update", scheduleTableLayoutSync);
       window.clearTimeout(selectionSyncTimeoutId);
       if (tableLayoutSyncFrameRef.current !== null) {
         window.cancelAnimationFrame(tableLayoutSyncFrameRef.current);
@@ -36233,7 +36212,7 @@ function useUEditorTableInteractions(editor, editable = true) {
       clearHoveredTableCell();
       clearAllTableResizeHover();
     };
-  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editable, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
+  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editable, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, scheduleTableLayoutSync, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
   return {
     editorContentRef,
     tableColumnGuideRef,
@@ -36735,6 +36714,13 @@ var MenuBar = ({
   const openPreviewDialog = () => {
     setShowPreviewDialog(true);
   };
+  const handlePreview = () => {
+    if (onPreview) {
+      onPreview();
+      return;
+    }
+    openPreviewDialog();
+  };
   const applySourceHtml = () => {
     editor.chain().focus().setContent(sourceHtml).run();
     setShowSourceDialog(false);
@@ -36846,7 +36832,7 @@ var MenuBar = ({
     { label: t("menubar.edit"), items: buildEditMenuItems(t, editor), open: void 0, onOpenChange: void 0 },
     {
       label: t("menubar.view"),
-      items: buildViewMenuItems(t, { containerRef, onSourceCode, openSourceDialog, onPreview, openPreviewDialog }),
+      items: buildViewMenuItems(t, { containerRef, onSourceCode, openSourceDialog, onPreview: handlePreview, openPreviewDialog }),
       open: void 0,
       onOpenChange: void 0
     },
@@ -36883,17 +36869,33 @@ var MenuBar = ({
         onChange: (e) => handleImageFiles(e.target.files)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "flex items-center gap-0.5 border-b border-border/35 bg-muted/20 px-1.5 py-0.5", children: menus.map(({ label, items, open, onOpenChange }) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(MenuBarTrigger, { children: label }),
-        placement: "bottom-start",
-        isOpen: open,
-        onOpenChange,
-        children: renderMenuItems(items)
-      },
-      label
-    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "flex items-center gap-0.5 border-b border-border/35 bg-muted/20 px-1.5 py-0.5", children: [
+      menus.map(({ label, items, open, onOpenChange }) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        DropdownMenu,
+        {
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(MenuBarTrigger, { children: label }),
+          placement: "bottom-start",
+          isOpen: open,
+          onOpenChange,
+          children: renderMenuItems(items)
+        },
+        label
+      )),
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: handlePreview,
+          "aria-label": t("menubar.preview"),
+          title: t("menubar.preview"),
+          className: cn(
+            "ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
+            "hover:bg-accent hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react53.Eye, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       Modal_default,
       {
@@ -36947,8 +36949,14 @@ var MenuBar = ({
           "div",
           {
             "data-testid": "preview-content",
-            className: UEDITOR_PROSEMIRROR_CLASS_NAME,
-            dangerouslySetInnerHTML: { __html: editor.getHTML() }
+            className: "max-h-[70vh] overflow-y-auto overscroll-contain pr-2",
+            children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              "div",
+              {
+                className: UEDITOR_PROSEMIRROR_CLASS_NAME,
+                dangerouslySetInnerHTML: { __html: editor.getHTML() }
+              }
+            )
           }
         )
       }
@@ -36976,7 +36984,6 @@ var UEditor = import_react69.default.forwardRef(({
   autofocus = false,
   showToolbar = true,
   showBubbleMenu = true,
-  showFloatingMenu = false,
   showCharacterCount = true,
   maxCharacters,
   minHeight = "200px",
@@ -37178,7 +37185,6 @@ var UEditor = import_react69.default.forwardRef(({
             lineHeights
           }
         ),
-        editable && showFloatingMenu && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(CustomFloatingMenu, { editor }),
         /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
           "div",
           {
@@ -37211,7 +37217,7 @@ var UEditor = import_react69.default.forwardRef(({
                   ref: activeTableCellHighlightRef,
                   "aria-hidden": "true",
                   "data-ueditor-active-cell-highlight": "",
-                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10 transition-[left,top,width,height] duration-100"
+                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10"
                 }
               ),
               editable && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(TableControls, { editor, containerRef: editorContentRef }),