diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx index 3bb217f6f..502f305ca 100644 --- a/src/features/compose/editor/index.tsx +++ b/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(({ - + + diff --git a/src/features/compose/editor/plugins/state-plugin.tsx b/src/features/compose/editor/plugins/state-plugin.tsx index eda9d8486..06f102b64 100644 --- a/src/features/compose/editor/plugins/state-plugin.tsx +++ b/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 = ({ 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()) === ''; diff --git a/src/features/compose/editor/plugins/submit-plugin.tsx b/src/features/compose/editor/plugins/submit-plugin.tsx new file mode 100644 index 000000000..ea7dde176 --- /dev/null +++ b/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 = ({ 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;