@underverse-ui/underverse 1.0.143 → 1.0.144

package/dist/index.js

@@ -25741,6 +25741,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();
@@ -25795,6 +25834,18 @@ var ClipboardImages = Extension2.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();
@@ -28984,58 +29035,6 @@ import {
   ExternalLink as ExternalLink3
 } from "lucide-react";
 import { Fragment as Fragment29, jsx as jsx86, jsxs as jsxs72 } from "react/jsx-runtime";
-var FloatingSlashCommandMenu = ({ editor, onClose }) => {
-  const t = useSmartTranslations("UEditor");
-  const messages = useMemo23(() => buildSlashCommandMessages(t), [t]);
-  const items = useMemo23(() => buildSlashCommandItems({ query: "", messages }), [messages]);
-  const listRef = useRef33(null);
-  useEffect36(() => {
-    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__ */ jsx86(
-    SlashCommandList,
-    {
-      ref: listRef,
-      items,
-      messages,
-      command: (item) => {
-        item.command({ editor });
-        onClose();
-      }
-    }
-  );
-};
-var FloatingMenuContent = ({ editor }) => {
-  const t = useSmartTranslations("UEditor");
-  const [showCommands, setShowCommands] = useState48(false);
-  if (showCommands) {
-    return /* @__PURE__ */ jsx86(FloatingSlashCommandMenu, { editor, onClose: () => setShowCommands(false) });
-  }
-  return /* @__PURE__ */ jsxs72(
-    "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__ */ jsx86(Plus3, { className: "w-4 h-4 text-muted-foreground group-hover:text-foreground" }),
-        /* @__PURE__ */ jsx86("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;
@@ -29662,54 +29661,6 @@ var CustomBubbleMenu = ({
     document.body
   );
 };
-var CustomFloatingMenu = ({ editor }) => {
-  const FLOATING_MENU_OFFSET = 16;
-  const [isVisible, setIsVisible] = useState48(false);
-  const [position, setPosition] = useState48({ top: 0, left: 0 });
-  useEffect36(() => {
-    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 createPortal8(
-    /* @__PURE__ */ jsx86(
-      "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__ */ jsx86(FloatingMenuContent, { editor })
-      }
-    ),
-    document.body
-  );
-};
 
 // src/components/UEditor/CharacterCount.tsx
 import { jsxs as jsxs73 } from "react/jsx-runtime";
@@ -34495,8 +34446,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__ */ jsxs75(Fragment32, { children: [
@@ -35126,6 +35077,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);
@@ -35151,7 +35103,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);
@@ -35165,7 +35117,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);
@@ -35635,7 +35587,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",
@@ -35889,26 +35841,31 @@ function useUEditorTableInteractions(editor, editable = true) {
   const activeTableCellRef = useRef35(null);
   const suppressActiveCellHighlightRef = useRef35(false);
   const tableLayoutSyncFrameRef = useRef35(null);
+  const getProseMirrorElement = React80.useCallback(() => {
+    return editorContentRef.current?.querySelector(".ProseMirror");
+  }, []);
   const setEditorResizeCursor = React80.useCallback((cursor) => {
-    const proseMirror = editorContentRef.current?.querySelector(".ProseMirror");
+    const proseMirror = getProseMirrorElement();
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
-  }, []);
+  }, [getProseMirrorElement]);
   const hideColumnGuide = React80.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 = React80.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 = React80.useCallback(() => {
     setEditorResizeCursor("");
     hideColumnGuide();
@@ -35938,7 +35895,10 @@ function useUEditorTableInteractions(editor, editable = true) {
     });
   }, [updateActiveCellHighlight]);
   const setActiveTableCell = React80.useCallback((cell) => {
-    if (activeTableCellRef.current === cell) return;
+    if (activeTableCellRef.current === cell) {
+      updateActiveCellHighlight(cell);
+      return;
+    }
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
@@ -35963,8 +35923,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 = React80.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
@@ -35976,8 +35937,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,
@@ -35996,19 +35958,32 @@ function useUEditorTableInteractions(editor, editable = true) {
   });
   const syncActiveTableCellFromSelection = React80.useCallback(() => {
     if (!editor) return;
+    if (!editor.isFocused) {
+      clearActiveTableCell();
+      return;
+    }
     setActiveTableCell(getSelectionTableCell(editor.view));
-  }, [editor, setActiveTableCell]);
+  }, [clearActiveTableCell, editor, setActiveTableCell]);
   useEffect37(() => {
     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);
     };
@@ -36112,13 +36087,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);
@@ -36129,13 +36106,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);
@@ -36148,7 +36127,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,
@@ -36167,6 +36146,7 @@ import {
   AlignRight as AlignRight4,
   Bold as BoldIcon3,
   Code as CodeIcon3,
+  Eye as Eye3,
   FileCode as FileCode4,
   Heading1 as Heading1Icon2,
   Heading2 as Heading2Icon2,
@@ -36677,6 +36657,13 @@ var MenuBar = ({
   const openPreviewDialog = () => {
     setShowPreviewDialog(true);
   };
+  const handlePreview = () => {
+    if (onPreview) {
+      onPreview();
+      return;
+    }
+    openPreviewDialog();
+  };
   const applySourceHtml = () => {
     editor.chain().focus().setContent(sourceHtml).run();
     setShowSourceDialog(false);
@@ -36788,7 +36775,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
     },
@@ -36825,17 +36812,33 @@ var MenuBar = ({
         onChange: (e) => handleImageFiles(e.target.files)
       }
     ),
-    /* @__PURE__ */ jsx92("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__ */ jsx92(
-      DropdownMenu,
-      {
-        trigger: /* @__PURE__ */ jsx92(MenuBarTrigger, { children: label }),
-        placement: "bottom-start",
-        isOpen: open,
-        onOpenChange,
-        children: renderMenuItems(items)
-      },
-      label
-    )) }),
+    /* @__PURE__ */ jsxs77("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__ */ jsx92(
+        DropdownMenu,
+        {
+          trigger: /* @__PURE__ */ jsx92(MenuBarTrigger, { children: label }),
+          placement: "bottom-start",
+          isOpen: open,
+          onOpenChange,
+          children: renderMenuItems(items)
+        },
+        label
+      )),
+      /* @__PURE__ */ jsx92(
+        "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__ */ jsx92(Eye3, { className: "h-4 w-4", "aria-hidden": "true" })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx92(
       Modal_default,
       {
@@ -36889,8 +36892,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__ */ jsx92(
+              "div",
+              {
+                className: UEDITOR_PROSEMIRROR_CLASS_NAME,
+                dangerouslySetInnerHTML: { __html: editor.getHTML() }
+              }
+            )
           }
         )
       }
@@ -36918,7 +36927,6 @@ var UEditor = React82.forwardRef(({
   autofocus = false,
   showToolbar = true,
   showBubbleMenu = true,
-  showFloatingMenu = false,
   showCharacterCount = true,
   maxCharacters,
   minHeight = "200px",
@@ -37120,7 +37128,6 @@ var UEditor = React82.forwardRef(({
             lineHeights
           }
         ),
-        editable && showFloatingMenu && /* @__PURE__ */ jsx93(CustomFloatingMenu, { editor }),
         /* @__PURE__ */ jsxs78(
           "div",
           {
@@ -37153,7 +37160,7 @@ var UEditor = React82.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__ */ jsx93(TableControls, { editor, containerRef: editorContentRef }),