Fix ColorPicker undo stack additions (#494)

* Fix ColorPicker undo stack additions

* make custom component ColorPicker

src/components/EditorCanvas/Area.jsx

@@ -1,5 +1,6 @@
 import { useMemo, useRef, useState } from "react";
-import { Button, Popover, Input, ColorPicker } from "@douyinfe/semi-ui";
+import { Button, Popover, Input } from "@douyinfe/semi-ui";
+import ColorPicker from "../EditorSidePanel/ColorPicker";
 import {
   IconEdit,
   IconDeleteStroked,
@@ -220,6 +221,42 @@ function EditPopoverContent({ data }) {
   const { updateArea, deleteArea } = useAreas();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const { t } = useTranslation();
+  const initialColorRef = useRef(data.color);
+
+  const handleColorPick = (color) => {
+    setUndoStack((prev) => {
+      let undoColor = initialColorRef.current;
+      const lastColorChange = prev.findLast(
+        (e) =>
+          e.element === ObjectType.AREA &&
+          e.aid === data.id &&
+          e.action === Action.EDIT &&
+          e.redo.color,
+      );
+      if (lastColorChange) {
+        undoColor = lastColorChange.redo.color;
+      }
+
+      if (color === undoColor) return prev;
+
+      const newStack = [
+        ...prev,
+        {
+          action: Action.EDIT,
+          element: ObjectType.AREA,
+          aid: data.id,
+          undo: { color: undoColor },
+          redo: { color: color },
+          message: t("edit_area", {
+            areaName: data.name,
+            extra: "[color]",
+          }),
+        },
+      ];
+      return newStack;
+    });
+    setRedoStack([]);
+  };
 
   return (
     <div className="popover-theme">
@@ -251,26 +288,10 @@ function EditPopoverContent({ data }) {
           }}
         />
         <ColorPicker
-          onChange={({ hex: color }) => {
-            setUndoStack((prev) => [
-              ...prev,
-              {
-                action: Action.EDIT,
-                element: ObjectType.AREA,
-                aid: data.id,
-                undo: { color: data.color },
-                redo: { color },
-                message: t("edit_area", {
-                  areaName: data.name,
-                  extra: "[color]",
-                }),
-              },
-            ]);
-            setRedoStack([]);
-            updateArea(data.id, { color });
-          }}
           usePopover={true}
-          value={ColorPicker.colorStringToValue(data.color)}
+          value={data.color}
+          onChange={(color) => updateArea(data.id, { color })}
+          onColorPick={(color) => handleColorPick(color)}
         />
       </div>
       <div className="flex">