Merge branch 'compose-clear' into 'main'

Compose clear

See merge request soapbox-pub/soapbox!2809

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 {
-  (dispatch: AppDispatch, getState: () => RootState) => {
+  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) {
+    return dispatch(createStatus(params, idempotencyKey, statusId)).then(function(data) {
-      if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && routerHistory) {
+      if (!statusId && data.visibility === 'direct' && getState().conversations.mounted <= 0 && history) {
-        routerHistory.push('/messages');
+        history.push('/messages');
       }
       handleComposeSubmit(dispatch, getState, composeId, data, status, !!statusId);
     }).catch(function(error) {

src/features/compose/components/compose-form.tsx

@@ -152,7 +152,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       return;
     }
 
-    dispatch(submitCompose(id, history));
+    dispatch(submitCompose(id, { history }));
     editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
   };
 

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;