Color Picker???
IN2TEC opened this issue · comments
INTUTEC commented
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?