lexical: set the actual editor as the ref, clear the form on submit

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}

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>
   );