@fileverse-dev/fortune-react 1.0.2-mod-108 → 1.0.2-mod-110

package/dist/components/Toolbar/Combo.d.ts

@@ -6,6 +6,7 @@ type Props = {
     showArrow?: boolean;
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     children: (setOpen: React.Dispatch<React.SetStateAction<boolean>>) => React.ReactNode;
+    fillColor?: string;
 };
 declare const Combo: React.FC<Props>;
 export default Combo;

package/dist/index.css

@@ -1627,28 +1627,12 @@ line-height: 16px; /* 133.333% */
 
 .fortune-insert-button {
   width: 100% !important;
-  background-color: #000 !important;
-  color: white !important;
   border: none !important;
   border-radius: 6px !important;
   padding: 12px !important;
   font-weight: 500 !important;
 }
 
-.fortune-insert-button:hover {
-  background-color: #333 !important;
-}
-
-.fortune-insert-button:disabled {
-  background-color: #ccc !important;
-  color: #666 !important;
-  cursor: not-allowed !important;
-}
-
-.fortune-insert-button:disabled:hover {
-  background-color: #ccc !important;
-}
-
 .fortune-link-modify-modal.link-toolbar {
   display: flex;
   flex-direction: row;
@@ -2672,6 +2656,10 @@ input[type="number"].condition-rules-project-input {
   gap: 4px;
 }
 
+.custom-color-button > svg > path:first-child {
+  display: none !important;
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;

package/dist/index.esm.css

@@ -1627,28 +1627,12 @@ line-height: 16px; /* 133.333% */
 
 .fortune-insert-button {
   width: 100% !important;
-  background-color: #000 !important;
-  color: white !important;
   border: none !important;
   border-radius: 6px !important;
   padding: 12px !important;
   font-weight: 500 !important;
 }
 
-.fortune-insert-button:hover {
-  background-color: #333 !important;
-}
-
-.fortune-insert-button:disabled {
-  background-color: #ccc !important;
-  color: #666 !important;
-  cursor: not-allowed !important;
-}
-
-.fortune-insert-button:disabled:hover {
-  background-color: #ccc !important;
-}
-
 .fortune-link-modify-modal.link-toolbar {
   display: flex;
   flex-direction: row;
@@ -2672,6 +2656,10 @@ input[type="number"].condition-rules-project-input {
   gap: 4px;
 }
 
+.custom-color-button > svg > path:first-child {
+  display: none !important;
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;

package/dist/index.esm.js

@@ -1942,7 +1942,7 @@ var SearchReplace = function SearchReplace(_ref) {
   }), /*#__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"
+    className: "flex flex-row gap-2 justify-end items-center mb-4"
   }, /*#__PURE__*/React.createElement(Button$1, {
     id: "replaceAllBtn",
     variant: "secondary",
@@ -4564,7 +4564,7 @@ var Button = function Button(_ref) {
     tabIndex: 0,
     role: "button",
     style: selected ? {
-      backgroundColor: "#E7E5EB"
+      backgroundColor: "#FFDF0A"
     } : style
   }, /*#__PURE__*/React.createElement(LucideIcon, {
     name: getLucideIcon(iconId),
@@ -4594,7 +4594,8 @@ var Combo = function Combo(_ref) {
     iconId = _ref.iconId,
     _ref$showArrow = _ref.showArrow,
     showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-    children = _ref.children;
+    children = _ref.children,
+    fillColor = _ref.fillColor;
   var style = {
     userSelect: "none"
   };
@@ -4604,7 +4605,7 @@ var Combo = function Combo(_ref) {
     setOpen = _useState2[1];
   var buttonRef = useRef(null);
   var isLucideIcon = useMemo(function () {
-    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template"].includes(iconId);
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template", "font-color", "background"].includes(iconId);
   }, [iconId]);
   var trigger = !isLucideIcon ? (/*#__PURE__*/React.createElement(Tooltip, {
     text: tooltip,
@@ -4635,7 +4636,12 @@ var Combo = function Combo(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    className: "fortune-toolbar-combo-button"
+    className: cn("fortune-toolbar-combo-button", {
+      "custom-color-button": iconId === "font-color" && fillColor
+    }),
+    style: {
+      color: iconId === "font-color" ? fillColor : undefined
+    }
   })));
   return /*#__PURE__*/React.createElement("div", {
     ref: buttonRef,
@@ -5342,7 +5348,7 @@ var CustomButton = function CustomButton(_ref) {
     tabIndex: 0,
     role: "button",
     style: selected ? {
-      backgroundColor: "#E7E5EB"
+      backgroundColor: "#FFDF0A"
     } : {}
   }, /*#__PURE__*/React.createElement(CustomIcon, {
     width: 16,
@@ -5623,7 +5629,9 @@ var MoreItemsContaier = function MoreItemsContaier(_ref) {
     children = _ref.children;
   var containerRef = useRef(null);
   useOutsideClick(containerRef, function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, 100);
   }, [containerRef, onClose]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
@@ -5876,18 +5884,19 @@ var Toolbar = function Toolbar(_ref) {
         key: name
       }, /*#__PURE__*/React.createElement("div", {
         style: {
-          width: 17,
-          height: 2,
+          width: 24,
+          height: 4,
           backgroundColor: name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor,
           position: "absolute",
-          bottom: 8,
-          left: 9,
+          bottom: 2,
+          left: 3,
           zIndex: 100
         }
       }), /*#__PURE__*/React.createElement(Combo, {
         iconId: name,
         tooltip: tooltip,
         showArrow: false,
+        fillColor: name === "font-color" ? refs.globalCache.recentTextColor : undefined,
         onClick: function onClick() {
           var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
           if (color) pick(color);

package/dist/index.js

@@ -1954,7 +1954,7 @@ var SearchReplace = function SearchReplace(_ref) {
   }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/React__default['default'].createElement(ui.Divider, {
     className: "w-full border-t-[1px]"
   }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "flex flex-row gap-2 justify-center items-center mb-4"
+    className: "flex flex-row gap-2 justify-end items-center mb-4"
   }, /*#__PURE__*/React__default['default'].createElement(ui.Button, {
     id: "replaceAllBtn",
     variant: "secondary",
@@ -4576,7 +4576,7 @@ var Button = function Button(_ref) {
     tabIndex: 0,
     role: "button",
     style: selected ? {
-      backgroundColor: "#E7E5EB"
+      backgroundColor: "#FFDF0A"
     } : style
   }, /*#__PURE__*/React__default['default'].createElement(ui.LucideIcon, {
     name: getLucideIcon(iconId),
@@ -4606,7 +4606,8 @@ var Combo = function Combo(_ref) {
     iconId = _ref.iconId,
     _ref$showArrow = _ref.showArrow,
     showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-    children = _ref.children;
+    children = _ref.children,
+    fillColor = _ref.fillColor;
   var style = {
     userSelect: "none"
   };
@@ -4616,7 +4617,7 @@ var Combo = function Combo(_ref) {
     setOpen = _useState2[1];
   var buttonRef = React.useRef(null);
   var isLucideIcon = React.useMemo(function () {
-    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template"].includes(iconId);
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template", "font-color", "background"].includes(iconId);
   }, [iconId]);
   var trigger = !isLucideIcon ? (/*#__PURE__*/React__default['default'].createElement(ui.Tooltip, {
     text: tooltip,
@@ -4647,7 +4648,12 @@ var Combo = function Combo(_ref) {
     onClick: function onClick() {
       return setOpen(!open);
     },
-    className: "fortune-toolbar-combo-button"
+    className: ui.cn("fortune-toolbar-combo-button", {
+      "custom-color-button": iconId === "font-color" && fillColor
+    }),
+    style: {
+      color: iconId === "font-color" ? fillColor : undefined
+    }
   })));
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: buttonRef,
@@ -5354,7 +5360,7 @@ var CustomButton = function CustomButton(_ref) {
     tabIndex: 0,
     role: "button",
     style: selected ? {
-      backgroundColor: "#E7E5EB"
+      backgroundColor: "#FFDF0A"
     } : {}
   }, /*#__PURE__*/React__default['default'].createElement(CustomIcon, {
     width: 16,
@@ -5635,7 +5641,9 @@ var MoreItemsContaier = function MoreItemsContaier(_ref) {
     children = _ref.children;
   var containerRef = React.useRef(null);
   useOutsideClick(containerRef, function () {
-    onClose === null || onClose === void 0 ? void 0 : onClose();
+    setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, 100);
   }, [containerRef, onClose]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     ref: containerRef,
@@ -5888,18 +5896,19 @@ var Toolbar = function Toolbar(_ref) {
         key: name
       }, /*#__PURE__*/React__default['default'].createElement("div", {
         style: {
-          width: 17,
-          height: 2,
+          width: 24,
+          height: 4,
           backgroundColor: name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor,
           position: "absolute",
-          bottom: 8,
-          left: 9,
+          bottom: 2,
+          left: 3,
           zIndex: 100
         }
       }), /*#__PURE__*/React__default['default'].createElement(Combo, {
         iconId: name,
         tooltip: tooltip,
         showArrow: false,
+        fillColor: name === "font-color" ? refs.globalCache.recentTextColor : undefined,
         onClick: function onClick() {
           var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
           if (color) pick(color);

package/dist/index.umd.css

@@ -1627,28 +1627,12 @@ line-height: 16px; /* 133.333% */
 
 .fortune-insert-button {
   width: 100% !important;
-  background-color: #000 !important;
-  color: white !important;
   border: none !important;
   border-radius: 6px !important;
   padding: 12px !important;
   font-weight: 500 !important;
 }
 
-.fortune-insert-button:hover {
-  background-color: #333 !important;
-}
-
-.fortune-insert-button:disabled {
-  background-color: #ccc !important;
-  color: #666 !important;
-  cursor: not-allowed !important;
-}
-
-.fortune-insert-button:disabled:hover {
-  background-color: #ccc !important;
-}
-
 .fortune-link-modify-modal.link-toolbar {
   display: flex;
   flex-direction: row;
@@ -2672,6 +2656,10 @@ input[type="number"].condition-rules-project-input {
   gap: 4px;
 }
 
+.custom-color-button > svg > path:first-child {
+  display: none !important;
+}
+
 #fortune-split-column {
   /* position: absolute;
     padding: 30px 42px;

package/dist/index.umd.js

@@ -106747,7 +106747,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
     }), /*#__PURE__*/React__default['default'].createElement("span", null, findAndReplace.wholeTextbox)))), /*#__PURE__*/React__default['default'].createElement(o8, {
       className: "w-full border-t-[1px]"
     }), /*#__PURE__*/React__default['default'].createElement("div", {
-      className: "flex flex-row gap-2 justify-center items-center mb-4"
+      className: "flex flex-row gap-2 justify-end items-center mb-4"
     }, /*#__PURE__*/React__default['default'].createElement(_t, {
       id: "replaceAllBtn",
       variant: "secondary",
@@ -109369,7 +109369,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       tabIndex: 0,
       role: "button",
       style: selected ? {
-        backgroundColor: "#E7E5EB"
+        backgroundColor: "#FFDF0A"
       } : style
     }, /*#__PURE__*/React__default['default'].createElement(Ce, {
       name: getLucideIcon(iconId),
@@ -109399,7 +109399,8 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       iconId = _ref.iconId,
       _ref$showArrow = _ref.showArrow,
       showArrow = _ref$showArrow === void 0 ? true : _ref$showArrow,
-      children = _ref.children;
+      children = _ref.children,
+      fillColor = _ref.fillColor;
     var style = {
       userSelect: "none"
     };
@@ -109409,7 +109410,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       setOpen = _useState2[1];
     var buttonRef = React.useRef(null);
     var isLucideIcon = React.useMemo(function () {
-      return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template"].includes(iconId);
+      return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template", "font-color", "background"].includes(iconId);
     }, [iconId]);
     var trigger = !isLucideIcon ? (/*#__PURE__*/React__default['default'].createElement(Ts, {
       text: tooltip,
@@ -109440,7 +109441,12 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       onClick: function onClick() {
         return setOpen(!open);
       },
-      className: "fortune-toolbar-combo-button"
+      className: S$1("fortune-toolbar-combo-button", {
+        "custom-color-button": iconId === "font-color" && fillColor
+      }),
+      style: {
+        color: iconId === "font-color" ? fillColor : undefined
+      }
     })));
     return /*#__PURE__*/React__default['default'].createElement("div", {
       ref: buttonRef,
@@ -110147,7 +110153,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       tabIndex: 0,
       role: "button",
       style: selected ? {
-        backgroundColor: "#E7E5EB"
+        backgroundColor: "#FFDF0A"
       } : {}
     }, /*#__PURE__*/React__default['default'].createElement(CustomIcon, {
       width: 16,
@@ -110428,7 +110434,9 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       children = _ref.children;
     var containerRef = React.useRef(null);
     useOutsideClick(containerRef, function () {
-      onClose === null || onClose === void 0 ? void 0 : onClose();
+      setTimeout(function () {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      }, 100);
     }, [containerRef, onClose]);
     return /*#__PURE__*/React__default['default'].createElement("div", {
       ref: containerRef,
@@ -110681,18 +110689,19 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
           key: name
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           style: {
-            width: 17,
-            height: 2,
+            width: 24,
+            height: 4,
             backgroundColor: name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor,
             position: "absolute",
-            bottom: 8,
-            left: 9,
+            bottom: 2,
+            left: 3,
             zIndex: 100
           }
         }), /*#__PURE__*/React__default['default'].createElement(Combo, {
           iconId: name,
           tooltip: tooltip,
           showArrow: false,
+          fillColor: name === "font-color" ? refs.globalCache.recentTextColor : undefined,
           onClick: function onClick() {
             var color = name === "font-color" ? refs.globalCache.recentTextColor : refs.globalCache.recentBackgroundColor;
             if (color) pick(color);