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

package/es/components/SheetOverlay/InputBox.js

@@ -56,31 +56,34 @@ var InputBox = function InputBox() {
   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 _y = useState(!hideFormulaHintLocal),
-    showFormulaHint = _y[0],
-    setShowFormulaHint = _y[1];
-  var _z = useState(false),
-    showSearchHint = _z[0],
-    setShowSearchHint = _z[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 isComposingRef = useRef(false);
   var formulaAnchorCellRef = useRef(null);
   var skipNextAnchorSelectionSyncRef = useRef(false);
   var lastHandledMouseDragSignatureRef = useRef("");
-  var _0 = 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 _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 _1 = useState([]),
-    linkSelectionHighlightRects = _1[0],
-    setLinkSelectionHighlightRects = _1[1];
+  var _2 = useState([]),
+    linkSelectionHighlightRects = _2[0],
+    setLinkSelectionHighlightRects = _2[1];
   var ensureNotEmpty = function ensureNotEmpty() {
     var el = inputRef.current;
     if (!el) return;
@@ -103,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"
         });
@@ -116,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) {
@@ -136,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) {
@@ -155,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);
         });
@@ -175,9 +196,15 @@ var InputBox = function InputBox() {
       if (inputRef.current) {
         inputRef.current.innerHTML = "";
       }
+      delete refs.globalCache.pendingTypeOverCell;
+      setCellEditorIsFormula(false);
       resetFormulaHistory();
     }
-  }, [context.luckysheetCellUpdate, resetFormulaHistory]);
+  }, [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) {
@@ -373,7 +400,7 @@ var InputBox = function InputBox() {
     });
   }, [formulaMouseDragSignature, context.formulaCache.func_selectedrange, refs.cellInput, setContext]);
   var onKeyDown = useCallback(function (e) {
-    var _a, _b;
+    var _a, _b, _c;
     setContext(function (draftCtx) {
       setFormulaEditorOwner(draftCtx, "cell");
     });
@@ -395,9 +422,9 @@ var InputBox = function InputBox() {
       setContext(function (draftCtx) {
         draftCtx.formulaCache.rangeSelectionActive = null;
       });
-      var _c = formulaAnchorCellRef.current,
-        anchorRow_1 = _c[0],
-        anchorCol_1 = _c[1];
+      var _d = formulaAnchorCellRef.current,
+        anchorRow_1 = _d[0],
+        anchorCol_1 = _d[1];
       skipNextAnchorSelectionSyncRef.current = true;
       setTimeout(function () {
         setContext(function (draftCtx) {
@@ -453,6 +480,7 @@ var InputBox = function InputBox() {
     }
     var allowListNavigation = true;
     var isArrowKey = e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "ArrowLeft" || e.key === "ArrowRight";
+    var isInPlaceEditMode = ((_c = refs.globalCache) === null || _c === void 0 ? void 0 : _c.enteredEditByTyping) !== true;
     if (e.key === "Delete" || e.key === "Backspace") {
       var anchor = formulaAnchorCellRef.current;
       if (anchor != null) {
@@ -468,6 +496,12 @@ var InputBox = function InputBox() {
               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);
       }
@@ -498,7 +532,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 && !(e.shiftKey && isInPlaceEditMode)) {
       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");
@@ -517,7 +551,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 && !(e.shiftKey && isInPlaceEditMode)) {
       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");
@@ -535,7 +569,7 @@ var InputBox = function InputBox() {
       }
       e.preventDefault();
     }
-  }, [capturePreFormulaState, clearSearchItemActiveClass, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, 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];
@@ -556,10 +590,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();
-    setShowSearchHint(shouldShowFormulaFunctionList((_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) !== null && _a !== void 0 ? _a : null));
+    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);
@@ -567,7 +603,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);
@@ -582,11 +618,16 @@ var InputBox = function InputBox() {
     });
     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, 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, appendFormulaHistoryFromPrimaryEditor]);

package/es/components/SheetOverlay/index.css

@@ -336,9 +336,9 @@
   overflow: hidden;
   white-space: pre-wrap;
   outline: none;
-  -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
-  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
-  box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
+  /* -webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 40%);
+  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); */
+  /* box-shadow: 0 2px 5px rgb(0 0 0 / 40%); */
   word-wrap: break-word;
   background-color: rgb(255, 255, 255);
   font-size: 13px;
@@ -801,44 +801,11 @@
 }
 
 .fortune-formula-functionrange-highlight .fortune-selection-copy-hc {
-  border: 2px solid #5e5e5e;
-  opacity: 0.03;
+  border-width: 2px;
+  border-style: dotted;
   z-index: initial;
 }
 
-.fortune-selection-highlight-lt {
-  left: -3px;
-  top: -3px;
-  cursor: se-resize;
-}
-
-.fortune-selection-highlight-rt {
-  right: -3px;
-  top: -3px;
-  cursor: ne-resize;
-}
-
-.fortune-selection-highlight-lb {
-  left: -3px;
-  bottom: -3px;
-  cursor: ne-resize;
-}
-
-.fortune-selection-highlight-rb {
-  right: -3px;
-  bottom: -3px;
-  cursor: se-resize;
-}
-
-.fortune-formula-functionrange-highlight .luckysheet-highlight {
-  position: absolute;
-  z-index: 19;
-  border: 1px solid #fff;
-  background: #0188fb;
-  width: 6px;
-  height: 6px;
-}
-
 .fortune-presence-username {
   position: absolute;
   padding-left: 6px;

package/es/components/SheetOverlay/index.js

@@ -10,7 +10,7 @@ var __assign = this && this.__assign || function () {
 };
 import React, { useContext, useCallback, useRef, useEffect, useLayoutEffect, useMemo } from "react";
 import "./index.css";
-import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, isAllowEdit, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@fileverse-dev/fortune-core";
+import { locale, drawArrow, handleCellAreaDoubleClick, handleCellAreaMouseDown, handleContextMenu, handleOverlayMouseMove, handleOverlayMouseUp, selectAll, handleOverlayTouchEnd, handleOverlayTouchStart, createDropCellRange, getCellRowColumn, getCellHyperlink, showLinkCard, isAllowEdit, israngeseleciton, onCellsMoveStart, insertRowCol, getSheetIndex, fixRowStyleOverflowInFreeze, fixColumnStyleOverflowInFreeze, handleKeydownForZoom } from "@fileverse-dev/fortune-core";
 import _ from "lodash";
 import WorkbookContext from "../../context";
 import ColumnHeader from "./ColumnHeader";
@@ -28,6 +28,22 @@ import { useDialog } from "../../hooks/useDialog";
 import DropDownList from "../DataVerification/DropdownList";
 import IframeBoxs from "../IFrameBoxs/iFrameBoxs";
 import ErrorBoxes from "../ErrorState";
+function formulaRangeHighlightHcStyle(hex) {
+  var h = hex.replace("#", "");
+  if (h.length !== 6) {
+    return {
+      backgroundColor: hex,
+      borderColor: hex
+    };
+  }
+  var r = parseInt(h.slice(0, 2), 16);
+  var g = parseInt(h.slice(2, 4), 16);
+  var b = parseInt(h.slice(4, 6), 16);
+  return {
+    backgroundColor: "rgba(".concat(r, ",").concat(g, ",").concat(b, ",0.08)"),
+    borderColor: hex
+  };
+}
 var SheetOverlay = function SheetOverlay() {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
   var _o = useContext(WorkbookContext),
@@ -49,6 +65,7 @@ var SheetOverlay = function SheetOverlay() {
       setContext(function (draftCtx) {
         var _a;
         handleCellAreaMouseDown(draftCtx, refs.globalCache, nativeEvent, refs.cellInput.current, refs.cellArea.current, refs.fxInput.current, refs.canvas.current.getContext("2d"));
+        var keepFormulaBarFocused = draftCtx.luckysheetCellUpdate.length > 0 && draftCtx.formulaCache.formulaEditorOwner === "fx" && (draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || israngeseleciton(draftCtx));
         if (!_.isEmpty((_a = draftCtx.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0]) && refs.cellInput.current) {
           if (!isAllowEdit(draftCtx)) {
             setTimeout(function () {
@@ -60,7 +77,13 @@ var SheetOverlay = function SheetOverlay() {
           } else {
             setTimeout(function () {
               var _a;
-              (_a = refs.cellInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+              if (keepFormulaBarFocused && refs.fxInput.current) {
+                refs.fxInput.current.focus({
+                  preventScroll: true
+                });
+              } else {
+                (_a = refs.cellInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+              }
             });
           }
         }
@@ -290,18 +313,7 @@ var SheetOverlay = function SheetOverlay() {
       });
     }), /*#__PURE__*/React.createElement("div", {
       className: "fortune-selection-copy-hc",
-      style: {
-        backgroundColor: backgroundColor
-      }
-    }), ["lt", "rt", "lb", "rb"].map(function (d) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: d,
-        "data-type": d,
-        className: "fortune-selection-highlight-".concat(d, " luckysheet-highlight"),
-        style: {
-          backgroundColor: backgroundColor
-        }
-      });
+      style: formulaRangeHighlightHcStyle(backgroundColor)
     }));
   }), /*#__PURE__*/React.createElement("div", {
     className: "luckysheet-row-count-show luckysheet-count-show",

package/es/hooks/useRerenderOnFormulaCaret.js

@@ -3,7 +3,9 @@ export function useRerenderOnFormulaCaret(editorRef, editSessionActive) {
   var _a = useState(0),
     bump = _a[1];
   useEffect(function () {
-    if (!editSessionActive) return;
+    if (!editSessionActive) {
+      return function () {};
+    }
     var onSelectionChange = function onSelectionChange() {
       var _a, _b;
       var el = editorRef.current;
@@ -20,7 +22,7 @@ export function useRerenderOnFormulaCaret(editorRef, editSessionActive) {
     };
     document.addEventListener("selectionchange", onSelectionChange);
     return function () {
-      return document.removeEventListener("selectionchange", onSelectionChange);
+      document.removeEventListener("selectionchange", onSelectionChange);
     };
   }, [editSessionActive, editorRef]);
 }

package/lib/components/FxEditor/index.js

@@ -55,6 +55,7 @@ var FxEditor = function FxEditor() {
   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);
@@ -120,13 +121,20 @@ var FxEditor = function FxEditor() {
     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 = "";
-    if (cell && !refs.globalCache.overwriteCell) {
+    var overwrite = refs.globalCache.overwriteCell;
+    if (cell && !overwrite) {
       if ((0, _fortuneCore.isInlineStringCell)(cell)) {
         value = (0, _fortuneCore.getInlineStringNoStyle)(rowIndex, colIndex, flowdata);
       } else if (cell.f) {
@@ -138,7 +146,7 @@ var FxEditor = function FxEditor() {
     refs.globalCache.overwriteCell = false;
     if (!refs.globalCache.ignoreWriteCell && value) {
       fxInput.innerHTML = (0, _fortuneCore.escapeHTMLTag)((0, _fortuneCore.escapeScriptTag)(value));
-    } else if (!refs.globalCache.ignoreWriteCell) {
+    } else if (!refs.globalCache.ignoreWriteCell && !overwrite) {
       var valueD = (0, _fortuneCore.getCellValue)(rowIndex, colIndex, flowdata, "f");
       fxInput.innerText = valueD;
     }
@@ -146,9 +154,21 @@ var FxEditor = function FxEditor() {
   }, [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]);
+  }, [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) {
@@ -156,12 +176,25 @@ 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) {
@@ -220,7 +253,26 @@ var FxEditor = function FxEditor() {
     }
   }, [getActiveFormula, insertSelectedFormula]);
   var onKeyDown = (0, _react.useCallback)(function (e) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
+    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;
     }
@@ -234,7 +286,50 @@ var FxEditor = function FxEditor() {
     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 === "ArrowLeft" || key === "ArrowRight") {
+    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 _e = formulaAnchorCellRef.current,
+        anchorRow_2 = _e[0],
+        anchorCol_2 = _e[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);
+    }
+    var isArrowKey = key === "ArrowUp" || key === "ArrowDown" || key === "ArrowLeft" || key === "ArrowRight";
+    var isDirectPlainTypeEdit = context.luckysheetCellUpdate.length > 0 && ((_d = refs.globalCache) === null || _d === void 0 ? void 0 : _d.enteredEditByTyping) === true && !currentInputText.startsWith("=");
+    var sheetArrowShortcut = isArrowKey && (e.metaKey || e.ctrlKey || e.shiftKey);
+    if ((key === "ArrowLeft" || key === "ArrowRight") && !(isDirectPlainTypeEdit && sheetArrowShortcut)) {
       e.stopPropagation();
     }
     if ((e.metaKey || e.ctrlKey) && context.luckysheetCellUpdate.length > 0) {
@@ -261,7 +356,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");
@@ -280,7 +375,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");
@@ -339,7 +434,7 @@ var FxEditor = function FxEditor() {
         }
       }
     });
-  }, [capturePreFormulaState, context.allowEdit, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, 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];
@@ -360,11 +455,18 @@ var FxEditor = function FxEditor() {
     }
   };
   var onChange = (0, _react.useCallback)(function () {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (context.isFlvReadOnly) return;
+    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]];
+      }
+    }
     handleHideShowHint();
-    setShowSearchHint((0, _helper.shouldShowFormulaFunctionList)((_b = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null));
-    var currentCommaCount = (0, _helper.countCommasBeforeCursor)((_c = refs.fxInput) === null || _c === void 0 ? void 0 : _c.current);
+    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) {
@@ -399,7 +501,7 @@ var FxEditor = function FxEditor() {
         (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.cellInput.current, refs.fxInput.current, kcode, recentText.current);
       });
     }
-  }, [appendFormulaHistoryFromPrimaryEditor, context.isFlvReadOnly, 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;
@@ -454,7 +556,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",