Improve: Set a separate fill color for text

packages/react-filerobot-image-editor/src/actions/index.js

@@ -36,7 +36,7 @@ import enableTextContentEdit, {
 import setResize, { SET_RESIZE } from './setResize';
 import setSaved, { SET_SAVED } from './setSaved';
 import updateState, { UPDATE_STATE } from './updateState';
-import setLatestColor, { SET_LATEST_COLOR } from './setLatestColor';
+import setLatestColor, { SET_LATEST_COLOR, SET_LATEST_TEXT_COLOR, setLatestTextColor } from './setLatestColor';
 import setShowTabsMenu, { SET_SHOWN_TABS_MENU } from './setShowTabsMenu';
 
 export default {
@@ -55,6 +55,7 @@ export default {
   [SET_SHOWN_IMAGE_DIMENSIONS]: setShownImageDimensions,
   [ENABLE_TEXT_CONTENT_EDIT]: enableTextContentEdit,
   [SET_LATEST_COLOR]: setLatestColor,
+  [SET_LATEST_TEXT_COLOR]: setLatestTextColor,
   [SET_SHOWN_TABS_MENU]: setShowTabsMenu,
   // Start of Design actions...
   [ADD_FILTER]: addFilter,
@@ -90,6 +91,7 @@ export {
   SET_SHOWN_IMAGE_DIMENSIONS,
   ENABLE_TEXT_CONTENT_EDIT,
   SET_LATEST_COLOR,
+  SET_LATEST_TEXT_COLOR,
   SET_SHOWN_TABS_MENU,
   // Start of Design actions...
   ADD_FILTER,

packages/react-filerobot-image-editor/src/actions/setLatestColor.js

@@ -1,4 +1,5 @@
 export const SET_LATEST_COLOR = 'SET_LATEST_COLOR';
+export const SET_LATEST_TEXT_COLOR = 'SET_LATEST_TEXT_COLOR';
 
 const setLatestColor = (state, payload) => ({
   ...state,
@@ -8,4 +9,12 @@ const setLatestColor = (state, payload) => ({
   },
 });
 
+export const setLatestTextColor = (state, payload) => ({
+  ...state,
+  latestTextColors: {
+    ...state.latestTextColors,
+    ...payload.latestTextColors,
+  },
+})
+
 export default setLatestColor;

packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx

@@ -117,6 +117,7 @@ const AnnotationOptions = ({
     >
       {!hideFillOption && (
         <ColorInput
+          type={annotation.name}
           color={annotation.fill}
           onChange={changeAnnotationFill}
           colorFor="fill"

packages/react-filerobot-image-editor/src/components/common/ColorInput/index.jsx

@@ -4,25 +4,30 @@ import PropTypes from 'prop-types';
 
 /** Internal Dependencies */
 import { useStore } from 'hooks';
-import { SET_LATEST_COLOR } from 'actions';
+import { SET_LATEST_COLOR, SET_LATEST_TEXT_COLOR } from 'actions';
 import ColorPickerModal from '../ColorPickerModal';
 import { StyledPickerTrigger } from './ColorInput.styled';
 
 const pinnedColorsKey = 'FIE_pinnedColors';
 
 // colorFor is used to save the latest color for a specific purpose (e.g. fill/shadow/stroke)
-const ColorInput = ({ onChange, color, colorFor }) => {
+const ColorInput = ({ onChange, color, colorFor, type }) => {
   const {
     selectionsIds = [],
     config: { annotationsCommon = {} },
     dispatch,
     latestColors = {},
+    latestTextColors = {},
   } = useStore();
-  const latestColor = latestColors[colorFor];
+  let latestColor = latestColors[colorFor];
+  let latestTextColor = latestTextColors[colorFor]
   const [anchorEl, setAnchorEl] = useState();
   const [currentColor, setCurrentColor] = useState(
     () => latestColor || color || annotationsCommon.fill,
   );
+  const [currentTextColor, setCurrentTextColor] = useState(
+    () => latestTextColor || color || annotationsCommon.fill,
+  );
   const [pinnedColors, setPinnedColors] = useState(
     window?.localStorage
       ? JSON.parse(localStorage.getItem(pinnedColorsKey) || '[]')
@@ -47,19 +52,38 @@ const ColorInput = ({ onChange, color, colorFor }) => {
   };
 
   const changeColor = (_newColorHex, rgba, newPinnedColors) => {
-    setCurrentColor(rgba);
+
+    if (type === 'Text') {
+      setCurrentTextColor(rgba);
+    } else {
+      setCurrentColor(rgba);
+    }
+
     onChange(rgba);
     changePinnedColors(newPinnedColors);
 
-    if (latestColor !== rgba) {
-      dispatch({
-        type: SET_LATEST_COLOR,
-        payload: {
-          latestColors: {
-            [colorFor]: rgba,
+    if (type === 'Text') {
+      if (latestTextColor !== rgba) {
+        dispatch({
+          type: SET_LATEST_TEXT_COLOR,
+          payload: {
+            latestTextColors: {
+              [colorFor]: rgba,
+            },
+          },
+        });
+      }
+    } else {
+      if (latestColor !== rgba) {
+        dispatch({
+          type: SET_LATEST_COLOR,
+          payload: {
+            latestColors: {
+              [colorFor]: rgba,
+            },
           },
-        },
-      });
+        });
+      }
     }
   };
 
@@ -68,23 +92,29 @@ const ColorInput = ({ onChange, color, colorFor }) => {
   };
 
   useEffect(() => {
-    const colorToSet = (selectionsIds.length === 0 && latestColor) || color;
-    setCurrentColor(colorToSet);
-    onChange(colorToSet);
+    if (type === 'Text') {
+      const colorToSet = (selectionsIds.length === 0 && latestTextColor) || color;
+      setCurrentTextColor(colorToSet);
+      onChange(colorToSet);
+    } else {
+      const colorToSet = (selectionsIds.length === 0 && latestColor) || color;
+      setCurrentColor(colorToSet);
+      onChange(colorToSet);
+    }
   }, [color, selectionsIds]);
 
   return (
     <>
       <StyledPickerTrigger
         className="FIE_color-picker-triggerer"
         onClick={togglePicker}
-        $color={currentColor}
+        $color={type === 'Text' ? currentTextColor : currentColor}
         onChange={onChange}
       />
       <ColorPickerModal
         hideModalTitle
         onChange={changeColor}
-        defaultColor={currentColor}
+        defaultColor={type === 'Text' ? currentTextColor : currentColor}
         pinnedColors={pinnedColors}
         open={Boolean(anchorEl)}
         onClose={togglePicker}

packages/react-filerobot-image-editor/src/context/getInitialAppState.js

@@ -70,6 +70,7 @@ const getInitialAppState = (config = {}) => {
     isResetted: !hasLoadableDesignState ?? true,
     haveNotSavedChanges: false,
     latestColors: {},
+    latestTextColors: {},
     showTabsMenu: false,
   };
 };