refactor: extract message edition to a plugin

src/script/components/RichTextEditor/RichTextEditor.tsx

@@ -28,7 +28,7 @@ import {PlainTextPlugin} from '@lexical/react/LexicalPlainTextPlugin';
 import type {WebappProperties} from '@wireapp/api-client/lib/user/data/';
 import {amplify} from 'amplify';
 import cx from 'classnames';
-import {LexicalEditor, EditorState, $nodesOfType, $getRoot, $setSelection} from 'lexical';
+import {LexicalEditor, EditorState, $nodesOfType} from 'lexical';
 
 import {WebAppEvents} from '@wireapp/webapp-events';
 
@@ -42,6 +42,7 @@ import {MentionNode} from './nodes/MentionNode';
 import {AutoFocusPlugin} from './plugins/AutoFocusPlugin';
 import {DraftStatePlugin} from './plugins/DraftStatePlugin';
 import {EditActionsPlugin} from './plugins/EditActionsPlugin';
+import {EditedMessagePlugin} from './plugins/EditedMessagePlugin';
 import {EmojiPickerPlugin} from './plugins/EmojiPickerPlugin';
 import {GlobalEventsPlugin} from './plugins/GlobalEventsPlugin';
 import {HistoryPlugin} from './plugins/HistoryPlugin';
@@ -50,7 +51,6 @@ import {MentionsPlugin} from './plugins/MentionsPlugin';
 import {OnBlurPlugin} from './plugins/OnBlurPlugin';
 import {SendPlugin} from './plugins/SendPlugin';
 import {TextChangePlugin} from './plugins/TextChangePlugin';
-import {toEditorNodes} from './utils/messageToEditorNodes';
 
 import {MentionEntity} from '../../message/MentionEntity';
 import {PropertiesRepository} from '../../properties/PropertiesRepository';
@@ -127,32 +127,12 @@ export const RichTextEditor = ({
   onShiftTab,
   onBlur,
   onSend,
-  onSetup,
+  onSetup = () => {},
 }: RichTextEditorProps) => {
   // Emojis
-  const editorRef = useRef<LexicalEditor>();
   const emojiPickerOpen = useRef<boolean>(true);
   const mentionsOpen = useRef<boolean>(true);
 
-  const setupEditor = (editor: LexicalEditor) => {
-    editorRef.current = editor;
-
-    onSetup?.(editor);
-  };
-
-  useEffect(() => {
-    if (editedMessage && editorRef.current) {
-      editorRef.current.update(() => {
-        const root = $getRoot();
-        // Replace the current root with the content of the message being edited
-        root.append(toEditorNodes(editedMessage));
-        // This behaviour is needed to clear selection, if we not clear selection will be on beginning.
-        $setSelection(null);
-        editorRef.current?.focus();
-      });
-    }
-  }, [editedMessage]);
-
   const [shouldReplaceEmoji, setShouldReplaceEmoji] = useState<boolean>(
     propertiesRepository.getPreference(PROPERTIES_TYPE.EMOJI.REPLACE_INLINE),
   );
@@ -190,9 +170,10 @@ export const RichTextEditor = ({
         <div className="input-bar--wrapper">
           <AutoFocusPlugin />
           <GlobalEventsPlugin onShiftTab={onShiftTab} />
-          <EditorRefPlugin editorRef={setupEditor} />
+          <EditorRefPlugin editorRef={onSetup} />
           <DraftStatePlugin loadDraftState={loadDraftState} />
           <EditActionsPlugin onEscape={onEscape} onArrowUp={onArrowUp} />
+          <EditedMessagePlugin message={editedMessage} />
 
           <EmojiPickerPlugin openStateRef={emojiPickerOpen} />
           <HistoryPlugin />

src/script/components/RichTextEditor/plugins/EditedMessagePlugin.tsx

@@ -0,0 +1,49 @@
+/*
+ * Wire
+ * Copyright (C) 2023 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {useEffect} from 'react';
+
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$getRoot, $setSelection} from 'lexical';
+
+import {ContentMessage} from 'src/script/entity/message/ContentMessage';
+
+import {toEditorNodes} from '../utils/messageToEditorNodes';
+
+type Props = {
+  message?: ContentMessage;
+};
+export function EditedMessagePlugin({message}: Props): null {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (message) {
+      editor.update(() => {
+        const root = $getRoot();
+        // This behaviour is needed to clear selection, if we not clear selection will be on beginning.
+        $setSelection(null);
+        // Replace the current root with the content of the message being edited
+        root.append(toEditorNodes(message));
+        editor.focus();
+      });
+    }
+  }, [editor, message]);
+
+  return null;
+}