From 181df0903905b692bfcf0bef0ed613d0881fdf5d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 13 Oct 2023 11:47:24 -0500 Subject: [PATCH 1/3] submitCompose: accept an options object --- src/actions/compose.ts | 15 +++++++++++---- src/features/compose/components/compose-form.tsx | 2 +- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/actions/compose.ts b/src/actions/compose.ts index 44aa179b3..e0128af1e 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) => +interface SubmitComposeOpts { + history?: History; + force?: boolean; +} + +const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}) => (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; @@ -361,8 +368,8 @@ const submitCompose = (composeId: string, routerHistory?: History, force = false } dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) { - if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && routerHistory) { - routerHistory.push('/messages'); + 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); }; From 8edd1a830de8a3b232333df324c784a8dec9c277 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 13 Oct 2023 13:31:39 -0500 Subject: [PATCH 2/3] submitCompose: make it an async function --- src/actions/compose.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/actions/compose.ts b/src/actions/compose.ts index e0128af1e..ea798aa1a 100644 --- a/src/actions/compose.ts +++ b/src/actions/compose.ts @@ -305,7 +305,7 @@ interface SubmitComposeOpts { } const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}) => - (dispatch: AppDispatch, getState: () => RootState) => { + async (dispatch: AppDispatch, getState: () => RootState) => { const { history, force = false } = opts; if (!isLoggedIn(getState)) return; @@ -367,7 +367,7 @@ const submitCompose = (composeId: string, opts: SubmitComposeOpts = {}) => params.group_timeline_visible = compose.group_timeline_visible; // Truth Social } - dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) { + return dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) { if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && history) { history.push('/messages'); } From 8f55b6d5c22b33f411415f3072e48fe09e8d046c Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 13 Oct 2023 15:16:00 -0500 Subject: [PATCH 3/3] Split SubmitPlugin out of StatePlugin --- src/features/compose/editor/index.tsx | 4 ++- .../compose/editor/plugins/state-plugin.tsx | 17 ++--------- .../compose/editor/plugins/submit-plugin.tsx | 28 +++++++++++++++++++ 3 files changed, 33 insertions(+), 16 deletions(-) create mode 100644 src/features/compose/editor/plugins/submit-plugin.tsx 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;