@underverse-ui/underverse 1.0.204 → 1.0.205

package/dist/index.js

@@ -4,19 +4,19 @@ import {
   extractImageSrcsFromHtml,
   normalizeImageUrl,
   prepareUEditorContentForSave
-} from "./chunk-CC3QO2YM.js";
+} from "./chunk-2V6A6PGI.js";
 import {
   EmojiPicker_default
-} from "./chunk-CKKLFVOY.js";
+} from "./chunk-Z63YNF3N.js";
 import {
   getEmojiImageUrl,
   getEmojiUnifiedCode,
   setEmojiBaseUrl
-} from "./chunk-ZUAIBY2Z.js";
+} from "./chunk-IXEFOLUD.js";
 import "./chunk-4TYW5K4J.js";
 import {
   Modal_default
-} from "./chunk-QVQTWZ24.js";
+} from "./chunk-7U3Y7R7U.js";
 import {
   DropdownMenuItem,
   DropdownMenuSeparator,
@@ -34,7 +34,7 @@ import {
   shadcnAnimationStyles,
   useShadCNAnimations,
   useUnderverseUIConfig
-} from "./chunk-KFTYWTJR.js";
+} from "./chunk-MJV7ETJM.js";
 import {
   ForceInternalTranslationsProvider,
   NextIntlAdapter,
@@ -54,7 +54,7 @@ import {
   useUnderverseLocale,
   useUnderverseTranslations,
   vi_default
-} from "./chunk-GSBRTFP2.js";
+} from "./chunk-XJR7E6QB.js";
 import {
   __export,
   __require

package/dist/{menu-bar-6U5S4PS7.js → menu-bar-NDAP3SOR.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Modal_default
-} from "./chunk-QVQTWZ24.js";
+} from "./chunk-7U3Y7R7U.js";
 import {
   DEFAULT_TABLE_ROW_HEIGHT,
   DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
@@ -21,11 +21,11 @@ import {
   sanitizeUEditorUrl,
   useDropdownMenuClose,
   useSharedEditorUiRenderState
-} from "./chunk-KFTYWTJR.js";
+} from "./chunk-MJV7ETJM.js";
 import {
   cn,
   useSmartTranslations
-} from "./chunk-GSBRTFP2.js";
+} from "./chunk-XJR7E6QB.js";
 import "./chunk-NSBPE2FW.js";
 
 // src/components/UEditor/menu-bar.tsx
@@ -944,4 +944,4 @@ var MenuBar = ({
 export {
   MenuBar
 };
-//# sourceMappingURL=menu-bar-6U5S4PS7.js.map
+//# sourceMappingURL=menu-bar-NDAP3SOR.js.map

package/dist/ueditor.cjs

@@ -1911,12 +1911,14 @@ var init_TranslationContext = __esm({
     TranslationContext = React2.createContext(null);
     useUnderverseTranslations = (namespace) => {
       const context = React2.useContext(TranslationContext);
-      if (!context) {
-        return (key) => {
-          return getUnderverseDefaultTranslation("en", namespace, key);
-        };
-      }
-      return context.t(namespace);
+      return React2.useMemo(() => {
+        if (!context) {
+          return (key) => {
+            return getUnderverseDefaultTranslation("en", namespace, key);
+          };
+        }
+        return context.t(namespace);
+      }, [context, namespace]);
     };
     useUnderverseLocale = () => {
       const context = React2.useContext(TranslationContext);
@@ -1982,10 +1984,10 @@ function useSmartTranslations(namespace) {
       setEnvironmentLocale(detected);
     }
   }, [forceInternal, internalLocale, nextIntlBridge]);
-  if (forceInternal) {
-    return internalT;
-  }
-  return (key) => {
+  return React4.useCallback((key) => {
+    if (forceInternal) {
+      return internalT(key);
+    }
     const resolvedEnvironmentLocale = environmentLocale && environmentLocale !== internalLocale ? environmentLocale : null;
     const primaryLocale = nextIntlBridge?.locale ?? resolvedEnvironmentLocale ?? internalLocale;
     const fallbackLocale = resolvedEnvironmentLocale && resolvedEnvironmentLocale !== primaryLocale ? resolvedEnvironmentLocale : null;
@@ -2014,7 +2016,7 @@ function useSmartTranslations(namespace) {
       return internalValue;
     }
     return key;
-  };
+  }, [environmentLocale, forceInternal, internalLocale, internalT, namespace, nextIntlBridge]);
 }
 var React4, import_jsx_runtime4, ForceInternalContext;
 var init_useSmartTranslations = __esm({
@@ -4993,6 +4995,25 @@ function resolveEventElement(target) {
   if (target instanceof Node) return target.parentElement;
   return null;
 }
+function isPointOverRenderedText(root, clientX, clientY) {
+  const view = root.ownerDocument.defaultView;
+  if (!view) return false;
+  const walker = root.ownerDocument.createTreeWalker(root, view.NodeFilter.SHOW_TEXT);
+  let textNode = walker.nextNode();
+  while (textNode) {
+    if (textNode.textContent?.length) {
+      const range = root.ownerDocument.createRange();
+      range.selectNodeContents(textNode);
+      const textRects = Array.from(range.getClientRects());
+      range.detach?.();
+      if (textRects.some((rect) => clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom)) {
+        return true;
+      }
+    }
+    textNode = walker.nextNode();
+  }
+  return false;
+}
 function getSelectionTableCell(view) {
   const browserSelection = window.getSelection();
   const anchorElement = resolveEventElement(browserSelection?.anchorNode ?? null);
@@ -7925,12 +7946,12 @@ var init_editor_styles = __esm({
 });
 
 // src/components/Modal.tsx
-var React28, import_react_dom4, import_lucide_react20, import_jsx_runtime35, sizeStyles, Modal, Modal_default;
+var React29, import_react_dom4, import_lucide_react20, import_jsx_runtime35, sizeStyles, Modal, Modal_default;
 var init_Modal = __esm({
   "src/components/Modal.tsx"() {
     "use strict";
     "use client";
-    React28 = __toESM(require("react"), 1);
+    React29 = __toESM(require("react"), 1);
     import_react_dom4 = require("react-dom");
     init_cn();
     import_lucide_react20 = require("lucide-react");
@@ -7967,17 +7988,17 @@ var init_Modal = __esm({
       const gi18n = useGlobalI18n();
       const globalConfig = useUnderverseUIConfig();
       const resolvedBorderMode = borderMode ?? globalConfig.borderMode;
-      const [isMounted, setIsMounted] = React28.useState(false);
-      const [isVisible, setIsVisible] = React28.useState(false);
-      const [isAnimating, setIsAnimating] = React28.useState(true);
-      const mouseDownTarget = React28.useRef(null);
-      const modalContentRef = React28.useRef(null);
-      React28.useEffect(() => {
+      const [isMounted, setIsMounted] = React29.useState(false);
+      const [isVisible, setIsVisible] = React29.useState(false);
+      const [isAnimating, setIsAnimating] = React29.useState(true);
+      const mouseDownTarget = React29.useRef(null);
+      const modalContentRef = React29.useRef(null);
+      React29.useEffect(() => {
         setIsMounted(true);
         return () => setIsMounted(false);
       }, []);
-      const animationRef = React28.useRef(false);
-      React28.useEffect(() => {
+      const animationRef = React29.useRef(false);
+      React29.useEffect(() => {
         if (isOpen) {
           if (animationRef.current) return;
           animationRef.current = true;
@@ -7997,7 +8018,7 @@ var init_Modal = __esm({
           }
         }
       }, [isOpen, isVisible]);
-      React28.useEffect(() => {
+      React29.useEffect(() => {
         if (!isOpen || !closeOnEsc) return;
         const handleEscape = (event) => {
           if (event.key === "Escape") {
@@ -8007,7 +8028,7 @@ var init_Modal = __esm({
         document.addEventListener("keydown", handleEscape);
         return () => document.removeEventListener("keydown", handleEscape);
       }, [isOpen, closeOnEsc, onClose]);
-      React28.useEffect(() => {
+      React29.useEffect(() => {
         if (isOpen) {
           document.body.style.overflow = "hidden";
         } else {
@@ -20432,6 +20453,22 @@ function buildLogicalRowMetrics({
     };
   });
 }
+function getTableCellTextSelectionRange(editor, cellPos) {
+  const cellNode = editor.state.doc.nodeAt(cellPos);
+  if (!cellNode || cellNode.type.name !== "tableCell" && cellNode.type.name !== "tableHeader") {
+    return null;
+  }
+  let from = null;
+  let to = null;
+  cellNode.descendants((node, relativePos) => {
+    if (!node.isText || node.nodeSize === 0) return true;
+    const textStart = cellPos + 1 + relativePos;
+    from ?? (from = textStart);
+    to = textStart + node.nodeSize;
+    return true;
+  });
+  return from !== null && to !== null && from < to ? { from, to } : null;
+}
 function buildTableControlLayout(editor, surface, cell) {
   const row = cell.closest("tr");
   const table = cell.closest("table");
@@ -20537,6 +20574,9 @@ function buildTableHoverState({
   layout,
   surface
 }) {
+  if (event.buttons !== 0) {
+    return DEFAULT_TABLE_HOVER_STATE;
+  }
   const surfaceRect = surface.getBoundingClientRect();
   const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
   const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
@@ -20546,8 +20586,8 @@ function buildTableHoverState({
   const directTableMenu = targetElement?.closest?.("[data-table-control='table-menu']");
   const directAddColumn = targetElement?.closest?.("[data-table-control='add-column']");
   const directAddRow = targetElement?.closest?.("[data-table-control='add-row']");
-  const directRowHandleIndex = directRowHandle instanceof HTMLElement ? Number.parseInt(directRowHandle.dataset.rowHandleIndex ?? "", 10) : Number.NaN;
-  const directColumnHandleIndex = directColumnHandle instanceof HTMLElement ? Number.parseInt(directColumnHandle.dataset.columnHandleIndex ?? "", 10) : Number.NaN;
+  const directRowHandleIndex = directRowHandle instanceof HTMLElement && relativeX <= layout.tableLeft ? Number.parseInt(directRowHandle.dataset.rowHandleIndex ?? "", 10) : Number.NaN;
+  const directColumnHandleIndex = directColumnHandle instanceof HTMLElement && relativeY <= layout.tableTop ? Number.parseInt(directColumnHandle.dataset.columnHandleIndex ?? "", 10) : Number.NaN;
   const visibleBounds = getVisibleTableBounds(layout);
   const rowRailTop = layout.wrapperTop + layout.wrapperHeight;
   const isMouseInTable = relativeX >= layout.tableLeft && relativeX <= layout.tableLeft + layout.tableWidth && relativeY >= layout.tableTop && relativeY <= layout.tableTop + layout.tableHeight;
@@ -20866,7 +20906,8 @@ function TableRowHandles({
         "data-row-handle-index": rowHandle.index,
         style: {
           top: Math.max(8, rowHandle.center - 12),
-          left: rowHandleLeft
+          left: rowHandleLeft,
+          pointerEvents: visible ? "auto" : "none"
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Tooltip,
@@ -20899,7 +20940,10 @@ function TableRowHandles({
                     style: {
                       opacity: isShown ? 1 : 0,
                       transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
-                      pointerEvents: isShown ? "auto" : "none"
+                      // The idle marker is only a location hint. Keeping it
+                      // pointer-transparent prevents it from stealing a text
+                      // selection near the first character of a table cell.
+                      pointerEvents: visible ? "auto" : "none"
                     },
                     children: visible ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                   }
@@ -20937,7 +20981,8 @@ function TableColumnHandles({
         "data-column-handle-index": columnHandle.index,
         style: {
           top: columnHandleTop,
-          left: Math.max(8, columnHandle.center - 12)
+          left: Math.max(8, columnHandle.center - 12),
+          pointerEvents: visible ? "auto" : "none"
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Tooltip,
@@ -20970,7 +21015,7 @@ function TableColumnHandles({
                     style: {
                       opacity: isShown ? 1 : 0,
                       transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
-                      pointerEvents: isShown ? "auto" : "none"
+                      pointerEvents: visible ? "auto" : "none"
                     },
                     children: visible ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react16.GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                   }
@@ -21218,6 +21263,7 @@ function applyTableSize(editor, snapshot, dimensions) {
 // src/components/UEditor/table-controls.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var TABLE_MENU_TOP_OFFSET = 10;
+var AXIS_HANDLE_RADIUS = 12;
 function nearestIndex(centers, position) {
   let bestIndex = 0;
   let bestDistance = Number.POSITIVE_INFINITY;
@@ -21395,6 +21441,20 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       const surface2 = containerRef.current;
       const nextLayout = surface2 ? buildTableControlLayout(editor, surface2, cell) : null;
       if (!nextLayout) return;
+      if (isPointOverRenderedText(cell, event.clientX, event.clientY)) {
+        const textSelection = getTableCellTextSelectionRange(editor, nextLayout.cellPos);
+        if (textSelection) {
+          event.preventDefault();
+          const didSelectText = editor.commands.setTextSelection(textSelection);
+          if (didSelectText) {
+            editor.view.focus();
+            layoutRef.current = nextLayout;
+            setLayout(nextLayout);
+            setHoverState(DEFAULT_TABLE_HOVER_STATE);
+            return;
+          }
+        }
+      }
       const didSelect = editor.commands.setCellSelection({
         anchorCell: nextLayout.cellPos,
         headCell: nextLayout.cellPos
@@ -21861,8 +21921,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
   }
   const menuTop = Math.max(8, layout.tableTop - TABLE_MENU_TOP_OFFSET);
   const menuLeft = Math.max(8, layout.tableLeft);
-  const rowHandleLeft = layout.tableLeft - 12;
-  const columnHandleTop = layout.tableTop - 12;
+  const rowHandleLeft = layout.tableLeft - AXIS_HANDLE_RADIUS;
+  const columnHandleTop = layout.tableTop - AXIS_HANDLE_RADIUS;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       TableRowHandles,
@@ -23049,6 +23109,73 @@ function TableFormulaBar({ editor }) {
   );
 }
 
+// src/components/UEditor/use-editor-output.ts
+var React28 = __toESM(require("react"), 1);
+function normalizeDebounceMs(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+function useUEditorOutput({
+  onChange,
+  onHtmlChange,
+  onJsonChange,
+  outputDebounceMs
+}) {
+  const callbacksRef = React28.useRef({});
+  const pendingEditorRef = React28.useRef(null);
+  const timeoutRef = React28.useRef(null);
+  const debounceMs = normalizeDebounceMs(outputDebounceMs);
+  callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
+  const flushOutputUpdates = React28.useCallback(() => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    const editor = pendingEditorRef.current;
+    pendingEditorRef.current = null;
+    if (!editor || editor.isDestroyed) return;
+    const callbacks = callbacksRef.current;
+    if (callbacks.onChange || callbacks.onHtmlChange) {
+      const html = editor.getHTML();
+      callbacks.onChange?.(html);
+      callbacks.onHtmlChange?.(html);
+    }
+    if (callbacks.onJsonChange) {
+      callbacks.onJsonChange(editor.getJSON());
+    }
+  }, []);
+  const scheduleOutputUpdate = React28.useCallback((editor) => {
+    const callbacks = callbacksRef.current;
+    if (!callbacks.onChange && !callbacks.onHtmlChange && !callbacks.onJsonChange) return;
+    pendingEditorRef.current = editor;
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (debounceMs === 0) {
+      flushOutputUpdates();
+      return;
+    }
+    timeoutRef.current = setTimeout(flushOutputUpdates, debounceMs);
+  }, [debounceMs, flushOutputUpdates]);
+  React28.useEffect(() => {
+    if (!pendingEditorRef.current || timeoutRef.current === null) return;
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = debounceMs === 0 ? null : setTimeout(flushOutputUpdates, debounceMs);
+    if (debounceMs === 0) flushOutputUpdates();
+  }, [debounceMs, flushOutputUpdates]);
+  React28.useEffect(() => () => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    pendingEditorRef.current = null;
+  }, []);
+  return {
+    flushOutputUpdates,
+    scheduleOutputUpdate
+  };
+}
+
 // src/components/UEditor/UEditor.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LazyMenuBar = import_react44.default.lazy(async () => {
@@ -23060,6 +23187,7 @@ var UEditor = import_react44.default.forwardRef(({
   onChange,
   onHtmlChange,
   onJsonChange,
+  outputDebounceMs = 0,
   uploadImage,
   uploadImageForSave,
   uploadImageConcurrency = 3,
@@ -23105,6 +23233,12 @@ var UEditor = import_react44.default.forwardRef(({
   const formulaRangePickRef = (0, import_react44.useRef)(null);
   const formulaRangeSurfaceRef = (0, import_react44.useRef)(null);
   const [formulaRangeHighlight, setFormulaRangeHighlight] = import_react44.default.useState(null);
+  const { flushOutputUpdates, scheduleOutputUpdate } = useUEditorOutput({
+    onChange,
+    onHtmlChange,
+    onJsonChange,
+    outputDebounceMs
+  });
   const scheduleFormulaRecalculate = import_react44.default.useCallback((editor2, options) => {
     if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
     if (!options?.force && isEditingTableFormulaText(editor2)) return;
@@ -23246,14 +23380,7 @@ var UEditor = import_react44.default.forwardRef(({
           pendingFormulaTextRecalculateRef.current = false;
         }
       }
-      if (onChange || onHtmlChange) {
-        const html = editor2.getHTML();
-        onChange?.(html);
-        onHtmlChange?.(html);
-      }
-      if (onJsonChange) {
-        onJsonChange(editor2.getJSON());
-      }
+      scheduleOutputUpdate(editor2);
     },
     onSelectionUpdate: ({ editor: editor2 }) => {
       if (pendingFormulaTextRecalculateRef.current && !isEditingTableFormulaText(editor2)) {
@@ -23267,6 +23394,7 @@ var UEditor = import_react44.default.forwardRef(({
       const shouldRecalculate = pendingFormulaTextRecalculateRef.current;
       pendingFormulaTextRecalculateRef.current = false;
       if (shouldRecalculate) scheduleFormulaRecalculate(editor2, { force: true });
+      queueMicrotask(flushOutputUpdates);
     }
   });
   (0, import_react44.useEffect)(() => {