@underverse-ui/underverse 1.0.151 → 1.0.153

package/dist/index.d.cts

@@ -3619,6 +3619,9 @@ declare const underverseMessages: {
                 borderColor: string;
                 clearBorder: string;
                 formula: string;
+                numberFormat: string;
+                formatText: string;
+                formatDate: string;
                 apply: string;
                 clear: string;
                 recalculate: string;
@@ -3997,6 +4000,9 @@ declare const underverseMessages: {
                 borderColor: string;
                 clearBorder: string;
                 formula: string;
+                numberFormat: string;
+                formatText: string;
+                formatDate: string;
                 apply: string;
                 clear: string;
                 recalculate: string;
@@ -5124,6 +5130,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             borderColor: string;
             clearBorder: string;
             formula: string;
+            numberFormat: string;
+            formatText: string;
+            formatDate: string;
             apply: string;
             clear: string;
             recalculate: string;
@@ -5501,6 +5510,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             borderColor: string;
             clearBorder: string;
             formula: string;
+            numberFormat: string;
+            formatText: string;
+            formatDate: string;
             apply: string;
             clear: string;
             recalculate: string;

package/dist/index.d.ts

@@ -3619,6 +3619,9 @@ declare const underverseMessages: {
                 borderColor: string;
                 clearBorder: string;
                 formula: string;
+                numberFormat: string;
+                formatText: string;
+                formatDate: string;
                 apply: string;
                 clear: string;
                 recalculate: string;
@@ -3997,6 +4000,9 @@ declare const underverseMessages: {
                 borderColor: string;
                 clearBorder: string;
                 formula: string;
+                numberFormat: string;
+                formatText: string;
+                formatDate: string;
                 apply: string;
                 clear: string;
                 recalculate: string;
@@ -5124,6 +5130,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             borderColor: string;
             clearBorder: string;
             formula: string;
+            numberFormat: string;
+            formatText: string;
+            formatDate: string;
             apply: string;
             clear: string;
             recalculate: string;
@@ -5501,6 +5510,9 @@ declare function getUnderverseMessages(locale?: UnderverseLocale): {
             borderColor: string;
             clearBorder: string;
             formula: string;
+            numberFormat: string;
+            formatText: string;
+            formatDate: string;
             apply: string;
             clear: string;
             recalculate: string;

package/dist/index.js

@@ -844,6 +844,9 @@ var en_default = {
       borderColor: "Border Color",
       clearBorder: "Clear Border",
       formula: "Formula",
+      numberFormat: "Number Format",
+      formatText: "Text",
+      formatDate: "Date",
       apply: "Apply",
       clear: "Clear",
       recalculate: "Recalculate",
@@ -1224,6 +1227,9 @@ var vi_default = {
       borderColor: "M\xE0u vi\u1EC1n",
       clearBorder: "X\xF3a vi\u1EC1n",
       formula: "C\xF4ng th\u1EE9c",
+      numberFormat: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1",
+      formatText: "Ch\u1EEF",
+      formatDate: "Ng\xE0y",
       apply: "\xC1p d\u1EE5ng",
       clear: "X\xF3a",
       recalculate: "T\xEDnh l\u1EA1i",
@@ -25993,6 +25999,10 @@ function getTableCellAttrs(cell, styles, defaultBackgroundColor) {
   if (borderAttrs.borderColor) attrs.borderColor = borderAttrs.borderColor;
   if (borderAttrs.borderStyle) attrs.borderStyle = borderAttrs.borderStyle;
   if (borderAttrs.borderWidth) attrs.borderWidth = borderAttrs.borderWidth;
+  if (cell.getAttribute("data-cell-id")) attrs.cellId = cell.getAttribute("data-cell-id") ?? void 0;
+  if (cell.getAttribute("data-number-format")) attrs.numberFormat = cell.getAttribute("data-number-format") ?? void 0;
+  if (cell.getAttribute("data-formula")) attrs.formula = cell.getAttribute("data-formula") ?? void 0;
+  if (cell.getAttribute("data-computed-value")) attrs.computedValue = cell.getAttribute("data-computed-value") ?? void 0;
   if (colspan > 1) attrs.colspan = colspan;
   if (rowspan > 1) attrs.rowspan = rowspan;
   if (colwidth) attrs.colwidth = colwidth;
@@ -27620,6 +27630,16 @@ var CodeBlockView = ({
 };
 
 // src/components/UEditor/extensions.ts
+function getFormulaStateAttributes(attributes) {
+  const formula = attributes["data-formula"];
+  if (!formula) {
+    return {};
+  }
+  const computedValue = String(attributes["data-computed-value"] ?? "");
+  return {
+    "data-formula-state": computedValue.startsWith("#") ? "error" : "computed"
+  };
+}
 var CustomTableCell = TableCell2.extend({
   addAttributes() {
     return {
@@ -27722,7 +27742,7 @@ var CustomTableCell = TableCell2.extend({
     mergedStyle = mergedStyle.replace(/^;/, "").trim();
     return [
       "td",
-      mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes, mergedStyle ? { style: mergedStyle } : {}),
+      mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes, getFormulaStateAttributes(HTMLAttributes), mergedStyle ? { style: mergedStyle } : {}),
       0
     ];
   }
@@ -27829,7 +27849,7 @@ var CustomTableHeader = TableHeader2.extend({
     mergedStyle = mergedStyle.replace(/^;/, "").trim();
     return [
       "th",
-      mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes, mergedStyle ? { style: mergedStyle } : {}),
+      mergeAttributes5(this.options.HTMLAttributes, HTMLAttributes, getFormulaStateAttributes(HTMLAttributes), mergedStyle ? { style: mergedStyle } : {}),
       0
     ];
   }
@@ -29910,6 +29930,143 @@ function getTableCellRangeLabels(range) {
 function normalizeTableFormula(formula) {
   return formula.trim().replace(/^=/, "").trim();
 }
+function formatFormulaError(error) {
+  return `#${error.toUpperCase()}`;
+}
+function normalizeTableNumberFormat(format) {
+  return format === "text" || format === "number" || format === "currency" || format === "percent" || format === "date" ? format : "text";
+}
+function formatTableFormulaDisplayValue(value, numberFormat) {
+  const stringValue = String(value);
+  if (stringValue.startsWith("#")) {
+    return stringValue;
+  }
+  const normalizedFormat = normalizeTableNumberFormat(numberFormat);
+  if (normalizedFormat === "text") {
+    return stringValue;
+  }
+  const numericValue = typeof value === "number" ? value : Number.parseFloat(stringValue.replace(/,/g, ""));
+  if (!Number.isFinite(numericValue)) {
+    return stringValue;
+  }
+  if (normalizedFormat === "number") {
+    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 6 }).format(numericValue);
+  }
+  if (normalizedFormat === "currency") {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 2
+    }).format(numericValue);
+  }
+  if (normalizedFormat === "percent") {
+    return new Intl.NumberFormat("en-US", {
+      style: "percent",
+      maximumFractionDigits: 2
+    }).format(numericValue);
+  }
+  const excelEpochMs = Date.UTC(1899, 11, 30);
+  const date = new Date(excelEpochMs + numericValue * 24 * 60 * 60 * 1e3);
+  if (Number.isNaN(date.getTime())) {
+    return stringValue;
+  }
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    timeZone: "UTC"
+  }).format(date);
+}
+function getTableFormulaReferences(formula) {
+  const normalized = normalizeTableFormula(formula);
+  if (!normalized) return [];
+  const tokens = tokenizeFormula(normalized);
+  if (!tokens) return [];
+  const references = /* @__PURE__ */ new Set();
+  for (const token of tokens) {
+    if (token.type === "cell") {
+      references.add(token.value);
+    } else if (token.type === "range") {
+      const range = parseTableCellRange(token.value);
+      if (!range) continue;
+      for (const label of getTableCellRangeLabels(range)) {
+        references.add(label);
+      }
+    }
+  }
+  return Array.from(references);
+}
+function buildTableFormulaDependencyGraph(cells) {
+  const dependencies = /* @__PURE__ */ new Map();
+  const dependents = /* @__PURE__ */ new Map();
+  const formulas = /* @__PURE__ */ new Map();
+  for (const cell of cells) {
+    const label = cell.label.toUpperCase();
+    formulas.set(label, cell.formula);
+    dependencies.set(label, new Set(getTableFormulaReferences(cell.formula)));
+    if (!dependents.has(label)) {
+      dependents.set(label, /* @__PURE__ */ new Set());
+    }
+  }
+  for (const [label, refs] of dependencies) {
+    for (const ref of refs) {
+      if (!dependents.has(ref)) {
+        dependents.set(ref, /* @__PURE__ */ new Set());
+      }
+      dependents.get(ref)?.add(label);
+    }
+  }
+  return { dependencies, dependents, formulas };
+}
+function getTableFormulaCircularReferences(graph) {
+  const visiting = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  const circular = /* @__PURE__ */ new Set();
+  const stack = [];
+  const visit = (label) => {
+    if (visiting.has(label)) {
+      const start = stack.indexOf(label);
+      for (const cycleLabel of start >= 0 ? stack.slice(start) : [label]) {
+        circular.add(cycleLabel);
+      }
+      return;
+    }
+    if (visited.has(label)) return;
+    visiting.add(label);
+    stack.push(label);
+    for (const ref of graph.dependencies.get(label) ?? []) {
+      if (graph.formulas.has(ref)) {
+        visit(ref);
+      }
+    }
+    stack.pop();
+    visiting.delete(label);
+    visited.add(label);
+  };
+  for (const label of graph.formulas.keys()) {
+    visit(label);
+  }
+  return circular;
+}
+function getTableFormulaRecalculationOrder(graph) {
+  const circular = getTableFormulaCircularReferences(graph);
+  const visited = /* @__PURE__ */ new Set();
+  const order = [];
+  const visit = (label) => {
+    if (visited.has(label) || circular.has(label)) return;
+    visited.add(label);
+    for (const ref of graph.dependencies.get(label) ?? []) {
+      if (graph.formulas.has(ref)) {
+        visit(ref);
+      }
+    }
+    order.push(label);
+  };
+  for (const label of graph.formulas.keys()) {
+    visit(label);
+  }
+  return { order, circular };
+}
 function evaluateBasicTableFormula(formula, getCellValue) {
   const normalized = normalizeTableFormula(formula);
   if (!normalized) {
@@ -30114,6 +30271,7 @@ var FormulaParser = class {
 };
 
 // src/components/UEditor/table-formula-commands.ts
+var UEDITOR_TABLE_FORMULA_RECALCULATE_META = "ueditorTableFormulaRecalculate";
 function collectChildren2(node) {
   const children = [];
   node.forEach((child) => children.push(child));
@@ -30144,6 +30302,13 @@ function safeFindCell2(map, relativePos) {
 function getCellText(cellNode) {
   return cellNode.textBetween(0, cellNode.content.size, "\n").trim();
 }
+function createCellDisplayContent(cellNode, displayValue) {
+  const paragraphType = cellNode.type.schema.nodes.paragraph;
+  if (!paragraphType || !displayValue) {
+    return paragraphType ? [paragraphType.create()] : cellNode.content;
+  }
+  return [paragraphType.create(null, cellNode.type.schema.text(displayValue))];
+}
 function buildTableValueGetter(tableNode) {
   const map = TableMap2.get(tableNode);
   const values = /* @__PURE__ */ new Map();
@@ -30158,6 +30323,20 @@ function buildTableValueGetter(tableNode) {
   }
   return (label) => values.get(label.toUpperCase());
 }
+function buildTableValueMap(tableNode) {
+  const map = TableMap2.get(tableNode);
+  const values = /* @__PURE__ */ new Map();
+  for (const rowInfo of getTableRows2(tableNode)) {
+    for (const entry of rowInfo.cells) {
+      const rect = safeFindCell2(map, entry.relativePos);
+      if (!rect) continue;
+      const label = `${indexToColumnName(rect.left)}${rect.top + 1}`;
+      const computedValue = entry.node.attrs.computedValue;
+      values.set(label, typeof computedValue === "string" && computedValue.trim() ? computedValue : getCellText(entry.node));
+    }
+  }
+  return values;
+}
 function getFormulaComputedValue(formula, tableNode) {
   const result = evaluateBasicTableFormula(formula, buildTableValueGetter(tableNode));
   return result.error ? `#${result.error.toUpperCase()}` : String(result.value);
@@ -30194,37 +30373,143 @@ function setSelectedTableCellFormula(editor, formula) {
 function clearSelectedTableCellFormula(editor) {
   return setSelectedTableCellFormula(editor, "");
 }
-function recalculateSelectedTable(editor) {
-  const rect = selectedRect2(editor.state);
-  const tableNode = rect.table;
-  const map = TableMap2.get(tableNode);
-  const getCellValue = buildTableValueGetter(tableNode);
+function setSelectedTableCellNumberFormat(editor, numberFormat) {
+  const value = numberFormat && numberFormat !== "text" ? numberFormat : null;
+  const { state, view } = editor;
+  const applied = setCellAttr("numberFormat", value)(state, view.dispatch.bind(view));
+  if (!applied) return false;
+  recalculateSelectedTable(editor);
+  view.focus();
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+function promoteFormulaTextInTableNode(tableNode) {
   let changed = false;
   const rows = getTableRows2(tableNode).map((rowInfo) => {
     const cells = collectChildren2(rowInfo.node);
+    for (const entry of rowInfo.cells) {
+      const text = getCellText(entry.node);
+      const formula = text.startsWith("=") ? normalizeFormulaInput(text) : "";
+      if (!formula || entry.node.attrs.formula === formula) continue;
+      cells[entry.index] = entry.node.type.create(
+        {
+          ...entry.node.attrs,
+          formula,
+          computedValue: null
+        },
+        entry.node.content,
+        entry.node.marks
+      );
+      changed = true;
+    }
+    return rowInfo.node.type.create(rowInfo.node.attrs, cells);
+  });
+  return {
+    tableNode: changed ? tableNode.type.create(tableNode.attrs, rows) : tableNode,
+    changed
+  };
+}
+function recalculateTableNode(tableNode) {
+  const promoted = promoteFormulaTextInTableNode(tableNode);
+  tableNode = promoted.tableNode;
+  const map = TableMap2.get(tableNode);
+  const values = buildTableValueMap(tableNode);
+  const formulaEntries = /* @__PURE__ */ new Map();
+  let changed = false;
+  const rowInfos = getTableRows2(tableNode);
+  for (const [rowIndex, rowInfo] of rowInfos.entries()) {
     for (const entry of rowInfo.cells) {
       const formula = typeof entry.node.attrs.formula === "string" ? entry.node.attrs.formula.trim() : "";
       if (!formula) continue;
       const rectForCell = safeFindCell2(map, entry.relativePos);
       if (!rectForCell) continue;
-      const result = evaluateBasicTableFormula(formula, getCellValue);
-      const computedValue = result.error ? `#${result.error.toUpperCase()}` : String(result.value);
-      if (entry.node.attrs.computedValue === computedValue) continue;
+      const label = `${indexToColumnName(rectForCell.left)}${rectForCell.top + 1}`;
+      formulaEntries.set(label, {
+        rowIndex,
+        cellIndex: entry.index,
+        node: entry.node,
+        formula
+      });
+    }
+  }
+  const graph = buildTableFormulaDependencyGraph(
+    Array.from(formulaEntries, ([label, entry]) => ({
+      label,
+      formula: entry.formula
+    }))
+  );
+  const { order, circular } = getTableFormulaRecalculationOrder(graph);
+  const computedValues = /* @__PURE__ */ new Map();
+  const getCellValue = (label) => values.get(label.toUpperCase());
+  for (const label of circular) {
+    computedValues.set(label, formatFormulaError("circular-reference"));
+    values.set(label, formatFormulaError("circular-reference"));
+  }
+  for (const label of order) {
+    const entry = formulaEntries.get(label);
+    if (!entry) continue;
+    const result = evaluateBasicTableFormula(entry.formula, getCellValue);
+    const computedValue = result.error ? formatFormulaError(result.error) : String(result.value);
+    computedValues.set(label, computedValue);
+    values.set(label, computedValue);
+  }
+  const rows = rowInfos.map((rowInfo) => {
+    const cells = collectChildren2(rowInfo.node);
+    for (const entry of rowInfo.cells) {
+      const rectForCell = safeFindCell2(map, entry.relativePos);
+      if (!rectForCell) continue;
+      const label = `${indexToColumnName(rectForCell.left)}${rectForCell.top + 1}`;
+      const computedValue = computedValues.get(label);
+      if (computedValue == null) continue;
+      const displayValue = formatTableFormulaDisplayValue(computedValue, entry.node.attrs.numberFormat);
+      const contentMatchesComputedValue = getCellText(entry.node) === displayValue;
+      if (entry.node.attrs.computedValue === computedValue && contentMatchesComputedValue) continue;
       cells[entry.index] = entry.node.type.create(
         {
           ...entry.node.attrs,
           computedValue
         },
-        entry.node.content,
+        createCellDisplayContent(entry.node, displayValue),
         entry.node.marks
       );
       changed = true;
     }
     return rowInfo.node.type.create(rowInfo.node.attrs, cells);
   });
-  if (!changed) return false;
-  const nextTable = tableNode.type.create(tableNode.attrs, rows);
-  editor.view.dispatch(editor.state.tr.replaceWith(rect.tableStart - 1, rect.tableStart - 1 + tableNode.nodeSize, nextTable));
+  if (!changed) return promoted.changed ? tableNode : null;
+  return tableNode.type.create(tableNode.attrs, rows);
+}
+function recalculateSelectedTable(editor) {
+  const rect = selectedRect2(editor.state);
+  const tableNode = rect.table;
+  const nextTable = recalculateTableNode(tableNode);
+  if (!nextTable) return false;
+  editor.view.dispatch(
+    editor.state.tr.replaceWith(rect.tableStart - 1, rect.tableStart - 1 + tableNode.nodeSize, nextTable).setMeta(UEDITOR_TABLE_FORMULA_RECALCULATE_META, true)
+  );
+  dispatchTableLayoutChange(editor);
+  return true;
+}
+function recalculateAllTableFormulas(editor) {
+  const replacements = [];
+  editor.state.doc.descendants((node, pos) => {
+    if (node.type.name !== "table") return true;
+    const nextTable = recalculateTableNode(node);
+    if (nextTable) {
+      replacements.push({
+        from: pos,
+        to: pos + node.nodeSize,
+        node: nextTable
+      });
+    }
+    return false;
+  });
+  if (replacements.length === 0) return false;
+  let tr = editor.state.tr;
+  for (const replacement of replacements.reverse()) {
+    tr = tr.replaceWith(replacement.from, replacement.to, replacement.node);
+  }
+  editor.view.dispatch(tr.setMeta(UEDITOR_TABLE_FORMULA_RECALCULATE_META, true));
   dispatchTableLayoutChange(editor);
   return true;
 }
@@ -30273,6 +30558,7 @@ var BubbleMenuContent = ({
   const currentHighlightColor = normalizeStyleValue(editor.getAttributes("highlight").color) || "";
   const currentCellBgColor = normalizeStyleValue(editor.getAttributes("tableCell").backgroundColor || editor.getAttributes("tableHeader").backgroundColor) || "";
   const currentCellFormula = normalizeStyleValue(editor.getAttributes("tableCell").formula || editor.getAttributes("tableHeader").formula) || "";
+  const currentCellNumberFormat = normalizeStyleValue(editor.getAttributes("tableCell").numberFormat || editor.getAttributes("tableHeader").numberFormat) || "text";
   const isInTable2 = isSelectionInTable(editor.state);
   const canMergeCells = isInTable2 && editor.can().mergeCells();
   const canSplitCell = isInTable2 && editor.can().splitCell();
@@ -30532,6 +30818,28 @@ var BubbleMenuContent = ({
           className: "h-full min-w-0 flex-1 bg-transparent px-2 text-sm font-medium text-foreground outline-none"
         }
       ) }),
+      /* @__PURE__ */ jsxs72("div", { className: "mt-2", children: [
+        /* @__PURE__ */ jsx86("div", { className: "mb-1 px-1 text-[11px] font-medium text-muted-foreground", children: t("tableMenu.numberFormat") || "Number format" }),
+        /* @__PURE__ */ jsx86("div", { className: "grid grid-cols-5 gap-1", children: [
+          ["text", "Text"],
+          ["number", "123"],
+          ["currency", "$"],
+          ["percent", "%"],
+          ["date", "Date"]
+        ].map(([format, label]) => /* @__PURE__ */ jsx86(
+          "button",
+          {
+            type: "button",
+            onClick: () => setSelectedTableCellNumberFormat(editor, format),
+            className: cn(
+              "h-8 rounded-md text-[11px] font-semibold transition-colors hover:bg-muted",
+              currentCellNumberFormat === format || format === "text" && !currentCellNumberFormat ? "bg-primary/10 text-primary" : "bg-muted/40 text-foreground"
+            ),
+            children: format === "text" ? t("tableMenu.formatText") || label : format === "date" ? t("tableMenu.formatDate") || label : label
+          },
+          format
+        )) })
+      ] }),
       /* @__PURE__ */ jsxs72("div", { className: "mt-2 grid grid-cols-3 gap-1", children: [
         /* @__PURE__ */ jsx86(
           "button",
@@ -38261,6 +38569,7 @@ var UEditor = React82.forwardRef(({
   const effectivePlaceholder = placeholder ?? t("placeholder");
   const inFlightPrepareRef = useRef37(null);
   const lastAppliedContentRef = useRef37(content ?? "");
+  const scheduledFormulaRecalculateRef = useRef37(false);
   const resolvedUploadFile = useMemo24(() => {
     if (uploadFile) return uploadFile;
     if (uploadFileForSave) {
@@ -38324,7 +38633,16 @@ var UEditor = React82.forwardRef(({
         class: UEDITOR_PROSEMIRROR_CLASS_NAME
       }
     },
-    onUpdate: ({ editor: editor2 }) => {
+    onUpdate: ({ editor: editor2, transaction }) => {
+      if (!transaction.getMeta(UEDITOR_TABLE_FORMULA_RECALCULATE_META) && !scheduledFormulaRecalculateRef.current) {
+        scheduledFormulaRecalculateRef.current = true;
+        queueMicrotask(() => {
+          scheduledFormulaRecalculateRef.current = false;
+          if (!editor2.isDestroyed) {
+            recalculateAllTableFormulas(editor2);
+          }
+        });
+      }
       const html = editor2.getHTML();
       onChange?.(html);
       onHtmlChange?.(html);
@@ -38362,6 +38680,14 @@ var UEditor = React82.forwardRef(({
     }),
     [content, editor, uploadImageForSave, uploadFileForSave, uploadImageConcurrency]
   );
+  useEffect38(() => {
+    if (!editor) return;
+    queueMicrotask(() => {
+      if (!editor.isDestroyed) {
+        recalculateAllTableFormulas(editor);
+      }
+    });
+  }, [editor]);
   useEffect38(() => {
     if (!editor) return;
     const nextContent = content ?? "";
@@ -38371,6 +38697,11 @@ var UEditor = React82.forwardRef(({
       Promise.resolve().then(() => {
         if (!editor.isDestroyed) {
           editor.commands.setContent(nextContent, { emitUpdate: false });
+          queueMicrotask(() => {
+            if (!editor.isDestroyed) {
+              recalculateAllTableFormulas(editor);
+            }
+          });
         }
       });
     }