@fileverse-dev/fortune-react 1.1.0 → 1.1.2

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

@@ -0,0 +1,270 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _lodash = _interopRequireDefault(require("lodash"));
+var _react = _interopRequireWildcard(require("react"));
+var _ui = require("@fileverse/ui");
+var _constant = require("./constant");
+var _context = _interopRequireDefault(require("../../../context"));
+require("./index.css");
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var FormulaSearch = function FormulaSearch(props) {
+  var _a;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    isAuthorized = _b.settings.isAuthorized;
+  var authedFunction = ["COINGECKO", "ETHERSCAN", "DEFILLAMA", "GNOSIS", "BASE", "EOA", "PNL", "SAFE", "BLOCKSCOUT", "GNOSIS", "LENS", "FARCASTER", "Ethereum", "SMARTCONTRACT", "DUNESIM"];
+  var filteredDefaultCandidates = context.defaultCandidates.filter(function (item) {
+    return !authedFunction.includes(item.n);
+  });
+  var unfilteredDefaultCandidates = _constant.UNFilter.filter(function (item) {
+    return item.n !== "PNL";
+  });
+  var finalDefaultCandidates = !isAuthorized ? filteredDefaultCandidates : context.defaultCandidates.slice(0, 10);
+  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 hintRef = (0, _react.useRef)(null);
+  var _c = (0, _react.useState)(0),
+    top = _c[0],
+    setTop = _c[1];
+  var calcuatePopUpPlacement = function calcuatePopUpPlacement() {
+    var _a, _b, _c;
+    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 inputBottom = firstSelection.top + 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 = ((_c = hintRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) || 0;
+    setTop(hintAbove ? selectionHeight - (divOffset + 30) : selectionHeight + 4);
+  };
+  (0, _react.useEffect)(function () {
+    calcuatePopUpPlacement();
+  });
+  if (_lodash.default.isEmpty(context.functionCandidates) && _lodash.default.isEmpty(context.defaultCandidates)) return null;
+  return /*#__PURE__*/_react.default.createElement("div", __assign({}, props, {
+    ref: hintRef,
+    id: "luckysheet-formula-search-c",
+    className: "luckysheet-formula-search-c",
+    style: {
+      top: top
+    }
+  }), context.defaultCandidates.length > 0 && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: "4px"
+    },
+    className: "w-full flex flex-col p-2 gap-1"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "text-helper-sm-bold color-text-secondary"
+  }, "Onchain functions"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-helper-text-sm color-text-secondary"
+  }, "Every onchain function is a native data structure allowing dSheets to read and structure data from smart contracts and APIs.")), !isAuthorized && (/*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      backgroundColor: "#F8F9FA"
+    },
+    className: "w-full flex flex-col p-2 gap-1"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "font-semibold"
+  }, "dSheets account required"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-helper-text-sm color-text-secondary"
+  }, "Use more onchain functions by creating a dSheets account.", " ", /*#__PURE__*/_react.default.createElement("span", {
+    className: "sign-fortune",
+    style: {
+      color: "#5C0AFF",
+      cursor: "pointer"
+    },
+    onClick: function onClick(e) {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      (_a = document.getElementById("triggerAuth")) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }, "Signup/Login")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex gap-2 mt-2 mb-2"
+  }, unfilteredDefaultCandidates.map(function (v, index) {
+    return /*#__PURE__*/_react.default.createElement("img", {
+      key: index,
+      src: v.LOGO,
+      alt: "Service Logo",
+      style: {
+        width: "16px",
+        height: "16px"
+      }
+    });
+  })))))), context.defaultCandidates.length > 0 ? (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalDefaultCandidates.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: v.n,
+      "data-func": v.n,
+      style: {
+        cursor: "pointer"
+      },
+      className: "luckysheet-formula-search-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-formula-search-func color-text-default text-body-sm"
+    }, v.n), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        minWidth: "68px",
+        alignItems: "center",
+        gap: "6px"
+      }
+    }, v.LOGO && (/*#__PURE__*/_react.default.createElement("img", {
+      src: v.LOGO,
+      alt: "Service Logo",
+      style: {
+        width: "16px"
+      }
+    })), v.SECONDARY_LOGO && (/*#__PURE__*/_react.default.createElement("img", {
+      src: v.SECONDARY_LOGO,
+      alt: "Service Logo",
+      style: {
+        width: "16px"
+      }
+    })), v.API_KEY && (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+      text: localStorage.getItem(v.API_KEY) ? "API Key added" : "API key required"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        borderRadius: "4px",
+        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#e8ebec"),
+        width: "16px",
+        height: "16px"
+      },
+      className: "flex justify-center"
+    }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+      name: "Key",
+      style: {
+        color: localStorage.getItem(v.API_KEY) ? "white" : "#77818A",
+        width: "12px",
+        height: "12px"
+      }
+    })))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm  color-text-default"
+    }, v.d));
+  }))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, finalFunctionCandidates.length > 0 && finalFunctionCandidates.map(function (v) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: v.n,
+      "data-func": v.n,
+      className: "luckysheet-formula-search-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between"
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-formula-search-func color-text-default text-body-sm"
+    }, v.n), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        width: "68px",
+        alignItems: "center",
+        gap: "6px"
+      }
+    }, v.LOGO && (/*#__PURE__*/_react.default.createElement("img", {
+      src: v.LOGO,
+      alt: "Service Logo",
+      style: {
+        width: "16px"
+      }
+    })), v.SECONDARY_LOGO && (/*#__PURE__*/_react.default.createElement("img", {
+      src: v.SECONDARY_LOGO,
+      alt: "Service Logo",
+      style: {
+        width: "16px"
+      }
+    })), v.API_KEY && (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+      text: localStorage.getItem(v.API_KEY) ? "API Key added" : "API Key required"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        borderRadius: "4px",
+        backgroundColor: "".concat(localStorage.getItem(v.API_KEY) ? "#177E23" : "#e8ebec"),
+        width: "16px",
+        height: "16px"
+      },
+      className: "flex justify-center"
+    }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
+      name: "Key",
+      style: {
+        color: localStorage.getItem(v.API_KEY) ? "white" : "#77818A",
+        width: "12px",
+        height: "12px"
+      }
+    })))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "luckysheet-formula-search-detail mt-1 text-helper-text-sm color-text-secondary"
+    }, v.d));
+  }), finalFunctionCandidates.length === 0 && (/*#__PURE__*/_react.default.createElement("span", null, !isAuthorized && (/*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: "8px",
+      backgroundColor: "#F8F9FA"
+    },
+    className: "w-full flex flex-col p-2 gap-1"
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    className: "text-helper-sm-bold",
+    style: {
+      fontWeight: "bold"
+    }
+  }, "dSheets account required"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-helper-text-sm color-text-secondary"
+  }, "Use more onchain functions by creating a dSheets account.", " ", /*#__PURE__*/_react.default.createElement("span", {
+    className: "sign-fortune",
+    style: {
+      color: "#5C0AFF",
+      cursor: "pointer"
+    },
+    onClick: function onClick(e) {
+      var _a;
+      e.stopPropagation();
+      e.preventDefault();
+      (_a = document.getElementById("triggerAuth")) === null || _a === void 0 ? void 0 : _a.click();
+    }
+  }, "Signup/Login")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex gap-2 mt-2 mb-2"
+  }, unfilteredDefaultCandidates.map(function (v, index) {
+    return /*#__PURE__*/_react.default.createElement("img", {
+      key: index,
+      src: v.LOGO,
+      alt: "Service Logo",
+      style: {
+        width: "16px",
+        height: "16px"
+      }
+    });
+  })))))))), /*#__PURE__*/_react.default.createElement("hr", {
+    className: "color-border-default mb-2 mt-4 "
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      paddingLeft: "10px",
+      paddingRight: "10px"
+    },
+    className: "flex gap-1 items-center color-border-default text-helper-sm"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "border p-1 color-text-default rounded"
+  }, "Tab"), /*#__PURE__*/_react.default.createElement("p", {
+    className: "color-text-secondary"
+  }, "to insert")));
+};
+var _default = exports.default = FormulaSearch;

package/lib/components/SheetOverlay/InputBox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const InputBox: React.FC;
+export default InputBox;

package/lib/components/SheetOverlay/InputBox.js

@@ -0,0 +1,404 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _react = _interopRequireWildcard(require("react"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _ContentEditable = _interopRequireDefault(require("./ContentEditable"));
+var _FormulaSearch = _interopRequireDefault(require("./FormulaSearch"));
+var _FormulaHint = _interopRequireDefault(require("./FormulaHint"));
+var _usePrevious = _interopRequireDefault(require("../../hooks/usePrevious"));
+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 __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var InputBox = function InputBox() {
+  var _a, _b, _c, _d, _e, _f;
+  var _g = (0, _react.useContext)(_context.default),
+    context = _g.context,
+    setContext = _g.setContext,
+    refs = _g.refs;
+  var inputRef = (0, _react.useRef)(null);
+  var lastKeyDownEventRef = (0, _react.useRef)(null);
+  var prevCellUpdate = (0, _usePrevious.default)(context.luckysheetCellUpdate);
+  var prevSheetId = (0, _usePrevious.default)(context.currentSheetId);
+  var _h = (0, _react.useState)(false),
+    isHidenRC = _h[0],
+    setIsHidenRC = _h[1];
+  var _j = (0, _react.useState)(false),
+    isInputBoxActive = _j[0],
+    setIsInputBoxActive = _j[1];
+  var _k = (0, _react.useState)({
+      left: 0,
+      top: 0
+    }),
+    frozenPosition = _k[0],
+    setFrozenPosition = _k[1];
+  var firstSelection = (_a = context.luckysheet_select_save) === null || _a === void 0 ? void 0 : _a[0];
+  var row_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.row_focus;
+  var col_index = firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.column_focus;
+  var preText = (0, _react.useRef)("");
+  var inputBoxStyle = (0, _react.useMemo)(function () {
+    if (firstSelection && context.luckysheetCellUpdate.length > 0) {
+      var flowdata = (0, _fortuneCore.getFlowdata)(context);
+      if (!flowdata) return {};
+      return (0, _fortuneCore.getStyleByCell)(context, flowdata, firstSelection.row_focus, firstSelection.column_focus);
+    }
+    return {};
+  }, [context.luckysheetfile, context.currentSheetId, context.luckysheetCellUpdate, firstSelection]);
+  (0, _react.useLayoutEffect)(function () {
+    var _a;
+    if (!context.allowEdit) {
+      setContext(function (ctx) {
+        var flowdata = (0, _fortuneCore.getFlowdata)(ctx);
+        if (!_lodash.default.isNil(flowdata) && ctx.forceFormulaRef) {
+          var value = (0, _fortuneCore.getCellValue)(row_index, col_index, flowdata, "f");
+          (0, _fortuneCore.createRangeHightlight)(ctx, value);
+        }
+      });
+    }
+    if (firstSelection && context.luckysheetCellUpdate.length > 0) {
+      if (refs.globalCache.doNotUpdateCell) {
+        delete refs.globalCache.doNotUpdateCell;
+        return;
+      }
+      if (_lodash.default.isEqual(prevCellUpdate, context.luckysheetCellUpdate) && prevSheetId === context.currentSheetId) {
+        return;
+      }
+      var flowdata = (0, _fortuneCore.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 value_1 = "";
+      if (cell && !refs.globalCache.overwriteCell) {
+        if ((0, _fortuneCore.isInlineStringCell)(cell)) {
+          value_1 = (0, _fortuneCore.getInlineStringHTML)(row_index, col_index, flowdata);
+        } else if (cell.f) {
+          value_1 = (0, _fortuneCore.getCellValue)(row_index, col_index, flowdata, "f");
+          setContext(function (ctx) {
+            (0, _fortuneCore.createRangeHightlight)(ctx, value_1);
+          });
+        } else {
+          value_1 = (0, _fortuneCore.valueShowEs)(row_index, col_index, flowdata);
+          if (Number(cell.qp) === 1) {
+            value_1 = value_1 ? "".concat(value_1) : value_1;
+          }
+        }
+      }
+      refs.globalCache.overwriteCell = false;
+      if (!refs.globalCache.ignoreWriteCell) inputRef.current.innerHTML = (0, _fortuneCore.escapeHTMLTag)((0, _fortuneCore.escapeScriptTag)(value_1));
+      refs.globalCache.ignoreWriteCell = false;
+      if (!refs.globalCache.doNotFocus) {
+        setTimeout(function () {
+          (0, _fortuneCore.moveToEnd)(inputRef.current);
+        });
+      }
+      delete refs.globalCache.doNotFocus;
+    }
+  }, [context.luckysheetCellUpdate, context.luckysheetfile, context.currentSheetId, firstSelection]);
+  (0, _react.useEffect)(function () {
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      if (inputRef.current) {
+        inputRef.current.innerHTML = "";
+      }
+    }
+  }, [context.luckysheetCellUpdate]);
+  (0, _react.useEffect)(function () {
+    setIsHidenRC((0, _fortuneCore.isShowHidenCR)(context));
+  }, [context.luckysheet_select_save]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) || _lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      setIsInputBoxActive(false);
+    }
+  }, [firstSelection, (_b = context.rangeDialog) === null || _b === void 0 ? void 0 : _b.show, context.luckysheetCellUpdate]);
+  var getActiveFormula = (0, _react.useCallback)(function () {
+    return document.querySelector(".luckysheet-formula-search-item-active");
+  }, []);
+  var insertSelectedFormula = (0, _react.useCallback)(function (formulaName) {
+    var _a;
+    var textEditor = document.getElementById("luckysheet-rich-text-editor");
+    if (!textEditor) return;
+    textEditor.focus();
+    var selection = window.getSelection();
+    var range = (selection === null || selection === void 0 ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+    if (!selection || !range || !textEditor.contains(range.startContainer)) {
+      range = document.createRange();
+      range.selectNodeContents(textEditor);
+      range.collapse(false);
+      selection = window.getSelection();
+      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+    }
+    var searchTxt = ((_a = (0, _fortuneCore.getrangeseleciton)()) === null || _a === void 0 ? void 0 : _a.textContent) || "";
+    var deleteCount = searchTxt === "=" ? 0 : searchTxt.length;
+    if (deleteCount > 0 && range.startContainer.nodeType === Node.TEXT_NODE && textEditor.contains(range.startContainer)) {
+      var startOffset = Math.max(range.startOffset - deleteCount, 0);
+      var endOffset = range.startOffset;
+      range.setStart(range.startContainer, startOffset);
+      range.setEnd(range.startContainer, endOffset);
+      range.deleteContents();
+    }
+    textEditor.querySelectorAll(".luckysheet-formula-text-func, .luckysheet-formula-text-lpar").forEach(function (el) {
+      return el.remove();
+    });
+    var funcNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-func\">".concat(formulaName, "</span>"), "text/html").body.firstChild;
+    var parNode = new DOMParser().parseFromString("<span dir=\"auto\" class=\"luckysheet-formula-text-lpar\">(</span>", "text/html").body.firstChild;
+    if (range && parNode && funcNode) {
+      range.insertNode(funcNode);
+      range.collapse(false);
+      range.insertNode(parNode);
+      range.collapse(false);
+      selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+      selection === null || selection === void 0 ? void 0 : selection.addRange(range);
+    }
+    setContext(function (draftCtx) {
+      draftCtx.functionCandidates = [];
+      draftCtx.defaultCandidates = [];
+      draftCtx.functionHint = formulaName;
+    });
+  }, [setContext]);
+  var clearSearchItemActiveClass = (0, _react.useCallback)(function () {
+    var activeFormula = getActiveFormula();
+    if (activeFormula) {
+      activeFormula.classList.remove("luckysheet-formula-search-item-active");
+    }
+  }, [getActiveFormula]);
+  var selectActiveFormula = (0, _react.useCallback)(function (e) {
+    var _a, _b;
+    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;
+    if (formulaName) {
+      insertSelectedFormula(formulaName);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [getActiveFormula, insertSelectedFormula]);
+  var selectActiveFormulaOnClick = (0, _react.useCallback)(function (e) {
+    var _a, _b;
+    if (e.target.className.includes("sign-fortune")) return;
+    preText.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;
+    if (formulaName) {
+      insertSelectedFormula(formulaName);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, [getActiveFormula, insertSelectedFormula]);
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    lastKeyDownEventRef.current = new KeyboardEvent(e.type, e.nativeEvent);
+    preText.current = inputRef.current.innerText;
+    if (e.key === "Escape" && context.luckysheetCellUpdate.length > 0) {
+      setContext(function (draftCtx) {
+        (0, _fortuneCore.cancelNormalSelected)(draftCtx);
+        (0, _fortuneCore.moveHighlightCell)(draftCtx, "down", 0, "rangeOfSelect");
+      });
+      e.preventDefault();
+    } else if (e.key === "Enter" && context.luckysheetCellUpdate.length > 0) {
+      if (e.altKey || e.metaKey) {
+        document.execCommand("insertHTML", false, "\n ");
+        document.execCommand("delete", false);
+        e.stopPropagation();
+      } else selectActiveFormula(e);
+    } else if (e.key === "Tab" && context.luckysheetCellUpdate.length > 0) {
+      selectActiveFormula(e);
+      e.preventDefault();
+    } else if (e.key === "F4" && context.luckysheetCellUpdate.length > 0) {
+      e.preventDefault();
+    } else if (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");
+        var previousItem = activeItem ? activeItem.previousElementSibling : null;
+        while (previousItem && !previousItem.classList.contains("luckysheet-formula-search-item")) {
+          previousItem = previousItem.previousElementSibling;
+        }
+        if (!previousItem) {
+          var items = formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelectorAll(".luckysheet-formula-search-item");
+          var lastItem = items === null || items === void 0 ? void 0 : items[items.length - 1];
+          previousItem = lastItem || null;
+        }
+        clearSearchItemActiveClass();
+        if (previousItem) {
+          previousItem.classList.add("luckysheet-formula-search-item-active");
+        }
+      }
+      e.preventDefault();
+    } else if (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");
+        var nextItem = activeItem ? activeItem.nextElementSibling : null;
+        while (nextItem && !nextItem.classList.contains("luckysheet-formula-search-item")) {
+          nextItem = nextItem.nextElementSibling;
+        }
+        if (!nextItem) {
+          nextItem = (formulaSearchContainer === null || formulaSearchContainer === void 0 ? void 0 : formulaSearchContainer.querySelector(".luckysheet-formula-search-item")) || null;
+        }
+        clearSearchItemActiveClass();
+        if (nextItem) {
+          nextItem.classList.add("luckysheet-formula-search-item-active");
+        }
+      }
+      e.preventDefault();
+    }
+  }, [clearSearchItemActiveClass, context.luckysheetCellUpdate.length, selectActiveFormula, setContext, firstSelection]);
+  var onChange = (0, _react.useCallback)(function (__, isBlur) {
+    var e = lastKeyDownEventRef.current;
+    if (!e) return;
+    var kcode = e.keyCode;
+    if (!kcode) return;
+    if (!(kcode >= 112 && kcode <= 123 || kcode <= 46 || kcode === 144 || kcode === 108 || e.ctrlKey || e.altKey || e.shiftKey && (kcode === 37 || kcode === 38 || kcode === 39 || kcode === 40)) || kcode === 8 || kcode === 32 || kcode === 46 || e.ctrlKey && kcode === 86) {
+      setContext(function (draftCtx) {
+        if ((draftCtx.formulaCache.rangestart || draftCtx.formulaCache.rangedrag_column_start || draftCtx.formulaCache.rangedrag_row_start || (0, _fortuneCore.israngeseleciton)(draftCtx)) && isBlur) return;
+        if (!(0, _fortuneCore.isAllowEdit)(draftCtx, draftCtx.luckysheet_select_save)) {
+          return;
+        }
+        (0, _fortuneCore.handleFormulaInput)(draftCtx, refs.fxInput.current, refs.cellInput.current, kcode, preText.current);
+      });
+    }
+  }, [refs.cellInput, refs.fxInput, setContext]);
+  var onPaste = (0, _react.useCallback)(function (e) {
+    if (_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      e.preventDefault();
+    }
+  }, [context.luckysheetCellUpdate]);
+  var cfg = context.config || {};
+  var rowReadOnly = cfg.rowReadOnly || {};
+  var colReadOnly = cfg.colReadOnly || {};
+  var edit = !((colReadOnly[col_index] || rowReadOnly[row_index]) && context.allowEdit === true);
+  var getInputBoxPosition = (0, _react.useCallback)(function () {
+    var _a;
+    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
+      return {
+        left: -10000,
+        top: -10000,
+        display: "block"
+      };
+    }
+    var canvasContainer = refs.cellArea.current;
+    if (!canvasContainer) {
+      return {
+        left: firstSelection.left || 0,
+        top: firstSelection.top || 0,
+        display: "block"
+      };
+    }
+    if (isInputBoxActive) {
+      return {
+        left: frozenPosition.left,
+        top: frozenPosition.top,
+        zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
+        display: "block"
+      };
+    }
+    var containerRect = canvasContainer.getBoundingClientRect();
+    var initialLeft = containerRect.left + (firstSelection.left || 0) - context.scrollLeft;
+    var initialTop = containerRect.top + (firstSelection.top || 0) - context.scrollTop;
+    return {
+      left: initialLeft,
+      top: initialTop,
+      zIndex: _lodash.default.isEmpty(context.luckysheetCellUpdate) ? -1 : 19,
+      display: "block"
+    };
+  }, [firstSelection, (_c = context.rangeDialog) === null || _c === void 0 ? void 0 : _c.show, context.luckysheetCellUpdate, refs.cellArea, isInputBoxActive, frozenPosition, context.scrollLeft, context.scrollTop]);
+  (0, _react.useEffect)(function () {
+    var _a;
+    if (firstSelection && !((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show) && !isInputBoxActive && !_lodash.default.isEmpty(context.luckysheetCellUpdate)) {
+      var canvasContainer = refs.cellArea.current;
+      if (canvasContainer) {
+        var containerRect = canvasContainer.getBoundingClientRect();
+        var initialLeft = containerRect.left + (firstSelection.left || 0) - context.scrollLeft;
+        var initialTop = containerRect.top + (firstSelection.top || 0) - context.scrollTop;
+        setFrozenPosition({
+          left: initialLeft,
+          top: initialTop
+        });
+        setIsInputBoxActive(true);
+      }
+    }
+  }, [firstSelection, (_d = context.rangeDialog) === null || _d === void 0 ? void 0 : _d.show, context.luckysheetCellUpdate, isInputBoxActive, context.scrollLeft, context.scrollTop, refs.cellArea]);
+  var getAddressIndicatorPosition = (0, _react.useCallback)(function () {
+    var _a;
+    if (!firstSelection || ((_a = context.rangeDialog) === null || _a === void 0 ? void 0 : _a.show)) {
+      return {
+        display: "none"
+      };
+    }
+    return {
+      top: "-18px",
+      left: "0",
+      display: "block"
+    };
+  }, [firstSelection, (_e = context.rangeDialog) === null || _e === void 0 ? void 0 : _e.show]);
+  var getCellAddress = (0, _react.useCallback)(function () {
+    if (!firstSelection) return "";
+    var rowIndex = firstSelection.row_focus || 0;
+    var colIndex = firstSelection.column_focus || 0;
+    var columnChar = (0, _fortuneCore.indexToColumnChar)(colIndex);
+    var rowNumber = rowIndex + 1;
+    return "".concat(columnChar).concat(rowNumber);
+  }, [firstSelection]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-input-box",
+    style: getInputBoxPosition(),
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    }
+  }, firstSelection && !((_f = context.rangeDialog) === null || _f === void 0 ? void 0 : _f.show) && (/*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-cell-address-indicator",
+    style: getAddressIndicatorPosition()
+  }, getCellAddress())), /*#__PURE__*/_react.default.createElement("div", {
+    className: "luckysheet-input-box-inner",
+    style: firstSelection ? __assign({
+      minWidth: firstSelection.width,
+      minHeight: firstSelection.height
+    }, inputBoxStyle) : {}
+  }, /*#__PURE__*/_react.default.createElement(_ContentEditable.default, {
+    innerRef: function innerRef(e) {
+      inputRef.current = e;
+      refs.cellInput.current = e;
+    },
+    className: "luckysheet-cell-input",
+    id: "luckysheet-rich-text-editor",
+    style: {
+      transform: "scale(".concat(context.zoomRatio, ")"),
+      transformOrigin: "left top",
+      width: "".concat(100 / context.zoomRatio, "%"),
+      height: "".concat(100 / context.zoomRatio, "%"),
+      color: "black"
+    },
+    "aria-autocomplete": "list",
+    onChange: onChange,
+    onKeyDown: onKeyDown,
+    onPaste: onPaste,
+    allowEdit: edit ? !isHidenRC : edit
+  })), (context.functionCandidates.length > 0 || context.functionHint || context.defaultCandidates.length > 0) && (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormulaSearch.default, {
+    onMouseMove: function onMouseMove(e) {
+      if (document.getElementById("luckysheet-formula-search-c")) {
+        var hoveredItem = e.target.closest(".luckysheet-formula-search-item");
+        if (!hoveredItem) return;
+        clearSearchItemActiveClass();
+        hoveredItem.classList.add("luckysheet-formula-search-item-active");
+      }
+      e.preventDefault();
+    },
+    onMouseDown: function onMouseDown(e) {
+      selectActiveFormulaOnClick(e);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_FormulaHint.default, null))));
+};
+var _default = exports.default = InputBox;