Split SubmitPlugin out of StatePlugin

src/features/compose/editor/index.tsx

@@ -25,6 +25,7 @@ import AutosuggestPlugin from './plugins/autosuggest-plugin';
 import FocusPlugin from './plugins/focus-plugin';
 import RefPlugin from './plugins/ref-plugin';
 import StatePlugin from './plugins/state-plugin';
+import SubmitPlugin from './plugins/submit-plugin';
 
 const LINK_MATCHERS = [
   createLinkMatcherWithRegExp(
@@ -164,7 +165,8 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
         <HashtagPlugin />
         <AutosuggestPlugin composeId={composeId} suggestionsHidden={suggestionsHidden} setSuggestionsHidden={setSuggestionsHidden} />
         <AutoLinkPlugin matchers={LINK_MATCHERS} />
-        <StatePlugin composeId={composeId} handleSubmit={handleSubmit} />
+        <StatePlugin composeId={composeId} />
+        <SubmitPlugin composeId={composeId} handleSubmit={handleSubmit} />
         <FocusPlugin autoFocus={autoFocus} />
         <ClearEditorPlugin />
         <RefPlugin ref={ref} />

src/features/compose/editor/plugins/state-plugin.tsx

@@ -1,5 +1,5 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { $getRoot, KEY_ENTER_COMMAND } from 'lexical';
+import { $getRoot } from 'lexical';
 import { useEffect } from 'react';
 
 import { setEditorState } from 'soapbox/actions/compose';
@@ -7,25 +7,12 @@ import { useAppDispatch } from 'soapbox/hooks';
 
 interface IStatePlugin {
   composeId: string;
-  handleSubmit?: () => void;
 }
 
-const StatePlugin = ({ composeId, handleSubmit }: IStatePlugin) => {
+const StatePlugin: React.FC<IStatePlugin> = ({ composeId }) => {
   const dispatch = useAppDispatch();
   const [editor] = useLexicalComposerContext();
 
-  useEffect(() => {
-    if (handleSubmit) {
-      return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
-        if (event?.ctrlKey) {
-          handleSubmit();
-          return true;
-        }
-        return false;
-      }, 1);
-    }
-  }, [handleSubmit]);
-
   useEffect(() => {
     editor.registerUpdateListener(({ editorState }) => {
       const isEmpty = editorState.read(() => $getRoot().getTextContent()) === '';

src/features/compose/editor/plugins/submit-plugin.tsx

@@ -0,0 +1,28 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { KEY_ENTER_COMMAND } from 'lexical';
+import { useEffect } from 'react';
+
+interface ISubmitPlugin {
+  composeId: string;
+  handleSubmit?: () => void;
+}
+
+const SubmitPlugin: React.FC<ISubmitPlugin> = ({ composeId, handleSubmit }) => {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (handleSubmit) {
+      return editor.registerCommand(KEY_ENTER_COMMAND, (event) => {
+        if (event?.ctrlKey) {
+          handleSubmit();
+          return true;
+        }
+        return false;
+      }, 1);
+    }
+  }, [handleSubmit]);
+
+  return null;
+};
+
+export default SubmitPlugin;