lexical: pass the actual EditorState as the ref, count with onChange callback

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

@@ -1,4 +1,5 @@
 import clsx from 'clsx';
+import { type EditorState } from 'lexical';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -101,13 +102,13 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const anyMedia = compose.media_attachments.size > 0;
 
   const [composeFocused, setComposeFocused] = useState(false);
+  const [text, setText] = useState('');
 
   const firstRender = useRef(true);
   const formRef = useRef<HTMLDivElement>(null);
   const spoilerTextRef = useRef<AutosuggestInput>(null);
   const autosuggestTextareaRef = useRef<AutosuggestTextarea>(null);
-  const editorStateRef = useRef<string>(null);
+  const editorStateRef = useRef<EditorState>(null);
-  const text = editorStateRef.current || '';
 
   const { isDraggedOver } = useDraggedFiles(formRef);
 
@@ -145,7 +146,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   };
 
   const handleSubmit = (e?: React.FormEvent<Element>) => {
-    dispatch(changeCompose(id, editorStateRef.current!));
+    dispatch(changeCompose(id, text));
 
     // Submit disabled:
     const fulltext = [spoilerText, countableText(text)].join('');
@@ -322,6 +323,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
               autoFocus={shouldAutoFocus}
               hasPoll={hasPoll}
               handleSubmit={handleSubmit}
+              onChange={setText}
               onFocus={handleComposeFocus}
               onPaste={onPaste}
             />

src/features/compose/editor/index.tsx

@@ -13,7 +13,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 } from 'lexical';
+import { $createParagraphNode, $createTextNode, $getRoot, type EditorState } from 'lexical';
 import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -40,9 +40,10 @@ interface IComposeEditor {
   eventDiscussion?: boolean
   hasPoll?: boolean
   autoFocus?: boolean
-  handleSubmit?: () => void
+  handleSubmit?(): void
+  onPaste?(files: FileList): void
+  onChange?(text: string): void
   onFocus?: React.FocusEventHandler<HTMLDivElement>
-  onPaste?: (files: FileList) => void
   placeholder?: JSX.Element | string
 }
 
@@ -65,7 +66,7 @@ const theme: InitialConfigType['theme'] = {
   },
 };
 
-const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
+const ComposeEditor = React.forwardRef<EditorState, IComposeEditor>(({
   className,
   placeholderClassName,
   composeId,
@@ -74,6 +75,7 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
   hasPoll,
   autoFocus,
   handleSubmit,
+  onChange,
   onFocus,
   onPaste,
   placeholder,
@@ -153,8 +155,9 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
           ErrorBoundary={LexicalErrorBoundary}
         />
         <OnChangePlugin onChange={(_, editor) => {
+          onChange?.(editor.getEditorState().read(() => $getRoot().getTextContent()));
           if (editorStateRef && typeof editorStateRef !== 'function') {
-            editorStateRef.current = editor.getEditorState().read(() => $getRoot().getTextContent());
+            editorStateRef.current = editor.getEditorState();
           }
         }}
         />