@leankylin-sheet/react 4.0.0 → 4.0.1

package/dist/index.esm.js

@@ -159,6 +159,57 @@ function _nonIterableSpread() {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _createForOfIteratorHelper(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (!it) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+      if (it) o = it;
+      var i = 0;
+      var F = function () {};
+      return {
+        s: F,
+        n: function () {
+          if (i >= o.length) return {
+            done: true
+          };
+          return {
+            done: false,
+            value: o[i++]
+          };
+        },
+        e: function (e) {
+          throw e;
+        },
+        f: F
+      };
+    }
+    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  var normalCompletion = true,
+    didErr = false,
+    err;
+  return {
+    s: function () {
+      it = it.call(o);
+    },
+    n: function () {
+      var step = it.next();
+      normalCompletion = step.done;
+      return step;
+    },
+    e: function (e) {
+      didErr = true;
+      err = e;
+    },
+    f: function () {
+      try {
+        if (!normalCompletion && it.return != null) it.return();
+      } finally {
+        if (didErr) throw err;
+      }
+    }
+  };
+}
 
 var defaultRefs = {
   globalCache: {
@@ -630,6 +681,8 @@ var RowHeader = function RowHeader() {
 var ContentEditable = function ContentEditable(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var lastHtml = useRef("");
+  var _useContext = useContext(WorkbookContext),
+    settings = _useContext.settings;
   var root = useRef(null);
   var autoFocus = props.autoFocus,
     initialContent = props.initialContent,
@@ -667,7 +720,14 @@ var ContentEditable = function ContentEditable(_ref) {
       return e.stopPropagation();
     },
     onClick: function onClick(e) {
-      return e.stopPropagation();
+      var _settings$onClickCont;
+      e.stopPropagation();
+      (_settings$onClickCont = settings.onClickContentEditable) === null || _settings$onClickCont === void 0 ? void 0 : _settings$onClickCont.call(settings, e);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      var _settings$onClickCont2;
+      e.stopPropagation();
+      (_settings$onClickCont2 = settings.onClickContentEditable) === null || _settings$onClickCont2 === void 0 ? void 0 : _settings$onClickCont2.call(settings, e);
     }
   }, _.omit(props, "innerRef", "onChange", "html", "onBlur", "autoFocus", "allowEdit", "initialContent")), {}, {
     ref: function ref(e) {
@@ -684,39 +744,295 @@ var ContentEditable = function ContentEditable(_ref) {
   }));
 };
 
+function getLastTextNode(element) {
+  var lastText = null;
+  function traverse(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      lastText = node;
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      for (var i = node.childNodes.length - 1; i >= 0; i -= 1) {
+        traverse(node.childNodes[i]);
+        if (lastText) break;
+      }
+    }
+  }
+  traverse(element);
+  return lastText;
+}
+function getPlainTextCursorOffset(editableDiv) {
+  var selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return -1;
+  var range = selection.getRangeAt(0);
+  if (!editableDiv.contains(range.commonAncestorContainer)) {
+    return -1;
+  }
+  var textNodes = [];
+  function collectTextNodes(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      textNodes.push(node);
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      for (var i = 0; i < node.childNodes.length; i += 1) {
+        collectTextNodes(node.childNodes[i]);
+      }
+    }
+  }
+  collectTextNodes(editableDiv);
+  var cursorTextNode = null;
+  var offsetInNode = 0;
+  var startContainer = range.startContainer;
+  var startOffset = range.startOffset;
+  if (startContainer.nodeType === Node.TEXT_NODE) {
+    cursorTextNode = startContainer;
+    offsetInNode = startOffset;
+  } else if (startContainer.nodeType === Node.ELEMENT_NODE) {
+    var childNodes = startContainer.childNodes;
+    var prevTextNode = null;
+    for (var i = 0; i < startOffset; i += 1) {
+      var child = childNodes[i];
+      if (child.nodeType === Node.TEXT_NODE) {
+        prevTextNode = child;
+      } else if (child.nodeType === Node.ELEMENT_NODE) {
+        var lastText = getLastTextNode(child);
+        if (lastText) prevTextNode = lastText;
+      }
+    }
+    if (prevTextNode) {
+      var _prevTextNode$textCon;
+      cursorTextNode = prevTextNode;
+      offsetInNode = ((_prevTextNode$textCon = prevTextNode.textContent) === null || _prevTextNode$textCon === void 0 ? void 0 : _prevTextNode$textCon.length) || 0;
+    } else {
+      return 0;
+    }
+  }
+  var totalOffset = 0;
+  for (var _i = 0, _textNodes = textNodes; _i < _textNodes.length; _i++) {
+    var node = _textNodes[_i];
+    if (node === cursorTextNode) {
+      totalOffset += offsetInNode;
+      break;
+    } else {
+      var _node$textContent;
+      totalOffset += ((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.length) || 0;
+    }
+  }
+  return totalOffset;
+}
+function getrangeseleciton() {
+  var _anchorNode$parentNod, _anchorNode$parentNod2, _anchorNode$parentEle, _anchorNode$parentEle2;
+  var currSelection = window.getSelection();
+  if (!currSelection) return null;
+  var anchorNode = currSelection.anchorNode,
+    anchorOffset = currSelection.anchorOffset;
+  if (!anchorNode) return null;
+  if (((_anchorNode$parentNod = anchorNode.parentNode) === null || _anchorNode$parentNod === void 0 ? void 0 : (_anchorNode$parentNod2 = _anchorNode$parentNod.nodeName) === null || _anchorNode$parentNod2 === void 0 ? void 0 : _anchorNode$parentNod2.toLowerCase()) === "span" && anchorOffset !== 0) {
+    var txt = _.trim(anchorNode.textContent || "");
+    if (txt.length === 0 && anchorNode.parentNode.previousSibling) {
+      var ahr = anchorNode.parentNode.previousSibling;
+      txt = _.trim(ahr.textContent || "");
+      return ahr;
+    }
+    return anchorNode.parentNode;
+  }
+  var anchorElement = anchorNode;
+  if (anchorElement.id === "luckysheet-rich-text-editor" || anchorElement.id === "luckysheet-functionbox-cell") {
+    var _$last;
+    var _txt = _.trim((_$last = _.last(anchorElement.querySelectorAll("span"))) === null || _$last === void 0 ? void 0 : _$last.innerText);
+    if (_txt.length === 0 && anchorElement.querySelectorAll("span").length > 1) {
+      var _ahr = anchorElement.querySelectorAll("span");
+      _txt = _.trim(_ahr[_ahr.length - 2].innerText);
+      return _ahr === null || _ahr === void 0 ? void 0 : _ahr[0];
+    }
+    return _.last(anchorElement.querySelectorAll("span"));
+  }
+  if ((anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$parentEle = anchorNode.parentElement) === null || _anchorNode$parentEle === void 0 ? void 0 : _anchorNode$parentEle.id) === "luckysheet-rich-text-editor" || (anchorNode === null || anchorNode === void 0 ? void 0 : (_anchorNode$parentEle2 = anchorNode.parentElement) === null || _anchorNode$parentEle2 === void 0 ? void 0 : _anchorNode$parentEle2.id) === "luckysheet-functionbox-cell" || anchorOffset === 0) {
+    var newAnchorNode = anchorOffset === 0 ? anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.parentNode : anchorNode;
+    if (newAnchorNode === null || newAnchorNode === void 0 ? void 0 : newAnchorNode.previousSibling) {
+      return newAnchorNode === null || newAnchorNode === void 0 ? void 0 : newAnchorNode.previousSibling;
+    }
+  }
+  return null;
+}
+function moveCursorToPosition(editableDiv, targetPosition) {
+  if (!editableDiv || editableDiv.contentEditable !== "true") {
+    console.warn('目标元素必须是可编辑的div（contenteditable="true"）');
+    return;
+  }
+  if (targetPosition < 0) {
+    targetPosition = 0;
+  }
+  var textNodesInfo = [];
+  var totalLength = 0;
+  function traverseNodes(node) {
+    if (!node) return;
+    if (node.nodeType === Node.TEXT_NODE) {
+      var textLength = node.textContent.length;
+      totalLength += textLength;
+      textNodesInfo.push({
+        node: node,
+        cumulativeLength: totalLength
+      });
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      Array.from(node.childNodes).forEach(function (child) {
+        return traverseNodes(child);
+      });
+    }
+  }
+  traverseNodes(editableDiv);
+  var targetNode = null;
+  var offsetInNode = 0;
+  if (totalLength <= targetPosition) {
+    if (textNodesInfo.length > 0) {
+      var lastNodeInfo = textNodesInfo[textNodesInfo.length - 1];
+      targetNode = lastNodeInfo.node;
+      offsetInNode = lastNodeInfo.node.textContent.length;
+    }
+  } else {
+    var prevCumulativeLength = 0;
+    var _iterator = _createForOfIteratorHelper(textNodesInfo),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var info = _step.value;
+        if (info.cumulativeLength > targetPosition) {
+          targetNode = info.node;
+          offsetInNode = targetPosition - prevCumulativeLength;
+          break;
+        }
+        prevCumulativeLength = info.cumulativeLength;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  }
+  if (targetNode) {
+    var selection = window.getSelection();
+    selection.removeAllRanges();
+    var range = document.createRange();
+    range.setStart(targetNode, offsetInNode);
+    range.setEnd(targetNode, offsetInNode);
+    selection.addRange(range);
+  }
+}
+
 var FormulaSearch = function FormulaSearch(props) {
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     refs = _useContext.refs,
     settings = _useContext.settings;
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    n = _useState2[0],
+    setN = _useState2[1];
+  var wrapperRf = useRef(null);
+  var nRef = useRef(n);
+  nRef.current = n;
+  useEffect(function () {
+    if (context.functionCandidates.length) {
+      setN(context.functionCandidates[0].n);
+    }
+  }, [context.functionCandidates]);
+  var fListRef = useRef([]);
+  fListRef.current = context.functionCandidates;
+  var inputN = function inputN(fnName) {
+    var _refs$cellInput$curre, _editor$textContent;
+    var offsetIndex = getPlainTextCursorOffset(refs.cellInput.current);
+    var text = ((_refs$cellInput$curre = refs.cellInput.current) === null || _refs$cellInput$curre === void 0 ? void 0 : _refs$cellInput$curre.innerText) || "";
+    var editor = getrangeseleciton();
+    var replaceText = (_editor$textContent = editor.textContent) === null || _editor$textContent === void 0 ? void 0 : _editor$textContent.trim();
+    var replaceTextLength = (replaceText === null || replaceText === void 0 ? void 0 : replaceText.length) || 0;
+    var newText = (text === null || text === void 0 ? void 0 : text.slice(0, offsetIndex - replaceTextLength)) + fnName + (text === null || text === void 0 ? void 0 : text.slice(offsetIndex));
+    refs.cellInput.current.innerHTML = functionHTMLGenerate(newText);
+    moveCursorToPosition(refs.cellInput.current, offsetIndex - replaceTextLength + fnName.length);
+  };
+  var viewActive = function viewActive() {
+    var _wrapperRf$current;
+    var aItem = (_wrapperRf$current = wrapperRf.current) === null || _wrapperRf$current === void 0 ? void 0 : _wrapperRf$current.querySelector(".luckysheet-formula-search-item-active");
+    if (aItem) {
+      aItem === null || aItem === void 0 ? void 0 : aItem.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  };
+  useEffect(function () {
+    var _refs$cellInput$curre2;
+    var onChange = function onChange(e) {
+      var _fListRef$current;
+      if (((_fListRef$current = fListRef.current) === null || _fListRef$current === void 0 ? void 0 : _fListRef$current.length) <= 0) {
+        return;
+      }
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setN(function (_n) {
+          var _fListRef$current2, _fListRef$current3;
+          var currentIndex = Math.max((_fListRef$current2 = fListRef.current) === null || _fListRef$current2 === void 0 ? void 0 : _fListRef$current2.findIndex(function (item) {
+            return item.n === _n;
+          }), 0);
+          return (_fListRef$current3 = fListRef.current[(currentIndex + 1) % fListRef.current.length]) === null || _fListRef$current3 === void 0 ? void 0 : _fListRef$current3.n;
+        });
+        setTimeout(function () {
+          viewActive();
+        }, 200);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setN(function (_n) {
+          var _fListRef$current4, _fListRef$current5;
+          var currentIndex = Math.max((_fListRef$current4 = fListRef.current) === null || _fListRef$current4 === void 0 ? void 0 : _fListRef$current4.findIndex(function (item) {
+            return item.n === _n;
+          }), 0);
+          return (_fListRef$current5 = fListRef.current[(currentIndex - 1) % fListRef.current.length]) === null || _fListRef$current5 === void 0 ? void 0 : _fListRef$current5.n;
+        });
+        setTimeout(function () {
+          viewActive();
+        }, 200);
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        e.stopPropagation();
+        if (nRef.current) {
+          inputN("".concat(nRef.current, "("));
+        }
+      }
+    };
+    (_refs$cellInput$curre2 = refs.cellInput.current) === null || _refs$cellInput$curre2 === void 0 ? void 0 : _refs$cellInput$curre2.addEventListener("keydown", onChange);
+    return function () {
+      var _refs$cellInput$curre3;
+      (_refs$cellInput$curre3 = refs.cellInput.current) === null || _refs$cellInput$curre3 === void 0 ? void 0 : _refs$cellInput$curre3.removeEventListener("keydown", onChange);
+    };
+  }, [refs.cellInput.current]);
   if (_.isEmpty(context.functionCandidates)) return null;
-  function moveCursorToEnd(editor) {
-    var leftParen = editor.querySelector(".luckysheet-formula-text-lpar");
-    var rightParen = editor.querySelector(".luckysheet-formula-text-rpar");
-    var range = document.createRange();
-    var selection = window.getSelection();
-    range.setStartAfter(leftParen);
-    range.setEndBefore(rightParen);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
   if (settings.renderFormulaSearch) {
     return settings.renderFormulaSearch(context.functionCandidates, functionHTMLGenerate, refs.cellInput.current);
   }
   return /*#__PURE__*/React.createElement("div", _objectSpread2(_objectSpread2({}, props), {}, {
     id: "luckysheet-formula-search-c",
-    className: "luckysheet-formula-search-c"
+    className: "luckysheet-formula-search-c",
+    ref: wrapperRf,
+    onWheel: function onWheel(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    onWheelCapture: function onWheelCapture(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   }), context.functionCandidates.map(function (v) {
     return /*#__PURE__*/React.createElement("div", {
-      onClick: function onClick() {
-        var _refs$cellInput$curre;
-        refs.cellInput.current.innerHTML = functionHTMLGenerate("=".concat(v.n, "()"));
-        (_refs$cellInput$curre = refs.cellInput.current) === null || _refs$cellInput$curre === void 0 ? void 0 : _refs$cellInput$curre.focus();
-        moveCursorToEnd(refs.cellInput.current);
+      onClick: function onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        inputN("".concat(v.n, "("));
+      },
+      onMouseEnter: function onMouseEnter() {
+        setN(v.n);
+      },
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
       },
       key: v.n,
       "data-func": v.n,
-      className: "luckysheet-formula-search-item"
+      className: "luckysheet-formula-search-item ".concat(n === v.n && "luckysheet-formula-search-item-active")
     }, /*#__PURE__*/React.createElement("div", {
       className: "luckysheet-formula-search-func"
     }, v.n), /*#__PURE__*/React.createElement("div", {
@@ -836,11 +1152,12 @@ function usePrevious(value) {
 }
 
 var InputBox = function InputBox() {
-  var _context$luckysheet_s, _context$rangeDialog;
+  var _context$luckysheet_s, _context$rangeDialog, _settings$renderEdito;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
-    refs = _useContext.refs;
+    refs = _useContext.refs,
+    settings = _useContext.settings;
   var inputRef = useRef(null);
   var lastKeyDownEventRef = useRef();
   var prevCellUpdate = usePrevious(context.luckysheetCellUpdate);
@@ -1009,7 +1326,7 @@ var InputBox = function InputBox() {
     onKeyDown: onKeyDown,
     onPaste: onPaste,
     allowEdit: edit ? !isHidenRC : edit
-  })), document.activeElement === inputRef.current && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormulaSearch, {
+  })), document.activeElement === inputRef.current && ( /*#__PURE__*/React.createElement(React.Fragment, null, (_settings$renderEdito = settings.renderEditorSelector) === null || _settings$renderEdito === void 0 ? void 0 : _settings$renderEdito.call(settings, inputRef.current, context.functionCandidates, context.functionHint, context.formulaCache.functionlistMap), /*#__PURE__*/React.createElement(FormulaSearch, {
     style: {
       top: ((firstSelection === null || firstSelection === void 0 ? void 0 : firstSelection.height_move) || 0) + 4
     }
@@ -1729,6 +2046,7 @@ var LinkEditCard = function LinkEditCard(_ref) {
 };
 
 var FilterOptions = function FilterOptions(_ref) {
+  var _refs$globalCache$fre, _refs$globalCache$fre2;
   var getContainer = _ref.getContainer;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
@@ -1753,7 +2071,7 @@ var FilterOptions = function FilterOptions(_ref) {
       createFilterOptions(draftCtx, draftCtx.luckysheet_filter_save, undefined);
     });
   }, [visibledatarow, visibledatacolumn, setContext, currentSheetId, filter_select]);
-  var showFilterContextMenu = useCallback(function (v, i) {
+  var _showFilterContextMenu = useCallback(function (v, i) {
     if (filterOptions == null) return;
     setContext(function (draftCtx) {
       var _draftCtx$filterConte, _draftCtx$filter$i;
@@ -1784,11 +2102,21 @@ var FilterOptions = function FilterOptions(_ref) {
     frozenColumns = (frozen === null || frozen === void 0 ? void 0 : (_frozen$range = frozen.range) === null || _frozen$range === void 0 ? void 0 : _frozen$range.column_focus) || -1;
     frozenRows = (frozen === null || frozen === void 0 ? void 0 : (_frozen$range2 = frozen.range) === null || _frozen$range2 === void 0 ? void 0 : _frozen$range2.row_focus) || -1;
   }
-  return filterOptions == null ? ( /*#__PURE__*/React.createElement("div", null)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, filterOptions.items.map(function (v, i) {
-    var _refs$globalCache$fre, _refs$globalCache$fre2;
+  return filterOptions == null ? ( /*#__PURE__*/React.createElement("div", null)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: "luckysheet-filter-selected-sheet",
+    className: "luckysheet-cell-selected luckysheet-filter-selected",
+    style: _.assign({
+      left: Math.max(filterOptions.left, 1),
+      width: filterOptions.width,
+      top: filterOptions.top,
+      height: filterOptions.height,
+      display: "block"
+    }, fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.endRow, (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId]), fixColumnStyleOverflowInFreeze(context, filterOptions.startCol, filterOptions.endCol, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]))
+  }), filterOptions.items.map(function (v, i) {
+    var _refs$globalCache$fre3, _refs$globalCache$fre4;
     var filterParam = filter[i];
-    var columnOverflowFreezeStyle = fixColumnStyleOverflowInFreeze(context, i + filterOptions.startCol, i + filterOptions.startCol, (_refs$globalCache$fre = refs.globalCache.freezen) === null || _refs$globalCache$fre === void 0 ? void 0 : _refs$globalCache$fre[context.currentSheetId]);
-    var rowOverflowFreezeStyle = fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.startRow, (_refs$globalCache$fre2 = refs.globalCache.freezen) === null || _refs$globalCache$fre2 === void 0 ? void 0 : _refs$globalCache$fre2[context.currentSheetId]);
+    var columnOverflowFreezeStyle = fixColumnStyleOverflowInFreeze(context, i + filterOptions.startCol, i + filterOptions.startCol, (_refs$globalCache$fre3 = refs.globalCache.freezen) === null || _refs$globalCache$fre3 === void 0 ? void 0 : _refs$globalCache$fre3[context.currentSheetId]);
+    var rowOverflowFreezeStyle = fixRowStyleOverflowInFreeze(context, filterOptions.startRow, filterOptions.startRow, (_refs$globalCache$fre4 = refs.globalCache.freezen) === null || _refs$globalCache$fre4 === void 0 ? void 0 : _refs$globalCache$fre4[context.currentSheetId]);
     var col = visibledatacolumn[v.col];
     var col_pre = v.col > 0 ? visibledatacolumn[v.col - 1] : 0;
     var left = v.col <= frozenColumns && columnOverflowFreezeStyle.left ? columnOverflowFreezeStyle.left + col - col_pre - 20 : v.left;
@@ -1798,20 +2126,20 @@ var FilterOptions = function FilterOptions(_ref) {
       top: top
     });
     if (settings.renderFilter) {
-      return /*#__PURE__*/React.createElement("div", {
-        onMouseDown: function onMouseDown(e) {
-          return e.stopPropagation();
-        },
-        onClick: function onClick(e) {
-          e.stopPropagation();
-        },
-        style: {
-          position: "absolute",
+      return settings.renderFilter({
+        style: _.assign(rowOverflowFreezeStyle, columnOverflowFreezeStyle, {
           left: left,
           top: top,
-          zIndex: 999
+          height: undefined,
+          width: undefined,
+          position: "absolute",
+          zIndex: 200
+        }),
+        filterParam: filterParam,
+        showFilterContextMenu: function showFilterContextMenu() {
+          return _showFilterContextMenu(v_adjusted, i);
         }
-      }, settings.renderFilter());
+      });
     }
     return /*#__PURE__*/React.createElement("div", {
       onMouseDown: function onMouseDown(e) {
@@ -1819,7 +2147,7 @@ var FilterOptions = function FilterOptions(_ref) {
       },
       onClick: function onClick(e) {
         e.stopPropagation();
-        showFilterContextMenu(v_adjusted, i);
+        _showFilterContextMenu(v_adjusted, i);
       },
       onDoubleClick: function onDoubleClick(e) {
         return e.stopPropagation();
@@ -5036,7 +5364,8 @@ var CustomColor = function CustomColor(_ref) {
   var onCustomPick = _ref.onCustomPick,
     onColorPick = _ref.onColorPick;
   var _useContext = useContext(WorkbookContext),
-    context = _useContext.context;
+    context = _useContext.context,
+    settings = _useContext.settings;
   var _locale = locale(context),
     toolbar = _locale.toolbar,
     sheetconfig = _locale.sheetconfig,
@@ -5045,6 +5374,12 @@ var CustomColor = function CustomColor(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     inputColor = _useState2[0],
     setInputColor = _useState2[1];
+  if (settings.renderCustomColor) {
+    return settings.renderCustomColor({
+      onCustomPick: onCustomPick,
+      onColorPick: onColorPick
+    });
+  }
   return /*#__PURE__*/React.createElement("div", {
     id: "leankylin-custom-color"
   }, /*#__PURE__*/React.createElement("div", {
@@ -5401,7 +5736,7 @@ var FormatSearch = function FormatSearch(_ref) {
 };
 
 var Toolbar = function Toolbar(_ref) {
-  var _context$luckysheet_s, _flowdata$row, _settings$customToolb;
+  var _context$luckysheet_s, _flowdata$row, _settings$customToolb, _settings$toolbarRigh;
   var setMoreItems = _ref.setMoreItems,
     moreItemsOpen = _ref.moreItemsOpen;
   var _useContext = useContext(WorkbookContext),
@@ -5509,8 +5844,10 @@ var Toolbar = function Toolbar(_ref) {
     if (!container) return;
     var moreButtonWidth = 50;
     for (var i = itemLocations.length - 1; i >= 0; i -= 1) {
+      var _container$querySelec;
       var loc = itemLocations[i];
-      if (loc + moreButtonWidth < container.clientWidth) {
+      var wrapperWidth = container.clientWidth - (((_container$querySelec = container.querySelector(".leankylin-toolbar-right")) === null || _container$querySelec === void 0 ? void 0 : _container$querySelec.clientWidth) || 0);
+      if (loc + moreButtonWidth < wrapperWidth) {
         setToolbarWrapIndex(i - itemLocations.length + settings.toolbarItems.length);
         if (i === itemLocations.length - 1) {
           setMoreItems(null);
@@ -5545,7 +5882,7 @@ var Toolbar = function Toolbar(_ref) {
         key: name
       }, /*#__PURE__*/React.createElement("div", {
         style: {
-          width: 17,
+          width: 30,
           height: 2,
           backgroundColor: name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor,
           position: "absolute",
@@ -6528,7 +6865,9 @@ var Toolbar = function Toolbar(_ref) {
         }));
       }
     }
-  })) : null);
+  })) : null, settings.toolbarRightRender ? ( /*#__PURE__*/React.createElement("div", {
+    className: "leankylin-toolbar-right"
+  }, (_settings$toolbarRigh = settings.toolbarRightRender) === null || _settings$toolbarRigh === void 0 ? void 0 : _settings$toolbarRigh.call(settings))) : null);
 };
 
 var LocationBox = function LocationBox() {
@@ -7564,7 +7903,10 @@ var ContextMenu = function ContextMenu() {
           onKeyDown: function onKeyDown(e) {
             return e.stopPropagation();
           },
-          type: "text",
+          onMouseDown: function onMouseDown(e) {
+            return e.stopPropagation();
+          },
+          type: "number",
           className: "luckysheet-mousedown-cancel",
           placeholder: rightclick.number,
           defaultValue: "1"
@@ -7617,7 +7959,10 @@ var ContextMenu = function ContextMenu() {
           onKeyDown: function onKeyDown(e) {
             return e.stopPropagation();
           },
-          type: "text",
+          onMouseDown: function onMouseDown(e) {
+            return e.stopPropagation();
+          },
+          type: "number",
           className: "luckysheet-mousedown-cancel",
           placeholder: rightclick.number,
           defaultValue: "1"
@@ -7813,15 +8158,15 @@ var ContextMenu = function ContextMenu() {
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
         },
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
         type: "number",
         min: 1,
         max: 545,
         className: "luckysheet-mousedown-cancel",
         placeholder: rightclick.number,
-        defaultValue: shownRowHeight,
-        style: {
-          width: "40px"
-        }
+        defaultValue: shownRowHeight
       }), "px")) : null;
     }
     if (name === "set-column-width") {
@@ -7861,6 +8206,9 @@ var ContextMenu = function ContextMenu() {
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();
         },
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
         type: "number",
         min: 1,
         max: 545,
@@ -8025,11 +8373,11 @@ var ContextMenu = function ContextMenu() {
       left: contextMenu.x,
       top: contextMenu.y
     }
-  }, context.contextMenu.headerMenu === true ? settings.headerContextMenu.map(function (menu, i) {
+  }, renderCustom(), context.contextMenu.headerMenu === true ? settings.headerContextMenu.map(function (menu, i) {
     return getMenuElement(menu, i);
   }) : settings.cellContextMenu().map(function (menu, i) {
     return getMenuElement(menu, i);
-  }), renderCustom());
+  }));
 };
 
 var SVGDefines = function SVGDefines() {
@@ -9425,67 +9773,6 @@ var SVGDefines = function SVGDefines() {
   }))));
 };
 
-var ChangeColor = function ChangeColor(_ref) {
-  var triggerParentUpdate = _ref.triggerParentUpdate;
-  var _useContext = useContext(WorkbookContext),
-    context = _useContext.context,
-    setContext = _useContext.setContext;
-  var _locale = locale(context),
-    toolbar = _locale.toolbar,
-    sheetconfig = _locale.sheetconfig,
-    button = _locale.button;
-  var _useState = useState("#000000"),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputColor = _useState2[0],
-    setInputColor = _useState2[1];
-  var _useState3 = useState(context.luckysheetfile[getSheetIndex(context, context.currentSheetId)].color),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selectColor = _useState4[0],
-    setSelectColor = _useState4[1];
-  var certainBtn = useCallback(function () {
-    setSelectColor(inputColor);
-  }, [inputColor]);
-  useEffect(function () {
-    setContext(function (ctx) {
-      if (ctx.allowEdit === false) return;
-      var index = getSheetIndex(ctx, ctx.currentSheetId);
-      ctx.luckysheetfile[index].color = selectColor;
-    });
-  }, [selectColor, setContext]);
-  return /*#__PURE__*/React.createElement("div", {
-    id: "leankylin-change-color"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "color-reset",
-    onClick: function onClick() {
-      return setSelectColor(undefined);
-    }
-  }, sheetconfig.resetColor), /*#__PURE__*/React.createElement("div", {
-    className: "custom-color"
-  }, /*#__PURE__*/React.createElement("div", null, toolbar.customColor, ":"), /*#__PURE__*/React.createElement("input", {
-    type: "color",
-    value: inputColor,
-    onChange: function onChange(e) {
-      return setInputColor(e.target.value);
-    },
-    onFocus: function onFocus() {
-      triggerParentUpdate(true);
-    },
-    onBlur: function onBlur() {
-      triggerParentUpdate(false);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
-    onClick: function onClick() {
-      certainBtn();
-    }
-  }, button.confirm)), /*#__PURE__*/React.createElement(ColorPicker, {
-    onPick: function onPick(color) {
-      setInputColor(color);
-      setSelectColor(color);
-    }
-  }));
-};
-
 var SheetTabContextMenu = function SheetTabContextMenu() {
   var _settings$sheetTabCon;
   var _useContext = useContext(WorkbookContext),
@@ -9583,6 +9870,13 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
       });
     });
   }, [context.allowEdit, setContext, sheet === null || sheet === void 0 ? void 0 : sheet.id]);
+  var changeColor = function changeColor(selectColor) {
+    setContext(function (ctx) {
+      if (ctx.allowEdit === false) return;
+      var index = getSheetIndex(ctx, ctx.currentSheetId);
+      ctx.luckysheetfile[index].color = selectColor;
+    });
+  };
   if (!sheet || x == null || y == null) return null;
   return /*#__PURE__*/React.createElement("div", {
     className: "leankylin-context-menu luckysheet-cols-menu",
@@ -9679,9 +9973,15 @@ var SheetTabContextMenu = function SheetTabContextMenu() {
       }, /*#__PURE__*/React.createElement(SVGIcon, {
         name: "rightArrow",
         width: 18
-      })), isShowChangeColor && context.allowEdit && ( /*#__PURE__*/React.createElement(ChangeColor, {
-        triggerParentUpdate: updateShowInputColor
-      })));
+      })), isShowChangeColor && context.allowEdit && ( /*#__PURE__*/React.createElement("div", {
+        className: "leankylin-sheet-color-change"
+      }, /*#__PURE__*/React.createElement(CustomColor, {
+        onCustomPick: function onCustomPick(color) {
+          changeColor(color);
+          setIsShowChangeColor(false);
+        },
+        onColorPick: changeColor
+      }))));
     }
     if (name === "focus") {
       return /*#__PURE__*/React.createElement(Menu, {
@@ -9716,6 +10016,9 @@ var MoreItemsContaier = function MoreItemsContaier(_ref) {
 
 function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cellInput, scrollbarX, scrollbarY, refs) {
   return {
+    replaceVariables: function replaceVariables(_map) {
+      context.formulaCache.parser.replaceVariables(_map);
+    },
     setVariable: function setVariable(name, value) {
       context.formulaCache.parser.setVariable(name, value);
     },
@@ -9909,6 +10212,12 @@ function generateAPIs(context, setContext, handleUndo, handleRedo, settings, cel
         return api.setCellValuesByRange(draftCtx, data, range, cellInput, options);
       });
     },
+    setCellValues: function setCellValues(data) {
+      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return setContext(function (draftCtx) {
+        return api.setCellValues(draftCtx, data, cellInput, options);
+      });
+    },
     setCellFormatByRange: function setCellFormatByRange(attr, value, range) {
       var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
       return setContext(function (draftCtx) {
@@ -10265,6 +10574,9 @@ var FilterMenu = function FilterMenu() {
           backgroundColor: v.color
         }
       }), /*#__PURE__*/React.createElement("input", {
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
         className: "luckysheet-mousedown-cancel",
         type: "checkbox",
         checked: v.checked,
@@ -10431,11 +10743,7 @@ var FilterMenu = function FilterMenu() {
     if (name === "filter-by-value") {
       return /*#__PURE__*/React.createElement("div", {
         key: name
-      }, /*#__PURE__*/React.createElement(Menu, {
-        onClick: function onClick() {}
       }, /*#__PURE__*/React.createElement("div", {
-        className: "filter-caret right"
-      }), filter.filterByValues), /*#__PURE__*/React.createElement("div", {
         className: "luckysheet-filter-byvalue"
       }, /*#__PURE__*/React.createElement("div", {
         className: "leankylin-menuitem-row byvalue-btn-row"
@@ -10562,6 +10870,9 @@ var FilterMenu = function FilterMenu() {
     onMouseLeave: function onMouseLeave() {
       mouseHoverSubMenu.current = false;
       setShowSubMenu(false);
+    },
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
     }
   }, filterColors.bgColors.length < 2 && filterColors.fcColors.length < 2 ? ( /*#__PURE__*/React.createElement("div", {
     className: "one-color-tip"