Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 45x 468x 468x | import { EyedropperIcon } from "@phosphor-icons/react";
import { EditorState } from "react-draft-wysiwyg-next";
import { toggleCustomInlineStyle as tg } from "draftjs-utils";
import { WrapperActionComponent } from "../components/Wrapper";
import IconWrapper from "../IconWrapper";
import { colors } from "./const";
import { updateRichEditorText } from "../RichTextUtils";
import { EditorMode } from "../richInput.types";
interface Props {
onChange?: (vals: any) => void;
editorState: EditorState;
toggleCustomInlineStyle?: (
editorState: EditorState,
styleType: any,
styleValue: any,
) => any;
editorMode: EditorMode;
}
export const ColorSelector = ({
onChange,
editorState,
toggleCustomInlineStyle = tg,
editorMode,
}: Props) => {
const clickHandler = {
[EditorMode.SINGLE_LINE]: (option: any) =>
updateRichEditorText(
editorState,
(newState: EditorState) =>
toggleCustomInlineStyle(newState, "color", option.value),
onChange,
),
[EditorMode.MULTI_LINE]: (option: any) => {
const newState = toggleCustomInlineStyle(
editorState,
"color",
option.value,
);
if (newState && typeof onChange === "function") {
onChange(newState);
}
},
};
return (
<WrapperActionComponent
value={""}
options={colors as any}
menuWidth={392}
activeIndex={-1}
handleClick={clickHandler[editorMode]}
isColorOptions
anchor={
<IconWrapper
onClick={() => {
//onclick gets overided
return;
}}
icon={EyedropperIcon}
/>
}
/>
);
};
|