@underverse-ui/underverse 1.0.204 → 1.0.206

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.204",
+  "version": "1.0.206",
   "sourceEntry": "src/index.ts",
   "totalExports": 252,
   "exports": [

package/dist/{EmojiPicker-UN6N7YVB.js → EmojiPicker-FEJJDAWZ.js}

@@ -2,13 +2,13 @@
 import {
   EmojiPicker,
   EmojiPicker_default
-} from "./chunk-CKKLFVOY.js";
-import "./chunk-ZUAIBY2Z.js";
+} from "./chunk-F6A7HJE4.js";
+import "./chunk-CYCBSKWI.js";
 import "./chunk-4TYW5K4J.js";
-import "./chunk-GSBRTFP2.js";
+import "./chunk-BRDGIALS.js";
 import "./chunk-NSBPE2FW.js";
 export {
   EmojiPicker,
   EmojiPicker_default as default
 };
-//# sourceMappingURL=EmojiPicker-UN6N7YVB.js.map
+//# sourceMappingURL=EmojiPicker-FEJJDAWZ.js.map

package/dist/{chunk-CC3QO2YM.js → chunk-4E43DRP2.js}

@@ -1,7 +1,7 @@
 import {
   EmojiGridButton,
   formatEmojiCountLabel
-} from "./chunk-ZUAIBY2Z.js";
+} from "./chunk-CYCBSKWI.js";
 import {
   COLUMN_RESIZE_LINE_THICKNESS,
   CellBgColorIcon,
@@ -42,6 +42,7 @@ import {
   getRelativeSelectedCellsMetrics,
   getSelectionTableCell,
   isColumnResizeHotspot,
+  isPointOverRenderedText,
   isRowResizeHotspot,
   isSafeUEditorUrl,
   mergeTableCellsPreservingColumnWidths,
@@ -52,12 +53,12 @@ import {
   sanitizeUEditorUrl,
   useEditorColors,
   useSharedEditorUiRenderState
-} from "./chunk-KFTYWTJR.js";
+} from "./chunk-AMAILXHP.js";
 import {
   Tooltip,
   cn,
   useSmartTranslations
-} from "./chunk-GSBRTFP2.js";
+} from "./chunk-BRDGIALS.js";
 
 // src/components/UEditor/prepare-content-for-save.ts
 var MIME_EXTENSION_MAP = {
@@ -472,11 +473,11 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/UEditor.tsx
-import React14, { useEffect as useEffect9, useImperativeHandle as useImperativeHandle4, useMemo as useMemo2, useRef as useRef9 } from "react";
+import React15, { 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
-import { mergeAttributes as mergeAttributes7 } from "@tiptap/core";
+import { mergeAttributes as mergeAttributes8 } from "@tiptap/core";
 import { Document } from "@tiptap/extension-document";
 import { Paragraph } from "@tiptap/extension-paragraph";
 import { Text } from "@tiptap/extension-text";
@@ -507,7 +508,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-UN6N7YVB.js");
+  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-FEJJDAWZ.js");
   return { default: EmojiPicker2 };
 });
 var EmojiPicker = ({ onSelect }) => {
@@ -3310,6 +3311,7 @@ var Indent = Extension9.create({
 var indent_default = Indent;
 
 // src/components/UEditor/table-align.ts
+import { mergeAttributes as mergeAttributes7 } from "@tiptap/core";
 import { Table as Table2 } from "@tiptap/extension-table";
 import { Plugin as Plugin4 } from "@tiptap/pm/state";
 import { tableEditing } from "@tiptap/pm/tables";
@@ -3329,12 +3331,13 @@ import {
 } from "@tiptap/pm/tables";
 var DEFAULT_TABLE_COLUMN_WIDTH = 100;
 var MIN_RESIZED_TABLE_COLUMN_WIDTH = 25;
-function getDynamicColumnMinWidth(startWidth, fallbackMinWidth) {
-  return Math.max(fallbackMinWidth, Math.round(startWidth / 3));
+function getColumnResizeMinWidth(configuredMinWidth) {
+  const normalizedMinWidth = Number.isFinite(configuredMinWidth) && configuredMinWidth > 0 ? Math.round(configuredMinWidth) : MIN_RESIZED_TABLE_COLUMN_WIDTH;
+  return Math.max(MIN_RESIZED_TABLE_COLUMN_WIDTH, normalizedMinWidth);
 }
 function setColumnStyle(column, width) {
   if (width == null) {
-    column.style.width = "";
+    column.style.width = `${DEFAULT_TABLE_COLUMN_WIDTH}px`;
     column.style.minWidth = `${DEFAULT_TABLE_COLUMN_WIDTH}px`;
     return;
   }
@@ -3346,7 +3349,6 @@ function isTableColumnElement(node) {
 }
 function updateDynamicColumns(node, colgroup, table, overrideCol, overrideValue) {
   let totalWidth = 0;
-  let fixedWidth = true;
   let nextDOM = colgroup.firstChild;
   const row = node.firstChild;
   if (row) {
@@ -3356,9 +3358,6 @@ function updateDynamicColumns(node, colgroup, table, overrideCol, overrideValue)
         const rawWidth = overrideCol === col ? overrideValue : colwidth?.[spanIndex];
         const width = rawWidth ? Math.max(rawWidth, MIN_RESIZED_TABLE_COLUMN_WIDTH) : null;
         totalWidth += width ?? DEFAULT_TABLE_COLUMN_WIDTH;
-        if (!width) {
-          fixedWidth = false;
-        }
         const colElement = isTableColumnElement(nextDOM) ? nextDOM : colgroup.appendChild(document.createElement("col"));
         setColumnStyle(colElement, width);
         nextDOM = colElement.nextSibling;
@@ -3371,11 +3370,10 @@ function updateDynamicColumns(node, colgroup, table, overrideCol, overrideValue)
     nextDOM = after;
   }
   const hasUserWidth = typeof node.attrs.style === "string" && /\bwidth\s*:/i.test(node.attrs.style);
-  if (fixedWidth && !hasUserWidth) {
+  if (!hasUserWidth) {
     table.style.width = `${totalWidth}px`;
     table.style.minWidth = "";
   } else {
-    table.style.width = "";
     table.style.minWidth = `${totalWidth}px`;
   }
 }
@@ -3388,6 +3386,7 @@ var UEditorTableView = class {
     if (node.attrs.style) {
       this.table.style.cssText = node.attrs.style;
     }
+    this.table.style.tableLayout = "fixed";
     this.colgroup = this.table.appendChild(document.createElement("colgroup"));
     updateDynamicColumns(node, this.colgroup, this.table);
     this.contentDOM = this.table.appendChild(document.createElement("tbody"));
@@ -3569,7 +3568,7 @@ function handleMouseDown(view, event, cellMinWidth) {
     colspan: attrs.colspan ?? 1,
     colwidth: attrs.colwidth
   });
-  const minWidth = getDynamicColumnMinWidth(width, cellMinWidth);
+  const minWidth = getColumnResizeMinWidth(cellMinWidth);
   const dragging = {
     startX: event.clientX,
     startWidth: width,
@@ -3697,15 +3696,37 @@ function parseTableAlign(element) {
 function renderTableAlignStyle(tableAlign) {
   switch (tableAlign) {
     case "center":
-      return "width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;";
+      return "table-layout: fixed; margin-left: auto; margin-right: auto;";
     case "right":
-      return "width: max-content; max-width: 100%; margin-left: auto; margin-right: 0;";
+      return "table-layout: fixed; margin-left: auto; margin-right: 0;";
     case "left":
-      return "width: max-content; max-width: 100%; margin-left: 0; margin-right: auto;";
+      return "table-layout: fixed; margin-left: 0; margin-right: auto;";
     default:
       return "";
   }
 }
+function createUEditorColGroup(node) {
+  const columns = [];
+  let totalWidth = 0;
+  const firstRow = node.firstChild;
+  if (firstRow) {
+    for (let cellIndex = 0; cellIndex < firstRow.childCount; cellIndex += 1) {
+      const cell = firstRow.child(cellIndex);
+      const colspan = Math.max(1, Number(cell.attrs.colspan) || 1);
+      const colwidth = Array.isArray(cell.attrs.colwidth) ? cell.attrs.colwidth : [];
+      for (let spanIndex = 0; spanIndex < colspan; spanIndex += 1) {
+        const storedWidth = Number(colwidth[spanIndex]);
+        const width = Number.isFinite(storedWidth) && storedWidth > 0 ? Math.max(MIN_RESIZED_TABLE_COLUMN_WIDTH, Math.round(storedWidth)) : DEFAULT_TABLE_COLUMN_WIDTH;
+        totalWidth += width;
+        columns.push(["col", { style: `width: ${width}px; min-width: ${width}px;`, width: String(width) }]);
+      }
+    }
+  }
+  return {
+    colgroup: ["colgroup", {}, ...columns],
+    tableWidth: totalWidth > 0 ? `${totalWidth}px` : ""
+  };
+}
 var UEditorTable = Table2.extend({
   addGlobalAttributes() {
     return [
@@ -3759,6 +3780,18 @@ var UEditorTable = Table2.extend({
       }
     };
   },
+  renderHTML({ node, HTMLAttributes }) {
+    const { colgroup, tableWidth } = createUEditorColGroup(node);
+    const table = [
+      "table",
+      mergeAttributes7(this.options.HTMLAttributes, HTMLAttributes, {
+        style: tableWidth ? `width: ${tableWidth};` : "table-layout: fixed;"
+      }),
+      colgroup,
+      ["tbody", 0]
+    ];
+    return this.options.renderWrapper ? ["div", { class: "tableWrapper" }, table] : table;
+  },
   addProseMirrorPlugins() {
     const isResizable = this.options.resizable && this.editor.isEditable;
     return [
@@ -5150,6 +5183,21 @@ function getFormulaStateAttributes(attributes) {
     "data-formula-state": computedValue.startsWith("#") ? "error" : "computed"
   };
 }
+function normalizeTableCellTextWrap(value) {
+  return value === "nowrap" ? "nowrap" : "wrap";
+}
+function parseTableCellTextWrap(element) {
+  if (element.getAttribute("data-text-wrap") === "nowrap" || element.style.whiteSpace === "nowrap") {
+    return "nowrap";
+  }
+  return "wrap";
+}
+function renderTableCellTextWrap(attributes) {
+  return normalizeTableCellTextWrap(attributes.textWrap) === "nowrap" ? { "data-text-wrap": "nowrap" } : {};
+}
+function getTableCellTextWrapStyle(value) {
+  return normalizeTableCellTextWrap(value) === "nowrap" ? "white-space: nowrap; overflow-wrap: normal; word-break: normal" : "white-space: normal; overflow-wrap: anywhere; word-break: normal";
+}
 var CustomTableCell = TableCell.extend({
   addAttributes() {
     return {
@@ -5250,6 +5298,11 @@ var CustomTableCell = TableCell.extend({
         default: null,
         parseHTML: (element) => element.getAttribute("data-text-direction") === "vertical" || ["sideways-lr", "vertical-lr", "vertical-rl"].includes(element.style.writingMode) ? "vertical" : null,
         renderHTML: (attributes) => attributes.textDirection === "vertical" ? { "data-text-direction": "vertical" } : {}
+      },
+      textWrap: {
+        default: "wrap",
+        parseHTML: parseTableCellTextWrap,
+        renderHTML: renderTableCellTextWrap
       }
     };
   },
@@ -5261,6 +5314,7 @@ var CustomTableCell = TableCell.extend({
     const borderWidth = HTMLAttributes["data-border-width"];
     const verticalAlign = HTMLAttributes["data-vertical-align"];
     const textDirection = HTMLAttributes["data-text-direction"];
+    const textWrap = HTMLAttributes["data-text-wrap"];
     let mergedStyle = style;
     if (bg) mergedStyle += `; background-color: ${bg}`;
     if (borderColor) mergedStyle += `; border-color: ${borderColor}`;
@@ -5268,10 +5322,11 @@ var CustomTableCell = TableCell.extend({
     if (borderWidth) mergedStyle += `; border-width: ${borderWidth}`;
     if (verticalAlign) mergedStyle += `; vertical-align: ${verticalAlign}`;
     if (textDirection === "vertical") mergedStyle += "; writing-mode: sideways-lr; text-orientation: mixed";
+    mergedStyle += `; ${getTableCellTextWrapStyle(textWrap)}`;
     mergedStyle = mergedStyle.replace(/^;/, "").trim();
     return [
       "td",
-      mergeAttributes7(this.options.HTMLAttributes, HTMLAttributes, getFormulaStateAttributes(HTMLAttributes), mergedStyle ? { style: mergedStyle } : {}),
+      mergeAttributes8(this.options.HTMLAttributes, HTMLAttributes, getFormulaStateAttributes(HTMLAttributes), mergedStyle ? { style: mergedStyle } : {}),
       0
     ];
   }
@@ -5376,6 +5431,11 @@ var CustomTableHeader = TableHeader.extend({
         default: null,
         parseHTML: (element) => element.getAttribute("data-text-direction") === "vertical" || ["sideways-lr", "vertical-lr", "vertical-rl"].includes(element.style.writingMode) ? "vertical" : null,
         renderHTML: (attributes) => attributes.textDirection === "vertical" ? { "data-text-direction": "vertical" } : {}
+      },
+      textWrap: {
+        default: "wrap",
+        parseHTML: parseTableCellTextWrap,
+        renderHTML: renderTableCellTextWrap
       }
     };
   },
@@ -5387,6 +5447,7 @@ var CustomTableHeader = TableHeader.extend({
     const borderWidth = HTMLAttributes["data-border-width"];
     const verticalAlign = HTMLAttributes["data-vertical-align"];
     const textDirection = HTMLAttributes["data-text-direction"];
+    const textWrap = HTMLAttributes["data-text-wrap"];
     let mergedStyle = style;
     if (bg) mergedStyle += `; background-color: ${bg}`;
     if (borderColor) mergedStyle += `; border-color: ${borderColor}`;
@@ -5394,10 +5455,11 @@ var CustomTableHeader = TableHeader.extend({
     if (borderWidth) mergedStyle += `; border-width: ${borderWidth}`;
     if (verticalAlign) mergedStyle += `; vertical-align: ${verticalAlign}`;
     if (textDirection === "vertical") mergedStyle += "; writing-mode: sideways-lr; text-orientation: mixed";
+    mergedStyle += `; ${getTableCellTextWrapStyle(textWrap)}`;
     mergedStyle = mergedStyle.replace(/^;/, "").trim();
     return [
       "th",
-      mergeAttributes7(this.options.HTMLAttributes, HTMLAttributes, getFormulaStateAttributes(HTMLAttributes), mergedStyle ? { style: mergedStyle } : {}),
+      mergeAttributes8(this.options.HTMLAttributes, HTMLAttributes, getFormulaStateAttributes(HTMLAttributes), mergedStyle ? { style: mergedStyle } : {}),
       0
     ];
   }
@@ -5559,7 +5621,8 @@ function buildUEditorExtensions({
       handleWidth: 10,
       allowTableNodeSelection: true,
       HTMLAttributes: {
-        class: "border-collapse my-4"
+        class: "border-collapse my-4",
+        style: "table-layout: fixed;"
       }
     }),
     table_row_default,
@@ -5642,7 +5705,8 @@ import {
   AlignCenterVertical,
   AlignEndVertical,
   ArrowDown,
-  ArrowRight
+  ArrowRight,
+  WrapText
 } from "lucide-react";
 
 // src/components/UEditor/table-border-commands.ts
@@ -5984,6 +6048,7 @@ var BubbleMenuContent = ({
   const [activeBorderPosition, setActiveBorderPosition] = useState5("all");
   const currentCellVerticalAlign = normalizeStyleValue(editor.getAttributes("tableCell").verticalAlign || editor.getAttributes("tableHeader").verticalAlign) || "";
   const currentCellTextDirection = normalizeStyleValue(editor.getAttributes("tableCell").textDirection || editor.getAttributes("tableHeader").textDirection) || "horizontal";
+  const currentCellTextWrap = normalizeStyleValue(editor.getAttributes("tableCell").textWrap || editor.getAttributes("tableHeader").textWrap) || "wrap";
   const isInTable3 = isSelectionInTable(editor.state);
   const canMergeCells = isInTable3 && editor.can().mergeCells();
   const canSplitCell = isInTable3 && editor.can().splitCell();
@@ -6644,6 +6709,20 @@ var BubbleMenuContent = ({
           children: /* @__PURE__ */ jsx12(TableCellsMerge, { className: "w-4 h-4" })
         }
       ),
+      /* @__PURE__ */ jsx12(
+        ToolbarButton,
+        {
+          onClick: () => applyTableCellAttribute(
+            editor,
+            "textWrap",
+            currentCellTextWrap === "nowrap" ? "wrap" : "nowrap",
+            { focus: false }
+          ),
+          active: currentCellTextWrap !== "nowrap",
+          title: currentCellTextWrap === "nowrap" ? t("tableMenu.wrapText") : t("tableMenu.noWrapText"),
+          children: /* @__PURE__ */ jsx12(WrapText, { className: "h-4 w-4" })
+        }
+      ),
       /* @__PURE__ */ jsxs10(
         DropdownMenu,
         {
@@ -11457,6 +11536,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");
@@ -11562,6 +11657,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;
@@ -11571,8 +11669,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;
@@ -11883,7 +11981,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__ */ jsx16(
           Tooltip,
@@ -11916,7 +12015,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__ */ jsx16(GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx16("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                   }
@@ -11954,7 +12056,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__ */ jsx16(
           Tooltip,
@@ -11987,7 +12090,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__ */ jsx16(GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx16("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                   }
@@ -12233,6 +12336,7 @@ function applyTableSize(editor, snapshot, dimensions) {
 // src/components/UEditor/table-controls.tsx
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs15 } from "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;
@@ -12410,6 +12514,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
@@ -12876,8 +12994,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__ */ jsxs15(Fragment6, { children: [
     /* @__PURE__ */ jsx18(
       TableRowHandles,
@@ -14051,17 +14169,85 @@ function TableFormulaBar({ editor }) {
   );
 }
 
+// src/components/UEditor/use-editor-output.ts
+import * as React14 from "react";
+function normalizeDebounceMs(value) {
+  return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+function useUEditorOutput({
+  onChange,
+  onHtmlChange,
+  onJsonChange,
+  outputDebounceMs
+}) {
+  const callbacksRef = React14.useRef({});
+  const pendingEditorRef = React14.useRef(null);
+  const timeoutRef = React14.useRef(null);
+  const debounceMs = normalizeDebounceMs(outputDebounceMs);
+  callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
+  const flushOutputUpdates = React14.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 = React14.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]);
+  React14.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]);
+  React14.useEffect(() => () => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    pendingEditorRef.current = null;
+  }, []);
+  return {
+    flushOutputUpdates,
+    scheduleOutputUpdate
+  };
+}
+
 // src/components/UEditor/UEditor.tsx
 import { jsx as jsx20, jsxs as jsxs17 } from "react/jsx-runtime";
-var LazyMenuBar = React14.lazy(async () => {
-  const { MenuBar } = await import("./menu-bar-6U5S4PS7.js");
+var LazyMenuBar = React15.lazy(async () => {
+  const { MenuBar } = await import("./menu-bar-6GS5LLTD.js");
   return { default: MenuBar };
 });
-var UEditor = React14.forwardRef(({
+var UEditor = React15.forwardRef(({
   content = "",
   onChange,
   onHtmlChange,
   onJsonChange,
+  outputDebounceMs = 0,
   uploadImage,
   uploadImageForSave,
   uploadImageConcurrency = 3,
@@ -14099,15 +14285,21 @@ var UEditor = React14.forwardRef(({
 }, ref) => {
   const t = useSmartTranslations("UEditor");
   const effectivePlaceholder = placeholder ?? t("placeholder");
-  const inFlightPrepareRef = useRef9(null);
-  const lastAppliedContentRef = useRef9(content ?? "");
-  const scheduledFormulaRecalculateRef = useRef9(false);
-  const pendingFormulaTextRecalculateRef = useRef9(false);
-  const editorInstanceRef = useRef9(null);
-  const formulaRangePickRef = useRef9(null);
-  const formulaRangeSurfaceRef = useRef9(null);
-  const [formulaRangeHighlight, setFormulaRangeHighlight] = React14.useState(null);
-  const scheduleFormulaRecalculate = React14.useCallback((editor2, options) => {
+  const inFlightPrepareRef = useRef10(null);
+  const lastAppliedContentRef = useRef10(content ?? "");
+  const scheduledFormulaRecalculateRef = useRef10(false);
+  const pendingFormulaTextRecalculateRef = useRef10(false);
+  const editorInstanceRef = useRef10(null);
+  const formulaRangePickRef = useRef10(null);
+  const formulaRangeSurfaceRef = useRef10(null);
+  const [formulaRangeHighlight, setFormulaRangeHighlight] = React15.useState(null);
+  const { flushOutputUpdates, scheduleOutputUpdate } = useUEditorOutput({
+    onChange,
+    onHtmlChange,
+    onJsonChange,
+    outputDebounceMs
+  });
+  const scheduleFormulaRecalculate = React15.useCallback((editor2, options) => {
     if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
     if (!options?.force && isEditingTableFormulaText(editor2)) return;
     scheduledFormulaRecalculateRef.current = true;
@@ -14147,7 +14339,7 @@ var UEditor = React14.forwardRef(({
     ],
     [effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable, fetchMetadata, extraExtensions]
   );
-  const syncFormulaRangeHighlight = React14.useCallback((pickState) => {
+  const syncFormulaRangeHighlight = React15.useCallback((pickState) => {
     const container = formulaRangeSurfaceRef.current;
     setFormulaRangeHighlight(container && pickState ? getFormulaRangePickHighlight(container, pickState) : null);
   }, []);
@@ -14248,14 +14440,7 @@ var UEditor = React14.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)) {
@@ -14269,9 +14454,10 @@ var UEditor = React14.forwardRef(({
       const shouldRecalculate = pendingFormulaTextRecalculateRef.current;
       pendingFormulaTextRecalculateRef.current = false;
       if (shouldRecalculate) scheduleFormulaRecalculate(editor2, { force: true });
+      queueMicrotask(flushOutputUpdates);
     }
   });
-  useEffect9(() => {
+  useEffect10(() => {
     editorInstanceRef.current = editor;
     return () => {
       if (editorInstanceRef.current === editor) editorInstanceRef.current = null;
@@ -14312,7 +14498,7 @@ var UEditor = React14.forwardRef(({
     }),
     [content, editor, uploadImageForSave, uploadFileForSave, uploadImageConcurrency]
   );
-  useEffect9(() => {
+  useEffect10(() => {
     if (!editor) return;
     queueMicrotask(() => {
       if (!editor.isDestroyed) {
@@ -14320,7 +14506,7 @@ var UEditor = React14.forwardRef(({
       }
     });
   }, [editor]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!editor) return;
     const nextContent = content ?? "";
     if (lastAppliedContentRef.current === nextContent) return;
@@ -14365,7 +14551,7 @@ var UEditor = React14.forwardRef(({
       ),
       children: [
         editable && (showMenuBar || showToolbar || showBubbleMenu) ? /* @__PURE__ */ jsxs17(EditorUiRenderStateProvider, { editor, children: [
-          showMenuBar && /* @__PURE__ */ jsx20(React14.Suspense, { fallback: null, children: /* @__PURE__ */ jsx20(
+          showMenuBar && /* @__PURE__ */ jsx20(React15.Suspense, { fallback: null, children: /* @__PURE__ */ jsx20(
             LazyMenuBar,
             {
               editor,
@@ -14503,4 +14689,4 @@ export {
   prepareUEditorContentForSave,
   UEditor_default
 };
-//# sourceMappingURL=chunk-CC3QO2YM.js.map
+//# sourceMappingURL=chunk-4E43DRP2.js.map