So, I’m using the lexical editor in my react project. My app get the text from a API that transcribe audio and then I need to put on the Lexical editor, but I’m having problem to manipulate the text, I just don’t know how to do.
TextEditor.tsx:
import { useEffect } from "react";
import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";
import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";
import { EditorState } from "lexical";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { HeadingNode } from "@lexical/rich-text";
import { ListNode, ListItemNode } from '@lexical/list';
import { ToolBarPlugin } from "./Toolbar";
interface TextEditorProps {
value: string;
readOnly: boolean;
}
const theme = {
// apenas css | exemplo:
// heading: {
// h1: "classe-do-h1"
// } // importa arquivo css com os estilos
};
function onError(error: Error): void {
console.error(error);
}
const MyOnChangePuglin = (props: { onChange: (editorState: EditorState) => void }): null => {
const [editor] = useLexicalComposerContext();
const { onChange } = props;
useEffect(() => {
return editor.registerUpdateListener(({ editorState }) => {
onChange(editorState);
});
}, [onChange, editor]);
return null;
};
export function TextEditor({ value, readOnly }: TextEditorProps) {
const initialConfig = {
namespace: "MyEditor",
theme,
onError,
nodes: [HeadingNode, ListNode, ListItemNode]
};
return (
<LexicalComposer initialConfig={initialConfig}>
<ToolBarPlugin />
<ListPlugin />
<RichTextPlugin
contentEditable={
<ContentEditable
className={`min-h-[500px] border-[1px] border-[#d4d4d4] p-4 rounded-md shadow-lg bg-[#f8f8f8] overflow-y-auto focus:outline-none ${
readOnly ? "cursor-not-allowed" : "cursor-text"
}`}
/>
}
ErrorBoundary={LexicalErrorBoundary}
/>
<MyOnChangePuglin onChange={(editorState) => console.log(editorState._nodeMap)} />
<HistoryPlugin />
</LexicalComposer>
);
}
How I was passing the text to the older TextArea
<TextEditor value={transcription} readOnly={editorState} />
// transcription has all the text that will come by the API
I was looking at this page, but I could make it work:
https://lexical.dev/docs/concepts/editor-state