fix(note-widget): reinitialize markdown editor after async note load and workflow remount

src/renderer/widgets/note/widget.tsx

@@ -14,6 +14,10 @@ import { Editor } from 'tiny-markdown-editor';
 
 const keyNote = 'note';
 
+interface TinyMDEChangeEvent {
+  content: string;
+}
+
 function WidgetComp({widgetApi, settings}: WidgetReactComponentProps<Settings>) {
   const {updateActionBar, setContextMenuFactory, dataStorage} = widgetApi;
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
@@ -29,42 +33,59 @@ function WidgetComp({widgetApi, settings}: WidgetReactComponentProps<Settings>)
 
   const saveNote = useMemo(() => debounce((note: string) => dataStorage.setText(keyNote, note), 3000), [dataStorage]);
   const updNote = useCallback((note: string) => {
-    // setLoadedNote(note);
     saveNote(note);
-  }, [saveNote])
+  }, [saveNote]);
 
   const handleChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>((e) => {
     const newNote = e.target.value;
-    updNote(newNote)
-  }, [updNote])
+    updNote(newNote);
+  }, [updNote]);
 
   useEffect(() => {
     async function loadNote() {
       setLoadedNote(await dataStorage.getText(keyNote) || '');
       setIsLoaded(true);
     }
     loadNote();
-  }, [dataStorage])
+  }, [dataStorage]);
 
+  // Inicialização e Ciclo de Vida do Editor Markdown (TinyMDE)
   useEffect(() => {
-    if (textAreaRef.current) {
-      if (settings.markdown) {
-        const tinyMDE = new Editor({textarea: textAreaRef.current});
-        tinyMDE.addEventListener('change', (e) => updNote(e.content));
-        (textAreaRef.current.nextSibling as HTMLElement).spellcheck = settings.spellCheck;
-      } else {
-        setLoadedNote(textAreaRef.current.value);
-        Array.from(textAreaRef.current.parentElement?.children || [])
-          .filter(child => child.classList.contains('TinyMDE'))
-          .forEach(child => child.remove());
+    if (!isLoaded || !textAreaRef.current) {
+      return undefined;
+    }
+
+    const currentTextArea = textAreaRef.current;
+
+    const removeExistingEditorDOM = () => {
+      Array.from(currentTextArea.parentElement?.children || [])
+        .filter(child => child.classList.contains('TinyMDE'))
+        .forEach(child => child.remove());
+    };
+
+    if (settings.markdown) {
+      removeExistingEditorDOM();
+
+      const tinyMDE = new Editor({textarea: currentTextArea});
+      tinyMDE.addEventListener('change', (e: TinyMDEChangeEvent) => updNote(e.content));
+
+      if (currentTextArea.nextSibling && 'spellcheck' in currentTextArea.nextSibling) {
+        (currentTextArea.nextSibling as HTMLElement).spellcheck = settings.spellCheck;
       }
+    } else {
+      setLoadedNote(currentTextArea.value);
+      removeExistingEditorDOM();
     }
-  }, [settings.markdown, settings.spellCheck, updNote])
+
+    return () => {
+      removeExistingEditorDOM();
+    };
+  }, [isLoaded, settings.markdown, settings.spellCheck, updNote]);
 
   return (
     isLoaded
     ? <textarea
-        key={settings.markdown?'md':undefined} // resets element after disabling markdown
+        key={settings.markdown ? 'md' : 'raw'}
         ref={textAreaRef}
         className={styles['textarea']}
         defaultValue={loadedNote}
@@ -74,10 +95,10 @@ function WidgetComp({widgetApi, settings}: WidgetReactComponentProps<Settings>)
         spellCheck={settings.spellCheck}
       ></textarea>
     : <>Loading Note...</>
-  )
+  );
 }
 
 export const widgetComp: ReactComponent<WidgetReactComponentProps<Settings>> = {
   type: 'react',
   Comp: WidgetComp
-}
+};