import { EditorState, $getRoot, $getSelection, SerializedEditorState, LexicalEditor, } from "lexical"; import { LexicalComposer } from "@lexical/react/LexicalComposer"; import { ContentEditable } from "@lexical/react/LexicalContentEditable"; import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin"; import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin"; import { ListPlugin } from "@lexical/react/LexicalListPlugin"; import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin"; import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin"; import { TRANSFORMERS, CHECK_LIST } from "@lexical/markdown"; import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin"; import { $generateHtmlFromNodes } from "@lexical/html"; import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin"; // custom plugins import { CodeHighlightPlugin } from "./plugins/code-highlight"; import { LexicalToolbar } from "./toolbar"; // config import { initialConfig } from "./config"; // helpers import { getValidatedValue } from "./helpers/editor"; import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary"; export interface RichTextEditorProps { onChange: (state: SerializedEditorState) => void; id: string; value: string; placeholder?: string; } const RichTextEditor: React.FC = ({ onChange, id, value, placeholder = "Enter some text...", }) => { const handleChange = (editorState: EditorState) => { editorState.read(() => { let editorData = editorState.toJSON(); if (onChange) onChange(editorData); }); }; // function handleChange(state: EditorState, editor: LexicalEditor) { // state.read(() => { // onChange(state.toJSON()); // }); // } return (
} ErrorBoundary={LexicalErrorBoundary} placeholder={
{placeholder}
} />
); }; export default RichTextEditor;