@fileverse-dev/fortune-react 1.3.10 → 1.3.11-input-ref-1

package/lib/components/SheetOverlay/InputBox.js

@@ -14,6 +14,8 @@ var _ContentEditable = _interopRequireDefault(require("./ContentEditable"));
 var _FormulaSearch = _interopRequireDefault(require("./FormulaSearch"));
 var _FormulaHint = _interopRequireDefault(require("./FormulaHint"));
 var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
+var _useFormulaEditorHistory = require("../../hooks/useFormulaEditorHistory");
+var _useRerenderOnFormulaCaret = require("../../hooks/useRerenderOnFormulaCaret");
 var _helper = require("./helper");
 var _LucideIcon = require("./LucideIcon");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,57 +31,65 @@ 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, _p;
+  var _q = (0, _react.useContext)(_context.default),
+    context = _q.context,
+    setContext = _q.setContext,
+    refs = _q.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 _r = (0, _react.useState)(false),
+    isHidenRC = _r[0],
+    setIsHidenRC = _r[1];
+  var _s = (0, _react.useState)(false),
+    isInputBoxActive = _s[0],
+    setIsInputBoxActive = _s[1];
+  var _t = (0, _react.useState)(""),
+    activeCell = _t[0],
+    setActiveCell = _t[1];
+  var _u = (0, _react.useState)(""),
+    activeRefCell = _u[0],
+    setActiveRefCell = _u[1];
+  var _v = (0, _react.useState)({
       left: 0,
       top: 0
     }),
-    frozenPosition = _s[0],
-    setFrozenPosition = _s[1];
+    frozenPosition = _v[0],
+    setFrozenPosition = _v[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 _w = (0, _react.useState)({}),
+    firstSelectionActiveCell = _w[0],
+    setFirstSelectionActiveCell = _w[1];
+  var _x = (0, _react.useState)(0),
+    commaCount = _x[0],
+    setCommaCount = _x[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 _y = (0, _react.useState)(!hideFormulaHintLocal),
+    showFormulaHint = _y[0],
+    setShowFormulaHint = _y[1];
+  var _z = (0, _react.useState)(false),
+    showSearchHint = _z[0],
+    setShowSearchHint = _z[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)("");
-  var placeRef = (0, _react.useRef)("");
   var isComposingRef = (0, _react.useRef)(false);
+  var formulaAnchorCellRef = (0, _react.useRef)(null);
+  var skipNextAnchorSelectionSyncRef = (0, _react.useRef)(false);
+  var lastHandledMouseDragSignatureRef = (0, _react.useRef)("");
+  var _0 = (0, _useFormulaEditorHistory.useFormulaEditorHistory)(inputRef, refs.cellInput, refs.fxInput, setContext, "cell"),
+    formulaHistoryRef = _0.formulaHistoryRef,
+    preTextRef = _0.preTextRef,
+    resetFormulaHistory = _0.resetFormulaHistory,
+    handleFormulaHistoryUndoRedo = _0.handleFormulaHistoryUndoRedo,
+    capturePreFormulaState = _0.capturePreFormulaState,
+    appendFormulaHistoryFromPrimaryEditor = _0.appendFormulaHistoryFromPrimaryEditor;
   var ZWSP = "\u200B";
   var inputBoxInnerRef = (0, _react.useRef)(null);
-  var _x = (0, _react.useState)([]),
-    linkSelectionHighlightRects = _x[0],
-    setLinkSelectionHighlightRects = _x[1];
+  var _1 = (0, _react.useState)([]),
+    linkSelectionHighlightRects = _1[0],
+    setLinkSelectionHighlightRects = _1[1];
   var ensureNotEmpty = function ensureNotEmpty() {
     var el = inputRef.current;
     if (!el) return;
@@ -174,8 +184,37 @@ var InputBox = function InputBox() {
       if (inputRef.current) {
         inputRef.current.innerHTML = "";
       }
+      resetFormulaHistory();
     }
-  }, [context.luckysheetCellUpdate]);
+  }, [context.luckysheetCellUpdate, resetFormulaHistory]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate) || !refs.cellInput.current) {
+      formulaAnchorCellRef.current = null;
+      lastHandledMouseDragSignatureRef.current = "";
+      return;
+    }
+    var inputText = ((_a = refs.cellInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+    if (!inputText.startsWith("=")) {
+      formulaAnchorCellRef.current = null;
+      lastHandledMouseDragSignatureRef.current = "";
+    }
+  }, [context.luckysheetCellUpdate, refs.cellInput]);
+  (0, _react.useEffect)(function () {
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate) || _lodash.default.isEmpty(prevCellUpdate) || _lodash.default.isEqual(prevCellUpdate, context.luckysheetCellUpdate)) {
+      return;
+    }
+    setContext(function (ctx) {
+      ctx.formulaRangeHighlight = [];
+      ctx.formulaRangeSelect = undefined;
+      ctx.formulaCache.selectingRangeIndex = -1;
+      ctx.formulaCache.func_selectedrange = undefined;
+      ctx.formulaCache.rangestart = false;
+      ctx.formulaCache.rangedrag_column_start = false;
+      ctx.formulaCache.rangedrag_row_start = false;
+      ctx.formulaCache.rangechangeindex = undefined;
+    });
+  }, [context.luckysheetCellUpdate, prevCellUpdate, setContext]);
   (0, _react.useEffect)(function () {
     setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
   }, [context.luckysheet_select_save]);
@@ -185,65 +224,45 @@ var InputBox = function InputBox() {
       setIsInputBoxActive(false);
     }
   }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate]);
+  (0, _react.useEffect)(function () {
+    if (isInputBoxActive) return;
+    setContext(function (ctx) {
+      if (_lodash.default.isEmpty(ctx.formulaRangeHighlight) && !ctx.formulaRangeSelect && ctx.formulaCache.selectingRangeIndex === -1 && !ctx.formulaCache.func_selectedrange) {
+        return;
+      }
+      ctx.formulaRangeHighlight = [];
+      ctx.formulaRangeSelect = undefined;
+      ctx.formulaCache.selectingRangeIndex = -1;
+      ctx.formulaCache.func_selectedrange = undefined;
+      ctx.formulaCache.rangestart = false;
+      ctx.formulaCache.rangedrag_column_start = false;
+      ctx.formulaCache.rangedrag_row_start = false;
+      ctx.formulaCache.rangechangeindex = undefined;
+      ctx.formulaCache.rangeSelectionActive = null;
+    });
+  }, [isInputBoxActive, setContext]);
   var getActiveFormula = (0, _react.useCallback)(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
   var insertSelectedFormula = (0, _react.useCallback)(function (formulaName) {
-    var _a;
-    if (/^=[a-zA-Z]+$/.test(inputRef.current.innerText)) {
-      var ht = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span><span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>");
-      inputRef.current.innerHTML = ht;
-      var fxEditor = document.getElementById("luckysheet-functionbox-cell");
-      if (fxEditor) {
-        fxEditor.innerHTML = ht;
-      }
-      (0, _helper.moveCursorToEnd)(inputRef.current);
-      setContext(function (draftCtx) {
-        draftCtx.functionCandidates = [];
-        draftCtx.defaultCandidates = [];
-        draftCtx.functionHint = formulaName;
-      });
-      return;
-    }
-    var textEditor = document.getElementById("luckysheet-rich-text-editor");
+    var textEditor = inputRef.current;
     if (!textEditor) return;
-    textEditor.focus();
-    var selection = window.getSelection();
-    var range = (selection === null || selection === void 0 ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
-    if (!selection || !range || !textEditor.contains(range.startContainer)) {
-      range = document.createRange();
-      range.selectNodeContents(textEditor);
-      range.collapse(false);
-      selection = window.getSelection();
-      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-    }
-    var searchTxt = ((_a = (0, _fortuneCore.getrangeseleciton)()) === null || _a === void 0 ? void 0 : _a.textContent) || "";
-    var deleteCount = searchTxt === "=" ? 0 : searchTxt.length;
-    if (deleteCount > 0 && range.startContainer.nodeType === Node.TEXT_NODE && textEditor.contains(range.startContainer)) {
-      var startOffset = Math.max(range.startOffset - deleteCount, 0);
-      var endOffset = range.startOffset;
-      range.setStart(range.startContainer, startOffset);
-      range.setEnd(range.startContainer, endOffset);
-      range.deleteContents();
-    }
-    textEditor.querySelectorAll(".luckysheet-formula-text-func, .luckysheet-formula-text-lpar").forEach(function (el) {
-      return el.remove();
-    });
-    var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
-    var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
-    if (range && parNode && funcNode) {
-      range.insertNode(funcNode);
-      range.collapse(false);
-      range.insertNode(parNode);
-      range.collapse(false);
-      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
-      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
-    }
+    var fxEditor = document.getElementById("luckysheet-functionbox-cell");
+    var _a = (0, _helper.buildFormulaSuggestionText)(textEditor, formulaName),
+      text = _a.text,
+      caretOffset = _a.caretOffset;
+    var safeText = (0, _fortuneCore.escapeScriptTag)(text);
+    var html = safeText.startsWith("=") ? (0, _fortuneCore.functionHTMLGenerate)(safeText) : (0, _fortuneCore.escapeHTMLTag)(safeText);
+    textEditor.innerHTML = html;
+    if (fxEditor) {
+      fxEditor.innerHTML = html;
+    }
+    (0, _helper.setCursorPosition)(textEditor, caretOffset);
+    setShowSearchHint((0, _helper.shouldShowFormulaFunctionList)(textEditor));
     setContext(function (draftCtx) {
       draftCtx.functionCandidates = [];
       draftCtx.defaultCandidates = [];
-      draftCtx.functionHint = formulaName;
+      draftCtx.functionHint = (formulaName || "").toUpperCase();
     });
   }, [setContext]);
   var clearSearchItemActiveClass = (0, _react.useCallback)(function () {
@@ -266,7 +285,7 @@ var InputBox = function InputBox() {
     var _a, _b;
     if (isComposingRef.current || !inputRef.current) return;
     if (e.target.className.includes("sign-fortune")) return;
-    preText.current = inputRef.current.innerText;
+    preTextRef.current = inputRef.current.innerText;
     var formulaName = (_b = (_a = getActiveFormula()) === null || _a === void 0 ? void 0 : _a.querySelector(".luckysheet-formula-search-func")) === null || _b === void 0 ? void 0 : _b.textContent;
     var lastSpanText = getLastInputSpanText();
     if (formulaName && !(0, _helper.isLetterNumberPattern)(lastSpanText)) {
@@ -279,11 +298,150 @@ var InputBox = function InputBox() {
     event.stopPropagation();
     event.preventDefault();
   };
+  (0, _react.useEffect)(function () {
+    var _a;
+    var cellInputEl = refs.cellInput.current;
+    if (!((_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) || !cellInputEl) return;
+    setContext(function (ctx) {
+      var _a;
+      var currentSelection = (_a = ctx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[ctx.luckysheet_select_save.length - 1];
+      if (!currentSelection) return;
+      if ((0, _fortuneCore.getFormulaEditorOwner)(ctx) === "fx") {
+        return;
+      }
+      (0, _fortuneCore.israngeseleciton)(ctx);
+      var keyboardSyncRangeIndex = (0, _fortuneCore.getFormulaRangeIndexForKeyboardSync)(cellInputEl);
+      if (skipNextAnchorSelectionSyncRef.current && formulaAnchorCellRef.current) {
+        var _b = formulaAnchorCellRef.current,
+          anchorRow = _b[0],
+          anchorCol = _b[1];
+        var isAnchorSelection = currentSelection.row_focus === anchorRow && currentSelection.column_focus === anchorCol;
+        if (isAnchorSelection) {
+          skipNextAnchorSelectionSyncRef.current = false;
+          return;
+        }
+      }
+      var isFormulaMode = (0, _fortuneCore.isFormulaReferenceInputMode)(ctx);
+      if (!isFormulaMode) return;
+      if (keyboardSyncRangeIndex !== null) {
+        ctx.formulaCache.rangechangeindex = keyboardSyncRangeIndex;
+        ctx.formulaCache.rangestart = true;
+        ctx.formulaCache.rangedrag_column_start = false;
+        ctx.formulaCache.rangedrag_row_start = false;
+      } else {
+        ctx.formulaCache.rangechangeindex = undefined;
+        ctx.formulaCache.rangestart = false;
+      }
+      ctx.formulaCache.rangeSelectionActive = true;
+      _fortuneCore.rangeSetValue === null || _fortuneCore.rangeSetValue === void 0 ? void 0 : (0, _fortuneCore.rangeSetValue)(ctx, cellInputEl, {
+        row: currentSelection.row,
+        column: currentSelection.column
+      }, refs.fxInput.current);
+      (0, _fortuneCore.rangeHightlightselected)(ctx, cellInputEl);
+      if (!_lodash.default.isNil(ctx.formulaCache.rangechangeindex)) {
+        ctx.formulaCache.selectingRangeIndex = ctx.formulaCache.rangechangeindex;
+        (0, _fortuneCore.createRangeHightlight)(ctx, cellInputEl.innerHTML, ctx.formulaCache.rangechangeindex);
+        var rectFromSelection = (0, _fortuneCore.seletedHighlistByindex)(ctx, currentSelection.row[0], currentSelection.row[1], currentSelection.column[0], currentSelection.column[1]);
+        if (rectFromSelection) {
+          (0, _fortuneCore.createFormulaRangeSelect)(ctx, {
+            rangeIndex: ctx.formulaCache.rangechangeindex || 0,
+            left: rectFromSelection.left,
+            top: rectFromSelection.top,
+            width: rectFromSelection.width,
+            height: rectFromSelection.height
+          });
+        }
+      }
+    });
+  }, [context.luckysheet_select_save, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show]);
+  var formulaMouseDragSignature = function () {
+    var _a, _b, _c, _d;
+    var r = context.formulaCache.func_selectedrange;
+    if (!r) return "";
+    return [(_a = r.row) === null || _a === void 0 ? void 0 : _a[0], (_b = r.row) === null || _b === void 0 ? void 0 : _b[1], (_c = r.column) === null || _c === void 0 ? void 0 : _c[0], (_d = r.column) === null || _d === void 0 ? void 0 : _d[1], r.left_move, r.top_move, r.width_move, r.height_move].join(":");
+  }();
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (!formulaMouseDragSignature) return;
+    if (lastHandledMouseDragSignatureRef.current === formulaMouseDragSignature) {
+      return;
+    }
+    if (!refs.cellInput.current) return;
+    var inputText = ((_a = refs.cellInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+    if (!inputText.startsWith("=")) return;
+    var dragRange = context.formulaCache.func_selectedrange;
+    if (!dragRange) return;
+    lastHandledMouseDragSignatureRef.current = formulaMouseDragSignature;
+    setContext(function (ctx) {
+      ctx.luckysheet_select_save = [{
+        row: [dragRange.row[0], dragRange.row[1]],
+        column: [dragRange.column[0], dragRange.column[1]],
+        row_focus: _lodash.default.isNil(dragRange.row_focus) ? dragRange.row[0] : dragRange.row_focus,
+        column_focus: _lodash.default.isNil(dragRange.column_focus) ? dragRange.column[0] : dragRange.column_focus
+      }];
+    });
+  }, [formulaMouseDragSignature, context.formulaCache.func_selectedrange, refs.cellInput, setContext]);
   var onKeyDown = (0, _react.useCallback)(function (e) {
     var _a, _b;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.setFormulaEditorOwner)(draftCtx, "cell");
+    });
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
-    preText.current = inputRef.current.innerText;
-    if (e.metaKey && context.luckysheetCellUpdate.length > 0) {
+    capturePreFormulaState();
+    var currentInputText = ((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+    if ((e.key === "=" || currentInputText.startsWith("=")) && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+      formulaAnchorCellRef.current = [context.luckysheetCellUpdate[0], context.luckysheetCellUpdate[1]];
+    }
+    if (e.key === "(" && currentInputText.startsWith("=")) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+    }
+    if (e.key === "," && context.luckysheetCellUpdate.length > 0 && currentInputText.startsWith("=") && formulaAnchorCellRef.current) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+      var _c = formulaAnchorCellRef.current,
+        anchorRow_1 = _c[0],
+        anchorCol_1 = _c[1];
+      skipNextAnchorSelectionSyncRef.current = true;
+      setTimeout(function () {
+        setContext(function (draftCtx) {
+          var _a, _b;
+          draftCtx.luckysheetCellUpdate = [anchorRow_1, anchorCol_1];
+          draftCtx.luckysheet_select_save = [{
+            row: [anchorRow_1, anchorRow_1],
+            column: [anchorCol_1, anchorCol_1],
+            row_focus: anchorRow_1,
+            column_focus: anchorCol_1
+          }];
+          draftCtx.formulaRangeSelect = undefined;
+          draftCtx.formulaCache.selectingRangeIndex = -1;
+          draftCtx.formulaCache.func_selectedrange = undefined;
+          draftCtx.formulaCache.rangechangeindex = undefined;
+          draftCtx.formulaCache.rangestart = false;
+          draftCtx.formulaCache.rangedrag_column_start = false;
+          draftCtx.formulaCache.rangedrag_row_start = false;
+          (0, _fortuneCore.createRangeHightlight)(draftCtx, ((_a = refs.cellInput.current) === null || _a === void 0 ? void 0 : _a.innerHTML) || ((_b = refs.fxInput.current) === null || _b === void 0 ? void 0 : _b.innerHTML) || "");
+          (0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 0, "rangeOfSelect");
+        });
+      }, 0);
+    }
+    if ((e.metaKey || e.ctrlKey) && context.luckysheetCellUpdate.length > 0) {
+      if (e.code === "KeyZ" || e.code === "KeyY") {
+        var shouldUseFormulaHistory = currentInputText.startsWith("=") || formulaHistoryRef.current.active;
+        if (shouldUseFormulaHistory) {
+          var handledByFormulaHistory = handleFormulaHistoryUndoRedo(e.code === "KeyY" || e.code === "KeyZ" && e.shiftKey);
+          if (handledByFormulaHistory) {
+            e.preventDefault();
+          }
+        }
+        e.stopPropagation();
+        return;
+      }
       if (e.code === "KeyB") {
         (0, _fortuneCore.handleBold)(context, inputRef.current);
         stopPropagation(e);
@@ -303,7 +461,25 @@ var InputBox = function InputBox() {
       setCommaCount(currentCommaCount);
     }
     var allowListNavigation = true;
+    var isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight";
     if (e.key === "Delete" || e.key === "Backspace") {
+      var anchor = formulaAnchorCellRef.current;
+      if (anchor != null) {
+        var anchorRow_2 = anchor[0],
+          anchorCol_2 = anchor[1];
+        skipNextAnchorSelectionSyncRef.current = true;
+        setTimeout(function () {
+          setContext(function (draftCtx) {
+            draftCtx.luckysheetCellUpdate = [anchorRow_2, anchorCol_2];
+            draftCtx.luckysheet_select_save = [{
+              row: [anchorRow_2, anchorRow_2],
+              column: [anchorCol_2, anchorCol_2],
+              row_focus: anchorRow_2,
+              column_focus: anchorCol_2
+            }];
+          });
+        }, 0);
+      }
       if (isComposingRef.current) requestAnimationFrame(ensureNotEmpty);
       if ((0, _helper.getCursorPosition)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
         setTimeout(function () {
@@ -311,39 +487,8 @@ 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)) {
-        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);
-        }, 1);
-      }
+    if (isArrowKey && (0, _fortuneCore.isFormulaReferenceInputMode)(context)) {
+      allowListNavigation = false;
     }
     if (e.key === "Escape" && context.luckysheetCellUpdate.length > 0) {
       setContext(function (draftCtx) {
@@ -399,7 +544,7 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     }
-  }, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext, firstSelection]);
+  }, [capturePreFormulaState, clearSearchItemActiveClass, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, selectActiveFormula, setContext, firstSelection]);
   var handleHideShowHint = function handleHideShowHint() {
     var _a, _b, _c, _d;
     var searchElFx = (_a = document.getElementsByClassName("fx-search")) === null || _a === void 0 ? void 0 : _a[0];
@@ -420,32 +565,40 @@ var InputBox = function InputBox() {
     }
   };
   var onChange = (0, _react.useCallback)(function (__, isBlur) {
-    var _a;
+    var _a, _b, _c;
     if (context.isFlvReadOnly) return;
     handleHideShowHint();
-    if (((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText.includes("=")) && /^=?[A-Za-z]*$/.test(getLastInputSpanText())) {
-      setShowSearchHint(true);
-    } else {
-      setShowSearchHint(false);
-    }
+    setShowSearchHint((0, _helper.shouldShowFormulaFunctionList)((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && _a !== void 0 ? _a : null));
     if (!isComposingRef.current) {
       var currentCommaCount = (0, _helper.countCommasBeforeCursor)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
       setCommaCount(currentCommaCount);
     }
     var e = lastKeyDownEventRef.current;
-    if (!e) return;
+    if (!e) {
+      var cellEl_1 = refs.cellInput.current;
+      if (cellEl_1 && (((_b = cellEl_1.innerText) === null || _b === void 0 ? void 0 : _b.trim().startsWith("=")) || ((_c = cellEl_1.textContent) === null || _c === void 0 ? void 0 : _c.trim().startsWith("=")))) {
+        setContext(function (draftCtx) {
+          if (!(0, _fortuneCore.isAllowEdit)(draftCtx, draftCtx.luckysheet_select_save)) return;
+          (0, _fortuneCore.rangeHightlightselected)(draftCtx, cellEl_1);
+        });
+      }
+      return;
+    }
     var kcode = e.keyCode;
     if (!kcode) return;
+    appendFormulaHistoryFromPrimaryEditor(function () {
+      return (0, _helper.getCursorPosition)(inputRef.current);
+    });
     if (!(kcode >= 112 && kcode <= 123 || kcode <= 46 || kcode === 144 || kcode === 108 || e.ctrlKey || e.altKey || e.shiftKey && (kcode === 37 || kcode === 38 || kcode === 39 || kcode === 40)) || kcode === 8 || kcode === 32 || kcode === 46 || e.ctrlKey && kcode === 86) {
       setContext(function (draftCtx) {
         if ((draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || (0, _fortuneCore.israngeseleciton)(draftCtx)) && isBlur) return;
         if (!(0, _fortuneCore.isAllowEdit)(draftCtx, draftCtx.luckysheet_select_save)) {
           return;
         }
-        (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preText.current);
+        (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preTextRef.current);
       });
     }
-  }, [refs.cellInput, refs.fxInput, setContext]);
+  }, [refs.cellInput, refs.fxInput, setContext, appendFormulaHistoryFromPrimaryEditor]);
   var onPaste = (0, _react.useCallback)(function (e) {
     if (_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
       e.preventDefault();
@@ -489,7 +642,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, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.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 +658,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, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.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 +671,7 @@ var InputBox = function InputBox() {
       left: "0",
       display: "block"
     };
-  }, [firstSelection, (_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show]);
+  }, [firstSelection, (_g = context.rangeDialog) === null || _g === void 0 ? void 0 : _g.show]);
   var getCellAddress = (0, _react.useCallback)(function () {
     if (!firstSelection) return "";
     var rowIndex = firstSelection.row_focus || 0;
@@ -568,15 +721,15 @@ 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]);
+  }, [(_h = context.linkCard) === null || _h === void 0 ? void 0 : _h.applyToSelection, (_j = context.linkCard) === null || _j === void 0 ? void 0 : _j.selectionOffsets, (_k = context.linkCard) === null || _k === void 0 ? void 0 : _k.r, (_l = context.linkCard) === null || _l === void 0 ? void 0 : _l.c, context.luckysheetCellUpdate]);
   var wraperGetCell = function wraperGetCell() {
     var cell = getCellAddress();
-    placeRef.current = cell;
     if (activeRefCell !== cell) {
       setActiveRefCell(cell);
     }
     return activeCell || cell;
   };
+  (0, _useRerenderOnFormulaCaret.useRerenderOnFormulaCaret)(inputRef, context.luckysheetCellUpdate.length > 0);
   var getFunctionNameFromInput = (0, _react.useCallback)(function () {
     var _a, _b;
     var inputText = ((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) || "";
@@ -593,8 +746,10 @@ var InputBox = function InputBox() {
     }
     return null;
   }, []);
-  var functionName = context.functionHint || getFunctionNameFromInput();
+  var functionName = (_o = (_m = (0, _helper.getFunctionNameFromFormulaCaretSpans)(inputRef.current)) !== null && _m !== void 0 ? _m : context.functionHint) !== null && _o !== void 0 ? _o : getFunctionNameFromInput();
   var fn = functionName ? context.formulaCache.functionlistMap[functionName] : null;
+  var showCellFormulaChrome = context.luckysheetCellUpdate.length > 0 && (0, _fortuneCore.getFormulaEditorOwner)(context) === "cell";
+  var inputBoxBaseSelection = isInputBoxActive && firstSelectionActiveCell ? firstSelectionActiveCell : firstSelection;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "luckysheet-input-box",
     id: "luckysheet-input-box",
@@ -605,16 +760,16 @@ 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 && !((_p = context.rangeDialog) === null || _p === void 0 ? void 0 : _p.show) && (/*#__PURE__*/_react.default.createElement("div", {
     className: "luckysheet-cell-address-indicator",
     style: getAddressIndicatorPosition()
   }, wraperGetCell())), /*#__PURE__*/_react.default.createElement("div", {
     ref: inputBoxInnerRef,
     className: "luckysheet-input-box-inner",
-    style: firstSelection ? __assign({
+    style: inputBoxBaseSelection ? __assign({
       position: "relative",
-      minWidth: firstSelection.width,
-      minHeight: firstSelection.height
+      minWidth: inputBoxBaseSelection.width,
+      minHeight: inputBoxBaseSelection.height
     }, inputBoxStyle) : {
       position: "relative"
     }
@@ -635,10 +790,23 @@ var InputBox = function InputBox() {
     },
     onMouseUp: function onMouseUp() {
       handleHideShowHint();
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.setFormulaEditorOwner)(draftCtx, "cell");
+      });
       if (!isComposingRef.current) {
         var currentCommaCount = (0, _helper.countCommasBeforeCursor)(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
         setCommaCount(currentCommaCount);
       }
+      var editor = inputRef.current;
+      if (!editor) return;
+      setContext(function (draftCtx) {
+        if (draftCtx.formulaCache.rangeSelectionActive !== true) return;
+        var clickedInsideManagedRange = (0, _fortuneCore.getFormulaRangeIndexAtCaret)(editor) !== null;
+        var atValidInsertionPoint = (0, _fortuneCore.isCaretAtValidFormulaRangeInsertionPoint)(editor);
+        if (clickedInsideManagedRange || !atValidInsertionPoint) {
+          (0, _fortuneCore.markRangeSelectionDirty)(draftCtx);
+        }
+      });
     },
     innerRef: function innerRef(e) {
       inputRef.current = e;
@@ -681,7 +849,7 @@ var InputBox = function InputBox() {
         backgroundColor: "rgba(0, 123, 255, 0.25)"
       }
     });
-  })))), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSearchHint && (/*#__PURE__*/_react.default.createElement(_FormulaSearch.default, {
+  })))), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && showCellFormulaChrome && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSearchHint && (/*#__PURE__*/_react.default.createElement(_FormulaSearch.default, {
     onMouseMove: function onMouseMove(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
@@ -696,12 +864,12 @@ var InputBox = function InputBox() {
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "cell-hint"
-  }, showFormulaHint && fn && (/*#__PURE__*/_react.default.createElement(_FormulaHint.default, {
+  }, showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/_react.default.createElement(_FormulaHint.default, {
     handleShowFormulaHint: handleShowFormulaHint,
     showFormulaHint: showFormulaHint,
     commaCount: commaCount,
     functionName: functionName
-  })), !showFormulaHint && fn && (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+  })), !showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
     text: "Turn on formula suggestions (F10)",
     placement: "top",
     defaultOpen: true,