Color Picker???

[IN2TEC]

Hi there, I am new to this and I am trying to implement a Color Picker to format a selected text. But whatever I do, I am not getting it to work as the color picker wont even show.

import React, { useState } from 'react';
import MUIRichTextEditor from 'mui-rte';
import { Modifier, EditorState } from 'draft-js';
import { SketchPicker } from 'react-color';
import {IconButton }from  "@mui/material";
import ColorLensIcon from '@mui/icons-material/ColorLens';

const ColorPickerControl = ({ editorState, onChange }) => {
  const [showColorPicker, setShowColorPicker] = useState(false);
  const [currentColor, setCurrentColor] = useState('#000');
  const [selectedText, setSelectedText] = useState('');

  const handleColorChange = (color) => {
    setCurrentColor(color.hex);
  };

  const applyColor = () => {
    const contentState = editorState.getCurrentContent();
    const selection = editorState.getSelection();

    // Create a new content state with the selected text colored
    const contentWithColor = Modifier.applyInlineStyle(
      contentState,
      selection,
      'CUSTOM_COLOR',
      currentColor
    );

    // Apply the new content state to the editor
    onChange(EditorState.push(editorState, contentWithColor, 'change-color'));

    // Close the color picker
    setShowColorPicker(false);
  };

  const handleColorPickerClick = () => {
    const selection = editorState.getSelection();
    const currentContent = editorState.getCurrentContent();
    const selectedText = currentContent
      .getBlockForKey(selection.getStartKey())
      .getText()
      .slice(selection.getStartOffset(), selection.getEndOffset());

    setSelectedText(selectedText);
    setShowColorPicker(true);
  };

  return (
    <div>
      <IconButton onClick={handleColorPickerClick}>
        <ColorLensIcon />
      </IconButton>
      {showColorPicker && (
        <div>
          <SketchPicker
            color={currentColor}
            onChange={handleColorChange}
          />
          <IconButton onClick={applyColor}>
            Apply
          </IconButton>
        </div>
      )}
      {selectedText && (
        <div>
          Selected Text: {selectedText}
        </div>
      )}
    </div>
  );
};

export const IntuRichTextEditor = ({ field }) => {
  const customControls = [
    {
      name: 'color-picker',
      type: 'callback',
      icon: <ColorLensIcon />,
      onClick: (editorState, _name, _anchor) => {
        // Open the color picker by setting the state in ColorPickerControl
      },
      component: <ColorPickerControl />,
    },
  ];

  return (
    <MUIRichTextEditor
      controls={[
        'title',
        'bold',
        'italic',
        'underline',
        'strikethrough',
        'highlight',
        'undo',
        'redo',
        'link',
        'media',
        'numberList',
        'bulletList',
        'quote',
        'code',
        'clear',
        'color-picker',
      ]}
      customControls={customControls}
      {...field}
    />
  );
};

Can someone help?

[MrRainesE]

something like this https://codesandbox.io/p/sandbox/s7gpqp