Fix Slate crash after inserting emoji from picker/autocomplete

src/app/features/room/message/MessageEditor.tsx

@@ -8,7 +8,6 @@ import React, {
 import { Box, Chip, IconButton, Line, PopOut, RectCords, Spinner, Text, as, config } from 'folds';
 import { Icon, Icons } from '../../../components/icons';
 import { Editor, Transforms } from 'slate';
-import { ReactEditor } from 'slate-react';
 import { IContent, IMentions, MatrixEvent, RelationType, Room } from 'matrix-js-sdk';
 import { isKeyHotkey } from 'is-hotkey';
 import {
@@ -27,6 +26,7 @@ import {
   htmlToEditorInput,
   moveCursor,
   plainToEditorInput,
+  safeFocusEditor,
   toMatrixCustomHTML,
   toPlainText,
   trimCustomHtml,
@@ -185,7 +185,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
     );
 
     const handleCloseAutocomplete = useCallback(() => {
-      ReactEditor.focus(editor);
+      safeFocusEditor(editor);
       setAutocompleteQuery(undefined);
     }, [editor]);
 
@@ -208,7 +208,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
       });
 
       editor.insertFragment(initialValue);
-      if (!mobileOrTablet()) ReactEditor.focus(editor);
+      if (!mobileOrTablet()) safeFocusEditor(editor);
     }, [editor, getPrevBodyAndFormattedBody, isMarkdown]);
 
     useEffect(() => {
@@ -300,7 +300,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
                             requestClose={() => {
                               setAnchor((v) => {
                                 if (v) {
-                                  if (!mobileOrTablet()) ReactEditor.focus(editor);
+                                  if (!mobileOrTablet()) safeFocusEditor(editor);
                                   return undefined;
                                 }
                                 return v;