Fix ColorPicker undo stack additions

[KARM99]

No description provided.

[vercel]

@KARM99 is attempting to deploy a commit to the dottle's projects Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
drawdb	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 19, 2025 5:56pm

[1ilit]

Let's unify and move this logic to a custom component that wraps ColorPicker from semi-ui

The component would roughly look like this

import { ColorPicker as SemiColorPicker } from "@douyinfe/semi-ui";
import { useState } from "react";

export default function ColorPicker({
  children,
  value,
  onBlur,
  onChange,
  ...props
}) {
  const [pickedColor, setPickedColor] = useState(null);

  const handleBlur = () => {
    if (pickedColor) onBlur(pickedColor);
    setPickedColor(null);
  };

  return (
    <div onPointerUp={handleBlur} onBlur={handleBlur}>
      <SemiColorPicker
        {...props}
        value={SemiColorPicker.colorStringToValue(value)}
        onChange={({ hex: color }) => {
          setPickedColor(color);
          onChange(color);
        }}
      >
        {children}
      </SemiColorPicker>
    </div>
  );
}

And it would be consumed like this:

<ColorPicker
  usePopover={true}
  value={data.color}
  onChange={(color) => updateArea(i, { color })}
  onBlur={(color) => handleColorPickerBlur(color)}
 >
  <div
     className="h-[32px] w-[32px] rounded-sm shrink-0"
     style={{ backgroundColor: data.color }}
   />
</ColorPicker>

[1ilit]

Thank you!