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

package/es/components/ContextMenu/index.js

@@ -129,7 +129,7 @@ import "./index.css";
 import Menu from "./Menu";
 import "tippy.js/dist/tippy.css";
 import SVGIcon from "../SVGIcon";
-import { LucideIcon as LocalLucidIcon } from "../../components/SheetOverlay/LucideIcon";
+import { LucideIcon as LocalLucidIcon } from "../SheetOverlay/LucideIcon";
 var ContextMenu = function ContextMenu() {
   var showDialog = useDialog().showDialog;
   var containerRef = useRef(null);

package/es/components/FxEditor/index.js

@@ -1,47 +1,73 @@
-import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, rangeHightlightselected, valueShowEs, isShowHidenCR, escapeHTMLTag, isAllowEdit } from "@fileverse-dev/fortune-core";
-import React, { useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";
+import { getFlowdata, cancelNormalSelected, getCellValue, updateCell, getInlineStringNoStyle, isInlineStringCell, escapeScriptTag, moveHighlightCell, handleFormulaInput, getFormulaRangeIndexAtCaret, isCaretAtValidFormulaRangeInsertionPoint, markRangeSelectionDirty, rangeHightlightselected, getFormulaEditorOwner, setFormulaEditorOwner, valueShowEs, isShowHidenCR, escapeHTMLTag, functionHTMLGenerate, isAllowEdit } from "@fileverse-dev/fortune-core";
+import React, { useContext, useState, useCallback, useEffect, useLayoutEffect, useRef, useMemo } from "react";
 import "./index.css";
 import _ from "lodash";
+import { Tooltip } from "@fileverse/ui";
 import WorkbookContext from "../../context";
 import ContentEditable from "../SheetOverlay/ContentEditable";
 import NameBox from "./NameBox";
-import FormulaSearch from "../../components/SheetOverlay/FormulaSearch";
-import FormulaHint from "../../components/SheetOverlay/FormulaHint";
+import FormulaSearch from "../SheetOverlay/FormulaSearch";
+import FormulaHint from "../SheetOverlay/FormulaHint";
 import usePrevious from "../../hooks/usePrevious";
-import { LucideIcon } from "../../components/SheetOverlay/LucideIcon";
-import { countCommasBeforeCursor, isLetterNumberPattern, moveCursorToEnd } from "../../components/SheetOverlay/helper";
+import { useFormulaEditorHistory } from "../../hooks/useFormulaEditorHistory";
+import { useRerenderOnFormulaCaret } from "../../hooks/useRerenderOnFormulaCaret";
+import { LucideIcon } from "../SheetOverlay/LucideIcon";
+import { countCommasBeforeCursor, getCursorPosition, getFunctionNameFromFormulaCaretSpans, isLetterNumberPattern, setCursorPosition, buildFormulaSuggestionText, shouldShowFormulaFunctionList } from "../SheetOverlay/helper";
 var FxEditor = function FxEditor() {
-  var _a;
+  var _a, _b, _c;
   var hideFormulaHintLocal = localStorage.getItem("formulaMore") === "true";
-  var _b = useState(false),
-    showSearchHint = _b[0],
-    setShowSearchHint = _b[1];
-  var _c = useState(!hideFormulaHintLocal),
-    showFormulaHint = _c[0],
-    setShowFormulaHint = _c[1];
-  var _d = useState(0),
-    commaCount = _d[0],
-    setCommaCount = _d[1];
-  var _e = useContext(WorkbookContext),
-    context = _e.context,
-    setContext = _e.setContext,
-    refs = _e.refs;
+  var _d = useState(false),
+    showSearchHint = _d[0],
+    setShowSearchHint = _d[1];
+  var _e = useState(!hideFormulaHintLocal),
+    showFormulaHint = _e[0],
+    setShowFormulaHint = _e[1];
+  var _f = useState(0),
+    commaCount = _f[0],
+    setCommaCount = _f[1];
+  var _g = useContext(WorkbookContext),
+    context = _g.context,
+    setContext = _g.setContext,
+    refs = _g.refs;
   var lastKeyDownEventRef = useRef(null);
+  var _h = 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 = useRef(null);
-  var _f = useState(false),
-    isHidenRC = _f[0],
-    setIsHidenRC = _f[1];
+  var _j = 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 = usePrevious(firstSelection);
+  var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
   var prevSheetId = usePrevious(context.currentSheetId);
   var recentText = useRef("");
   var handleShowFormulaHint = function handleShowFormulaHint() {
     localStorage.setItem("formulaMore", String(showFormulaHint));
     setShowFormulaHint(!showFormulaHint);
   };
+  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]);
   useEffect(function () {
     var _a;
     setIsHidenRC(isShowHidenCR(context));
+    if (context.luckysheetCellUpdate.length > 0) {
+      return;
+    }
     if (_.isEqual(prevFirstSelection, firstSelection) && context.currentSheetId === prevSheetId) {
       return;
     }
@@ -65,7 +91,55 @@ 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]);
+  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 (_.isEqual(prevCellUpdate, context.luckysheetCellUpdate) && prevSheetId === context.currentSheetId) {
+      return;
+    }
+    var _b = context.luckysheetCellUpdate,
+      rowIndex = _b[0],
+      colIndex = _b[1];
+    if (_.isNil(rowIndex) || _.isNil(colIndex)) {
+      return;
+    }
+    var flowdata = 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) {
+      if (isInlineStringCell(cell)) {
+        value = getInlineStringNoStyle(rowIndex, colIndex, flowdata);
+      } else if (cell.f) {
+        value = getCellValue(rowIndex, colIndex, flowdata, "f");
+      } else {
+        value = valueShowEs(rowIndex, colIndex, flowdata);
+      }
+    }
+    refs.globalCache.overwriteCell = false;
+    if (!refs.globalCache.ignoreWriteCell && value) {
+      fxInput.innerHTML = escapeHTMLTag(escapeScriptTag(value));
+    } else if (!refs.globalCache.ignoreWriteCell) {
+      var valueD = getCellValue(rowIndex, colIndex, flowdata, "f");
+      fxInput.innerText = valueD;
+    }
+    refs.globalCache.ignoreWriteCell = false;
+  }, [context.luckysheetCellUpdate, context.luckysheetfile, context.currentSheetId, prevCellUpdate, prevSheetId, refs.fxInput, refs.globalCache]);
+  useEffect(function () {
+    if (_.isEmpty(context.luckysheetCellUpdate)) {
+      resetFormulaHistory();
+    }
+  }, [context.luckysheetCellUpdate, resetFormulaHistory]);
   var onFocus = useCallback(function () {
     var _a, _b;
     if (context.allowEdit === false) {
@@ -73,6 +147,7 @@ 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 && isAllowEdit(context, context.luckysheet_select_save)) {
       setContext(function (draftCtx) {
+        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;
@@ -80,24 +155,34 @@ var FxEditor = function FxEditor() {
         refs.globalCache.doNotFocus = true;
       });
     }
+    setContext(function (draftCtx) {
+      setFormulaEditorOwner(draftCtx, "fx");
+    });
   }, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, refs.globalCache, setContext]);
   var getActiveFormula = useCallback(function () {
     return document.querySelector(".luckysheet-formula-search-item-active");
   }, []);
   var insertSelectedFormula = useCallback(function (formulaName) {
-    var ht = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span><span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>");
-    refs.fxInput.current.innerHTML = ht;
+    var fxEditor = refs.fxInput.current;
+    if (!fxEditor) return;
     var cellEditor = document.getElementById("luckysheet-rich-text-editor");
+    var _a = buildFormulaSuggestionText(fxEditor, formulaName),
+      text = _a.text,
+      caretOffset = _a.caretOffset;
+    var safeText = escapeScriptTag(text);
+    var html = safeText.startsWith("=") ? functionHTMLGenerate(safeText) : escapeHTMLTag(safeText);
+    fxEditor.innerHTML = html;
     if (cellEditor) {
-      cellEditor.innerHTML = ht;
+      cellEditor.innerHTML = html;
     }
-    moveCursorToEnd(refs.fxInput.current);
+    setCursorPosition(fxEditor, caretOffset);
+    setShowSearchHint(shouldShowFormulaFunctionList(fxEditor));
     setContext(function (draftCtx) {
       draftCtx.functionCandidates = [];
       draftCtx.defaultCandidates = [];
-      draftCtx.functionHint = formulaName;
+      draftCtx.functionHint = (formulaName || "").toUpperCase();
     });
-  }, [setContext]);
+  }, [refs.fxInput, setContext]);
   var clearSearchItemActiveClass = useCallback(function () {
     var activeFormula = getActiveFormula();
     if (activeFormula) {
@@ -113,10 +198,11 @@ var FxEditor = function FxEditor() {
     return lastSpan === null || lastSpan === void 0 ? void 0 : lastSpan.innerText;
   };
   var selectActiveFormulaOnClick = 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 && !isLetterNumberPattern(lastSpanText)) {
       insertSelectedFormula(formulaName);
@@ -125,18 +211,36 @@ var FxEditor = function FxEditor() {
     }
   }, [getActiveFormula, insertSelectedFormula]);
   var onKeyDown = useCallback(function (e) {
-    var _a;
+    var _a, _b, _c;
     if (context.allowEdit === false) {
       return;
     }
+    setContext(function (draftCtx) {
+      setFormulaEditorOwner(draftCtx, "fx");
+    });
     var currentCommaCount = 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 === "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 ");
@@ -226,7 +330,7 @@ var FxEditor = function FxEditor() {
         }
       }
     });
-  }, [context.allowEdit, context.luckysheetCellUpdate.length, refs.fxInput, setContext]);
+  }, [capturePreFormulaState, context.allowEdit, context.luckysheetCellUpdate.length, handleFormulaHistoryUndoRedo, 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];
@@ -250,23 +354,44 @@ var FxEditor = function FxEditor() {
     var _a, _b, _c;
     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);
-    }
+    setShowSearchHint(shouldShowFormulaFunctionList((_b = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current) !== null && _b !== void 0 ? _b : null));
     var currentCommaCount = countCommasBeforeCursor((_c = refs.fxInput) === null || _c === void 0 ? void 0 : _c.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 (!isAllowEdit(draftCtx, draftCtx.luckysheet_select_save)) return;
+          rangeHightlightselected(draftCtx, editor_1);
+        });
+      }
+      return;
+    }
     var kcode = e.keyCode;
     if (!kcode) return;
+    appendFormulaHistoryFromPrimaryEditor(function () {
+      return 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) {
         handleFormulaInput(draftCtx, refs.cellInput.current, refs.fxInput.current, kcode, recentText.current);
       });
     }
-  }, [refs.cellInput, refs.fxInput, setContext]);
+  }, [appendFormulaHistoryFromPrimaryEditor, context.isFlvReadOnly, refs.cellInput, refs.fxInput, setContext]);
+  useRerenderOnFormulaCaret(refs.fxInput, context.luckysheetCellUpdate.length > 0);
   var getFunctionNameFromInput = 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) || "";
@@ -283,8 +408,9 @@ var FxEditor = function FxEditor() {
     }
     return null;
   }, []);
-  var functionName = context.functionHint || getFunctionNameFromInput();
+  var functionName = (_c = (_b = 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 && getFormulaEditorOwner(context) === "fx";
   var allowEdit = useMemo(function () {
     if (context.allowEdit === false) {
       return false;
@@ -298,9 +424,9 @@ var FxEditor = function FxEditor() {
     return true;
   }, [context.config, context.luckysheet_select_save, context.luckysheetfile, context.currentSheetId, isHidenRC]);
   var divRef = useRef(null);
-  var _g = useState(false),
-    isResizing = _g[0],
-    setIsResizing = _g[1];
+  var _k = useState(false),
+    isResizing = _k[0],
+    setIsResizing = _k[1];
   var startResize = function startResize(e) {
     e.preventDefault();
     setIsResizing(true);
@@ -346,8 +472,20 @@ var FxEditor = function FxEditor() {
     onMouseUp: function onMouseUp() {
       var _a;
       handleHideShowHint();
-      var currentCommaCount = countCommasBeforeCursor((_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current);
+      setContext(function (draftCtx) {
+        setFormulaEditorOwner(draftCtx, "fx");
+      });
+      var editor = (_a = refs.fxInput) === null || _a === void 0 ? void 0 : _a.current;
+      var currentCommaCount = countCommasBeforeCursor(editor);
       setCommaCount(currentCommaCount);
+      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) {
       refs.fxInput.current = e;
@@ -360,7 +498,7 @@ var FxEditor = function FxEditor() {
     onChange: onChange,
     tabIndex: 0,
     allowEdit: allowEdit && !context.isFlvReadOnly
-  }), showSearchHint && (/*#__PURE__*/React.createElement(FormulaSearch, {
+  }), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0 || fn) && showFxFormulaChrome && (/*#__PURE__*/React.createElement(React.Fragment, null, showSearchHint && (/*#__PURE__*/React.createElement(FormulaSearch, {
     from: "fx",
     onMouseMove: function onMouseMove(e) {
       if (document.getElementById("luckysheet-formula-search-c")) {
@@ -376,12 +514,22 @@ var FxEditor = function FxEditor() {
     }
   })), /*#__PURE__*/React.createElement("div", {
     className: "fx-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("div", {
+  })), !showFormulaHint && fn && !showSearchHint && (/*#__PURE__*/React.createElement(Tooltip, {
+    text: "Turn on formula suggestions (F10)",
+    placement: "top",
+    defaultOpen: true,
+    style: {
+      position: "absolute",
+      top: "-50px",
+      left: "-130px",
+      width: "210px"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     className: "luckysheet-hin absolute show-more-btn",
     onClick: function onClick() {
       handleShowFormulaHint();
@@ -395,7 +543,7 @@ var FxEditor = function FxEditor() {
       margin: "auto",
       marginTop: "1px"
     }
-  })))))), /*#__PURE__*/React.createElement("div", {
+  }))))))))), /*#__PURE__*/React.createElement("div", {
     className: "resize-handle",
     onMouseDown: startResize,
     style: {