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

package/es/components/SheetOverlay/FormulaSearch/index.js

@@ -8,17 +8,27 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
 import _ from "lodash";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
 import { LucideIcon, Tooltip } from "@fileverse/ui";
 import { UNFilter } from "./constant";
 import WorkbookContext from "../../../context";
 import "./index.css";
-var FormulaSearch = function FormulaSearch(props) {
-  var _a;
-  var _b = useContext(WorkbookContext),
-    context = _b.context,
-    isAuthorized = _b.settings.isAuthorized;
+var FormulaSearch = function FormulaSearch(_a) {
+  var _b, _c, _d;
+  var from = _a.from,
+    divProps = __rest(_a, ["from"]);
+  var _e = useContext(WorkbookContext),
+    context = _e.context,
+    isAuthorized = _e.settings.isAuthorized;
   var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
   var filteredDefaultCandidates = context.defaultCandidates.filter(function (item) {
     return !authedFunction.includes(item.n);
@@ -30,39 +40,58 @@ var FormulaSearch = function FormulaSearch(props) {
   var finalFunctionCandidates = isAuthorized ? context.functionCandidates : context.functionCandidates.filter(function (item) {
     return item.t !== 20;
   });
-  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+  var firstSelection = (_b = context.luckysheet_select_save) === null || _b === void 0 ? void 0 : _b[0];
+  var cellHeightPx = (firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) != null ? Number(firstSelection.height_move) : 24;
+  var belowCellTop = cellHeightPx + 4;
   var hintRef = useRef(null);
-  var _c = useState(0),
-    top = _c[0],
-    setTop = _c[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 + 80) : 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 _f = useState(belowCellTop),
+    top = _f[0],
+    setTop = _f[1];
+  var applyPlacement = useCallback(function () {
+    var _a;
+    if ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top) == null || firstSelection.height_move == null) {
+      setTop(belowCellTop);
+      return;
+    }
+    var fromFx = from === "fx";
+    var cellH = Number(firstSelection.height_move) || cellHeightPx;
+    if (fromFx) {
+      setTop(25);
+      return;
+    }
+    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);
-  };
-  useEffect(function () {
-    calcuatePopUpPlacement();
-  });
+  }, [belowCellTop, cellHeightPx, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move, firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.top, from]);
+  useLayoutEffect(function () {
+    applyPlacement();
+    var id = requestAnimationFrame(applyPlacement);
+    return function () {
+      cancelAnimationFrame(id);
+    };
+  }, [applyPlacement, (_c = context.defaultCandidates) === null || _c === void 0 ? void 0 : _c.length, (_d = context.functionCandidates) === null || _d === void 0 ? void 0 : _d.length, context.functionHint]);
   if (_.isEmpty(context.functionCandidates) && _.isEmpty(context.defaultCandidates)) return null;
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex color-border-default border flex-col luckysheet-formula-search-c-p custom-scroll ".concat((props === null || props === void 0 ? void 0 : props.from) === "fx" ? "fx-search" : "cell-search"),
+    className: "flex color-border-default border flex-col luckysheet-formula-search-c-p custom-scroll ".concat(from === "fx" ? "fx-search" : "cell-search"),
     id: "luckysheet-formula-search-c-p",
     style: {
       top: top
     }
-  }, /*#__PURE__*/React.createElement("div", __assign({}, props, {
+  }, /*#__PURE__*/React.createElement("div", __assign({}, divProps, {
     ref: hintRef,
     id: "luckysheet-formula-search-c",
     className: "luckysheet-formula-search-c"

package/es/components/SheetOverlay/InputBox.js

@@ -8,7 +8,7 @@ var __assign = this && this.__assign || function () {
   };
   return __assign.apply(this, arguments);
 };
-import { cancelNormalSelected, getCellValue, getInlineStringHTML, getStyleByCell, isInlineStringCell, moveToEnd, getFlowdata, handleFormulaInput, moveHighlightCell, escapeScriptTag, valueShowEs, createRangeHightlight, isShowHidenCR, israngeseleciton, escapeHTMLTag, isAllowEdit, indexToColumnChar, functionHTMLGenerate, handleBold, handleItalic, handleUnderline, handleStrikeThrough, getRangeRectsByCharacterOffset, rangeSetValue, getFormulaRangeIndexForKeyboardSync, createFormulaRangeSelect, seletedHighlistByindex, isFormulaReferenceInputMode, rangeHightlightselected } from "@fileverse-dev/fortune-core";
+import { cancelNormalSelected, getCellValue, getInlineStringHTML, getStyleByCell, isInlineStringCell, moveToEnd, getFlowdata, handleFormulaInput, moveHighlightCell, escapeScriptTag, valueShowEs, createRangeHightlight, isShowHidenCR, israngeseleciton, escapeHTMLTag, isAllowEdit, indexToColumnChar, functionHTMLGenerate, handleBold, handleItalic, handleUnderline, handleStrikeThrough, getRangeRectsByCharacterOffset, rangeSetValue, getFormulaRangeIndexForKeyboardSync, getFormulaRangeIndexAtCaret, getFormulaEditorOwner, createFormulaRangeSelect, seletedHighlistByindex, isFormulaReferenceInputMode, isCaretAtValidFormulaRangeInsertionPoint, markRangeSelectionDirty, rangeHightlightselected, setFormulaEditorOwner } from "@fileverse-dev/fortune-core";
 import React, { useContext, useEffect, useMemo, useRef, useCallback, useLayoutEffect, useState } from "react";
 import _ from "lodash";
 import { Tooltip } from "@fileverse/ui";
@@ -17,62 +17,73 @@ import ContentEditable from "./ContentEditable";
 import FormulaSearch from "./FormulaSearch";
 import FormulaHint from "./FormulaHint";
 import usePrevious from "../../hooks/usePrevious";
-import { moveCursorToEnd, getCursorPosition, setCursorPosition, buildFormulaSuggestionText, isLetterNumberPattern, countCommasBeforeCursor } from "./helper";
+import { useFormulaEditorHistory } from "../../hooks/useFormulaEditorHistory";
+import { useRerenderOnFormulaCaret } from "../../hooks/useRerenderOnFormulaCaret";
+import { moveCursorToEnd, getCursorPosition, setCursorPosition, buildFormulaSuggestionText, getFunctionNameFromFormulaCaretSpans, isLetterNumberPattern, countCommasBeforeCursor, shouldShowFormulaFunctionList } from "./helper";
 import { LucideIcon } from "./LucideIcon";
 var InputBox = function InputBox() {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-  var _o = useContext(WorkbookContext),
-    context = _o.context,
-    setContext = _o.setContext,
-    refs = _o.refs;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+  var _q = useContext(WorkbookContext),
+    context = _q.context,
+    setContext = _q.setContext,
+    refs = _q.refs;
   var inputRef = useRef(null);
   var lastKeyDownEventRef = useRef(null);
   var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
   var prevSheetId = usePrevious(context.currentSheetId);
-  var _p = useState(false),
-    isHidenRC = _p[0],
-    setIsHidenRC = _p[1];
-  var _q = useState(false),
-    isInputBoxActive = _q[0],
-    setIsInputBoxActive = _q[1];
-  var _r = useState(""),
-    activeCell = _r[0],
-    setActiveCell = _r[1];
-  var _s = useState(""),
-    activeRefCell = _s[0],
-    setActiveRefCell = _s[1];
-  var _t = useState({
+  var _r = useState(false),
+    isHidenRC = _r[0],
+    setIsHidenRC = _r[1];
+  var _s = useState(false),
+    isInputBoxActive = _s[0],
+    setIsInputBoxActive = _s[1];
+  var _t = useState(""),
+    activeCell = _t[0],
+    setActiveCell = _t[1];
+  var _u = useState(""),
+    activeRefCell = _u[0],
+    setActiveRefCell = _u[1];
+  var _v = useState({
       left: 0,
       top: 0
     }),
-    frozenPosition = _t[0],
-    setFrozenPosition = _t[1];
+    frozenPosition = _v[0],
+    setFrozenPosition = _v[1];
   var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
-  var _u = useState({}),
-    firstSelectionActiveCell = _u[0],
-    setFirstSelectionActiveCell = _u[1];
-  var _v = useState(0),
-    commaCount = _v[0],
-    setCommaCount = _v[1];
+  var _w = useState({}),
+    firstSelectionActiveCell = _w[0],
+    setFirstSelectionActiveCell = _w[1];
+  var _x = useState(0),
+    commaCount = _x[0],
+    setCommaCount = _x[1];
+  var _y = useState(false),
+    cellEditorIsFormula = _y[0],
+    setCellEditorIsFormula = _y[1];
   var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
-  var _w = useState(!hideFormulaHintLocal),
-    showFormulaHint = _w[0],
-    setShowFormulaHint = _w[1];
-  var _x = useState(false),
-    showSearchHint = _x[0],
-    setShowSearchHint = _x[1];
+  var _z = useState(!hideFormulaHintLocal),
+    showFormulaHint = _z[0],
+    setShowFormulaHint = _z[1];
+  var _0 = useState(false),
+    showSearchHint = _0[0],
+    setShowSearchHint = _0[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 = useRef("");
   var isComposingRef = useRef(false);
   var formulaAnchorCellRef = useRef(null);
   var skipNextAnchorSelectionSyncRef = useRef(false);
   var lastHandledMouseDragSignatureRef = useRef("");
+  var _1 = useFormulaEditorHistory(inputRef, refs.cellInput, refs.fxInput, setContext, "cell"),
+    formulaHistoryRef = _1.formulaHistoryRef,
+    preTextRef = _1.preTextRef,
+    resetFormulaHistory = _1.resetFormulaHistory,
+    handleFormulaHistoryUndoRedo = _1.handleFormulaHistoryUndoRedo,
+    capturePreFormulaState = _1.capturePreFormulaState,
+    appendFormulaHistoryFromPrimaryEditor = _1.appendFormulaHistoryFromPrimaryEditor;
   var ZWSP = "\u200B";
   var inputBoxInnerRef = useRef(null);
-  var _y = useState([]),
-    linkSelectionHighlightRects = _y[0],
-    setLinkSelectionHighlightRects = _y[1];
+  var _2 = useState([]),
+    linkSelectionHighlightRects = _2[0],
+    setLinkSelectionHighlightRects = _2[1];
   var ensureNotEmpty = function ensureNotEmpty() {
     var el = inputRef.current;
     if (!el) return;
@@ -95,12 +106,11 @@ var InputBox = function InputBox() {
     return lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText;
   };
   var inputBoxStyle = useMemo(function () {
-    var _a;
     if (firstSelectionActiveCell && context.luckysheetCellUpdate.length > 0) {
       var flowdata = getFlowdata(context);
       if (!flowdata) return {};
       var style = getStyleByCell(context, flowdata, firstSelectionActiveCell.row_focus, firstSelectionActiveCell.column_focus);
-      if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText.charAt(0)) === "=") {
+      if (cellEditorIsFormula) {
         style = __assign(__assign({}, style), {
           textAlign: "left"
         });
@@ -108,7 +118,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, cellEditorIsFormula]);
   useLayoutEffect(function () {
     var _a;
     if (!context.allowEdit) {
@@ -128,10 +138,23 @@ var InputBox = function InputBox() {
       if (_.isEqual(prevCellUpdate, context.luckysheetCellUpdate) && prevSheetId === context.currentSheetId) {
         return;
       }
+      var _b = context.luckysheetCellUpdate,
+        ur = _b[0],
+        uc = _b[1];
+      var pending_1 = refs.globalCache.pendingTypeOverCell;
+      if (pending_1 && pending_1[0] === ur && pending_1[1] === uc) {
+        refs.globalCache.overwriteCell = false;
+        if (inputRef.current) {
+          setCellEditorIsFormula(inputRef.current.innerText.trim().startsWith("="));
+        }
+        delete refs.globalCache.doNotFocus;
+        return;
+      }
       var flowdata = 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 overwrite = refs.globalCache.overwriteCell;
       var value_1 = "";
-      if (cell && !refs.globalCache.overwriteCell) {
+      if (cell && !overwrite) {
         if (isInlineStringCell(cell)) {
           value_1 = getInlineStringHTML(row_index, col_index, flowdata);
         } else if (cell.f) {
@@ -147,14 +170,20 @@ var InputBox = function InputBox() {
         }
       }
       refs.globalCache.overwriteCell = false;
+      var wroteEditorFromStoredCell = false;
       if (!refs.globalCache.ignoreWriteCell && inputRef.current && value_1) {
         inputRef.current.innerHTML = escapeHTMLTag(escapeScriptTag(value_1));
-      } else if (!refs.globalCache.ignoreWriteCell && inputRef.current && !value_1) {
+        wroteEditorFromStoredCell = true;
+      } else if (!refs.globalCache.ignoreWriteCell && inputRef.current && !value_1 && !overwrite) {
         var valueD = getCellValue(row_index, col_index, flowdata, "f");
         inputRef.current.innerText = valueD;
+        wroteEditorFromStoredCell = true;
       }
       refs.globalCache.ignoreWriteCell = false;
-      if (!refs.globalCache.doNotFocus) {
+      if (inputRef.current) {
+        setCellEditorIsFormula(inputRef.current.innerText.trim().startsWith("="));
+      }
+      if (wroteEditorFromStoredCell && !refs.globalCache.doNotFocus) {
         setTimeout(function () {
           moveToEnd(inputRef.current);
         });
@@ -167,8 +196,15 @@ var InputBox = function InputBox() {
       if (inputRef.current) {
         inputRef.current.innerHTML = "";
       }
+      delete refs.globalCache.pendingTypeOverCell;
+      setCellEditorIsFormula(false);
+      resetFormulaHistory();
     }
-  }, [context.luckysheetCellUpdate]);
+  }, [context.luckysheetCellUpdate, resetFormulaHistory, refs.globalCache]);
+  useEffect(function () {
+    if (_.isEmpty(context.luckysheetCellUpdate)) return;
+    delete refs.globalCache.pendingTypeOverCell;
+  }, [context.luckysheetCellUpdate, refs.globalCache]);
   useEffect(function () {
     var _a;
     if (_.isEmpty(context.luckysheetCellUpdate) || !refs.cellInput.current) {
@@ -240,10 +276,11 @@ var InputBox = function InputBox() {
       fxEditor.innerHTML = html;
     }
     setCursorPosition(textEditor, caretOffset);
+    setShowSearchHint(shouldShowFormulaFunctionList(textEditor));
     setContext(function (draftCtx) {
       draftCtx.functionCandidates = [];
       draftCtx.defaultCandidates = [];
-      draftCtx.functionHint = formulaName;
+      draftCtx.functionHint = (formulaName || "").toUpperCase();
     });
   }, [setContext]);
   var clearSearchItemActiveClass = useCallback(function () {
@@ -266,7 +303,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 && !isLetterNumberPattern(lastSpanText)) {
@@ -287,8 +324,7 @@ var InputBox = function InputBox() {
       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;
-      var isMouseFormulaRangeDrag = !!ctx.formulaCache.func_selectedrange && (ctx.formulaCache.rangestart || ctx.formulaCache.rangedrag_column_start || ctx.formulaCache.rangedrag_row_start);
-      if (isMouseFormulaRangeDrag) {
+      if (getFormulaEditorOwner(ctx) === "fx") {
         return;
       }
       israngeseleciton(ctx);
@@ -365,8 +401,11 @@ var InputBox = function InputBox() {
   }, [formulaMouseDragSignature, context.formulaCache.func_selectedrange, refs.cellInput, setContext]);
   var onKeyDown = useCallback(function (e) {
     var _a, _b;
+    setContext(function (draftCtx) {
+      setFormulaEditorOwner(draftCtx, "cell");
+    });
     lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
-    preText.current = inputRef.current.innerText;
+    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) {
@@ -389,6 +428,7 @@ var InputBox = function InputBox() {
       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],
@@ -396,7 +436,6 @@ var InputBox = function InputBox() {
             row_focus: anchorRow_1,
             column_focus: anchorCol_1
           }];
-          draftCtx.formulaRangeHighlight = [];
           draftCtx.formulaRangeSelect = undefined;
           draftCtx.formulaCache.selectingRangeIndex = -1;
           draftCtx.formulaCache.func_selectedrange = undefined;
@@ -404,11 +443,23 @@ var InputBox = function InputBox() {
           draftCtx.formulaCache.rangestart = false;
           draftCtx.formulaCache.rangedrag_column_start = false;
           draftCtx.formulaCache.rangedrag_row_start = false;
+          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) || "");
           moveHighlightCell(draftCtx, "down", 0, "rangeOfSelect");
         });
       }, 0);
     }
-    if (e.metaKey && context.luckysheetCellUpdate.length > 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") {
         handleBold(context, inputRef.current);
         stopPropagation(e);
@@ -430,6 +481,29 @@ var InputBox = function InputBox() {
     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
+            }];
+            markRangeSelectionDirty(draftCtx);
+            var el = refs.cellInput.current;
+            if (el && el.innerText.trim().startsWith("=")) {
+              createRangeHightlight(draftCtx, el.innerHTML);
+              rangeHightlightselected(draftCtx, el);
+            }
+          });
+        }, 0);
+      }
       if (isComposingRef.current) requestAnimationFrame(ensureNotEmpty);
       if (getCursorPosition(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.innerText.length)) {
         setTimeout(function () {
@@ -457,7 +531,7 @@ var InputBox = function InputBox() {
       e.preventDefault();
     } else if (e.key === "F4" && context.luckysheetCellUpdate.length > 0) {
       e.preventDefault();
-    } else if (e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0 && allowListNavigation) {
+    } else if (!(e.metaKey || e.ctrlKey) && e.key === "ArrowUp" && context.luckysheetCellUpdate.length > 0 && allowListNavigation) {
       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");
@@ -476,7 +550,7 @@ var InputBox = function InputBox() {
         }
       }
       e.preventDefault();
-    } else if (e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0 && allowListNavigation) {
+    } else if (!(e.metaKey || e.ctrlKey) && e.key === "ArrowDown" && context.luckysheetCellUpdate.length > 0 && allowListNavigation) {
       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");
@@ -494,7 +568,7 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     }
-  }, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext, firstSelection]);
+  }, [capturePreFormulaState, clearSearchItemActiveClass, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, selectActiveFormula, setContext, firstSelection, refs.cellInput]);
   var handleHideShowHint = function handleHideShowHint() {
     var _a, _b, _c, _d;
     var searchElFx = (_a = document.getElementsByClassName("fx-search")) === null || _a === void 0 ? void 0 : _a[0];
@@ -515,14 +589,12 @@ var InputBox = function InputBox() {
     }
   };
   var onChange = useCallback(function (__, isBlur) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     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);
-    }
+    var editorText = (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.innerText) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : "";
+    setCellEditorIsFormula(editorText.startsWith("="));
+    setShowSearchHint(shouldShowFormulaFunctionList((_d = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && _d !== void 0 ? _d : null));
     if (!isComposingRef.current) {
       var currentCommaCount = countCommasBeforeCursor(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
       setCommaCount(currentCommaCount);
@@ -530,7 +602,7 @@ var InputBox = function InputBox() {
     var e = lastKeyDownEventRef.current;
     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("=")))) {
+      if (cellEl_1 && (((_e = cellEl_1.innerText) === null || _e === void 0 ? void 0 : _e.trim().startsWith("=")) || ((_f = cellEl_1.textContent) === null || _f === void 0 ? void 0 : _f.trim().startsWith("=")))) {
         setContext(function (draftCtx) {
           if (!isAllowEdit(draftCtx, draftCtx.luckysheet_select_save)) return;
           rangeHightlightselected(draftCtx, cellEl_1);
@@ -540,16 +612,24 @@ var InputBox = function InputBox() {
     }
     var kcode = e.keyCode;
     if (!kcode) return;
+    appendFormulaHistoryFromPrimaryEditor(function () {
+      return 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) {
+        var _a, _b;
         if ((draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || israngeseleciton(draftCtx)) && isBlur) return;
         if (!isAllowEdit(draftCtx, draftCtx.luckysheet_select_save)) {
           return;
         }
-        handleFormulaInput(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preText.current);
+        handleFormulaInput(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preTextRef.current);
+        var cellEl = refs.cellInput.current;
+        if (cellEl && (((_a = cellEl.innerText) === null || _a === void 0 ? void 0 : _a.trim().startsWith("=")) || ((_b = cellEl.textContent) === null || _b === void 0 ? void 0 : _b.trim().startsWith("=")))) {
+          rangeHightlightselected(draftCtx, cellEl);
+        }
       });
     }
-  }, [refs.cellInput, refs.fxInput, setContext]);
+  }, [refs.cellInput, refs.fxInput, setContext, appendFormulaHistoryFromPrimaryEditor]);
   var onPaste = useCallback(function (e) {
     if (_.isEmpty(context.luckysheetCellUpdate)) {
       e.preventDefault();
@@ -680,6 +760,7 @@ var InputBox = function InputBox() {
     }
     return activeCell || cell;
   };
+  useRerenderOnFormulaCaret(inputRef, context.luckysheetCellUpdate.length > 0);
   var getFunctionNameFromInput = 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) || "";
@@ -696,8 +777,9 @@ var InputBox = function InputBox() {
     }
     return null;
   }, []);
-  var functionName = context.functionHint || getFunctionNameFromInput();
+  var functionName = (_o = (_m = 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 && getFormulaEditorOwner(context) === "cell";
   var inputBoxBaseSelection = isInputBoxActive && firstSelectionActiveCell ? firstSelectionActiveCell : firstSelection;
   return /*#__PURE__*/React.createElement("div", {
     className: "luckysheet-input-box",
@@ -709,7 +791,7 @@ var InputBox = function InputBox() {
     onMouseUp: function onMouseUp(e) {
       return e.stopPropagation();
     }
-  }, firstSelection && !((_m = context.rangeDialog) === null || _m === void 0 ? void 0 : _m.show) && (/*#__PURE__*/React.createElement("div", {
+  }, firstSelection && !((_p = context.rangeDialog) === null || _p === void 0 ? void 0 : _p.show) && (/*#__PURE__*/React.createElement("div", {
     className: "luckysheet-cell-address-indicator",
     style: getAddressIndicatorPosition()
   }, wraperGetCell())), /*#__PURE__*/React.createElement("div", {
@@ -739,10 +821,23 @@ var InputBox = function InputBox() {
     },
     onMouseUp: function onMouseUp() {
       handleHideShowHint();
+      setContext(function (draftCtx) {
+        setFormulaEditorOwner(draftCtx, "cell");
+      });
       if (!isComposingRef.current) {
         var currentCommaCount = 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 = getFormulaRangeIndexAtCaret(editor) !== null;
+        var atValidInsertionPoint = isCaretAtValidFormulaRangeInsertionPoint(editor);
+        if (clickedInsideManagedRange || !atValidInsertionPoint) {
+          markRangeSelectionDirty(draftCtx);
+        }
+      });
     },
     innerRef: function innerRef(e) {
       inputRef.current = e;
@@ -785,7 +880,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.createElement(React.Fragment, null, showSearchHint && (/*#__PURE__*/React.createElement(FormulaSearch, {
+  })))), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && showCellFormulaChrome && (/*#__PURE__*/React.createElement(React.Fragment, null, showSearchHint && (/*#__PURE__*/React.createElement(FormulaSearch, {
     onMouseMove: function onMouseMove(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
         var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
@@ -800,12 +895,12 @@ var InputBox = function InputBox() {
     }
   })), /*#__PURE__*/React.createElement("div", {
     className: "cell-hint"
-  }, showFormulaHint && fn && (/*#__PURE__*/React.createElement(FormulaHint, {
+  }, showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/React.createElement(FormulaHint, {
     handleShowFormulaHint: handleShowFormulaHint,
     showFormulaHint: showFormulaHint,
     commaCount: commaCount,
     functionName: functionName
-  })), !showFormulaHint && fn && (/*#__PURE__*/React.createElement(Tooltip, {
+  })), !showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/React.createElement(Tooltip, {
     text: "Turn on formula suggestions (F10)",
     placement: "top",
     defaultOpen: true,

package/es/components/SheetOverlay/helper.d.ts

@@ -6,6 +6,8 @@ export declare function buildFormulaSuggestionText(editableDiv: HTMLDivElement,
     caretOffset: number;
 };
 export declare function isLetterNumberPattern(str: string): boolean;
+export declare function shouldShowFormulaFunctionList(editor: HTMLDivElement | null): boolean;
+export declare function getFunctionNameFromFormulaCaretSpans(editor: HTMLDivElement | null): string | null;
 export declare function removeLastSpan(htmlString: string): string;
 export declare function numberToColumn(colNumber: number): string;
 export declare function incrementColumn(cell: string): string;

package/es/components/SheetOverlay/helper.js

@@ -74,6 +74,49 @@ export function isLetterNumberPattern(str) {
   var regex = /^[a-zA-Z]+\d+$/;
   return regex.test(str);
 }
+export function shouldShowFormulaFunctionList(editor) {
+  var _a, _b;
+  if (!editor) return false;
+  if (!((_a = editor.innerText) === null || _a === void 0 ? void 0 : _a.includes("="))) return false;
+  var parser = new DOMParser();
+  var doc = parser.parseFromString("<div>".concat(editor.innerHTML, "</div>"), "text/html");
+  var spans = doc.querySelectorAll("span");
+  var lastSpan = spans[spans.length - 1];
+  var lastText = (_b = lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText) !== null && _b !== void 0 ? _b : "";
+  return /^=?[A-Za-z]*$/.test(lastText);
+}
+var FORMULA_FUNC_CLASS = "luckysheet-formula-text-func";
+var FORMULA_LPAR_CLASS = "luckysheet-formula-text-lpar";
+export function getFunctionNameFromFormulaCaretSpans(editor) {
+  var _a, _b;
+  if (!editor) return null;
+  var sel = window.getSelection();
+  if (!(sel === null || sel === void 0 ? void 0 : sel.rangeCount)) return null;
+  var range = sel.getRangeAt(0);
+  if (!editor.contains(range.startContainer)) return null;
+  var n = range.startContainer;
+  while (n && n !== editor) {
+    if (n.nodeType === Node.ELEMENT_NODE) {
+      var elem = n;
+      if (elem.classList.contains(FORMULA_FUNC_CLASS)) {
+        var next = elem.nextElementSibling;
+        if (next === null || next === void 0 ? void 0 : next.classList.contains(FORMULA_LPAR_CLASS)) {
+          var name_1 = (_a = elem.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+          return name_1 ? name_1.toUpperCase() : null;
+        }
+      }
+      if (elem.classList.contains(FORMULA_LPAR_CLASS)) {
+        var prev = elem.previousElementSibling;
+        if (prev === null || prev === void 0 ? void 0 : prev.classList.contains(FORMULA_FUNC_CLASS)) {
+          var name_2 = (_b = prev.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+          return name_2 ? name_2.toUpperCase() : null;
+        }
+      }
+    }
+    n = n.parentNode;
+  }
+  return null;
+}
 export function removeLastSpan(htmlString) {
   var container = document.createElement("div");
   container.innerHTML = htmlString;