From 889c2658ba9b4c88b4e0680db2be2fc8181e31d1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Nov 2023 14:20:36 -0600
Subject: [PATCH 1/4] ComposeForm: refactor canSubmit so it works correctly in
 more scenarios

---
 .../compose/components/compose-form.tsx       | 40 +++++++------------
 1 file changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 182707b683..72acd166ed 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -101,18 +101,20 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const formRef = useRef<HTMLDivElement>(null);
   const spoilerTextRef = useRef<AutosuggestInput>(null);
   const editorRef = useRef<LexicalEditor>(null);
+  const { isDraggedOver } = useDraggedFiles(formRef);
 
   const text = editorRef.current?.getEditorState().read(() => $getRoot().getTextContent()) ?? '';
-  const { isDraggedOver } = useDraggedFiles(formRef);
+  const fulltext = [spoilerText, countableText(text)].join('');
+
+  const isEmpty = !(fulltext.trim() || anyMedia);
+  const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty && !isUploading;
+  const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
+  const canSubmit = !isSubmitting && !isUploading && !isChangingUpload && !isEmpty && length(fulltext) <= maxTootChars;
 
   const getClickableArea = () => {
     return clickableAreaRef ? clickableAreaRef.current : formRef.current;
   };
 
-  const isEmpty = () => {
-    return !(text || spoilerText || anyMedia);
-  };
-
   const isClickOutside = (e: MouseEvent | React.MouseEvent) => {
     return ![
       // List of elements that shouldn't collapse the composer when clicked
@@ -125,10 +127,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   };
 
   const handleClick = useCallback((e: MouseEvent | React.MouseEvent) => {
-    if (isEmpty() && isClickOutside(e)) {
+    if (isEmpty && isClickOutside(e)) {
       handleClickOutside();
     }
-  }, []);
+  }, [isEmpty]);
 
   const handleClickOutside = () => {
     setComposeFocused(false);
@@ -139,20 +141,12 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   };
 
   const handleSubmit = (e?: React.FormEvent<Element>) => {
+    if (!canSubmit) return;
+    e?.preventDefault();
+
     dispatch(changeCompose(id, text));
-
-    // Submit disabled:
-    const fulltext = [spoilerText, countableText(text)].join('');
-
-    if (e) {
-      e.preventDefault();
-    }
-
-    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxTootChars || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
-      return;
-    }
-
     dispatch(submitCompose(id, { history }));
+
     editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
   };
 
@@ -215,12 +209,6 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     </HStack>
   ), [features, id]);
 
-  const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty() && !isUploading;
-  const disabled = isSubmitting;
-  const countedText = [spoilerText, countableText(text)].join('');
-  const disabledButton = disabled || isUploading || isChangingUpload || length(countedText) > maxTootChars || (countedText.length !== 0 && countedText.trim().length === 0 && !anyMedia);
-  const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
-
   const composeModifiers = !condensed && (
     <Stack space={4} className='compose-form__modifiers'>
       <UploadForm composeId={id} onSubmit={handleSubmit} />
@@ -323,7 +311,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
             </HStack>
           )}
 
-          <Button type='submit' theme='primary' icon={publishIcon} text={publishText} disabled={disabledButton} />
+          <Button type='submit' theme='primary' icon={publishIcon} text={publishText} disabled={!canSubmit} />
         </HStack>
       </div>
     </Stack>

From fd19fa9e5bca113ec76ead9f1c387d02764bf2a2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Nov 2023 14:56:42 -0600
Subject: [PATCH 2/4] FocusPlugin: refactor the useEffect for sanity

---
 src/features/compose/editor/plugins/focus-plugin.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/features/compose/editor/plugins/focus-plugin.tsx b/src/features/compose/editor/plugins/focus-plugin.tsx
index 65b5676835..8a076f1992 100644
--- a/src/features/compose/editor/plugins/focus-plugin.tsx
+++ b/src/features/compose/editor/plugins/focus-plugin.tsx
@@ -11,10 +11,6 @@ export const FOCUS_EDITOR_COMMAND: LexicalCommand<void> = createCommand();
 const FocusPlugin: React.FC<IFocusPlugin> = ({ autoFocus }) => {
   const [editor] = useLexicalComposerContext();
 
-  const focus = () => {
-    editor.dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
-  };
-
   useEffect(() => editor.registerCommand(FOCUS_EDITOR_COMMAND, () => {
     editor.focus(
       () => {
@@ -29,8 +25,10 @@ const FocusPlugin: React.FC<IFocusPlugin> = ({ autoFocus }) => {
   }, COMMAND_PRIORITY_NORMAL));
 
   useEffect(() => {
-    if (autoFocus) focus();
-  }, []);
+    if (autoFocus) {
+      editor.dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
+    }
+  }, [autoFocus, editor]);
 
   return null;
 };

From 54dff2131f92d689dcec704a8d47af21ef545c5e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Nov 2023 14:57:16 -0600
Subject: [PATCH 3/4] ComposeForm: do autoFocus on mobile

---
 src/features/compose/components/compose-form.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 72acd166ed..adc3b05712 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -18,7 +18,6 @@ import { Button, HStack, Stack } from 'soapbox/components/ui';
 import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
-import { isMobile } from 'soapbox/is-mobile';
 
 import QuotedStatusContainer from '../containers/quoted-status-container';
 import ReplyIndicatorContainer from '../containers/reply-indicator-container';
@@ -108,7 +107,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   const isEmpty = !(fulltext.trim() || anyMedia);
   const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty && !isUploading;
-  const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);
+  const shouldAutoFocus = autoFocus && !showSearch;
   const canSubmit = !isSubmitting && !isUploading && !isChangingUpload && !isEmpty && length(fulltext) <= maxTootChars;
 
   const getClickableArea = () => {

From e426f7213018d394458c98e5f51010eaebeb6c5e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 27 Nov 2023 15:00:39 -0600
Subject: [PATCH 4/4] ComposeForm: disable submit when there is no editorRef

---
 src/features/compose/components/compose-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index adc3b05712..45771dd94b 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -108,7 +108,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const isEmpty = !(fulltext.trim() || anyMedia);
   const condensed = shouldCondense && !isDraggedOver && !composeFocused && isEmpty && !isUploading;
   const shouldAutoFocus = autoFocus && !showSearch;
-  const canSubmit = !isSubmitting && !isUploading && !isChangingUpload && !isEmpty && length(fulltext) <= maxTootChars;
+  const canSubmit = !!editorRef.current && !isSubmitting && !isUploading && !isChangingUpload && !isEmpty && length(fulltext) <= maxTootChars;
 
   const getClickableArea = () => {
     return clickableAreaRef ? clickableAreaRef.current : formRef.current;