From d92c150d9d0ff69b5c3222afe019cfaa70aa2f5a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 23 Sep 2023 15:01:16 -0500
Subject: [PATCH] lexical: set the actual editor as the ref, clear the form on
 submit

---
 src/features/compose/components/compose-form.tsx | 7 ++++---
 src/features/compose/editor/index.tsx            | 8 +++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/features/compose/components/compose-form.tsx b/src/features/compose/components/compose-form.tsx
index 132f8c5c2..db316b138 100644
--- a/src/features/compose/components/compose-form.tsx
+++ b/src/features/compose/components/compose-form.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { type EditorState } from 'lexical';
+import { CLEAR_EDITOR_COMMAND, type LexicalEditor } from 'lexical';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -108,7 +108,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const formRef = useRef<HTMLDivElement>(null);
   const spoilerTextRef = useRef<AutosuggestInput>(null);
   const autosuggestTextareaRef = useRef<AutosuggestTextarea>(null);
-  const editorStateRef = useRef<EditorState>(null);
+  const editorRef = useRef<LexicalEditor>(null);
 
   const { isDraggedOver } = useDraggedFiles(formRef);
 
@@ -160,6 +160,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     }
 
     dispatch(submitCompose(id, history));
+    editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
   };
 
   const onSuggestionsClearRequested = () => {
@@ -315,7 +316,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
         <Bundle fetchComponent={ComposeEditor}>
           {(Component: any) => (
             <Component
-              ref={editorStateRef}
+              ref={editorRef}
               className='mt-2'
               composeId={id}
               condensed={condensed}
diff --git a/src/features/compose/editor/index.tsx b/src/features/compose/editor/index.tsx
index a0cba4ac2..b3173a12a 100644
--- a/src/features/compose/editor/index.tsx
+++ b/src/features/compose/editor/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import { AutoLinkPlugin, createLinkMatcherWithRegExp } from '@lexical/react/LexicalAutoLinkPlugin';
+import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
 import { LexicalComposer, InitialConfigType } from '@lexical/react/LexicalComposer';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
@@ -13,7 +14,7 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import clsx from 'clsx';
-import { $createParagraphNode, $createTextNode, $getRoot, type EditorState } from 'lexical';
+import { $createParagraphNode, $createTextNode, $getRoot, type LexicalEditor } from 'lexical';
 import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -66,7 +67,7 @@ const theme: InitialConfigType['theme'] = {
   },
 };
 
-const ComposeEditor = React.forwardRef<EditorState, IComposeEditor>(({
+const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
   className,
   placeholderClassName,
   composeId,
@@ -157,7 +158,7 @@ const ComposeEditor = React.forwardRef<EditorState, IComposeEditor>(({
         <OnChangePlugin onChange={(_, editor) => {
           onChange?.(editor.getEditorState().read(() => $getRoot().getTextContent()));
           if (editorStateRef && typeof editorStateRef !== 'function') {
-            editorStateRef.current = editor.getEditorState();
+            editorStateRef.current = editor;
           }
         }}
         />
@@ -168,6 +169,7 @@ const ComposeEditor = React.forwardRef<EditorState, IComposeEditor>(({
         <AutoLinkPlugin matchers={LINK_MATCHERS} />
         <StatePlugin composeId={composeId} handleSubmit={handleSubmit} />
         <FocusPlugin autoFocus={autoFocus} />
+        <ClearEditorPlugin />
       </div>
     </LexicalComposer>
   );