@fileverse-dev/fortune-react 1.0.2-mod-51 → 1.0.2-mod-53

package/dist/index.css

@@ -2346,8 +2346,7 @@ input[type="number"].condition-rules-project-input {
   display: none;
 }
 
-.fortune-toolbar-select,
-.fortune-toolbar-color-picker {
+.fortune-toolbar-select {
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   padding: 0.5rem;
   border: 1px solid hsl(var(--color-border-default));
@@ -2356,6 +2355,19 @@ input[type="number"].condition-rules-project-input {
   min-width: 240px;
 }
 
+.fortune-toolbar-color-picker {
+  z-index: 50;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  background: rgb(255, 255, 255);
+  transition: all 0.2s ease;
+  border-radius: 0px 0px 4px 4px;
+}
+
 .fortune-toolbar-select {
   overflow: auto;
   max-height: 75vh;
@@ -2398,9 +2410,19 @@ input[type="number"].condition-rules-project-input {
 }
 
 .fortune-toolbar-color-picker-item {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease-in;
   margin: 1px;
+}
+
+.fortune-toolbar-color-picker-item:hover {
+  transform: scale(1.05);
   cursor: pointer;
 }
 
@@ -2477,11 +2499,18 @@ input[type="number"].condition-rules-project-input {
 
 #fortune-custom-color {
   min-width: 164px;
-  background: rgb(240, 240, 240);
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  background: #fff;
+  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 12px;
+  padding: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  max-height: 400px;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 #fortune-custom-color .color-reset {
@@ -2489,16 +2518,21 @@ input[type="number"].condition-rules-project-input {
   color: #333;
   cursor: pointer;
   list-style: none;
-  padding: 10px;
   white-space: nowrap;
-  padding-left: 8px;
   vertical-align: middle;
-  padding-right: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 6px;
   background: white;
+  padding: 4px 8px;
+  height: 30px;
+  border-radius: 4px 4px 0px 0px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 #fortune-custom-color .color-reset:hover {
@@ -2622,6 +2656,37 @@ input[type="number"].condition-rules-project-input {
     z-index: 1002; */
   /* min-width: 500px; */
   width: 464px;
+
+  input[type="checkbox"] {
+    accent-color: black;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid black;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+  }
+  
+  input[type="checkbox"]:checked {
+    background-color: black;
+    border-color: black;
+  }
+  
+  /* Smaller tick mark */
+  input[type="checkbox"]:checked::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    width: 4px;      /* Reduced from default */
+    height: 7px;     /* Reduced from default */
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+  }
 }
 #fortune-split-column label {
   -webkit-user-select: none;
@@ -2634,39 +2699,6 @@ input[type="number"].condition-rules-project-input {
 #fortune-split-column .splitDelimiters {
   margin-top: 20px;
 }
-
-
-
-input[type="checkbox"] {
-  accent-color: black;
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 1.5px solid black;
-  border-radius: 3px;
-  position: relative;
-  cursor: pointer;
-}
-
-input[type="checkbox"]:checked {
-  background-color: black;
-  border-color: black;
-}
-
-/* Smaller tick mark */
-input[type="checkbox"]:checked::before {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 4px;
-  width: 4px;      /* Reduced from default */
-  height: 7px;     /* Reduced from default */
-  border: solid white;
-  border-width: 0 1px 1px 0;
-  transform: rotate(45deg);
-}
 .splitSymbols {
   width: 464px
 }

package/dist/index.esm.css

@@ -2346,8 +2346,7 @@ input[type="number"].condition-rules-project-input {
   display: none;
 }
 
-.fortune-toolbar-select,
-.fortune-toolbar-color-picker {
+.fortune-toolbar-select {
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   padding: 0.5rem;
   border: 1px solid hsl(var(--color-border-default));
@@ -2356,6 +2355,19 @@ input[type="number"].condition-rules-project-input {
   min-width: 240px;
 }
 
+.fortune-toolbar-color-picker {
+  z-index: 50;
+  height: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  overflow-y: auto;
+  scroll-behavior: smooth;
+  background: rgb(255, 255, 255);
+  transition: all 0.2s ease;
+  border-radius: 0px 0px 4px 4px;
+}
+
 .fortune-toolbar-select {
   overflow: auto;
   max-height: 75vh;
@@ -2398,9 +2410,19 @@ input[type="number"].condition-rules-project-input {
 }
 
 .fortune-toolbar-color-picker-item {
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s ease-in;
   margin: 1px;
+}
+
+.fortune-toolbar-color-picker-item:hover {
+  transform: scale(1.05);
   cursor: pointer;
 }
 
@@ -2477,11 +2499,18 @@ input[type="number"].condition-rules-project-input {
 
 #fortune-custom-color {
   min-width: 164px;
-  background: rgb(240, 240, 240);
-  border-radius: 6px;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
+  background: #fff;
+  border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   font-size: 12px;
+  padding: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  max-height: 400px;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 #fortune-custom-color .color-reset {
@@ -2489,16 +2518,21 @@ input[type="number"].condition-rules-project-input {
   color: #333;
   cursor: pointer;
   list-style: none;
-  padding: 10px;
   white-space: nowrap;
-  padding-left: 8px;
   vertical-align: middle;
-  padding-right: 24px;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 6px;
   background: white;
+  padding: 4px 8px;
+  height: 30px;
+  border-radius: 4px 4px 0px 0px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
 }
 
 #fortune-custom-color .color-reset:hover {
@@ -2622,6 +2656,37 @@ input[type="number"].condition-rules-project-input {
     z-index: 1002; */
   /* min-width: 500px; */
   width: 464px;
+
+  input[type="checkbox"] {
+    accent-color: black;
+    -moz-appearance: none;
+         appearance: none;
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1.5px solid black;
+    border-radius: 3px;
+    position: relative;
+    cursor: pointer;
+  }
+  
+  input[type="checkbox"]:checked {
+    background-color: black;
+    border-color: black;
+  }
+  
+  /* Smaller tick mark */
+  input[type="checkbox"]:checked::before {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 4px;
+    width: 4px;      /* Reduced from default */
+    height: 7px;     /* Reduced from default */
+    border: solid white;
+    border-width: 0 1px 1px 0;
+    transform: rotate(45deg);
+  }
 }
 #fortune-split-column label {
   -webkit-user-select: none;
@@ -2634,39 +2699,6 @@ input[type="number"].condition-rules-project-input {
 #fortune-split-column .splitDelimiters {
   margin-top: 20px;
 }
-
-
-
-input[type="checkbox"] {
-  accent-color: black;
-  -moz-appearance: none;
-       appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 1.5px solid black;
-  border-radius: 3px;
-  position: relative;
-  cursor: pointer;
-}
-
-input[type="checkbox"]:checked {
-  background-color: black;
-  border-color: black;
-}
-
-/* Smaller tick mark */
-input[type="checkbox"]:checked::before {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 4px;
-  width: 4px;      /* Reduced from default */
-  height: 7px;     /* Reduced from default */
-  border: solid white;
-  border-width: 0 1px 1px 0;
-  transform: rotate(45deg);
-}
 .splitSymbols {
   width: 464px
 }

package/dist/index.esm.js

@@ -4688,9 +4688,8 @@ var SplitColumn = function SplitColumn() {
       type: "checkbox",
       onClick: function onClick() {
         setSplitOperate(function (regStr) {
-          var _splitSymbols$current, _splitSymbols$current2;
-          console.log(getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes));
-          return getRegStr(regStr, (_splitSymbols$current2 = splitSymbols.current) === null || _splitSymbols$current2 === void 0 ? void 0 : _splitSymbols$current2.childNodes);
+          var _splitSymbols$current;
+          return getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes);
         });
       },
       tabIndex: 0
@@ -4707,8 +4706,8 @@ var SplitColumn = function SplitColumn() {
     onClick: function onClick() {
       setOtherFlag(!otherFlag);
       setSplitOperate(function (regStr) {
-        var _splitSymbols$current3;
-        return getRegStr(regStr, (_splitSymbols$current3 = splitSymbols.current) === null || _splitSymbols$current3 === void 0 ? void 0 : _splitSymbols$current3.childNodes);
+        var _splitSymbols$current2;
+        return getRegStr(regStr, (_splitSymbols$current2 = splitSymbols.current) === null || _splitSymbols$current2 === void 0 ? void 0 : _splitSymbols$current2.childNodes);
       });
     },
     tabIndex: 0
@@ -4721,8 +4720,8 @@ var SplitColumn = function SplitColumn() {
     onBlur: function onBlur() {
       if (otherFlag) {
         setSplitOperate(function (regStr) {
-          var _splitSymbols$current4;
-          return getRegStr(regStr, (_splitSymbols$current4 = splitSymbols.current) === null || _splitSymbols$current4 === void 0 ? void 0 : _splitSymbols$current4.childNodes);
+          var _splitSymbols$current3;
+          return getRegStr(regStr, (_splitSymbols$current3 = splitSymbols.current) === null || _splitSymbols$current3 === void 0 ? void 0 : _splitSymbols$current3.childNodes);
         });
       }
     }
@@ -4734,8 +4733,8 @@ var SplitColumn = function SplitColumn() {
     type: "checkbox",
     onClick: function onClick() {
       setSplitOperate(function (regStr) {
-        var _splitSymbols$current5;
-        return getRegStr(regStr, (_splitSymbols$current5 = splitSymbols.current) === null || _splitSymbols$current5 === void 0 ? void 0 : _splitSymbols$current5.childNodes);
+        var _splitSymbols$current4;
+        return getRegStr(regStr, (_splitSymbols$current4 = splitSymbols.current) === null || _splitSymbols$current4 === void 0 ? void 0 : _splitSymbols$current4.childNodes);
       });
     },
     tabIndex: 0
@@ -5260,7 +5259,7 @@ var CustomButton = function CustomButton(_ref) {
   }, tooltip), children);
 };
 
-var palette = [["#000000", "#444444", "#666666", "#999999", "#cccccc", "#eeeeee", "#f3f3f3", "#ffffff"], ["#f00f00", "#f90f90", "#ff0ff0", "#0f00f0", "#0ff0ff", "#00f00f", "#90f90f", "#f0ff0f"], ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"], ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"], ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"], ["#c00c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"], ["#900900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"], ["#600600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]];
+var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
 var ColorPicker = function ColorPicker(_ref) {
   var onPick = _ref.onPick;
   return /*#__PURE__*/React.createElement("div", {
@@ -5278,7 +5277,8 @@ var ColorPicker = function ColorPicker(_ref) {
         },
         tabIndex: 0,
         style: {
-          backgroundColor: c
+          backgroundColor: c,
+          border: c === "#ffffff" ? "1px solid #E8EBEC" : "none"
         }
       });
     }));
@@ -5288,16 +5288,6 @@ var ColorPicker = function ColorPicker(_ref) {
 var CustomColor = function CustomColor(_ref) {
   var onCustomPick = _ref.onCustomPick,
     onColorPick = _ref.onColorPick;
-  var _useContext = useContext(WorkbookContext),
-    context = _useContext.context;
-  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];
   return /*#__PURE__*/React.createElement("div", {
     id: "fortune-custom-color"
   }, /*#__PURE__*/React.createElement("div", {
@@ -5306,21 +5296,11 @@ var CustomColor = function CustomColor(_ref) {
       return onCustomPick(undefined);
     },
     tabIndex: 0
-  }, 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);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "button-basic button-primary",
-    onClick: function onClick() {
-      onCustomPick(inputColor);
-    },
-    tabIndex: 0
-  }, button.confirm)), /*#__PURE__*/React.createElement(ColorPicker, {
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/React.createElement(ColorPicker, {
     onPick: function onPick(color) {
       onColorPick(color);
     }
@@ -10479,7 +10459,30 @@ var SVGDefines = function SVGDefines(_ref) {
   }), /*#__PURE__*/React.createElement("path", {
     d: "M6.64775 8.97978L3.77152 6.10355C3.45654 5.78857 3.67962 5.25 4.12507 5.25H9.87753C10.323 5.25 10.5461 5.78857 10.2311 6.10355L7.35486 8.97978C7.15959 9.17504 6.84301 9.17504 6.64775 8.97978Z",
     fill: "#363B3F"
-  }))));
+  })), /*#__PURE__*/React.createElement("symbol", {
+    id: "reset-color",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M0.862148 0.862148C1.10623 0.618071 1.49223 0.603009 1.75408 0.816575L1.80486 0.862148L12.551 11.6082C12.5999 11.6454 12.6425 11.6884 12.6786 11.7358L15.1382 14.1955L15.1838 14.2463C15.3972 14.5081 15.3822 14.8942 15.1382 15.1382C14.8942 15.3822 14.5081 15.3972 14.2463 15.1838L14.1955 15.1382L12.2625 13.2052C11.7308 13.9122 11.0289 14.4803 10.2157 14.8517C9.12793 15.3485 7.90444 15.4657 6.74236 15.1838C5.58035 14.9018 4.54658 14.237 3.80746 13.297C3.11451 12.4157 2.71809 11.3399 2.67139 10.2235L2.66684 10.0002C2.66684 8.42922 3.45419 6.99237 4.89079 5.8335L0.862148 1.80486L0.816576 1.75408C0.603009 1.49223 0.618071 1.10623 0.862148 0.862148ZM5.75082 6.85368C4.53724 7.82455 4.00017 8.91389 4.00017 10.0002L4.00342 10.1681C4.03852 11.0053 4.33604 11.8119 4.85564 12.4728C5.40996 13.1777 6.18536 13.676 7.05681 13.8875C7.92833 14.099 8.84587 14.0114 9.66163 13.6388C10.3296 13.3337 10.8972 12.8516 11.3068 12.2495L5.83741 6.78012C5.80821 6.80424 5.78036 6.83 5.75082 6.85368Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13.1121 8.58741C13.2242 8.93794 13.0303 9.31366 12.6799 9.42595C12.3294 9.53789 11.9543 9.34458 11.842 8.99431L13.1121 8.58741Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8.00147 1.3335C8.31859 1.33426 8.59155 1.55835 8.65382 1.86931C8.95517 3.3758 9.86768 4.83997 11.0835 5.81267L11.2677 5.96501C12.171 6.73236 12.8015 7.61685 13.1121 8.58741L12.4767 8.79053L11.842 8.99431C11.6214 8.30509 11.1562 7.61973 10.4045 6.98129L10.2508 6.85434C9.31898 6.10886 8.53727 5.12515 8.00017 4.03337C7.83296 4.35237 7.44178 4.48213 7.11671 4.32243C6.78643 4.15985 6.6502 3.76015 6.81267 3.42986C7.05681 2.9339 7.23662 2.40833 7.34717 1.86671L7.3615 1.80941C7.44507 1.52891 7.70415 1.33298 8.00147 1.3335Z",
+    fill: "#363B3F"
+  })))));
 };
 
 var ChangeColor = function ChangeColor(_ref) {

package/dist/index.js

@@ -4700,9 +4700,8 @@ var SplitColumn = function SplitColumn() {
       type: "checkbox",
       onClick: function onClick() {
         setSplitOperate(function (regStr) {
-          var _splitSymbols$current, _splitSymbols$current2;
-          console.log(fortuneCore.getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes));
-          return fortuneCore.getRegStr(regStr, (_splitSymbols$current2 = splitSymbols.current) === null || _splitSymbols$current2 === void 0 ? void 0 : _splitSymbols$current2.childNodes);
+          var _splitSymbols$current;
+          return fortuneCore.getRegStr(regStr, (_splitSymbols$current = splitSymbols.current) === null || _splitSymbols$current === void 0 ? void 0 : _splitSymbols$current.childNodes);
         });
       },
       tabIndex: 0
@@ -4719,8 +4718,8 @@ var SplitColumn = function SplitColumn() {
     onClick: function onClick() {
       setOtherFlag(!otherFlag);
       setSplitOperate(function (regStr) {
-        var _splitSymbols$current3;
-        return fortuneCore.getRegStr(regStr, (_splitSymbols$current3 = splitSymbols.current) === null || _splitSymbols$current3 === void 0 ? void 0 : _splitSymbols$current3.childNodes);
+        var _splitSymbols$current2;
+        return fortuneCore.getRegStr(regStr, (_splitSymbols$current2 = splitSymbols.current) === null || _splitSymbols$current2 === void 0 ? void 0 : _splitSymbols$current2.childNodes);
       });
     },
     tabIndex: 0
@@ -4733,8 +4732,8 @@ var SplitColumn = function SplitColumn() {
     onBlur: function onBlur() {
       if (otherFlag) {
         setSplitOperate(function (regStr) {
-          var _splitSymbols$current4;
-          return fortuneCore.getRegStr(regStr, (_splitSymbols$current4 = splitSymbols.current) === null || _splitSymbols$current4 === void 0 ? void 0 : _splitSymbols$current4.childNodes);
+          var _splitSymbols$current3;
+          return fortuneCore.getRegStr(regStr, (_splitSymbols$current3 = splitSymbols.current) === null || _splitSymbols$current3 === void 0 ? void 0 : _splitSymbols$current3.childNodes);
         });
       }
     }
@@ -4746,8 +4745,8 @@ var SplitColumn = function SplitColumn() {
     type: "checkbox",
     onClick: function onClick() {
       setSplitOperate(function (regStr) {
-        var _splitSymbols$current5;
-        return fortuneCore.getRegStr(regStr, (_splitSymbols$current5 = splitSymbols.current) === null || _splitSymbols$current5 === void 0 ? void 0 : _splitSymbols$current5.childNodes);
+        var _splitSymbols$current4;
+        return fortuneCore.getRegStr(regStr, (_splitSymbols$current4 = splitSymbols.current) === null || _splitSymbols$current4 === void 0 ? void 0 : _splitSymbols$current4.childNodes);
       });
     },
     tabIndex: 0
@@ -5272,7 +5271,7 @@ var CustomButton = function CustomButton(_ref) {
   }, tooltip), children);
 };
 
-var palette = [["#000000", "#444444", "#666666", "#999999", "#cccccc", "#eeeeee", "#f3f3f3", "#ffffff"], ["#f00f00", "#f90f90", "#ff0ff0", "#0f00f0", "#0ff0ff", "#00f00f", "#90f90f", "#f0ff0f"], ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"], ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"], ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"], ["#c00c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"], ["#900900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"], ["#600600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]];
+var palette = [["#000000", "#444444", "#666666", "#999999", "#B7B7B7", "#cccccc", "#D9D9D9", "#EFEFEF", "#f3f3f3", "#ffffff"], ["#970007", "#FE0012", "#FE9728", "#FFFD40", "#27FD3C", "#21FFFF", "#4A89E4", "#0027F9", "#9726FA", "#FD23FA"], ["#E6B8B0", "#f4cccc", "#FCE5CF", "#FFF1CF", "#DAEAD4", "#D0E0E3", "#C9DBF7", "#CFE3F2", "#D9D3E8", "#EAD1DC"], ["#DC7D6D", "#E9999A", "#F9CAA0", "#FFE49F", "#B7D6AB", "#A3C4C9", "#A4C3F2", "#A0C6E6", "#B4A8D4", "#D5A7BC"], ["#CB402B", "#DF6668", "#F6B171", "#FFD871", "#95C382", "#77A6AF", "#6DA0E8", "#70AADA", "#8E7EC0", "#C17C9F"], ["#A51A0A", "#CB000C", "#E59043", "#F1C046", "#6CA756", "#46828D", "#3C7BD4", "#3E87C3", "#6651A4", "#A54E78"], ["#841F11", "#980007", "#B35E19", "#BF8F22", "#3A7527", "#15505B", "#0E5AC8", "#0B5592", "#0B5592", "#731C46"], ["#5B0E03", "#660003", "#783E0E", "#7F5F13", "#284E19", "#0D343D", "#1C4785", "#073961", "#1F154B", "#4C112F"]];
 var ColorPicker = function ColorPicker(_ref) {
   var onPick = _ref.onPick;
   return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5290,7 +5289,8 @@ var ColorPicker = function ColorPicker(_ref) {
         },
         tabIndex: 0,
         style: {
-          backgroundColor: c
+          backgroundColor: c,
+          border: c === "#ffffff" ? "1px solid #E8EBEC" : "none"
         }
       });
     }));
@@ -5300,16 +5300,6 @@ var ColorPicker = function ColorPicker(_ref) {
 var CustomColor = function CustomColor(_ref) {
   var onCustomPick = _ref.onCustomPick,
     onColorPick = _ref.onColorPick;
-  var _useContext = React.useContext(WorkbookContext),
-    context = _useContext.context;
-  var _locale = fortuneCore.locale(context),
-    toolbar = _locale.toolbar,
-    sheetconfig = _locale.sheetconfig,
-    button = _locale.button;
-  var _useState = React.useState("#000000"),
-    _useState2 = _slicedToArray(_useState, 2),
-    inputColor = _useState2[0],
-    setInputColor = _useState2[1];
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "fortune-custom-color"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -5318,21 +5308,11 @@ var CustomColor = function CustomColor(_ref) {
       return onCustomPick(undefined);
     },
     tabIndex: 0
-  }, sheetconfig.resetColor), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "custom-color"
-  }, /*#__PURE__*/React__default['default'].createElement("div", null, toolbar.customColor, ":"), /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "color",
-    value: inputColor,
-    onChange: function onChange(e) {
-      return setInputColor(e.target.value);
-    }
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "button-basic button-primary",
-    onClick: function onClick() {
-      onCustomPick(inputColor);
-    },
-    tabIndex: 0
-  }, button.confirm)), /*#__PURE__*/React__default['default'].createElement(ColorPicker, {
+  }, /*#__PURE__*/React__default['default'].createElement(SVGIcon, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/React__default['default'].createElement(ColorPicker, {
     onPick: function onPick(color) {
       onColorPick(color);
     }
@@ -10491,7 +10471,30 @@ var SVGDefines = function SVGDefines(_ref) {
   }), /*#__PURE__*/React__default['default'].createElement("path", {
     d: "M6.64775 8.97978L3.77152 6.10355C3.45654 5.78857 3.67962 5.25 4.12507 5.25H9.87753C10.323 5.25 10.5461 5.78857 10.2311 6.10355L7.35486 8.97978C7.15959 9.17504 6.84301 9.17504 6.64775 8.97978Z",
     fill: "#363B3F"
-  }))));
+  })), /*#__PURE__*/React__default['default'].createElement("symbol", {
+    id: "reset-color",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/React__default['default'].createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M0.862148 0.862148C1.10623 0.618071 1.49223 0.603009 1.75408 0.816575L1.80486 0.862148L12.551 11.6082C12.5999 11.6454 12.6425 11.6884 12.6786 11.7358L15.1382 14.1955L15.1838 14.2463C15.3972 14.5081 15.3822 14.8942 15.1382 15.1382C14.8942 15.3822 14.5081 15.3972 14.2463 15.1838L14.1955 15.1382L12.2625 13.2052C11.7308 13.9122 11.0289 14.4803 10.2157 14.8517C9.12793 15.3485 7.90444 15.4657 6.74236 15.1838C5.58035 14.9018 4.54658 14.237 3.80746 13.297C3.11451 12.4157 2.71809 11.3399 2.67139 10.2235L2.66684 10.0002C2.66684 8.42922 3.45419 6.99237 4.89079 5.8335L0.862148 1.80486L0.816576 1.75408C0.603009 1.49223 0.618071 1.10623 0.862148 0.862148ZM5.75082 6.85368C4.53724 7.82455 4.00017 8.91389 4.00017 10.0002L4.00342 10.1681C4.03852 11.0053 4.33604 11.8119 4.85564 12.4728C5.40996 13.1777 6.18536 13.676 7.05681 13.8875C7.92833 14.099 8.84587 14.0114 9.66163 13.6388C10.3296 13.3337 10.8972 12.8516 11.3068 12.2495L5.83741 6.78012C5.80821 6.80424 5.78036 6.83 5.75082 6.85368Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M13.1121 8.58741C13.2242 8.93794 13.0303 9.31366 12.6799 9.42595C12.3294 9.53789 11.9543 9.34458 11.842 8.99431L13.1121 8.58741Z",
+    fill: "#363B3F"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    d: "M8.00147 1.3335C8.31859 1.33426 8.59155 1.55835 8.65382 1.86931C8.95517 3.3758 9.86768 4.83997 11.0835 5.81267L11.2677 5.96501C12.171 6.73236 12.8015 7.61685 13.1121 8.58741L12.4767 8.79053L11.842 8.99431C11.6214 8.30509 11.1562 7.61973 10.4045 6.98129L10.2508 6.85434C9.31898 6.10886 8.53727 5.12515 8.00017 4.03337C7.83296 4.35237 7.44178 4.48213 7.11671 4.32243C6.78643 4.15985 6.6502 3.76015 6.81267 3.42986C7.05681 2.9339 7.23662 2.40833 7.34717 1.86671L7.3615 1.80941C7.44507 1.52891 7.70415 1.33298 8.00147 1.3335Z",
+    fill: "#363B3F"
+  })))));
 };
 
 var ChangeColor = function ChangeColor(_ref) {