‸fix editor crash with opened thread room switch

src/app/components/editor/Editor.tsx

@@ -20,17 +20,9 @@ import {
 import { withHistory } from 'slate-history';
 import { BlockType } from './types';
 import { RenderElement, RenderLeaf } from './Elements';
-import { CustomElement } from './slate';
 import * as css from './Editor.css';
 import { toggleKeyboardShortcut } from './keyboard';
 
-const initialValue: CustomElement[] = [
-  {
-    type: BlockType.Paragraph,
-    children: [{ text: '' }],
-  },
-];
-
 const withInline = (editor: Editor): Editor => {
   const { isInline } = editor;
 
@@ -59,13 +51,13 @@ export const useEditor = (): Editor => {
 
 export type EditorChangeHandler = (value: Descendant[]) => void;
 type CustomEditorProps = {
-  editableName?: string;
   top?: ReactNode;
   bottom?: ReactNode;
   before?: ReactNode;
   after?: ReactNode;
   maxHeight?: string;
   editor: Editor;
+  initialValue?: Descendant[];
   placeholder?: string;
   onKeyDown?: KeyboardEventHandler;
   onKeyUp?: KeyboardEventHandler;
@@ -75,13 +67,13 @@ type CustomEditorProps = {
 export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
   (
     {
-      editableName,
       top,
       bottom,
       before,
       after,
       maxHeight = '50vh',
       editor,
+      initialValue,
       placeholder,
       onKeyDown,
       onKeyUp,
@@ -90,6 +82,13 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
     },
     ref
   ) => {
+    const [defaultValue] = useState<Descendant[]>(() => [
+      {
+        type: BlockType.Paragraph,
+        children: [{ text: '' }],
+      },
+    ]);
+
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
       []
@@ -120,7 +119,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
 
     return (
       <div className={css.Editor} ref={ref}>
-        <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
+        <Slate editor={editor} initialValue={initialValue ?? defaultValue} onChange={onChange}>
           {top}
           <Box alignItems="Start">
             {before && (
@@ -137,7 +136,6 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
               hideTrack
             >
               <Editable
-                data-editable-name={editableName}
                 className={css.EditorTextarea}
                 placeholder={placeholder}
                 renderPlaceholder={renderPlaceholder}

src/app/features/room/RoomInput.tsx

@@ -10,7 +10,7 @@ import React, {
 import { useAtom } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
 import { ReactEditor } from 'slate-react';
-import { Transforms, Editor } from 'slate';
+import { Editor } from 'slate';
 import { Box, Checkbox, Icon, IconButton, Icons, Line, PopOut, Scroll, Text, config } from 'folds';
 
 import {
@@ -148,17 +148,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
-    useEffect(() => {
-      Transforms.insertFragment(editor, draft);
-    }, [editor, draft]);
-
     useEffect(
       () => () => {
         if (!isEmptyEditor(editor)) {
           const parsedDraft = JSON.parse(JSON.stringify(editor.children));
           setDraft(parsedDraft);
         } else {
-          setDraft([]);
+          setDraft(undefined);
         }
         resetEditor(editor);
         resetEditorHistory(editor);
@@ -306,8 +302,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           />
         )}
         <CustomEditor
-          editableName="RoomInput"
           editor={editor}
+          initialValue={draft}
           placeholder="Send a message..."
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}

src/app/features/room/hooks/useSendMessage.ts

@@ -203,7 +203,7 @@ export const useSendStickerMessage = (threadId?: string) => {
     const stickerUrl = mxcToHttp(ct.session.baseUrl, mxc, useAuthentication).url();
     if (!stickerUrl) return;
 
-    const info = await getImageInfo(
+    const info = getImageInfo(
       await loadImageElement(stickerUrl),
       await getImageUrlBlob(stickerUrl)
     );

src/app/features/room/message/thread-selector/ThreadSelector.tsx

@@ -63,7 +63,6 @@ export function ThreadSelector({
                 hour24Clock={hour24Clock}
                 dateFormatString={dateFormatString}
                 ts={latestEvent.origin_server_ts}
-                inheritPriority
               />
             </Text>
             <Icon size="100" src={Icons.ChevronRight} />

src/app/state/room/roomInputDrafts.ts

@@ -34,7 +34,7 @@ export type RoomIdToMsgAction =
       roomId: string;
     };
 
-const createDraftAtom = () => atom<Descendant[]>([]);
+const createDraftAtom = () => atom<Descendant[] | undefined>(undefined);
 export type DraftAtom = ReturnType<typeof createDraftAtom>;
 export const composerToDraftAtom = atomFamily<string, DraftAtom>(() => createDraftAtom());