@fileverse-dev/fortune-react 1.3.11-input-ref → 1.3.11-input-ref-2

package/lib/components/FxEditor/index.js

@@ -9,48 +9,75 @@ var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _react = _interopRequireWildcard(require("react"));
 require("./index.css");
 var _lodash = _interopRequireDefault(require("lodash"));
+var _ui = require("@fileverse/ui");
 var _context = _interopRequireDefault(require("../../context"));
 var _ContentEditable = _interopRequireDefault(require("../SheetOverlay/ContentEditable"));
 var _NameBox = _interopRequireDefault(require("./NameBox"));
-var _FormulaSearch = _interopRequireDefault(require("../../components/SheetOverlay/FormulaSearch"));
-var _FormulaHint = _interopRequireDefault(require("../../components/SheetOverlay/FormulaHint"));
+var _FormulaSearch = _interopRequireDefault(require("../SheetOverlay/FormulaSearch"));
+var _FormulaHint = _interopRequireDefault(require("../SheetOverlay/FormulaHint"));
 var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
-var _LucideIcon = require("../../components/SheetOverlay/LucideIcon");
-var _helper = require("../../components/SheetOverlay/helper");
+var _useFormulaEditorHistory = require("../../hooks/useFormulaEditorHistory");
+var _useRerenderOnFormulaCaret = require("../../hooks/useRerenderOnFormulaCaret");
+var _LucideIcon = require("../SheetOverlay/LucideIcon");
+var _helper = require("../SheetOverlay/helper");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var FxEditor = function FxEditor() {
-  var _a;
+  var _a, _b, _c;
   var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
-  var _b = (0, _react.useState)(false),
-    showSearchHint = _b[0],
-    setShowSearchHint = _b[1];
-  var _c = (0, _react.useState)(!hideFormulaHintLocal),
-    showFormulaHint = _c[0],
-    setShowFormulaHint = _c[1];
-  var _d = (0, _react.useState)(0),
-    commaCount = _d[0],
-    setCommaCount = _d[1];
-  var _e = (0, _react.useContext)(_context.default),
-    context = _e.context,
-    setContext = _e.setContext,
-    refs = _e.refs;
+  var _d = (0, _react.useState)(false),
+    showSearchHint = _d[0],
+    setShowSearchHint = _d[1];
+  var _e = (0, _react.useState)(!hideFormulaHintLocal),
+    showFormulaHint = _e[0],
+    setShowFormulaHint = _e[1];
+  var _f = (0, _react.useState)(0),
+    commaCount = _f[0],
+    setCommaCount = _f[1];
+  var _g = (0, _react.useContext)(_context.default),
+    context = _g.context,
+    setContext = _g.setContext,
+    refs = _g.refs;
   var lastKeyDownEventRef = (0, _react.useRef)(null);
+  var _h = (0, _useFormulaEditorHistory.useFormulaEditorHistory)(refs.fxInput, refs.cellInput, refs.fxInput, setContext, "fx"),
+    formulaHistoryRef = _h.formulaHistoryRef,
+    preTextRef = _h.preTextRef,
+    resetFormulaHistory = _h.resetFormulaHistory,
+    handleFormulaHistoryUndoRedo = _h.handleFormulaHistoryUndoRedo,
+    capturePreFormulaState = _h.capturePreFormulaState,
+    appendFormulaHistoryFromPrimaryEditor = _h.appendFormulaHistoryFromPrimaryEditor;
   var inputContainerRef = (0, _react.useRef)(null);
-  var _f = (0, _react.useState)(false),
-    isHidenRC = _f[0],
-    setIsHidenRC = _f[1];
+  var _j = (0, _react.useState)(false),
+    isHidenRC = _j[0],
+    setIsHidenRC = _j[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
   var prevFirstSelection = (0, _usePrevious.default)(firstSelection);
+  var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
   var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
   var recentText = (0, _react.useRef)("");
+  var formulaAnchorCellRef = (0, _react.useRef)(null);
   var handleShowFormulaHint = function handleShowFormulaHint() {
     localStorage.setItem("formulaMore", String(showFormulaHint));
     setShowFormulaHint(!showFormulaHint);
   };
+  (0, _react.useEffect)(function () {
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === "F10") {
+        event.preventDefault();
+        handleShowFormulaHint();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return function () {
+      return window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [showFormulaHint]);
   (0, _react.useEffect)(function () {
     var _a;
     setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
+    if (context.luckysheetCellUpdate.length > 0) {
+      return;
+    }
     if (_lodash.default.isEqual(prevFirstSelection, firstSelection) && context.currentSheetId === prevSheetId) {
       return;
     }
@@ -74,7 +101,74 @@ var FxEditor = function FxEditor() {
     } else {
       refs.fxInput.current.innerHTML = "";
     }
-  }, [context.luckysheetfile, context.currentSheetId, context.luckysheet_select_save]);
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheet_select_save, context.luckysheetCellUpdate.length]);
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+    var fxInput = refs.fxInput.current;
+    if (context.luckysheetCellUpdate.length === 0 || !fxInput) {
+      return;
+    }
+    if (refs.globalCache.doNotUpdateCell) {
+      delete refs.globalCache.doNotUpdateCell;
+      return;
+    }
+    if (_lodash.default.isEqual(prevCellUpdate, context.luckysheetCellUpdate) && prevSheetId === context.currentSheetId) {
+      return;
+    }
+    var _b = context.luckysheetCellUpdate,
+      rowIndex = _b[0],
+      colIndex = _b[1];
+    if (_lodash.default.isNil(rowIndex) || _lodash.default.isNil(colIndex)) {
+      return;
+    }
+    var pending = refs.globalCache.pendingTypeOverCell;
+    if (pending && pending[0] === rowIndex && pending[1] === colIndex) {
+      refs.globalCache.overwriteCell = false;
+      refs.globalCache.ignoreWriteCell = false;
+      return;
+    }
+    var flowdata = (0, _fortuneCore.getFlowdata)(context);
+    if (!flowdata) {
+      return;
+    }
+    var cell = (_a = flowdata === null || flowdata === void 0 ? void 0 : flowdata[rowIndex]) === null || _a === void 0 ? void 0 : _a[colIndex];
+    var value = "";
+    var overwrite = refs.globalCache.overwriteCell;
+    if (cell && !overwrite) {
+      if ((0, _fortuneCore.isInlineStringCell)(cell)) {
+        value = (0, _fortuneCore.getInlineStringNoStyle)(rowIndex, colIndex, flowdata);
+      } else if (cell.f) {
+        value = (0, _fortuneCore.getCellValue)(rowIndex, colIndex, flowdata, "f");
+      } else {
+        value = (0, _fortuneCore.valueShowEs)(rowIndex, colIndex, flowdata);
+      }
+    }
+    refs.globalCache.overwriteCell = false;
+    if (!refs.globalCache.ignoreWriteCell && value) {
+      fxInput.innerHTML = (0, _fortuneCore.escapeHTMLTag)((0, _fortuneCore.escapeScriptTag)(value));
+    } else if (!refs.globalCache.ignoreWriteCell && !overwrite) {
+      var valueD = (0, _fortuneCore.getCellValue)(rowIndex, colIndex, flowdata, "f");
+      fxInput.innerText = valueD;
+    }
+    refs.globalCache.ignoreWriteCell = false;
+  }, [context.luckysheetCellUpdate, context.luckysheetfile, context.currentSheetId, prevCellUpdate, prevSheetId, refs.fxInput, refs.globalCache]);
+  (0, _react.useEffect)(function () {
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      delete refs.globalCache.pendingTypeOverCell;
+      resetFormulaHistory();
+    }
+  }, [context.luckysheetCellUpdate, resetFormulaHistory, refs.globalCache]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate) || !refs.fxInput.current) {
+      formulaAnchorCellRef.current = null;
+      return;
+    }
+    var inputText = ((_a = refs.fxInput.current.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+    if (!inputText.startsWith("=")) {
+      formulaAnchorCellRef.current = null;
+    }
+  }, [context.luckysheetCellUpdate, refs.fxInput]);
   var onFocus = (0, _react.useCallback)(function () {
     var _a, _b;
     if (context.allowEdit === false) {
@@ -82,13 +176,30 @@ var FxEditor = function FxEditor() {
     }
     if (((_b = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && !context.luckysheet_cell_selected_move && (0, _fortuneCore.isAllowEdit)(context, context.luckysheet_select_save)) {
       setContext(function (draftCtx) {
+        var _a;
+        (0, _fortuneCore.setFormulaEditorOwner)(draftCtx, "fx");
         var last = draftCtx.luckysheet_select_save[draftCtx.luckysheet_select_save.length - 1];
         var row_index = last.row_focus;
         var col_index = last.column_focus;
-        draftCtx.luckysheetCellUpdate = [row_index, col_index];
-        refs.globalCache.doNotFocus = true;
+        if (!_lodash.default.isNil(row_index) && !_lodash.default.isNil(col_index)) {
+          var flowdata = (0, _fortuneCore.getFlowdata)(draftCtx);
+          var cellAt = (_a = flowdata === null || flowdata === void 0 ? void 0 : flowdata[row_index]) === null || _a === void 0 ? void 0 : _a[col_index];
+          if ((cellAt === null || cellAt === void 0 ? void 0 : cellAt.f) != null && String(cellAt.f).trim() !== "") {
+            (0, _fortuneCore.suppressFormulaRangeSelectionForInitialEdit)(draftCtx);
+          }
+        }
+        var currentUpdate = draftCtx.luckysheetCellUpdate || [];
+        var alreadyEditingSameCell = currentUpdate.length === 2 && currentUpdate[0] === row_index && currentUpdate[1] === col_index;
+        if (!alreadyEditingSameCell) {
+          refs.globalCache.doNotUpdateCell = true;
+          draftCtx.luckysheetCellUpdate = [row_index, col_index];
+          refs.globalCache.doNotFocus = true;
+        }
       });
     }
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.setFormulaEditorOwner)(draftCtx, "fx");
+    });
   }, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, refs.globalCache, setContext]);
   var getActiveFormula = (0, _react.useCallback)(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
@@ -107,12 +218,13 @@ var FxEditor = function FxEditor() {
       cellEditor.innerHTML = html;
     }
     (0, _helper.setCursorPosition)(fxEditor, caretOffset);
+    setShowSearchHint((0, _helper.shouldShowFormulaFunctionList)(fxEditor));
     setContext(function (draftCtx) {
       draftCtx.functionCandidates = [];
       draftCtx.defaultCandidates = [];
-      draftCtx.functionHint = formulaName;
+      draftCtx.functionHint = (formulaName || "").toUpperCase();
     });
-  }, [setContext]);
+  }, [refs.fxInput, setContext]);
   var clearSearchItemActiveClass = (0, _react.useCallback)(function () {
     var activeFormula = getActiveFormula();
     if (activeFormula) {
@@ -128,10 +240,11 @@ var FxEditor = function FxEditor() {
     return lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText;
   };
   var selectActiveFormulaOnClick = (0, _react.useCallback)(function (e) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (e.target.className.includes("sign-fortune")) return;
-    recentText.current = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current.innerText;
-    var formulaName = (_c = (_b = getActiveFormula()) === null || _b === void 0 ? void 0 : _b.querySelector(".luckysheet-formula-search-func")) === null || _c === void 0 ? void 0 : _c.textContent;
+    preTextRef.current = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current.innerText;
+    recentText.current = (_b = refs.fxInput) === null || _b === void 0 ? void 0 : _b.current.innerText;
+    var formulaName = (_d = (_c = getActiveFormula()) === null || _c === void 0 ? void 0 : _c.querySelector(".luckysheet-formula-search-func")) === null || _d === void 0 ? void 0 : _d.textContent;
     var lastSpanText = getLastInputSpanText();
     if (formulaName && !(0, _helper.isLetterNumberPattern)(lastSpanText)) {
       insertSelectedFormula(formulaName);
@@ -140,18 +253,95 @@ var FxEditor = function FxEditor() {
     }
   }, [getActiveFormula, insertSelectedFormula]);
   var onKeyDown = (0, _react.useCallback)(function (e) {
-    var _a;
+    var _a, _b, _c;
+    if (e.key === "Delete" || e.key === "Backspace") {
+      var anchor = formulaAnchorCellRef.current;
+      if (anchor != null) {
+        var anchorRow_1 = anchor[0],
+          anchorCol_1 = anchor[1];
+        setTimeout(function () {
+          setContext(function (draftCtx) {
+            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
+            }];
+            (0, _fortuneCore.markRangeSelectionDirty)(draftCtx);
+          });
+        }, 0);
+      }
+    }
     if (context.allowEdit === false) {
       return;
     }
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.setFormulaEditorOwner)(draftCtx, "fx");
+    });
     var currentCommaCount = (0, _helper.countCommasBeforeCursor)((_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current);
     setCommaCount(currentCommaCount);
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
-    var key = e.key;
+    capturePreFormulaState();
     recentText.current = refs.fxInput.current.innerText;
+    var key = e.key;
+    var currentInputText = ((_c = (_b = refs.fxInput.current) === null || _b === void 0 ? void 0 : _b.innerText) === null || _c === void 0 ? void 0 : _c.trim()) || "";
+    if ((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 (key === "(" && currentInputText.startsWith("=")) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+    }
+    if (key === "," && context.luckysheetCellUpdate.length > 0 && currentInputText.startsWith("=") && formulaAnchorCellRef.current) {
+      setContext(function (draftCtx) {
+        draftCtx.formulaCache.rangeSelectionActive = null;
+      });
+      var _d = formulaAnchorCellRef.current,
+        anchorRow_2 = _d[0],
+        anchorCol_2 = _d[1];
+      setTimeout(function () {
+        setContext(function (draftCtx) {
+          var _a, _b;
+          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
+          }];
+          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.fxInput.current) === null || _a === void 0 ? void 0 : _a.innerHTML) || ((_b = refs.cellInput.current) === null || _b === void 0 ? void 0 : _b.innerHTML) || "");
+          (0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 0, "rangeOfSelect");
+        });
+      }, 0);
+    }
     if (key === "ArrowLeft" || key === "ArrowRight") {
       e.stopPropagation();
     }
+    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.key === "Enter" || e.key === "Tab") && context.luckysheetCellUpdate.length > 0) {
       if (e.altKey || e.metaKey) {
         document.execCommand("insertHTML", false, "\n ");
@@ -163,7 +353,7 @@ var FxEditor = function FxEditor() {
       }
       return;
     }
-    if (e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0) {
+    if (!(e.metaKey || e.ctrlKey) && e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var formulaSearchContainer = document.getElementById("luckysheet-formula-search-c");
         var activeItem = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item-active");
@@ -182,7 +372,7 @@ var FxEditor = function FxEditor() {
         }
       }
       e.preventDefault();
-    } else if (e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0) {
+    } else if (!(e.metaKey || e.ctrlKey) && e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var formulaSearchContainer = document.getElementById("luckysheet-formula-search-c");
         var activeItem = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item-active");
@@ -241,7 +431,7 @@ var FxEditor = function FxEditor() {
         }
       }
     });
-  }, [context.allowEdit, context.luckysheetCellUpdate.length, refs.fxInput, setContext]);
+  }, [capturePreFormulaState, context.allowEdit, context.luckysheetCellUpdate, handleFormulaHistoryUndoRedo, refs.cellInput, refs.fxInput, setContext]);
   var handleHideShowHint = function handleHideShowHint() {
     var _a, _b, _c, _d;
     var el = (_a = document.getElementsByClassName("cell-hint")) === null || _a === void 0 ? void 0 : _a[0];
@@ -262,26 +452,54 @@ var FxEditor = function FxEditor() {
     }
   };
   var onChange = (0, _react.useCallback)(function () {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (context.isFlvReadOnly) return;
-    handleHideShowHint();
-    if (((_b = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.innerText.includes("=")) && /^=?[A-Za-z]*$/.test(getLastInputSpanText())) {
-      setShowSearchHint(true);
-    } else {
-      setShowSearchHint(false);
+    var fxEl = refs.fxInput.current;
+    if (fxEl && context.luckysheetCellUpdate.length === 2 && formulaAnchorCellRef.current == null) {
+      var t = ((_a = fxEl.innerText) === null || _a === void 0 ? void 0 : _a.trim()) || "";
+      if (t.startsWith("=")) {
+        formulaAnchorCellRef.current = [context.luckysheetCellUpdate[0], context.luckysheetCellUpdate[1]];
+      }
     }
-    var currentCommaCount = (0, _helper.countCommasBeforeCursor)((_c = refs.fxInput) === null || _c === void 0 ? void 0 : _c.current);
+    handleHideShowHint();
+    setShowSearchHint((0, _helper.shouldShowFormulaFunctionList)((_c = (_b = refs.fxInput) === null || _b === void 0 ? void 0 : _b.current) !== null && _c !== void 0 ? _c : null));
+    var currentCommaCount = (0, _helper.countCommasBeforeCursor)((_d = refs.fxInput) === null || _d === void 0 ? void 0 : _d.current);
     setCommaCount(currentCommaCount);
     var e = lastKeyDownEventRef.current;
-    if (!e) return;
+    if (!e) {
+      var fx = refs.fxInput.current;
+      var cell = refs.cellInput.current;
+      var isFormula = function isFormula(el) {
+        var _a, _b;
+        return !!(((_a = el === null || el === void 0 ? void 0 : el.innerText) === null || _a === void 0 ? void 0 : _a.trim().startsWith("=")) || ((_b = el === null || el === void 0 ? void 0 : el.textContent) === null || _b === void 0 ? void 0 : _b.trim().startsWith("=")));
+      };
+      var sel = window.getSelection();
+      var editor_1 = null;
+      if (sel === null || sel === void 0 ? void 0 : sel.rangeCount) {
+        var node = sel.getRangeAt(0).startContainer;
+        if ((fx === null || fx === void 0 ? void 0 : fx.contains(node)) && isFormula(fx)) editor_1 = fx;else if ((cell === null || cell === void 0 ? void 0 : cell.contains(node)) && isFormula(cell)) editor_1 = cell;
+      }
+      if (!editor_1 && isFormula(fx)) editor_1 = fx;else if (!editor_1 && isFormula(cell)) editor_1 = cell;
+      if (editor_1) {
+        setContext(function (draftCtx) {
+          if (!(0, _fortuneCore.isAllowEdit)(draftCtx, draftCtx.luckysheet_select_save)) return;
+          (0, _fortuneCore.rangeHightlightselected)(draftCtx, editor_1);
+        });
+      }
+      return;
+    }
     var kcode = e.keyCode;
     if (!kcode) return;
+    appendFormulaHistoryFromPrimaryEditor(function () {
+      return (0, _helper.getCursorPosition)(refs.fxInput.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) {
         (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.cellInput.current, refs.fxInput.current, kcode, recentText.current);
       });
     }
-  }, [refs.cellInput, refs.fxInput, setContext]);
+  }, [appendFormulaHistoryFromPrimaryEditor, context.isFlvReadOnly, context.luckysheetCellUpdate, refs.cellInput, refs.fxInput, setContext]);
+  (0, _useRerenderOnFormulaCaret.useRerenderOnFormulaCaret)(refs.fxInput, context.luckysheetCellUpdate.length > 0);
   var getFunctionNameFromInput = (0, _react.useCallback)(function () {
     var _a, _b, _c, _d;
     var inputText = ((_b = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.innerText) || "";
@@ -298,8 +516,9 @@ var FxEditor = function FxEditor() {
     }
     return null;
   }, []);
-  var functionName = context.functionHint || getFunctionNameFromInput();
+  var functionName = (_c = (_b = (0, _helper.getFunctionNameFromFormulaCaretSpans)(refs.fxInput.current)) !== null && _b !== void 0 ? _b : context.functionHint) !== null && _c !== void 0 ? _c : getFunctionNameFromInput();
   var fn = functionName ? context.formulaCache.functionlistMap[functionName] : null;
+  var showFxFormulaChrome = context.luckysheetCellUpdate.length > 0 && (0, _fortuneCore.getFormulaEditorOwner)(context) === "fx";
   var allowEdit = (0, _react.useMemo)(function () {
     if (context.allowEdit === false) {
       return false;
@@ -313,9 +532,9 @@ var FxEditor = function FxEditor() {
     return true;
   }, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, isHidenRC]);
   var divRef = (0, _react.useRef)(null);
-  var _g = (0, _react.useState)(false),
-    isResizing = _g[0],
-    setIsResizing = _g[1];
+  var _k = (0, _react.useState)(false),
+    isResizing = _k[0],
+    setIsResizing = _k[1];
   var startResize = function startResize(e) {
     e.preventDefault();
     setIsResizing(true);
@@ -334,7 +553,7 @@ var FxEditor = function FxEditor() {
     document.addEventListener("mouseup", _onMouseUp);
   };
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-fx-editor",
+    className: showFxFormulaChrome ? "fortune-fx-editor fortune-fx-editor--formula-owner" : "fortune-fx-editor",
     ref: divRef
   }, /*#__PURE__*/_react.default.createElement(_NameBox.default, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-fx-icon",
@@ -361,8 +580,20 @@ var FxEditor = function FxEditor() {
     onMouseUp: function onMouseUp() {
       var _a;
       handleHideShowHint();
-      var currentCommaCount = (0, _helper.countCommasBeforeCursor)((_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current);
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.setFormulaEditorOwner)(draftCtx, "fx");
+      });
+      var editor = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current;
+      var currentCommaCount = (0, _helper.countCommasBeforeCursor)(editor);
       setCommaCount(currentCommaCount);
+      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) {
       refs.fxInput.current = e;
@@ -375,7 +606,7 @@ var FxEditor = function FxEditor() {
     onChange: onChange,
     tabIndex: 0,
     allowEdit: allowEdit && !context.isFlvReadOnly
-  }), showSearchHint && (/*#__PURE__*/_react.default.createElement(_FormulaSearch.default, {
+  }), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && showFxFormulaChrome && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSearchHint && (/*#__PURE__*/_react.default.createElement(_FormulaSearch.default, {
     from: "fx",
     onMouseMove: function onMouseMove(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
@@ -391,12 +622,22 @@ var FxEditor = function FxEditor() {
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "fx-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("div", {
+  })), !showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: "Turn on formula suggestions (F10)",
+    placement: "top",
+    defaultOpen: true,
+    style: {
+      position: "absolute",
+      top: "-50px",
+      left: "-130px",
+      width: "210px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "luckysheet-hin absolute show-more-btn",
     onClick: function onClick() {
       handleShowFormulaHint();
@@ -410,7 +651,7 @@ var FxEditor = function FxEditor() {
       margin: "auto",
       marginTop: "1px"
     }
-  })))))), /*#__PURE__*/_react.default.createElement("div", {
+  }))))))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "resize-handle",
     onMouseDown: startResize,
     style: {

package/lib/components/SheetOverlay/FormulaHint/index.js

@@ -58,29 +58,49 @@ var FormulaHint = function FormulaHint(props) {
     ETHERSCAN_API_KEY: "Etherscan API key"
   };
   var hintRef = (0, _react.useRef)(null);
-  var _h = (0, _react.useState)(0),
+  var cellHeightPx = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) != null ? Number(firstSelection.height_move) : 24;
+  var belowCellTop = cellHeightPx + 4;
+  var _h = (0, _react.useState)(belowCellTop),
     top = _h[0],
     setTop = _h[1];
   var _j = (0, _react.useState)(false),
     showDelayedHint = _j[0],
     setShowDelayedHint = _j[1];
-  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
-    var _a, _b, _c, _d, _e, _f;
-    if (!((_a = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) === null || _a === void 0 ? void 0 : _a.toString()) || !((_b = firstSelection.height_move) === null || _b === void 0 ? void 0 : _b.toString()) || !hintRef.current) return;
-    var hintHeight = 360;
-    var inputBoxTop = parseInt(((_c = document.getElementById("luckysheet-input-box")) === null || _c === void 0 ? void 0 : _c.style.top) || "0", 10) - 85;
-    var inputBottom = inputBoxTop + firstSelection.height_move;
-    var availableBelow = window.innerHeight - inputBottom;
-    var hintAbove = hintHeight > availableBelow;
-    var selectionHeight = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0;
-    var divOffset = ((_d = hintRef.current) === null || _d === void 0 ? void 0 : _d.offsetHeight) || 0;
-    var topV = hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4;
-    var el = (_e = document.getElementsByClassName("fx-hint")) === null || _e === void 0 ? void 0 : _e[0];
-    if (el && ((_f = el === null || el === void 0 ? void 0 : el.style) === null || _f === void 0 ? void 0 : _f.display) !== "none") {
+  var measureFormulaHintPlacement = (0, _react.useCallback)(function () {
+    var _a;
+    if ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) == null || firstSelection.height_move == null) {
+      setTop(belowCellTop);
+      return;
+    }
+    var cellH = Number(firstSelection.height_move) || cellHeightPx;
+    var innerEl = hintRef.current;
+    var popupHeight = Math.min((innerEl === null || innerEl === void 0 ? void 0 : innerEl.offsetHeight) || 360, 360);
+    var inputBox = document.getElementById("luckysheet-input-box");
+    var rect = inputBox === null || inputBox === void 0 ? void 0 : inputBox.getBoundingClientRect();
+    if (!rect) {
+      setTop(cellH + 4);
+      return;
+    }
+    var cellBottomViewport = rect.top + cellH;
+    var availableBelow = window.innerHeight - cellBottomViewport - 12;
+    var preferBelow = popupHeight <= availableBelow;
+    var topV = preferBelow ? cellH + 4 : -(popupHeight + 8);
+    var fxHint = (_a = document.getElementsByClassName("fx-hint")) === null || _a === void 0 ? void 0 : _a[0];
+    if (fxHint && fxHint.style.display !== "none") {
       topV = 25;
     }
     setTop(topV);
-  };
+  }, [belowCellTop, cellHeightPx, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top]);
+  (0, _react.useLayoutEffect)(function () {
+    if (!fn) {
+      return undefined;
+    }
+    measureFormulaHintPlacement();
+    var id = requestAnimationFrame(measureFormulaHintPlacement);
+    return function () {
+      cancelAnimationFrame(id);
+    };
+  }, [functionName, context.functionHint, measureFormulaHintPlacement, showFormulaHint, commaCount, showFunctionBody]);
   var hexToRgbString = function hexToRgbString(hex) {
     hex = hex.replace("#", "");
     var r = parseInt(hex.substring(0, 2), 16);
@@ -93,14 +113,13 @@ var FormulaHint = function FormulaHint(props) {
     return bg;
   };
   (0, _react.useEffect)(function () {
-    calcuatePopUpPlacement();
-  }, []);
-  (0, _react.useEffect)(function () {
-    if (!top) {
-      setTimeout(function () {
-        setShowDelayedHint(true);
-      }, 40);
-    }
+    setShowDelayedHint(false);
+    var t = setTimeout(function () {
+      return setShowDelayedHint(true);
+    }, 40);
+    return function () {
+      return clearTimeout(t);
+    };
   }, [top]);
   if (!fn) return null;
   var fnNameClass = fn.n ? String(fn.n).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-") : "";
@@ -183,7 +202,7 @@ var FormulaHint = function FormulaHint(props) {
         localStorage.setItem("formula-expand", "".concat(!showFunctionBody));
         setShouldShowFunctionBody(!showFunctionBody);
         setTimeout(function () {
-          calcuatePopUpPlacement();
+          measureFormulaHintPlacement();
         }, 50);
       }
       dragHasMoved.current = false;
@@ -286,6 +305,7 @@ var FormulaHint = function FormulaHint(props) {
       cursor: "auto"
     }
   }, fn.API_KEY && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-formula-help-content-api",
     style: {
       borderLeft: "4px solid ".concat(isKeyAdded ? "#177E23" : "#fb923c"),
       backgroundColor: "white",
@@ -349,6 +369,7 @@ var FormulaHint = function FormulaHint(props) {
     className: "fortune-formula-hint__cta min-w-[80px]",
     "data-testid": "formula-hint-cta-ok"
   }, "Ok"))))))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "luckysheet-formula-help-content-example",
     style: {
       backgroundColor: "white",
       padding: "6px",

package/lib/components/SheetOverlay/FormulaSearch/index.d.ts

@@ -1,4 +1,6 @@
 import React from "react";
 import "./index.css";
-declare const FormulaSearch: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+declare const FormulaSearch: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    from?: string;
+}>;
 export default FormulaSearch;