diff --git a/src/actions/compose.ts b/src/actions/compose.ts index 44aa179b3..ea798aa1a 100644 --- a/src/actions/compose.ts +++ b/src/actions/compose.ts @@ -299,8 +299,15 @@ const validateSchedule = (state: RootState, composeId: string) => { return schedule.getTime() > fiveMinutesFromNow.getTime(); }; -const submitCompose = (composeId: string, routerHistory?: History, force = false) => - (dispatch: AppDispatch, getState: () => RootState) => { +interface SubmitComposeOpts { + history?: History; + force?: boolean; +} + +const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}) => + async (dispatch: AppDispatch, getState: () => RootState) => { + const { history, force = false } = opts; + if (!isLoggedIn(getState)) return; const state = getState(); @@ -324,7 +331,7 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false dispatch(openModal('MISSING_DESCRIPTION', { onContinue: () => { dispatch(closeModal('MISSING_DESCRIPTION')); - dispatch(submitCompose(composeId, routerHistory, true)); + dispatch(submitCompose(composeId, { history, force: true })); }, })); return; @@ -360,9 +367,9 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false params.group_timeline_visible = compose.group_timeline_visible; // Truth Social } - dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) { - if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && routerHistory) { - routerHistory.push('/messages'); + return dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) { + if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && history) { + history.push('/messages'); } handleComposeSubmit(dispatch, getState, composeId, data, status, !!statusId); }).catch(function(error) { diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx index 5ffdb734c..456dab69a 100644 --- a/src/features/compose/components/compose-form.tsx +++ b/src/features/compose/components/compose-form.tsx @@ -152,7 +152,7 @@ const ComposeForm = ({ id, shouldCondense, autoFocus, clickab return; } - dispatch(submitCompose(id, history)); + dispatch(submitCompose(id, { history })); editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); }; diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx index 55ccc76e8..0bff80d23 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;