@fileverse-dev/fortune-react 1.0.2-mod-22 → 1.0.2-mod-20-patch-1

package/dist/index.css

@@ -1187,11 +1187,11 @@ html::-webkit-scrollbar-button {
 }
 
 .fortune-dialog {
-  min-width: 368px;
   max-width: 90%;
   max-height: 90%;
-  border-radius: 12px;
-  background: hsl(var(--color-bg-default));
+  overflow: scroll;
+  border-radius: 6px;
+  background: white;
   box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
   box-sizing: border-box;
   overflow: auto;
@@ -1251,11 +1251,10 @@ html::-webkit-scrollbar-button {
   opacity: 0.7;
 }
 
-@import "@fileverse/ui/styles";
 /*查找替换弹出框样式*/
 #fortune-search-replace {
   position: absolute;
-  min-width: 504px;
+  padding: 30px 42px;
   z-index: 1002;
 }
 
@@ -1337,7 +1336,10 @@ html::-webkit-scrollbar-button {
 }
 
 #fortune-search-replace #searchAllbox {
-  overflow-y: scroll;
+  height: 210px;
+  border: 1px solid #d4d4d4;
+  margin-top: 10px;
+  overflow-y: auto;
   position: relative;
 }
 
@@ -1411,38 +1413,6 @@ html::-webkit-scrollbar-button {
   white-space: nowrap;
 }
 
-.find-replace-label {
-  min-width: 100px;
-}
-
-.find-replace-table-cell {
-  min-width: 154px;
-}
-
-/* Add scrollbar styles */
-#fortune-search-replace .table-container {
-  scrollbar-width: thin;
-  scrollbar-color: #babac0 transparent;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar-thumb {
-  background-color: #babac0;
-  border-radius: 16px;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar-button {
-  display: none;
-}
-
 .fortune-link-modify-modal {
   position: absolute;
   overflow: hidden;

package/dist/index.esm.css

@@ -1187,11 +1187,11 @@ html::-webkit-scrollbar-button {
 }
 
 .fortune-dialog {
-  min-width: 368px;
   max-width: 90%;
   max-height: 90%;
-  border-radius: 12px;
-  background: hsl(var(--color-bg-default));
+  overflow: scroll;
+  border-radius: 6px;
+  background: white;
   box-shadow: rgb(0 0 0 / 10%) 5px 5px 30px;
   box-sizing: border-box;
   overflow: auto;
@@ -1251,11 +1251,10 @@ html::-webkit-scrollbar-button {
   opacity: 0.7;
 }
 
-@import "@fileverse/ui/styles";
 /*查找替换弹出框样式*/
 #fortune-search-replace {
   position: absolute;
-  min-width: 504px;
+  padding: 30px 42px;
   z-index: 1002;
 }
 
@@ -1337,7 +1336,10 @@ html::-webkit-scrollbar-button {
 }
 
 #fortune-search-replace #searchAllbox {
-  overflow-y: scroll;
+  height: 210px;
+  border: 1px solid #d4d4d4;
+  margin-top: 10px;
+  overflow-y: auto;
   position: relative;
 }
 
@@ -1411,38 +1413,6 @@ html::-webkit-scrollbar-button {
   white-space: nowrap;
 }
 
-.find-replace-label {
-  min-width: 100px;
-}
-
-.find-replace-table-cell {
-  min-width: 154px;
-}
-
-/* Add scrollbar styles */
-#fortune-search-replace .table-container {
-  scrollbar-width: thin;
-  scrollbar-color: #babac0 transparent;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar-thumb {
-  background-color: #babac0;
-  border-radius: 16px;
-}
-
-#fortune-search-replace .table-container::-webkit-scrollbar-button {
-  display: none;
-}
-
 .fortune-link-modify-modal {
   position: absolute;
   overflow: hidden;

package/dist/index.esm.js

@@ -2,7 +2,6 @@ import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fix
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
-import { IconButton, Button as Button$1, TextField, Checkbox, Divider as Divider$2, Table, TableHeader, TableRow, TableHead, TableBody, cn, TableCell } from '@fileverse/ui';
 import regeneratorRuntime from 'regenerator-runtime';
 
 function _arrayLikeToArray(r, a) {
@@ -1229,39 +1228,35 @@ var Dialog = function Dialog(_ref) {
     className: "fortune-dialog",
     style: containerStyle
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-end border-b color-border-default py-3 px-6"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    icon: "X",
-    variant: "ghost",
+    className: "fortune-modal-dialog-header"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-modal-dialog-icon-close",
     onClick: onCancel,
     tabIndex: 0
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm",
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "close",
+    style: {
+      padding: 7,
+      cursor: "pointer"
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-dialog-box-content",
     style: contentStyle
   }, children), type != null && (/*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
-  }, type === "ok" ? (/*#__PURE__*/React.createElement(Button$1, {
-    variant: "default",
-    style: {
-      minWidth: "80px"
-    },
+    className: "fortune-dialog-box-button-container"
+  }, type === "ok" ? (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-message-box-button button-default",
     onClick: onOk,
     tabIndex: 0
-  }, button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button$1, {
-    variant: "secondary",
-    style: {
-      minWidth: "80px"
-    },
-    onClick: onCancel,
-    tabIndex: 0
-  }, button.cancel), /*#__PURE__*/React.createElement(Button$1, {
-    variant: "default",
-    style: {
-      minWidth: "80px"
-    },
+  }, button.confirm)) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-message-box-button button-primary",
     onClick: onOk,
     tabIndex: 0
-  }, button.confirm))))));
+  }, button.confirm), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-message-box-button button-default",
+    onClick: onCancel,
+    tabIndex: 0
+  }, button.cancel))))));
 };
 
 var MessageBox = function MessageBox(_ref) {
@@ -1273,7 +1268,15 @@ var MessageBox = function MessageBox(_ref) {
   return /*#__PURE__*/React.createElement(Dialog, {
     type: type,
     onOk: onOk,
-    onCancel: onCancel
+    onCancel: onCancel,
+    contentStyle: {
+      width: 300,
+      paddingTop: 20,
+      paddingBottom: 30,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
   }, children);
 };
 
@@ -1347,7 +1350,8 @@ var SearchReplace = function SearchReplace(_ref) {
     setContext = _useContext.setContext,
     refs = _useContext.refs;
   var _locale = locale(context),
-    findAndReplace = _locale.findAndReplace;
+    findAndReplace = _locale.findAndReplace,
+    button = _locale.button;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     searchText = _useState2[0],
@@ -1356,27 +1360,28 @@ var SearchReplace = function SearchReplace(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     replaceText = _useState4[0],
     setReplaceText = _useState4[1];
-  var _useState5 = useState([]),
+  var _useState5 = useState(context.showReplace),
     _useState6 = _slicedToArray(_useState5, 2),
-    searchResult = _useState6[0],
-    setSearchResult = _useState6[1];
-  var _useState7 = useState(),
+    showReplace = _useState6[0],
+    setShowReplace = _useState6[1];
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectedCell = _useState8[0],
-    setSelectedCell = _useState8[1];
+    searchResult = _useState8[0],
+    setSearchResult = _useState8[1];
+  var _useState9 = useState(),
+    _useState0 = _slicedToArray(_useState9, 2),
+    selectedCell = _useState0[0],
+    setSelectedCell = _useState0[1];
   var _useAlert = useAlert(),
     showAlert = _useAlert.showAlert;
-  var tableContainerRef = useRef(null);
-  var searchInputRef = useRef(null);
-  var replaceInputRef = useRef(null);
-  var _useState9 = useState({
+  var _useState1 = useState({
       regCheck: false,
       wordCheck: false,
       caseCheck: false
     }),
-    _useState0 = _slicedToArray(_useState9, 2),
-    checkMode = _useState0[0],
-    checkModeReplace = _useState0[1];
+    _useState10 = _slicedToArray(_useState1, 2),
+    checkMode = _useState10[0],
+    checkModeReplace = _useState10[1];
   var closeDialog = useCallback(function () {
     _.set(refs.globalCache, "searchDialog.mouseEnter", false);
     setContext(function (draftCtx) {
@@ -1411,110 +1416,98 @@ var SearchReplace = function SearchReplace(_ref) {
       onSearchDialogMoveStart(refs.globalCache, nativeEvent, getContainer());
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center justify-between border-b color-border-default py-3 px-6"
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: "text-heading-sm"
-  }, "Find and replace"), /*#__PURE__*/React.createElement(IconButton, {
-    icon: "X",
-    variant: "ghost",
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "container",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon-close fortune-modal-dialog-icon-close",
     onClick: closeDialog,
     tabIndex: 0
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "close",
+    style: {
+      padding: 7,
+      cursor: "pointer"
+    }
   })), /*#__PURE__*/React.createElement("div", {
-    className: "px-6 pb-6 pt-4"
+    className: "tabBox"
+  }, /*#__PURE__*/React.createElement("span", {
+    id: "searchTab",
+    className: showReplace ? "" : "on",
+    onClick: function onClick() {
+      return setShowReplace(false);
+    },
+    tabIndex: 0
+  }, findAndReplace.find), /*#__PURE__*/React.createElement("span", {
+    id: "replaceTab",
+    className: showReplace ? "on" : "",
+    onClick: function onClick() {
+      return setShowReplace(true);
+    },
+    tabIndex: 0
+  }, findAndReplace.replace)), /*#__PURE__*/React.createElement("div", {
+    className: "ctBox"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-4"
+    className: "row"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-4"
+    className: "inputBox"
   }, /*#__PURE__*/React.createElement("div", {
-    id: "searchInput",
-    className: "flex flex-row gap-2 items-center"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "find-replace-label text-heading-xsm"
-  }, findAndReplace.findTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
-    ref: searchInputRef,
+    className: "textboxs",
+    id: "searchInput"
+  }, findAndReplace.findTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
     className: "formulaInputFocus",
     autoFocus: true,
     spellCheck: "false",
     onKeyDown: function onKeyDown(e) {
       return e.stopPropagation();
     },
-    onMouseDown: function onMouseDown(e) {
-      var _searchInputRef$curre;
-      if (e.target === searchInputRef.current || ((_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.contains(e.target))) {
-        e.stopPropagation();
-      }
-    },
     value: searchText,
     onChange: function onChange(e) {
-      if (e.target.value.length === 0) {
-        setSearchResult([]);
-      }
-      setSearchText(e.target.value);
+      return setSearchText(e.target.value);
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    id: "replaceInput",
-    className: "flex flex-row gap-2 items-center"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "find-replace-label text-heading-xsm"
-  }, findAndReplace.replaceTextbox, "\uFF1A"), /*#__PURE__*/React.createElement(TextField, {
-    ref: replaceInputRef,
+  })), showReplace && (/*#__PURE__*/React.createElement("div", {
+    className: "textboxs",
+    id: "replaceInput"
+  }, findAndReplace.replaceTextbox, "\uFF1A", /*#__PURE__*/React.createElement("input", {
     className: "formulaInputFocus",
     spellCheck: "false",
     onKeyDown: function onKeyDown(e) {
       return e.stopPropagation();
     },
-    onMouseDown: function onMouseDown(e) {
-      var _replaceInputRef$curr;
-      if (e.target === replaceInputRef.current || ((_replaceInputRef$curr = replaceInputRef.current) === null || _replaceInputRef$curr === void 0 ? void 0 : _replaceInputRef$curr.contains(e.target))) {
-        e.stopPropagation();
-      }
-    },
     value: replaceText,
     onChange: function onChange(e) {
       return setReplaceText(e.target.value);
     }
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row gap-2"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "find-replace-label"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col gap-2 text-body-sm"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "checkboxs"
   }, /*#__PURE__*/React.createElement("div", {
-    id: "regCheck",
-    className: "flex flex-row gap-2 items-center"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    className: "border-2",
-    checked: checkMode.regCheck,
-    onCheckedChange: function onCheckedChange(e) {
+    id: "regCheck"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    onChange: function onChange(e) {
       return setCheckMode("regCheck", e.target.checked);
     }
   }), /*#__PURE__*/React.createElement("span", null, findAndReplace.regexTextbox)), /*#__PURE__*/React.createElement("div", {
-    id: "caseCheck",
-    className: "flex flex-row gap-2 items-center"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    className: "border-2",
-    checked: checkMode.caseCheck,
-    onCheckedChange: function onCheckedChange(e) {
-      return setCheckMode("caseCheck", e.target.checked);
-    }
-  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)), /*#__PURE__*/React.createElement("div", {
-    id: "wordCheck",
-    className: "flex flex-row gap-2 items-center"
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    className: "border-2",
-    checked: checkMode.wordCheck,
-    onCheckedChange: function onCheckedChange(e) {
+    id: "wordCheck"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    onChange: function onChange(e) {
       return setCheckMode("wordCheck", e.target.checked);
     }
-  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/React.createElement(Divider$2, {
-    className: "w-full border-t-[1px]"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-row gap-2 justify-center items-center mb-4"
-  }, /*#__PURE__*/React.createElement(Button$1, {
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.wholeTextbox)), /*#__PURE__*/React.createElement("div", {
+    id: "caseCheck"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    onChange: function onChange(e) {
+      return setCheckMode("caseCheck", e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", null, findAndReplace.distinguishTextbox)))), /*#__PURE__*/React.createElement("div", {
+    className: "btnBox"
+  }, showReplace && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     id: "replaceAllBtn",
-    variant: "secondary",
-    className: "min-w-fit",
+    className: "fortune-message-box-button button-default",
     onClick: function onClick() {
       setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1522,12 +1515,10 @@ var SearchReplace = function SearchReplace(_ref) {
         showAlert(alertMsg);
       });
     },
-    tabIndex: 0,
-    disabled: searchText.length === 0 || replaceText.length === 0
-  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement(Button$1, {
+    tabIndex: 0
+  }, findAndReplace.allReplaceBtn), /*#__PURE__*/React.createElement("div", {
     id: "replaceBtn",
-    variant: "secondary",
-    className: "min-w-fit",
+    className: "fortune-message-box-button button-default",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1537,12 +1528,10 @@ var SearchReplace = function SearchReplace(_ref) {
         }
       });
     },
-    tabIndex: 0,
-    disabled: searchText.length === 0 || replaceText.length === 0
-  }, findAndReplace.replaceBtn), /*#__PURE__*/React.createElement(Button$1, {
+    tabIndex: 0
+  }, findAndReplace.replaceBtn))), /*#__PURE__*/React.createElement("div", {
     id: "searchAllBtn",
-    variant: "secondary",
-    className: "min-w-fit",
+    className: "fortune-message-box-button button-default",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSelectedCell(undefined);
@@ -1552,12 +1541,10 @@ var SearchReplace = function SearchReplace(_ref) {
         if (_.isEmpty(res)) showAlert(findAndReplace.noFindTip);
       });
     },
-    tabIndex: 0,
-    disabled: searchText.length === 0
-  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement(Button$1, {
+    tabIndex: 0
+  }, findAndReplace.allFindBtn), /*#__PURE__*/React.createElement("div", {
     id: "searchNextBtn",
-    variant: "default",
-    className: "min-w-fit",
+    className: "fortune-message-box-button button-default",
     onClick: function onClick() {
       return setContext(function (draftCtx) {
         setSearchResult([]);
@@ -1565,45 +1552,23 @@ var SearchReplace = function SearchReplace(_ref) {
         if (alertMsg != null) showAlert(alertMsg);
       });
     },
-    tabIndex: 0,
-    disabled: searchText.length === 0
-  }, findAndReplace.findBtn))), searchResult.length > 0 && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider$2, {
-    className: "w-full border-t-[1px] mb-4"
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: tableContainerRef,
-    className: "mb-6 table-container max-h-[300px] overflow-y-auto",
-    onMouseDown: function onMouseDown(e) {
-      var _tableContainerRef$cu;
-      if (e.target === tableContainerRef.current || ((_tableContainerRef$cu = tableContainerRef.current) === null || _tableContainerRef$cu === void 0 ? void 0 : _tableContainerRef$cu.contains(e.target))) {
-        var _tableContainerRef$cu2;
-        e.stopPropagation();
-        (_tableContainerRef$cu2 = tableContainerRef.current) === null || _tableContainerRef$cu2 === void 0 ? void 0 : _tableContainerRef$cu2.focus();
-      }
-    },
-    onWheel: function onWheel(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      if (tableContainerRef.current) {
-        tableContainerRef.current.scrollTop += e.deltaY;
-      }
-    },
-    onTouchStart: function onTouchStart(e) {
-      e.stopPropagation();
-    },
-    onTouchMove: function onTouchMove(e) {
-      e.stopPropagation();
-    },
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, findAndReplace.findBtn))), /*#__PURE__*/React.createElement("div", {
+    className: "close-button fortune-message-box-button button-default",
+    onClick: closeDialog,
+    tabIndex: 0
+  }, button.close), searchResult.length > 0 && (/*#__PURE__*/React.createElement("div", {
     id: "searchAllbox"
-  }, /*#__PURE__*/React.createElement(TableHeader, {
-    className: "color-bg-secondary"
-  }, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement(TableHead, null, findAndReplace.searchTargetValue))), /*#__PURE__*/React.createElement(TableBody, null, searchResult.map(function (v) {
-    return /*#__PURE__*/React.createElement(TableRow, {
-      className: cn(_.isEqual(selectedCell, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "boxTitle"
+  }, /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetSheet), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetCell), /*#__PURE__*/React.createElement("span", null, findAndReplace.searchTargetValue)), /*#__PURE__*/React.createElement("div", {
+    className: "boxMain"
+  }, searchResult.map(function (v) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "boxItem ".concat(_.isEqual(selectedCell, {
         r: v.r,
         c: v.c
-      }) ? "color-bg-default-selected" : ""),
+      }) ? "on" : ""),
       key: v.cellPosition,
       onClick: function onClick() {
         setContext(function (draftCtx) {
@@ -1619,14 +1584,8 @@ var SearchReplace = function SearchReplace(_ref) {
         });
       },
       tabIndex: 0
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      className: "find-replace-table-cell"
-    }, v.sheetName), /*#__PURE__*/React.createElement(TableCell, {
-      className: "find-replace-table-cell"
-    }, v.cellPosition), /*#__PURE__*/React.createElement(TableCell, {
-      className: "find-replace-table-cell"
-    }, v.value));
-  })))))))));
+    }, /*#__PURE__*/React.createElement("span", null, v.sheetName), /*#__PURE__*/React.createElement("span", null, v.cellPosition), /*#__PURE__*/React.createElement("span", null, v.value));
+  }))))));
 };
 
 var LinkEditCard = function LinkEditCard(_ref) {
@@ -9882,7 +9841,7 @@ var MoreItemsContaier = function MoreItemsContaier(_ref) {
   }, children);
 };
 
-function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY) {
+function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, globalCache) {
   return {
     applyOp: function applyOp(ops) {
       setContext(function (ctx_) {
@@ -10183,6 +10142,50 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
     },
     celldataToData: function celldataToData(celldata, rowCount, colCount) {
       return api.celldataToData(celldata, rowCount, colCount);
+    },
+    insertFunction: function insertFunction(selectedFuncIndex, filteredFunctionList, callback) {
+      var _context$luckysheet_s2;
+      var last = (_context$luckysheet_s2 = context.luckysheet_select_save) === null || _context$luckysheet_s2 === void 0 ? void 0 : _context$luckysheet_s2[context.luckysheet_select_save.length - 1];
+      var row_index = last === null || last === void 0 ? void 0 : last.row_focus;
+      var col_index = last === null || last === void 0 ? void 0 : last.column_focus;
+      if (!last) {
+        row_index = 0;
+        col_index = 0;
+      } else {
+        if (row_index == null) {
+          var _last$row2 = _slicedToArray(last.row, 1);
+          row_index = _last$row2[0];
+        }
+        if (col_index == null) {
+          var _last$column2 = _slicedToArray(last.column, 1);
+          col_index = _last$column2[0];
+        }
+      }
+      var formulaTxt = "<span dir=\"auto\" class=\"luckysheet-formula-text-color\">=</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">".concat(filteredFunctionList[selectedFuncIndex].n.toUpperCase(), "</span><span dir=\"auto\" class=\"luckysheet-formula-text-color\">(</span>");
+      var _locale2 = locale(context),
+        functionlist = _locale2.functionlist;
+      setContext(function (ctx) {
+        if (cellInput != null && globalCache != null) {
+          ctx.luckysheetCellUpdate = [row_index, col_index];
+          globalCache.doNotUpdateCell = true;
+          cellInput.innerHTML = formulaTxt;
+          var spans = cellInput.childNodes;
+          if (!_.isEmpty(spans)) {
+            setCaretPosition(ctx, spans[spans.length - 1], 0, 1);
+          }
+          ctx.functionHint = filteredFunctionList[selectedFuncIndex].n.toUpperCase();
+          ctx.functionCandidates = [];
+          if (_.isEmpty(ctx.formulaCache.functionlistMap)) {
+            for (var i = 0; i < functionlist.length; i += 1) {
+              ctx.formulaCache.functionlistMap[functionlist[i].n] = functionlist[i];
+            }
+          }
+          callback === null || callback === void 0 ? void 0 : callback();
+        }
+      });
+    },
+    getLocaleContext: function getLocaleContext() {
+      return locale(context);
     }
   };
 }
@@ -11390,8 +11393,8 @@ var Workbook = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [onPaste]);
   useImperativeHandle(ref, function () {
-    return generateAPIs(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current);
-  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings]);
+    return generateAPIs(context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, cellInput.current, scrollbarX.current, scrollbarY.current, globalCache.current);
+  }, [context, setContextWithProduce, handleUndo, handleRedo, mergedSettings, globalCache]);
   var i = getSheetIndex(context, context.currentSheetId);
   if (i == null) {
     return null;