@underverse-ui/underverse 2.0.32 → 2.0.34

package/dist/ueditor.cjs

@@ -343,6 +343,7 @@ var init_en = __esm({
           dragColumn: "Drag Column",
           resizeBoth: "Resize Table",
           resizeCtrlHint: "Drag freely. Hold Ctrl to lock to one axis; hold Ctrl+Shift to preserve proportions",
+          fitToEditorWidth: "Fit to Editor Width",
           alignLeft: "Align Table Left",
           alignCenter: "Align Table Center",
           alignRight: "Align Table Right",
@@ -809,6 +810,7 @@ var init_vi = __esm({
           dragColumn: "K\xE9o c\u1ED9t",
           resizeBoth: "\u0110\u1ED5i k\xEDch th\u01B0\u1EDBc b\u1EA3ng",
           resizeCtrlHint: "K\xE9o t\u1EF1 do; gi\u1EEF Ctrl \u0111\u1EC3 kh\xF3a m\u1ED9t chi\u1EC1u, ho\u1EB7c Ctrl+Shift \u0111\u1EC3 gi\u1EEF nguy\xEAn t\u1EF7 l\u1EC7",
+          fitToEditorWidth: "V\u1EEBa chi\u1EC1u r\u1ED9ng tr\xECnh so\u1EA1n th\u1EA3o",
           alignLeft: "C\u0103n b\u1EA3ng tr\xE1i",
           alignCenter: "C\u0103n b\u1EA3ng gi\u1EEFa",
           alignRight: "C\u0103n b\u1EA3ng ph\u1EA3i",
@@ -1275,6 +1277,7 @@ var init_ko = __esm({
           dragColumn: "\uC5F4 \uB4DC\uB798\uADF8",
           resizeBoth: "\uD45C \uD06C\uAE30 \uC870\uC808",
           resizeCtrlHint: "\uC790\uC720\uB86D\uAC8C \uB4DC\uB798\uADF8\uD569\uB2C8\uB2E4. Ctrl \uD0A4\uB97C \uB204\uB974\uBA74 \uD55C \uCD95\uC73C\uB85C \uACE0\uC815\uB418\uACE0, Ctrl+Shift \uD0A4\uB97C \uB204\uB974\uBA74 \uBE44\uC728\uC774 \uC720\uC9C0\uB429\uB2C8\uB2E4",
+          fitToEditorWidth: "\uD3B8\uC9D1\uAE30 \uB108\uBE44\uC5D0 \uB9DE\uCD94\uAE30",
           alignLeft: "\uD45C \uC67C\uCABD \uC815\uB82C",
           alignCenter: "\uD45C \uAC00\uC6B4\uB370 \uC815\uB82C",
           alignRight: "\uD45C \uC624\uB978\uCABD \uC815\uB82C",
@@ -1741,6 +1744,7 @@ var init_ja = __esm({
           dragColumn: "\u5217\u3092\u30C9\u30E9\u30C3\u30B0",
           resizeBoth: "\u8868\u306E\u30B5\u30A4\u30BA\u3092\u5909\u66F4",
           resizeCtrlHint: "\u81EA\u7531\u306B\u30C9\u30E9\u30C3\u30B0\u3067\u304D\u307E\u3059\u3002Ctrl\u30AD\u30FC\u30671\u65B9\u5411\u306B\u56FA\u5B9A\u3057\u3001Ctrl+Shift\u30AD\u30FC\u3067\u7E26\u6A2A\u6BD4\u3092\u7DAD\u6301\u3057\u307E\u3059",
+          fitToEditorWidth: "\u30A8\u30C7\u30A3\u30BF\u30FC\u306E\u5E45\u306B\u5408\u308F\u305B\u308B",
           alignLeft: "\u8868\u3092\u5DE6\u5BC4\u305B",
           alignCenter: "\u8868\u3092\u4E2D\u592E\u63C3\u3048",
           alignRight: "\u8868\u3092\u53F3\u5BC4\u305B",
@@ -9403,12 +9407,12 @@ function unlockBodyScroll(body) {
   body.style.overflow = current.overflow;
   bodyScrollLocks.delete(body);
 }
-var React32, import_react_dom4, import_lucide_react20, import_jsx_runtime36, bodyScrollLocks, sizeStyles, Modal, Modal_default;
+var React31, import_react_dom4, import_lucide_react20, import_jsx_runtime36, bodyScrollLocks, sizeStyles, Modal, Modal_default;
 var init_Modal = __esm({
   "src/components/Modal.tsx"() {
     "use strict";
     "use client";
-    React32 = __toESM(require("react"), 1);
+    React31 = __toESM(require("react"), 1);
     import_react_dom4 = require("react-dom");
     init_cn();
     import_lucide_react20 = require("lucide-react");
@@ -9448,22 +9452,22 @@ var init_Modal = __esm({
       const gi18n = useGlobalI18n();
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.borderMode;
-      const [isMounted, setIsMounted] = React32.useState(false);
-      const [isVisible, setIsVisible] = React32.useState(false);
-      const [isAnimating, setIsAnimating] = React32.useState(true);
-      const mouseDownTarget = React32.useRef(null);
-      const modalContentRef = React32.useRef(null);
-      const titleId = React32.useId();
-      const descriptionId = React32.useId();
+      const [isMounted, setIsMounted] = React31.useState(false);
+      const [isVisible, setIsVisible] = React31.useState(false);
+      const [isAnimating, setIsAnimating] = React31.useState(true);
+      const mouseDownTarget = React31.useRef(null);
+      const modalContentRef = React31.useRef(null);
+      const titleId = React31.useId();
+      const descriptionId = React31.useId();
       const resolvedPortalContainer = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
       const portalDocument = resolvedPortalContainer?.ownerDocument ?? null;
       const portalWindow = portalDocument?.defaultView ?? null;
-      React32.useEffect(() => {
+      React31.useEffect(() => {
         setIsMounted(true);
         return () => setIsMounted(false);
       }, []);
-      const animationRef = React32.useRef(false);
-      React32.useEffect(() => {
+      const animationRef = React31.useRef(false);
+      React31.useEffect(() => {
         if (isOpen) {
           if (animationRef.current) return;
           animationRef.current = true;
@@ -9483,7 +9487,7 @@ var init_Modal = __esm({
           }
         }
       }, [isOpen, isVisible, portalWindow]);
-      React32.useEffect(() => {
+      React31.useEffect(() => {
         if (!isOpen) return;
         const handleKeyDown2 = (event) => {
           if (event.key === "Escape" && closeOnEsc) {
@@ -9515,7 +9519,7 @@ var init_Modal = __esm({
         portalDocument?.addEventListener("keydown", handleKeyDown2);
         return () => portalDocument?.removeEventListener("keydown", handleKeyDown2);
       }, [isOpen, closeOnEsc, onClose, portalDocument]);
-      React32.useEffect(() => {
+      React31.useEffect(() => {
         if (!isOpen || !portalDocument) return;
         const previousFocus = portalDocument.activeElement;
         const frameId = portalWindow?.requestAnimationFrame(() => modalContentRef.current?.focus());
@@ -9524,7 +9528,7 @@ var init_Modal = __esm({
           if (previousFocus?.isConnected) previousFocus.focus();
         };
       }, [isOpen, portalDocument, portalWindow]);
-      React32.useEffect(() => {
+      React31.useEffect(() => {
         const body = portalDocument?.body;
         if (!isOpen || !body) return;
         lockBodyScroll(body);
@@ -9913,7 +9917,7 @@ function renderMenuItems(items) {
       case "sub":
         return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownMenuSub, { label: item.label, icon: item.icon, disabled: item.disabled, children: renderMenuItems(item.items) }, i);
       case "custom":
-        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react45.default.Fragment, { children: item.render() }, item.key);
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react44.default.Fragment, { children: item.render() }, item.key);
     }
   });
 }
@@ -10296,12 +10300,12 @@ function buildTableMenuItems(t, editor, onInsertTable) {
     }
   ];
 }
-var import_react45, import_lucide_react21, import_jsx_runtime37, MenuBarTrigger, MenuBar;
+var import_react44, import_lucide_react21, import_jsx_runtime37, MenuBarTrigger, MenuBar;
 var init_menu_bar = __esm({
   "src/components/UEditor/menu-bar.tsx"() {
     "use strict";
     "use client";
-    import_react45 = __toESM(require("react"), 1);
+    import_react44 = __toESM(require("react"), 1);
     import_lucide_react21 = require("lucide-react");
     init_useSmartTranslations();
     init_cn();
@@ -10318,7 +10322,7 @@ var init_menu_bar = __esm({
     init_async_insertion_position();
     init_image_file_upload();
     import_jsx_runtime37 = require("react/jsx-runtime");
-    MenuBarTrigger = import_react45.default.forwardRef(
+    MenuBarTrigger = import_react44.default.forwardRef(
       ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "button",
         {
@@ -10355,25 +10359,25 @@ var init_menu_bar = __esm({
       const t = useSmartTranslations("UEditor");
       useSharedEditorUiRenderState(editor);
       const getPortalContainer = useUEditorPortalContainerGetter();
-      const fileInputRef = (0, import_react45.useRef)(null);
-      const sourceTextareaRef = (0, import_react45.useRef)(null);
-      const [showImageInput, setShowImageInput] = (0, import_react45.useState)(false);
-      const [showLinkInput, setShowLinkInput] = (0, import_react45.useState)(false);
-      const [isUploadingImage, setIsUploadingImage] = (0, import_react45.useState)(false);
-      const [imageUploadError, setImageUploadError] = (0, import_react45.useState)(null);
-      const [openMenuKey, setOpenMenuKey] = (0, import_react45.useState)(null);
-      const [showSourceDialog, setShowSourceDialog] = (0, import_react45.useState)(false);
-      const [sourceHtml, setSourceHtml] = (0, import_react45.useState)("");
-      const [sourceError, setSourceError] = (0, import_react45.useState)("");
-      const sourceErrorId = import_react45.default.useId();
-      const [showPreviewDialog, setShowPreviewDialog] = (0, import_react45.useState)(false);
-      const [previewHtml, setPreviewHtml] = (0, import_react45.useState)("");
+      const fileInputRef = (0, import_react44.useRef)(null);
+      const sourceTextareaRef = (0, import_react44.useRef)(null);
+      const [showImageInput, setShowImageInput] = (0, import_react44.useState)(false);
+      const [showLinkInput, setShowLinkInput] = (0, import_react44.useState)(false);
+      const [isUploadingImage, setIsUploadingImage] = (0, import_react44.useState)(false);
+      const [imageUploadError, setImageUploadError] = (0, import_react44.useState)(null);
+      const [openMenuKey, setOpenMenuKey] = (0, import_react44.useState)(null);
+      const [showSourceDialog, setShowSourceDialog] = (0, import_react44.useState)(false);
+      const [sourceHtml, setSourceHtml] = (0, import_react44.useState)("");
+      const [sourceError, setSourceError] = (0, import_react44.useState)("");
+      const sourceErrorId = import_react44.default.useId();
+      const [showPreviewDialog, setShowPreviewDialog] = (0, import_react44.useState)(false);
+      const [previewHtml, setPreviewHtml] = (0, import_react44.useState)("");
       const modalPortalContainer = resolveUEditorPortalContainer(
         getPortalContainer,
         void 0,
         editor.view.dom.ownerDocument
       );
-      (0, import_react45.useEffect)(() => {
+      (0, import_react44.useEffect)(() => {
         if (!showPreviewDialog) return;
         const updatePreview = () => {
           if (!editor.isDestroyed) {
@@ -10730,9 +10734,9 @@ __export(UEditor_exports, {
 module.exports = __toCommonJS(UEditor_exports);
 
 // src/components/UEditor/UEditor.tsx
-var import_react46 = __toESM(require("react"), 1);
+var import_react45 = __toESM(require("react"), 1);
 init_useSmartTranslations();
-var import_react47 = require("@tiptap/react");
+var import_react46 = require("@tiptap/react");
 init_cn();
 
 // src/components/UEditor/extensions.ts
@@ -22676,7 +22680,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,
@@ -22962,18 +22968,16 @@ var import_lucide_react17 = require("lucide-react");
 init_cn();
 init_table_width_model();
 var import_jsx_runtime33 = require("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,
@@ -23053,9 +23057,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) => {
@@ -23656,8 +23660,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     updateTableResizePreview(pendingDimensions);
     setDocumentCursor(editorDocument, edge === "both" ? "nwse-resize" : "ew-resize");
   }, [editor, editorDocument, updateTableResizePreview]);
-  const fitTableToEditorWidth = import_react38.default.useCallback((event) => {
-    if (event.button !== 0 || dragStateRef.current) return;
+  const fitTableToEditorWidth = import_react38.default.useCallback(() => {
+    if (dragStateRef.current) return;
     const activeLayout = layoutRef.current;
     if (!activeLayout) return;
     const snapshot = createTableSizeSnapshot(
@@ -23668,8 +23672,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,
@@ -24057,6 +24059,11 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         icon: import_lucide_react18.Paintbrush,
         onClick: openCellInspector
       }] : [],
+      {
+        label: t("tableMenu.fitToEditorWidth"),
+        icon: import_lucide_react18.Minimize2,
+        onClick: fitTableToEditorWidth
+      },
       {
         label: t("tableMenu.alignLeft"),
         icon: import_lucide_react18.AlignLeft,
@@ -24121,7 +24128,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         destructive: true
       }
     ];
-  }, [editor, layout, openCellInspector, runAtActiveCell, showCellInspector, t]);
+  }, [editor, fitTableToEditorWidth, layout, openCellInspector, runAtActiveCell, showCellInspector, t]);
   const getRowHandleMenuItems = import_react38.default.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
@@ -25532,80 +25539,12 @@ function useUEditorOutput({
 
 // src/components/UEditor/UEditor.tsx
 init_portal_context();
-
-// src/components/UEditor/use-wide-table-layout.ts
-var import_react44 = __toESM(require("react"), 1);
-init_table_dom_utils();
-function useWideTableLayout(editor, enabled, widthBoundaryRef, editorShellRef, editorSurfaceRef) {
-  import_react44.default.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
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var LazyMenuBar = import_react46.default.lazy(async () => {
+var LazyMenuBar = import_react45.default.lazy(async () => {
   const { MenuBar: MenuBar2 } = await Promise.resolve().then(() => (init_menu_bar(), menu_bar_exports));
   return { default: MenuBar2 };
 });
-var UEditor = import_react46.default.forwardRef(({
+var UEditor = import_react45.default.forwardRef(({
   getPortalContainer,
   content = "",
   onChange,
@@ -25657,18 +25596,16 @@ var UEditor = import_react46.default.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = (0, import_react46.useRef)(null);
-  const lastAppliedContentRef = (0, import_react46.useRef)(content ?? "");
-  const scheduledFormulaRecalculateRef = (0, import_react46.useRef)(false);
-  const pendingFormulaTextRecalculateRef = (0, import_react46.useRef)(false);
-  const editorInstanceRef = (0, import_react46.useRef)(null);
-  const formulaRangePickRef = (0, import_react46.useRef)(null);
-  const formulaRangeSurfaceRef = (0, import_react46.useRef)(null);
-  const [formulaRangeHighlight, setFormulaRangeHighlight] = import_react46.default.useState(null);
-  const [isMenuBarVisible, setIsMenuBarVisible] = import_react46.default.useState(showMenuBar);
-  const widthBoundaryRef = (0, import_react46.useRef)(null);
-  const editorShellRef = (0, import_react46.useRef)(null);
-  (0, import_react46.useEffect)(() => {
+  const inFlightPrepareRef = (0, import_react45.useRef)(null);
+  const lastAppliedContentRef = (0, import_react45.useRef)(content ?? "");
+  const scheduledFormulaRecalculateRef = (0, import_react45.useRef)(false);
+  const pendingFormulaTextRecalculateRef = (0, import_react45.useRef)(false);
+  const editorInstanceRef = (0, import_react45.useRef)(null);
+  const formulaRangePickRef = (0, import_react45.useRef)(null);
+  const formulaRangeSurfaceRef = (0, import_react45.useRef)(null);
+  const [formulaRangeHighlight, setFormulaRangeHighlight] = import_react45.default.useState(null);
+  const [isMenuBarVisible, setIsMenuBarVisible] = import_react45.default.useState(showMenuBar);
+  (0, import_react45.useEffect)(() => {
     setIsMenuBarVisible(showMenuBar);
   }, [showMenuBar]);
   const { flushOutputUpdates, scheduleOutputUpdate } = useUEditorOutput({
@@ -25677,7 +25614,7 @@ var UEditor = import_react46.default.forwardRef(({
     onJsonChange,
     outputDebounceMs
   });
-  const scheduleFormulaRecalculate = import_react46.default.useCallback((editor2, options) => {
+  const scheduleFormulaRecalculate = import_react45.default.useCallback((editor2, options) => {
     if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
     if (!options?.force && isEditingTableFormulaText(editor2)) return;
     scheduledFormulaRecalculateRef.current = true;
@@ -25688,7 +25625,7 @@ var UEditor = import_react46.default.forwardRef(({
       }
     });
   }, []);
-  const resolvedUploadFile = (0, import_react46.useMemo)(() => {
+  const resolvedUploadFile = (0, import_react45.useMemo)(() => {
     if (uploadFile) return uploadFile;
     if (uploadFileForSave) {
       return async (file) => {
@@ -25698,7 +25635,7 @@ var UEditor = import_react46.default.forwardRef(({
     }
     return uploadImage;
   }, [uploadFile, uploadFileForSave, uploadImage]);
-  const extensions = (0, import_react46.useMemo)(
+  const extensions = (0, import_react45.useMemo)(
     () => [
       ...buildUEditorExtensions({
         getPortalContainer,
@@ -25719,11 +25656,11 @@ var UEditor = import_react46.default.forwardRef(({
     ],
     [getPortalContainer, effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, onImageUploadError, editable, fetchMetadata, extraExtensions]
   );
-  const syncFormulaRangeHighlight = import_react46.default.useCallback((pickState) => {
+  const syncFormulaRangeHighlight = import_react45.default.useCallback((pickState) => {
     const container = formulaRangeSurfaceRef.current;
     setFormulaRangeHighlight(container && pickState ? getFormulaRangePickHighlight(container, pickState) : null);
   }, []);
-  const editor = (0, import_react47.useEditor)({
+  const editor = (0, import_react46.useEditor)({
     immediatelyRender: false,
     extensions,
     content,
@@ -25844,7 +25781,7 @@ var UEditor = import_react46.default.forwardRef(({
       queueMicrotask(flushOutputUpdates);
     }
   });
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     editorInstanceRef.current = editor;
     return () => {
       if (editorInstanceRef.current === editor) editorInstanceRef.current = null;
@@ -25860,8 +25797,7 @@ var UEditor = import_react46.default.forwardRef(({
     apply: t("tableMenu.apply"),
     cancel: t("imageInput.cancelBtn")
   });
-  useWideTableLayout(editor, expandWideTables, widthBoundaryRef, editorShellRef, editorContentRef);
-  (0, import_react46.useImperativeHandle)(
+  (0, import_react45.useImperativeHandle)(
     ref,
     () => ({
       editor,
@@ -25890,7 +25826,7 @@ var UEditor = import_react46.default.forwardRef(({
     }),
     [content, editor, uploadImageForSave, uploadFileForSave, uploadImageConcurrency]
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!editor) return;
     queueMicrotask(() => {
       if (!editor.isDestroyed) {
@@ -25898,7 +25834,7 @@ var UEditor = import_react46.default.forwardRef(({
       }
     });
   }, [editor]);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!editor) return;
     const nextContent = content ?? "";
     if (lastAppliedContentRef.current === nextContent) return;
@@ -25928,10 +25864,9 @@ var UEditor = import_react46.default.forwardRef(({
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { ref: widthBoundaryRef, "data-ueditor-width-boundary": "", className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "data-ueditor-width-boundary": "", className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
-      ref: editorShellRef,
       className: cn(
         "group relative flex flex-col text-card-foreground",
         editable ? [
@@ -25946,7 +25881,7 @@ var UEditor = import_react46.default.forwardRef(({
       ),
       children: [
         editable && (showMenuBar || showToolbar || showBubbleMenu) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(EditorUiRenderStateProvider, { editor, children: [
-          isMenuBarVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react46.default.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          isMenuBarVisible && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react45.default.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             LazyMenuBar,
             {
               editor,
@@ -26004,7 +25939,7 @@ var UEditor = import_react46.default.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: {
@@ -26073,7 +26008,7 @@ var UEditor = import_react46.default.forwardRef(({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-                import_react47.EditorContent,
+                import_react46.EditorContent,
                 {
                   editor,
                   className: "min-h-full"