@fileverse-dev/fortune-react 1.3.10 → 1.3.11-mixed

package/es/components/Workbook/index.js

@@ -25,7 +25,7 @@ var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
   }
   return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { defaultContext, defaultSettings, initSheetIndex, handleGlobalKeyDown, getSheetIndex, handlePaste, filterPatch, patchToOp, inverseRowColOptions, ensureSheetIndex, insertRowCol, deleteRowCol, groupValuesRefresh, insertDuneChart, getFlowdata, api, handlePasteByClick } from "@fileverse-dev/fortune-core";
+import { defaultContext, defaultSettings, initSheetIndex, handleGlobalKeyDown, getSheetIndex, handlePaste, filterPatch, patchToOp, inverseRowColOptions, ensureSheetIndex, insertRowCol, deleteRowCol, groupValuesRefresh, insertDuneChart, getFlowdata, api, handlePasteByClick, update } from "@fileverse-dev/fortune-core";
 import React, { useMemo, useState, useCallback, useEffect, useRef, useImperativeHandle } from "react";
 import "./index.css";
 import produce, { applyPatches, enablePatches, produceWithPatches } from "immer";
@@ -124,6 +124,12 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       });
       celldata === null || celldata === void 0 ? void 0 : celldata.forEach(function (d) {
         expandedData_1[d.r][d.c] = d.v;
+        var cell = d.v;
+        if (cell && cell.ct && cell.ct.t === "d" && (cell.m === undefined || cell.m === null)) {
+          try {
+            cell.m = update(cell.ct.fa || "General", cell.v);
+          } catch (e) {}
+        }
       });
       draftCtx.luckysheetfile = produce(draftCtx.luckysheetfile, function (d) {
         d[index].data = expandedData_1;
@@ -142,6 +148,101 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       onOp(patchToOp(ctx, patches, options, undo));
     }
   }, [onOp]);
+  var emitYjsFromPatches = useCallback(function (ctxBefore, ctxAfter, patches) {
+    var _a;
+    var _b = (_a = ctxBefore.hooks) !== null && _a !== void 0 ? _a : {},
+      updateCellYdoc = _b.updateCellYdoc,
+      updateAllCell = _b.updateAllCell;
+    if (!updateCellYdoc) return;
+    var mapFields = new Set(["celldata", "calcChain", "dataBlockCalcFunction", "liveQueryList", "dataVerification", "hyperlink", "conditionRules"]);
+    var changeMap = new Map();
+    var upsert = function upsert(change) {
+      var _a, _b, _c;
+      var k = "".concat(change.sheetId, ":").concat((_b = (_a = change.path) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "", ":").concat((_c = change.key) !== null && _c !== void 0 ? _c : "");
+      changeMap.set(k, change);
+    };
+    var upsertCell = function upsertCell(sheetId, r, c) {
+      var _a, _b, _c;
+      var cell = (_c = (_b = (_a = getFlowdata(ctxAfter, sheetId)) === null || _a === void 0 ? void 0 : _a[r]) === null || _b === void 0 ? void 0 : _b[c]) !== null && _c !== void 0 ? _c : null;
+      var key = "".concat(r, "_").concat(c);
+      upsert({
+        sheetId: sheetId,
+        path: ["celldata"],
+        key: key,
+        value: {
+          r: r,
+          c: c,
+          v: cell
+        },
+        type: cell == null ? "delete" : "update"
+      });
+    };
+    patches.forEach(function (p) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+      var path = p.path;
+      if ((path === null || path === void 0 ? void 0 : path[0]) !== "luckysheetfile") return;
+      var sheetIndex = path[1];
+      if (!_.isNumber(sheetIndex)) return;
+      var sheetBefore = (_a = ctxBefore.luckysheetfile) === null || _a === void 0 ? void 0 : _a[sheetIndex];
+      var sheetAfter = (_b = ctxAfter.luckysheetfile) === null || _b === void 0 ? void 0 : _b[sheetIndex];
+      var sheetId = (sheetAfter === null || sheetAfter === void 0 ? void 0 : sheetAfter.id) || (sheetBefore === null || sheetBefore === void 0 ? void 0 : sheetBefore.id);
+      if (!sheetId) return;
+      var root = path[2];
+      if (root === "data") {
+        if (_.isNumber(path[3]) && _.isNumber(path[4])) {
+          upsertCell(sheetId, path[3], path[4]);
+          return;
+        }
+        if (_.isNumber(path[3]) && path.length === 4) {
+          var r = path[3];
+          var beforeRow = (_d = (_c = sheetBefore === null || sheetBefore === void 0 ? void 0 : sheetBefore.data) === null || _c === void 0 ? void 0 : _c[r]) !== null && _d !== void 0 ? _d : [];
+          var afterRow = (_f = (_e = sheetAfter === null || sheetAfter === void 0 ? void 0 : sheetAfter.data) === null || _e === void 0 ? void 0 : _e[r]) !== null && _f !== void 0 ? _f : [];
+          var max = Math.max((_g = beforeRow.length) !== null && _g !== void 0 ? _g : 0, (_h = afterRow.length) !== null && _h !== void 0 ? _h : 0);
+          for (var c = 0; c < max; c += 1) {
+            if (!_.isEqual((_j = beforeRow[c]) !== null && _j !== void 0 ? _j : null, (_k = afterRow[c]) !== null && _k !== void 0 ? _k : null)) {
+              upsertCell(sheetId, r, c);
+            }
+          }
+          return;
+        }
+        if (path.length === 3) {
+          var dataAfter = sheetAfter === null || sheetAfter === void 0 ? void 0 : sheetAfter.data;
+          var rows = (_l = dataAfter === null || dataAfter === void 0 ? void 0 : dataAfter.length) !== null && _l !== void 0 ? _l : 0;
+          var cols = rows > 0 ? (_o = (_m = dataAfter === null || dataAfter === void 0 ? void 0 : dataAfter[0]) === null || _m === void 0 ? void 0 : _m.length) !== null && _o !== void 0 ? _o : 0 : 0;
+          var size = rows * cols;
+          if (size > 50000 && updateAllCell) {
+            updateAllCell(sheetId);
+            return;
+          }
+          for (var r = 0; r < rows; r += 1) {
+            var beforeRow = (_q = (_p = sheetBefore === null || sheetBefore === void 0 ? void 0 : sheetBefore.data) === null || _p === void 0 ? void 0 : _p[r]) !== null && _q !== void 0 ? _q : [];
+            var afterRow = (_s = (_r = sheetAfter === null || sheetAfter === void 0 ? void 0 : sheetAfter.data) === null || _r === void 0 ? void 0 : _r[r]) !== null && _s !== void 0 ? _s : [];
+            var max = Math.max((_t = beforeRow.length) !== null && _t !== void 0 ? _t : 0, (_u = afterRow.length) !== null && _u !== void 0 ? _u : 0);
+            for (var c = 0; c < max; c += 1) {
+              if (!_.isEqual((_v = beforeRow[c]) !== null && _v !== void 0 ? _v : null, (_w = afterRow[c]) !== null && _w !== void 0 ? _w : null)) {
+                upsertCell(sheetId, r, c);
+              }
+            }
+          }
+        }
+        return;
+      }
+      if (typeof root === "string" && mapFields.has(root)) {
+        var key = path[3];
+        if (typeof key === "string") {
+          upsert({
+            sheetId: sheetId,
+            path: [root],
+            key: key,
+            value: p.value,
+            type: p.op === "remove" || p.value == null ? "delete" : "update"
+          });
+        }
+      }
+    });
+    var changes = Array.from(changeMap.values());
+    if (changes.length > 0) updateCellYdoc(changes);
+  }, []);
   function reduceUndoList(ctx, ctxBefore) {
     var sheetsId = ctx.luckysheetfile.map(function (sheet) {
       return sheet.id;
@@ -299,6 +400,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           delete inversedOptions.addSheet.value.data;
         }
         emitOp(newContext, history.inversePatches, inversedOptions, true);
+        emitYjsFromPatches(ctx_, newContext, history.inversePatches);
         var sheetIdxAfterUndo = getSheetIndex(newContext, newContext.currentSheetId);
         var nw = __assign(__assign({}, newContext), sheetIdxAfterUndo != null && ((_f = newContext.luckysheetfile[sheetIdxAfterUndo]) === null || _f === void 0 ? void 0 : _f.config) != null ? {
           config: newContext.luckysheetfile[sheetIdxAfterUndo].config
@@ -327,6 +429,7 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         });
         globalCache.current.undoList.push(history);
         emitOp(newContext, history.patches, history.options);
+        emitYjsFromPatches(ctx_, newContext, history.patches);
         var sheetIdxAfterRedo = getSheetIndex(newContext, newContext.currentSheetId);
         var nw = __assign(__assign({}, newContext), sheetIdxAfterRedo != null && ((_a = newContext.luckysheetfile[sheetIdxAfterRedo]) === null || _a === void 0 ? void 0 : _a.config) != null ? {
           config: newContext.luckysheetfile[sheetIdxAfterRedo].config
@@ -353,18 +456,13 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   useEffect(function () {
     var _a, _b;
     setContext(function (ctx) {
-      var _a, _b;
       var gridData = getFlowdata(ctx);
       var cellData = api.dataToCelldata(gridData);
-      var denominatedUsed = false;
-      for (var _i = 0, cellData_1 = cellData; _i < cellData_1.length; _i++) {
-        var cell = cellData_1[_i];
+      var denominatedUsed = (cellData !== null && cellData !== void 0 ? cellData : []).some(function (cell) {
+        var _a, _b;
         var value = (_b = (_a = cell === null || cell === void 0 ? void 0 : cell.v) === null || _a === void 0 ? void 0 : _a.m) === null || _b === void 0 ? void 0 : _b.toString();
-        if ((value === null || value === void 0 ? void 0 : value.includes("BTC")) || (value === null || value === void 0 ? void 0 : value.includes("ETH")) || (value === null || value === void 0 ? void 0 : value.includes("SOL"))) {
-          denominatedUsed = true;
-          break;
-        }
-      }
+        return (value === null || value === void 0 ? void 0 : value.includes("BTC")) || (value === null || value === void 0 ? void 0 : value.includes("ETH")) || (value === null || value === void 0 ? void 0 : value.includes("SOL"));
+      });
       var denoWarn = document.getElementById("denomination-warning");
       var scrollBar = document.getElementsByClassName("luckysheet-scrollbar-x")[0];
       if (denominatedUsed && denoWarn) {
@@ -438,6 +536,32 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       context.hooks.afterOrderChanges();
     }
   }, [currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.order]);
+  var sheetColorSig = useMemo(function () {
+    var _a;
+    return ((_a = context === null || context === void 0 ? void 0 : context.luckysheetfile) !== null && _a !== void 0 ? _a : []).map(function (s) {
+      var _a;
+      return "".concat(s.id, ":").concat((_a = s.color) !== null && _a !== void 0 ? _a : "");
+    }).join("|");
+  }, [context === null || context === void 0 ? void 0 : context.luckysheetfile]);
+  useEffect(function () {
+    var _a;
+    if ((_a = context === null || context === void 0 ? void 0 : context.hooks) === null || _a === void 0 ? void 0 : _a.afterColorChanges) {
+      context.hooks.afterColorChanges();
+    }
+  }, [sheetColorSig]);
+  var sheetHideSig = useMemo(function () {
+    var _a;
+    return ((_a = context === null || context === void 0 ? void 0 : context.luckysheetfile) !== null && _a !== void 0 ? _a : []).map(function (s) {
+      var _a;
+      return "".concat(s.id, ":").concat((_a = s.hide) !== null && _a !== void 0 ? _a : 0);
+    }).join("|");
+  }, [context === null || context === void 0 ? void 0 : context.luckysheetfile]);
+  useEffect(function () {
+    var _a;
+    if ((_a = context === null || context === void 0 ? void 0 : context.hooks) === null || _a === void 0 ? void 0 : _a.afterHideChanges) {
+      context.hooks.afterHideChanges();
+    }
+  }, [sheetHideSig]);
   useEffect(function () {
     var _a;
     if ((_a = context === null || context === void 0 ? void 0 : context.hooks) === null || _a === void 0 ? void 0 : _a.afterConfigChanges) {
@@ -504,6 +628,18 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       context.hooks.conditionFormatChange();
     }
   }, [currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.luckysheet_conditionformat_save]);
+  useEffect(function () {
+    var _a;
+    if ((_a = context === null || context === void 0 ? void 0 : context.hooks) === null || _a === void 0 ? void 0 : _a.filterSelectChange) {
+      context.hooks.filterSelectChange();
+    }
+  }, [currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.filter_select]);
+  useEffect(function () {
+    var _a;
+    if ((_a = context === null || context === void 0 ? void 0 : context.hooks) === null || _a === void 0 ? void 0 : _a.filterChange) {
+      context.hooks.filterChange();
+    }
+  }, [currentSheet === null || currentSheet === void 0 ? void 0 : currentSheet.filter]);
   useEffect(function () {
     var _a;
     if ((_a = context === null || context === void 0 ? void 0 : context.hooks) === null || _a === void 0 ? void 0 : _a.hyperlinkChange) {

package/es/utils/convertCellsToCrypto.js

@@ -274,9 +274,12 @@ export function convertCellsToCrypto(_a) {
         });
       });
       setContext(function (ctx) {
+        var _a;
         var d = getFlowdata(ctx);
         if (!d || !Array.isArray(d)) return;
+        var ydocChanges = [];
         cellUpdates.forEach(function (_a) {
+          var _b, _c;
           var row = _a.row,
             col = _a.col,
             baseValue = _a.baseValue,
@@ -296,7 +299,21 @@ export function convertCellsToCrypto(_a) {
           cellCp.baseCurrency = baseCurrency.toLowerCase();
           cellCp.baseCurrencyPrice = baseCurrencyPrice;
           d[row][col] = cellCp;
+          ydocChanges.push({
+            sheetId: ctx.currentSheetId,
+            path: ["celldata"],
+            value: {
+              r: row,
+              c: col,
+              v: (_c = (_b = d[row]) === null || _b === void 0 ? void 0 : _b[col]) !== null && _c !== void 0 ? _c : null
+            },
+            key: "".concat(row, "_").concat(col),
+            type: "update"
+          });
         });
+        if (ydocChanges.length > 0 && ((_a = ctx === null || ctx === void 0 ? void 0 : ctx.hooks) === null || _a === void 0 ? void 0 : _a.updateCellYdoc)) {
+          ctx.hooks.updateCellYdoc(ydocChanges);
+        }
       });
       setContext(function (ctx) {
         api.calculateSheetFromula(ctx, ctx.currentSheetId);

package/lib/components/ConditionFormat/ConditionRules.js

@@ -303,6 +303,10 @@ var ConditionRules = function ConditionRules(_a) {
     text: "textContains",
     value: "()",
     label: "Text Contains"
+  }, {
+    text: "empty",
+    value: "",
+    label: "Empty"
   }, {
     text: "occurrenceDate",
     value: conditionformat.yesterday,
@@ -343,7 +347,7 @@ var ConditionRules = function ConditionRules(_a) {
       marginBottom: "16px"
     }
   }, matchedConditionFormatKey.map(function (key) {
-    var _a, _b;
+    var _a, _b, _c;
     return /*#__PURE__*/_react.default.createElement("div", {
       onClick: function onClick() {
         var _a;
@@ -394,10 +398,10 @@ var ConditionRules = function ConditionRules(_a) {
     }, /*#__PURE__*/_react.default.createElement("h3", {
       className: "fortune-condition-rules__heading condition-list-type",
       "data-testid": "condition-rules-heading-".concat(key)
-    }, conditionformat[allConditionFormats[key].conditionName], " ", (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/_react.default.createElement("p", {
+    }, conditionformat[allConditionFormats[key].conditionName], allConditionFormats[key].conditionName !== "empty" && " ".concat((_b = (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "")), /*#__PURE__*/_react.default.createElement("p", {
       className: "fortune-condition-rules__para condition-list-range",
       "data-testid": "condition-rules-para-".concat(key)
-    }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
+    }, (_c = allConditionFormats[key].cellrange) === null || _c === void 0 ? void 0 : _c.map(function (range) {
       var startCol = (0, _helper.numberToColumn)(range.column[0] + 1);
       var endCol = (0, _helper.numberToColumn)(range.column[1] + 1);
       var startRow = range.row[0] + 1;
@@ -476,6 +480,12 @@ var ConditionRules = function ConditionRules(_a) {
   }, "Format cells if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
     value: type,
     onValueChange: function onValueChange(value) {
+      if (value === "empty" || type === "empty") {
+        setContext(function (ctx) {
+          ctx.conditionRules.rulesValue = "";
+        });
+        setEditConditionFormatValue(null);
+      }
       setType(value);
     }
   }, /*#__PURE__*/_react.default.createElement(_ui.SelectTrigger, null, /*#__PURE__*/_react.default.createElement(_ui.SelectValue, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -813,7 +823,7 @@ var ConditionRules = function ConditionRules(_a) {
     },
     tabIndex: 0
   }, button.cancel), editConditionFormatKey !== null ? (/*#__PURE__*/_react.default.createElement(_ui.Button, {
-    disabled: context.conditionRules.rulesValue === "",
+    disabled: context.conditionRules.rulesValue === "" && type !== "empty",
     variant: "default",
     style: {
       minWidth: "80px"
@@ -823,7 +833,7 @@ var ConditionRules = function ConditionRules(_a) {
     },
     tabIndex: 0
   }, "Update rule")) : (/*#__PURE__*/_react.default.createElement(_ui.Button, {
-    disabled: context.conditionRules.rulesValue === "",
+    disabled: context.conditionRules.rulesValue === "" && type !== "empty",
     variant: "default",
     style: {
       minWidth: "80px"

package/lib/components/ConditionFormat/index.js

@@ -116,6 +116,9 @@ var ConditionalFormat = function ConditionalFormat(_a) {
       }, {
         text: "textContains",
         value: "()"
+      }, {
+        text: "empty",
+        value: ""
       }, {
         text: "occurrenceDate",
         value: conditionformat.yesterday

package/lib/components/DataVerification/ColorPicker.js

@@ -14,7 +14,7 @@ var TEXT_COLORS = exports.TEXT_COLORS = [{
   value: "228, 232, 237"
 }, {
   name: "White",
-  value: "249, 249, 249"
+  value: "219, 233, 236"
 }, {
   name: "Pink",
   value: "244, 217, 227"

package/lib/components/SheetOverlay/InputBox.js

@@ -29,47 +29,47 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 var InputBox = function InputBox() {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-  var _m = (0, _react.useContext)(_context.default),
-    context = _m.context,
-    setContext = _m.setContext,
-    refs = _m.refs;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var _p = (0, _react.useContext)(_context.default),
+    context = _p.context,
+    setContext = _p.setContext,
+    refs = _p.refs;
   var inputRef = (0, _react.useRef)(null);
   var lastKeyDownEventRef = (0, _react.useRef)(null);
   var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
   var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
-  var _o = (0, _react.useState)(false),
-    isHidenRC = _o[0],
-    setIsHidenRC = _o[1];
-  var _p = (0, _react.useState)(false),
-    isInputBoxActive = _p[0],
-    setIsInputBoxActive = _p[1];
-  var _q = (0, _react.useState)(""),
-    activeCell = _q[0],
-    setActiveCell = _q[1];
-  var _r = (0, _react.useState)(""),
-    activeRefCell = _r[0],
-    setActiveRefCell = _r[1];
-  var _s = (0, _react.useState)({
+  var _q = (0, _react.useState)(false),
+    isHidenRC = _q[0],
+    setIsHidenRC = _q[1];
+  var _r = (0, _react.useState)(false),
+    isInputBoxActive = _r[0],
+    setIsInputBoxActive = _r[1];
+  var _s = (0, _react.useState)(""),
+    activeCell = _s[0],
+    setActiveCell = _s[1];
+  var _t = (0, _react.useState)(""),
+    activeRefCell = _t[0],
+    setActiveRefCell = _t[1];
+  var _u = (0, _react.useState)({
       left: 0,
       top: 0
     }),
-    frozenPosition = _s[0],
-    setFrozenPosition = _s[1];
+    frozenPosition = _u[0],
+    setFrozenPosition = _u[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
-  var _t = (0, _react.useState)({}),
-    firstSelectionActiveCell = _t[0],
-    setFirstSelectionActiveCell = _t[1];
-  var _u = (0, _react.useState)(0),
-    commaCount = _u[0],
-    setCommaCount = _u[1];
+  var _v = (0, _react.useState)({}),
+    firstSelectionActiveCell = _v[0],
+    setFirstSelectionActiveCell = _v[1];
+  var _w = (0, _react.useState)(0),
+    commaCount = _w[0],
+    setCommaCount = _w[1];
   var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
-  var _v = (0, _react.useState)(!hideFormulaHintLocal),
-    showFormulaHint = _v[0],
-    setShowFormulaHint = _v[1];
-  var _w = (0, _react.useState)(false),
-    showSearchHint = _w[0],
-    setShowSearchHint = _w[1];
+  var _x = (0, _react.useState)(!hideFormulaHintLocal),
+    showFormulaHint = _x[0],
+    setShowFormulaHint = _x[1];
+  var _y = (0, _react.useState)(false),
+    showSearchHint = _y[0],
+    setShowSearchHint = _y[1];
   var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
   var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
   var preText = (0, _react.useRef)("");
@@ -77,9 +77,9 @@ var InputBox = function InputBox() {
   var isComposingRef = (0, _react.useRef)(false);
   var ZWSP = "\u200B";
   var inputBoxInnerRef = (0, _react.useRef)(null);
-  var _x = (0, _react.useState)([]),
-    linkSelectionHighlightRects = _x[0],
-    setLinkSelectionHighlightRects = _x[1];
+  var _z = (0, _react.useState)([]),
+    linkSelectionHighlightRects = _z[0],
+    setLinkSelectionHighlightRects = _z[1];
   var ensureNotEmpty = function ensureNotEmpty() {
     var el = inputRef.current;
     if (!el) return;
@@ -115,7 +115,7 @@ var InputBox = function InputBox() {
       return style;
     }
     return {};
-  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, (_b = context === null || context === void 0 ? void 0 : context.luckysheetCellUpdate) === null || _b === void 0 ? void 0 : _b.length, firstSelectionActiveCell]);
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, (_b = context === null || context === void 0 ? void 0 : context.luckysheetCellUpdate) === null || _b === void 0 ? void 0 : _b.length, firstSelectionActiveCell, (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.innerText]);
   (0, _react.useLayoutEffect)(function () {
     var _a;
     if (!context.allowEdit) {
@@ -138,6 +138,8 @@ var InputBox = function InputBox() {
       var flowdata = (0, _fortuneCore.getFlowdata)(context);
       var cell = (_a = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row_index]) === null || _a === void 0 ? void 0 : _a[col_index];
       var value_1 = "";
+      var wasOverwrite = refs.globalCache.overwriteCell;
+      var overwriteFirstChar = refs.globalCache.overwriteCellFirstChar;
       if (cell && !refs.globalCache.overwriteCell) {
         if ((0, _fortuneCore.isInlineStringCell)(cell)) {
           value_1 = (0, _fortuneCore.getInlineStringHTML)(row_index, col_index, flowdata);
@@ -154,9 +156,15 @@ var InputBox = function InputBox() {
         }
       }
       refs.globalCache.overwriteCell = false;
-      if (!refs.globalCache.ignoreWriteCell && inputRef.current && value_1) {
+      delete refs.globalCache.overwriteCellFirstChar;
+      if (wasOverwrite && inputRef.current) {
+        inputRef.current.innerText = overwriteFirstChar !== null && overwriteFirstChar !== void 0 ? overwriteFirstChar : "";
+        if (overwriteFirstChar) {
+          (0, _fortuneCore.moveToEnd)(inputRef.current);
+        }
+      } else if (!refs.globalCache.ignoreWriteCell && inputRef.current && value_1) {
         inputRef.current.innerHTML = (0, _fortuneCore.escapeHTMLTag)((0, _fortuneCore.escapeScriptTag)(value_1));
-      } else if (!refs.globalCache.ignoreWriteCell && inputRef.current && !value_1) {
+      } else if (!refs.globalCache.ignoreWriteCell && inputRef.current && !value_1 && !wasOverwrite) {
         var valueD = (0, _fortuneCore.getCellValue)(row_index, col_index, flowdata, "f");
         inputRef.current.innerText = valueD;
       }
@@ -184,7 +192,7 @@ var InputBox = function InputBox() {
     if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) || _lodash.default.isEmpty(context.luckysheetCellUpdate)) {
       setIsInputBoxActive(false);
     }
-  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate]);
+  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate]);
   var getActiveFormula = (0, _react.useCallback)(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
@@ -279,6 +287,54 @@ var InputBox = function InputBox() {
     event.stopPropagation();
     event.preventDefault();
   };
+  (0, _react.useEffect)(function () {
+    var _a, _b;
+    var selection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+    var editor = inputRef.current;
+    if (!selection || !editor || !isInputBoxActive || ((_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show)) {
+      return;
+    }
+    var rowSel = selection.row;
+    var colSel = selection.column;
+    if (!rowSel || !colSel || rowSel.length < 2 || colSel.length < 2) return;
+    var rowStart = Math.min(rowSel[0], rowSel[1]);
+    var rowEnd = Math.max(rowSel[0], rowSel[1]);
+    var colStart = Math.min(colSel[0], colSel[1]);
+    var colEnd = Math.max(colSel[0], colSel[1]);
+    var startRef = "".concat((0, _fortuneCore.indexToColumnChar)(colStart)).concat(rowStart + 1);
+    var endRef = "".concat((0, _fortuneCore.indexToColumnChar)(colEnd)).concat(rowEnd + 1);
+    var refText = startRef === endRef ? startRef : "".concat(startRef, ":").concat(endRef);
+    var editorText = editor.innerText || "";
+    if (!editorText.startsWith("=")) return;
+    var spans = editor.querySelectorAll("span");
+    var lastSpan = spans[spans.length - 1];
+    var lastSpanText = (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) || "";
+    var isA1RangePattern = /^[a-zA-Z]+\d+:[a-zA-Z]+\d+$/.test(lastSpanText);
+    var notFunctionInit = !editorText.includes("(");
+    var refNotAllowed = lastSpanText.includes(")") || notFunctionInit && /^[a-zA-Z]+$/.test(lastSpanText) && !_lodash.default.includes(["="], lastSpanText);
+    var shouldHandleRef = (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.classList.contains("fortune-formula-functionrange-cell")) || (0, _helper.isLetterNumberPattern)(lastSpanText) || isA1RangePattern || (lastSpanText === "(" || lastSpanText === "," || lastSpanText.includes(":") || lastSpanText === "=") && !lastSpanText.includes('"') && !refNotAllowed && !/^[a-zA-Z]+$/.test(lastSpanText);
+    if (!shouldHandleRef) return;
+    var refSpanHtml = "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">".concat(refText, "</span>");
+    if (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.classList.contains("fortune-formula-functionrange-cell")) {
+      if (lastSpan.textContent !== refText) lastSpan.textContent = refText;
+      setTimeout(function () {
+        return (0, _helper.moveCursorToEnd)(editor);
+      }, 1);
+      return;
+    }
+    if ((0, _helper.isLetterNumberPattern)(lastSpanText) || isA1RangePattern) {
+      var htmlR = (0, _helper.removeLastSpan)(editor.innerHTML);
+      editor.innerHTML = "".concat(htmlR).concat(refSpanHtml);
+      setTimeout(function () {
+        return (0, _helper.moveCursorToEnd)(editor);
+      }, 1);
+      return;
+    }
+    editor.innerHTML = "".concat(editor.innerHTML).concat(refSpanHtml);
+    setTimeout(function () {
+      return (0, _helper.moveCursorToEnd)(editor);
+    }, 1);
+  }, [context.luckysheet_select_save, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show, isInputBoxActive]);
   var onKeyDown = (0, _react.useCallback)(function (e) {
     var _a, _b;
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
@@ -311,37 +367,18 @@ var InputBox = function InputBox() {
         }, 5);
       }
     }
-    var refCell = placeRef.current;
-    if (e.key === "ArrowUp") {
-      refCell = (0, _helper.decrementRow)(placeRef.current);
-    } else if (e.key === "ArrowDown") {
-      refCell = (0, _helper.incrementRow)(placeRef.current);
-    } else if (e.key === "ArrowLeft") {
-      refCell = (0, _helper.decrementColumn)(placeRef.current);
-    } else if (e.key === "ArrowRight") {
-      refCell = (0, _helper.incrementColumn)(placeRef.current);
-    }
-    if ((e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight") && !((0, _helper.getCursorPosition)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length) && e.key === "ArrowRight")) {
-      var parser = new DOMParser();
-      var doc = parser.parseFromString("<div>".concat((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML, "</div>"), "text/html");
-      var spans = doc.querySelectorAll("span");
-      var lastSpan = spans[spans.length - 1];
-      var notFunctionInit = !((_b = document.getElementById("luckysheet-rich-text-editor")) === null || _b === void 0 ? void 0 : _b.innerText.includes("("));
-      var arrowRefNotAllowed = (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes(")")) || notFunctionInit && /^[a-zA-Z]+$/.test(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) && !_lodash.default.includes(["="], lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText);
-      if (((lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) === "(" || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) === "," || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes(":")) || (lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) !== ")") && !(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText.includes('"')) && !(0, _helper.isLetterNumberPattern)(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) && !arrowRefNotAllowed && !/^[a-zA-Z]+$/.test(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText)) {
-        allowListNavigation = false;
-        inputRef.current.innerHTML = "".concat(inputRef.current.innerHTML, "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">").concat(refCell, "</span>");
-        setTimeout(function () {
-          (0, _helper.moveCursorToEnd)(inputRef.current);
-        }, 1);
-      }
-      if ((0, _helper.isLetterNumberPattern)(lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText)) {
+    var isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight";
+    if (isArrowKey && !((0, _helper.getCursorPosition)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length) && e.key === "ArrowRight")) {
+      var editorText = ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) || "";
+      var lastSpanText = getLastInputSpanText() || "";
+      var isA1RangePattern = /^[a-zA-Z]+\d+:[a-zA-Z]+\d+$/.test(lastSpanText);
+      var notFunctionInit = !editorText.includes("(");
+      var refNotAllowed = lastSpanText.includes(")") || notFunctionInit && /^[a-zA-Z]+$/.test(lastSpanText) && !_lodash.default.includes(["="], lastSpanText);
+      var shouldTreatAsRefNavigation = editorText.startsWith("=") && (Boolean((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.querySelector(".fortune-formula-functionrange-cell")) || (0, _helper.isLetterNumberPattern)(lastSpanText) || isA1RangePattern || (lastSpanText === "(" || lastSpanText === "," || lastSpanText.includes(":") || lastSpanText === "=") && !lastSpanText.includes('"') && !refNotAllowed && !/^[a-zA-Z]+$/.test(lastSpanText));
+      if (shouldTreatAsRefNavigation) {
         allowListNavigation = false;
-        var htmlR = (0, _helper.removeLastSpan)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerHTML);
-        inputRef.current.innerHTML = "".concat(htmlR, "<span class=\"fortune-formula-functionrange-cell\" rangeindex=\"0\" dir=\"auto\" style=\"color:#c1232b;\">").concat(refCell, "</span>");
-        (0, _helper.moveCursorToEnd)(inputRef.current);
         setTimeout(function () {
-          (0, _helper.moveCursorToEnd)(inputRef.current);
+          if (inputRef.current) (0, _helper.moveCursorToEnd)(inputRef.current);
         }, 1);
       }
     }
@@ -399,7 +436,7 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     }
-  }, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext, firstSelection]);
+  }, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext]);
   var handleHideShowHint = function handleHideShowHint() {
     var _a, _b, _c, _d;
     var searchElFx = (_a = document.getElementsByClassName("fx-search")) === null || _a === void 0 ? void 0 : _a[0];
@@ -489,7 +526,7 @@ var InputBox = function InputBox() {
       zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
       display: "block"
     };
-  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
+  }, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
   (0, _react.useEffect)(function () {
     var _a;
     if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
@@ -505,7 +542,7 @@ var InputBox = function InputBox() {
         setIsInputBoxActive(true);
       }
     }
-  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
+  }, [firstSelection, (_g = context.rangeDialog) === null || _g === void 0 ? void 0 : _g.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
   var getAddressIndicatorPosition = (0, _react.useCallback)(function () {
     var _a;
     if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
@@ -518,7 +555,7 @@ var InputBox = function InputBox() {
       left: "0",
       display: "block"
     };
-  }, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show]);
+  }, [firstSelection, (_h = context.rangeDialog) === null || _h === void 0 ? void 0 : _h.show]);
   var getCellAddress = (0, _react.useCallback)(function () {
     if (!firstSelection) return "";
     var rowIndex = firstSelection.row_focus || 0;
@@ -568,7 +605,7 @@ var InputBox = function InputBox() {
       };
     });
     setLinkSelectionHighlightRects(relative);
-  }, [(_g = context.linkCard) === null || _g === void 0 ? void 0 : _g.applyToSelection, (_h = context.linkCard) === null || _h === void 0 ? void 0 : _h.selectionOffsets, (_j = context.linkCard) === null || _j === void 0 ? void 0 : _j.r, (_k = context.linkCard) === null || _k === void 0 ? void 0 : _k.c, context.luckysheetCellUpdate]);
+  }, [(_j = context.linkCard) === null || _j === void 0 ? void 0 : _j.applyToSelection, (_k = context.linkCard) === null || _k === void 0 ? void 0 : _k.selectionOffsets, (_l = context.linkCard) === null || _l === void 0 ? void 0 : _l.r, (_m = context.linkCard) === null || _m === void 0 ? void 0 : _m.c, context.luckysheetCellUpdate]);
   var wraperGetCell = function wraperGetCell() {
     var cell = getCellAddress();
     placeRef.current = cell;
@@ -605,7 +642,7 @@ var InputBox = function InputBox() {
     onMouseUp: function onMouseUp(e) {
       return e.stopPropagation();
     }
-  }, firstSelection && !((_l = context.rangeDialog) === null || _l === void 0 ? void 0 : _l.show) && (/*#__PURE__*/_react.default.createElement("div", {
+  }, firstSelection && !((_o = context.rangeDialog) === null || _o === void 0 ? void 0 : _o.show) && (/*#__PURE__*/_react.default.createElement("div", {
     className: "luckysheet-cell-address-indicator",
     style: getAddressIndicatorPosition()
   }, wraperGetCell())), /*#__PURE__*/_react.default.createElement("div", {