How to pass the text content of Lexical editor when pressing Enter key using react.js

Question

I have Lexical editor and i wanted to pass a value when user click enter. I was able to pass the value of my Lexical editor on button click, however on enter key it returns empty string.

my approach is this:

This is the code for the Lexical:

export default function Editor({ submit = () => {} }) {
   const [textValue, setTextValue] = useState("")
   const placeholderRef = useRef(null)
   const initialConfig = {
    namespace: "MyEditor",
    theme,
    onError,
};

return (
    <div className="grow pl-2 flex items-end gap-2">
        <div className="bg-gray-200/80 pl-4 p-2 rounded-3xl grow mr-12">
            <div className="">
                <div className="relative">
                    <LexicalComposer initialConfig={initialConfig}>
                        <PlainTextPlugin
                            contentEditable={
                                <ContentEditable className="lexical-editor" />
                            }
                            placeholder={
                                <div
                                    ref={placeholderRef}
                                    className="absolute top-0 [9px] opacity-60 pointer-events-none"
                                >
                                    Aa
                                </div>
                            }
                            ErrorBoundary={LexicalErrorBoundary}
                        />
                        <HistoryPlugin />
                        <MyCustomAutoFocusPlugin />
                        <TextContentListener
                            onChange={(text) => {
                                if (text.trim() != "") setTextValue(text);
                                else setTextValue(text.trim());
                            }}
                        />
                        <OnChangePlugin />
                        <ClearEditorPlugin />
                        <EnterCommand onSubmit={() => submit(textValue)} />
                        <SubmitButton onSubmit={() => submit(textValue)} />
                    </LexicalComposer>
                </div>
            </div>
        </div>
    </div>
  );
}

the TextContentListener will listen for the text, every time the content changes the TextContentListener will pass it's value to setTextValue(text). Now textValue holds the text content, and this what i will pass when user clicks enter key.

This is my code for EnterCommand component that will trigger the onSubmit when on Enter key:

const EnterCommand = ({ onSubmit = () => {} }) => {
   const [editor] = useLexicalComposerContext();

   useEffect(() => {
     return editor.registerCommand(
        KEY_ENTER_COMMAND,
        enterEvent,
        COMMAND_PRIORITY_HIGH
     );
   }, [editor]);

   const enterEvent = (event) => {
     const { shiftKey, key } = event;

     if (key == "Enter" && shiftKey == false) {
         event.preventDefault();

         onSubmit();

         editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
     }

     return true;
   };

  return null;
};

this is my code for listing the text content:

function TextContentListener({ onChange }) {
    const [editor] = useLexicalComposerContext();

    useEffect(() => {
        return editor.registerTextContentListener((text) => {
            onChange(text);
        });
    }, [editor]);
}

Answer 1

I get it now, I just need to add another dependency in useEffect from EnterCommand. Here is the updated code:

const EnterCommand = ({ onSubmit = () => {} }) => {
const [editor] = useLexicalComposerContext();

useEffect(() => {
    return editor.registerCommand(
        KEY_ENTER_COMMAND,
        (event) => {
            const { shiftKey, key } = event;
    
            if (key == "Enter" && shiftKey == false) {
                event.preventDefault();
    
                onSubmit();
    
                editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
            }
    
            return true;
        },
        COMMAND_PRIORITY_HIGH
    );
}, [editor, onSubmit]);

return null;
};