@underverse-ui/underverse 2.0.32 → 2.0.34

package/dist/{chunk-C4KZOMP3.js → chunk-JYAEYUGM.js}

@@ -1,7 +1,7 @@
 import {
   EmojiGridButton,
   formatEmojiCountLabel
-} from "./chunk-5W63IHIN.js";
+} from "./chunk-W3QTP2DM.js";
 import {
   COLUMN_RESIZE_LINE_THICKNESS,
   CellBgColorIcon,
@@ -94,7 +94,7 @@ import {
   sanitizeUEditorUrl,
   useEditorColors,
   useSharedEditorUiRenderState
-} from "./chunk-4TXHZS3S.js";
+} from "./chunk-OTPC2OTQ.js";
 import {
   Tooltip,
   UEditorPortalProvider,
@@ -104,7 +104,7 @@ import {
   resolveUEditorPortalContainer,
   useSmartTranslations,
   useUEditorPortalContainerGetter
-} from "./chunk-ZP7F4ZD7.js";
+} from "./chunk-6FAHXNDQ.js";
 
 // src/components/UEditor/prepare-content-for-save.ts
 var MIME_EXTENSION_MAP = {
@@ -522,7 +522,7 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/UEditor.tsx
-import React17, { useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useMemo as useMemo2, useRef as useRef10 } from "react";
+import React16, { useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useMemo as useMemo2, useRef as useRef10 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -557,7 +557,7 @@ import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 var LazyBaseEmojiPicker = React.lazy(async () => {
-  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-ISJ6RXYG.js");
+  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-6H52Q4YE.js");
   return { default: EmojiPicker2 };
 });
 var EmojiPicker = ({ onSelect }) => {
@@ -11545,6 +11545,7 @@ import {
   ArrowRight as ArrowRight2,
   ArrowUp,
   Copy as Copy2,
+  Minimize2,
   Paintbrush,
   Table as TableIcon,
   Trash2 as Trash22
@@ -12056,7 +12057,9 @@ function TableAddRails({
             ),
             style: {
               top: columnRailTop,
-              left: columnRailLeft,
+              // An invisible rail must not sit outside the table: even at
+              // opacity 0 its box would otherwise create a horizontal scrollbar.
+              left: showColumnRail ? columnRailLeft : Math.max(visibleBounds.left, visibleBounds.right - BUTTON_SHORT_SIZE),
               width: BUTTON_SHORT_SIZE,
               height: BUTTON_LONG_SIZE,
               opacity: showColumnRail ? 1 : 0,
@@ -12334,18 +12337,16 @@ function TableColumnHandles({
 // src/components/UEditor/table-resize-handles.tsx
 import { MoveDiagonal2 } from "lucide-react";
 import { Fragment as Fragment6, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
-var HANDLE_BASE_CLASS = cn(
-  "pointer-events-auto absolute z-10 inline-flex touch-none items-center justify-center rounded-md",
-  "bg-background/95 text-primary shadow-sm backdrop-blur-sm",
-  "transition-[color,background-color,box-shadow,transform] duration-150",
-  "hover:bg-primary hover:text-primary-foreground hover:shadow-md active:scale-95",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-);
 var EDGE_HANDLE_CLASS = cn(
   "pointer-events-auto absolute top-0 z-10 h-full w-2 touch-none cursor-col-resize bg-transparent p-0",
   "border-transparent transition-colors duration-150 hover:border-primary",
   "focus-visible:border-primary focus-visible:outline-none"
 );
+var CORNER_HANDLE_CLASS = cn(
+  "pointer-events-auto absolute z-10 inline-flex touch-none items-center justify-center p-0",
+  "text-primary/70 transition-[color,transform] duration-150 hover:text-primary active:scale-95",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+);
 function formatTableResizeDimensionLabel({
   width,
   height,
@@ -12425,9 +12426,9 @@ function TableResizeHandles({
             title: `${resizeBothLabel}. ${ctrlHint}`,
             "data-table-resize-handle": "both",
             className: cn(
-              HANDLE_BASE_CLASS,
-              "bottom-[-28px] right-[-30px] h-6 w-6 cursor-nwse-resize",
-              active && "bg-primary text-primary-foreground shadow-md"
+              CORNER_HANDLE_CLASS,
+              "bottom-[-28px] right-0 h-6 w-6 cursor-nwse-resize",
+              active && "text-primary"
             ),
             onDoubleClick: onFitWidth,
             onClick: (event) => {
@@ -13024,8 +13025,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     updateTableResizePreview(pendingDimensions);
     setDocumentCursor(editorDocument, edge === "both" ? "nwse-resize" : "ew-resize");
   }, [editor, editorDocument, updateTableResizePreview]);
-  const fitTableToEditorWidth = React11.useCallback((event) => {
-    if (event.button !== 0 || dragStateRef.current) return;
+  const fitTableToEditorWidth = React11.useCallback(() => {
+    if (dragStateRef.current) return;
     const activeLayout = layoutRef.current;
     if (!activeLayout) return;
     const snapshot = createTableSizeSnapshot(
@@ -13036,8 +13037,6 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       activeLayout.viewportWidth
     );
     if (!snapshot) return;
-    event.preventDefault();
-    event.stopPropagation();
     const didResize = applyTableSize(editor, snapshot, {
       width: Math.round(activeLayout.viewportWidth),
       height: snapshot.startHeight,
@@ -13425,6 +13424,11 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         icon: Paintbrush,
         onClick: openCellInspector
       }] : [],
+      {
+        label: t("tableMenu.fitToEditorWidth"),
+        icon: Minimize2,
+        onClick: fitTableToEditorWidth
+      },
       {
         label: t("tableMenu.alignLeft"),
         icon: AlignLeft2,
@@ -13489,7 +13493,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         destructive: true
       }
     ];
-  }, [editor, layout, openCellInspector, runAtActiveCell, showCellInspector, t]);
+  }, [editor, fitTableToEditorWidth, layout, openCellInspector, runAtActiveCell, showCellInspector, t]);
   const getRowHandleMenuItems = React11.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
@@ -14881,78 +14885,13 @@ function useUEditorOutput({
   };
 }
 
-// src/components/UEditor/use-wide-table-layout.ts
-import React16 from "react";
-function useWideTableLayout(editor, enabled, widthBoundaryRef, editorShellRef, editorSurfaceRef) {
-  React16.useLayoutEffect(() => {
-    const boundary = widthBoundaryRef.current;
-    const shell = editorShellRef.current;
-    const surface = editorSurfaceRef.current;
-    if (!editor || !boundary || !shell || !surface) return;
-    const editorDocument = editor.view.dom.ownerDocument;
-    const editorWindow = editorDocument.defaultView;
-    if (!editorWindow) return;
-    const editorDom = editor.view.dom;
-    let frame = 0;
-    const resetWidths = () => {
-      shell.style.removeProperty("width");
-      editorDom.style.removeProperty("width");
-    };
-    const sync = () => {
-      frame = 0;
-      resetWidths();
-      if (!enabled || editor.isDestroyed) return;
-      const boundaryWidth = boundary.getBoundingClientRect().width || boundary.clientWidth;
-      const surfaceWidth = surface.getBoundingClientRect().width || surface.clientWidth;
-      if (boundaryWidth <= 0 || surfaceWidth <= 0) return;
-      editorDom.style.width = `${surfaceWidth}px`;
-      const shellRect = shell.getBoundingClientRect();
-      let requiredWidth = boundaryWidth;
-      editorDom.querySelectorAll("table").forEach((table) => {
-        const tableRect = table.getBoundingClientRect();
-        if (tableRect.width > 0) {
-          requiredWidth = Math.max(requiredWidth, tableRect.right - shellRect.left + 32);
-          return;
-        }
-        const widthBp = Number(table.getAttribute("data-table-width-bp"));
-        if (Number.isFinite(widthBp) && widthBp > 1e4) {
-          requiredWidth = Math.max(requiredWidth, surfaceWidth * widthBp / 1e4 + 32);
-        }
-      });
-      if (requiredWidth <= boundaryWidth + 1) {
-        editorDom.style.removeProperty("width");
-        return;
-      }
-      shell.style.width = `${Math.ceil(requiredWidth)}px`;
-    };
-    const schedule = () => {
-      if (frame) editorWindow.cancelAnimationFrame(frame);
-      frame = editorWindow.requestAnimationFrame(sync);
-    };
-    const resizeObserver = typeof editorWindow.ResizeObserver === "function" ? new editorWindow.ResizeObserver(schedule) : null;
-    resizeObserver?.observe(boundary);
-    editor.on("transaction", schedule);
-    surface.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, schedule);
-    editorWindow.addEventListener("resize", schedule);
-    schedule();
-    return () => {
-      if (frame) editorWindow.cancelAnimationFrame(frame);
-      resizeObserver?.disconnect();
-      editor.off("transaction", schedule);
-      surface.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, schedule);
-      editorWindow.removeEventListener("resize", schedule);
-      resetWidths();
-    };
-  }, [editor, editorShellRef, editorSurfaceRef, enabled, widthBoundaryRef]);
-}
-
 // src/components/UEditor/UEditor.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var LazyMenuBar = React17.lazy(async () => {
-  const { MenuBar } = await import("./menu-bar-GDDGHNNJ.js");
+var LazyMenuBar = React16.lazy(async () => {
+  const { MenuBar } = await import("./menu-bar-HZBBRX42.js");
   return { default: MenuBar };
 });
-var UEditor = React17.forwardRef(({
+var UEditor = React16.forwardRef(({
   getPortalContainer,
   content = "",
   onChange,
@@ -15011,10 +14950,8 @@ var UEditor = React17.forwardRef(({
   const editorInstanceRef = useRef10(null);
   const formulaRangePickRef = useRef10(null);
   const formulaRangeSurfaceRef = useRef10(null);
-  const [formulaRangeHighlight, setFormulaRangeHighlight] = React17.useState(null);
-  const [isMenuBarVisible, setIsMenuBarVisible] = React17.useState(showMenuBar);
-  const widthBoundaryRef = useRef10(null);
-  const editorShellRef = useRef10(null);
+  const [formulaRangeHighlight, setFormulaRangeHighlight] = React16.useState(null);
+  const [isMenuBarVisible, setIsMenuBarVisible] = React16.useState(showMenuBar);
   useEffect10(() => {
     setIsMenuBarVisible(showMenuBar);
   }, [showMenuBar]);
@@ -15024,7 +14961,7 @@ var UEditor = React17.forwardRef(({
     onJsonChange,
     outputDebounceMs
   });
-  const scheduleFormulaRecalculate = React17.useCallback((editor2, options) => {
+  const scheduleFormulaRecalculate = React16.useCallback((editor2, options) => {
     if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
     if (!options?.force && isEditingTableFormulaText(editor2)) return;
     scheduledFormulaRecalculateRef.current = true;
@@ -15066,7 +15003,7 @@ var UEditor = React17.forwardRef(({
     ],
     [getPortalContainer, effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, onImageUploadError, editable, fetchMetadata, extraExtensions]
   );
-  const syncFormulaRangeHighlight = React17.useCallback((pickState) => {
+  const syncFormulaRangeHighlight = React16.useCallback((pickState) => {
     const container = formulaRangeSurfaceRef.current;
     setFormulaRangeHighlight(container && pickState ? getFormulaRangePickHighlight(container, pickState) : null);
   }, []);
@@ -15207,7 +15144,6 @@ var UEditor = React17.forwardRef(({
     apply: t("tableMenu.apply"),
     cancel: t("imageInput.cancelBtn")
   });
-  useWideTableLayout(editor, expandWideTables, widthBoundaryRef, editorShellRef, editorContentRef);
   useImperativeHandle4(
     ref,
     () => ({
@@ -15275,10 +15211,9 @@ var UEditor = React17.forwardRef(({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx20(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ jsx20("div", { ref: widthBoundaryRef, "data-ueditor-width-boundary": "", className: "w-full", children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx20(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ jsx20("div", { "data-ueditor-width-boundary": "", className: "w-full", children: /* @__PURE__ */ jsxs17(
     "div",
     {
-      ref: editorShellRef,
       className: cn(
         "group relative flex flex-col text-card-foreground",
         editable ? [
@@ -15293,7 +15228,7 @@ var UEditor = React17.forwardRef(({
       ),
       children: [
         editable && (showMenuBar || showToolbar || showBubbleMenu) ? /* @__PURE__ */ jsxs17(EditorUiRenderStateProvider, { editor, children: [
-          isMenuBarVisible && /* @__PURE__ */ jsx20(React17.Suspense, { fallback: null, children: /* @__PURE__ */ jsx20(
+          isMenuBarVisible && /* @__PURE__ */ jsx20(React16.Suspense, { fallback: null, children: /* @__PURE__ */ jsx20(
             LazyMenuBar,
             {
               editor,
@@ -15351,7 +15286,7 @@ var UEditor = React17.forwardRef(({
               formulaRangeSurfaceRef.current = node;
             },
             className: cn(
-              "relative flex-1 overflow-y-auto",
+              "relative flex-1 overflow-x-auto overflow-y-auto [scrollbar-width:thin] [scrollbar-color:hsl(var(--border))_transparent]",
               expandWideTables && "[&_.tableWrapper]:!overflow-visible [&_.tableWrapper]:!pb-0"
             ),
             style: {
@@ -15444,4 +15379,4 @@ export {
   prepareUEditorContentForSave,
   UEditor_default
 };
-//# sourceMappingURL=chunk-C4KZOMP3.js.map
+//# sourceMappingURL=chunk-JYAEYUGM.js.map