Refactor renderColorPicker to support 'Clear' background color option

[akbchris]

Currently, renderColorPicker in packages/roosterjs-react/lib/colorPicker/component/renderColorPicker.tsx renders color buttons for the background color picker, but does not handle a "clear" option for background color. The background color button now includes a "clear" button, so the color picker UI should recognize and visually represent the clear/transparent state.

Expected behavior:

• The color picker should display a "clear" option alongside the custom color choices (kobi red, rose bud, goldenrod, primerose, mantis, Regent st. blue, periwrinkle gray, pale rose).
• The "clear" option should be visually distinct (e.g., with a cross or an empty/transparent box) so users understand it resets the background color.
• Clicking the "clear" button should trigger the correct callback to set the background color to transparent.

How this feature can be developed:

• Update the logic in renderColorPicker to check for the "clear" color key.
• Render a special button for "clear" with a unique style, such as a transparent background and a label or icon (e.g., an 'X' or 'Clear').
• Ensure accessibility and keyboard navigation support for the clear option.
• Update background color dropdown items and related utilities if needed to propagate the clear value correctly.

Example code (from current implementation):

export function renderColorPicker<Strings extends string>(
    item: IContextualMenuItem,
    colorDef: Record<Strings, Colors>,
    onClick: (
        e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,
        item: IContextualMenuItem
    ) => void
) {
    const key = item.key as Strings;
    const buttonColor = colorDef[key].lightModeColor;

    return (
        <button onClick={e => onClick(e, item)} title={item.text}>
            <div
                className={
                    classNames.colorSquare +
                    ' ' +
                    (key == 'textColorWhite' || key == 'backgroundColorWhite'
                        ? classNames.colorSquareBorderWhite
                        : classNames.colorSquareBorder)
                }
                style={{
                    backgroundColor: buttonColor,
                }}></div>
        </button>
    );
}

Requested update:
Add logic such that if buttonColor is 'transparent' (e.g., for "clear"), the button renders a special icon or label (not just an empty box).

[JiuqingSong]

Thanks for the suggestion. However, according to https://github.com/microsoft/roosterjs/blob/master/packages/roosterjs-react/README.md, the whole roosterjs-react package is only a package for demo and prototype, we don't provide any functional fix. But you are always welcome to contribute your fix to our code base.