fix: toolbar change editor menu not updating (#909)

* fix: toolbar change editor menu not updating

* refactor: rename isOpen prop to isVisible

* style: use better variable naming scheme

app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx

@@ -19,19 +19,19 @@ import {
   TransactionalMutation,
 } from '@standardnotes/snjs';
 import { Fragment, FunctionComponent } from 'preact';
-import { StateUpdater, useCallback } from 'preact/hooks';
+import { useCallback, useEffect, useState } from 'preact/hooks';
 import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
-import { PLAIN_EDITOR_NAME } from './createEditorMenuGroups';
+import {
+  createEditorMenuGroups,
+  PLAIN_EDITOR_NAME,
+} from './createEditorMenuGroups';
 
 type ChangeEditorMenuProps = {
   application: WebApplication;
   closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void;
   closeMenu: () => void;
-  groups: EditorMenuGroup[];
-  isOpen: boolean;
-  currentEditor: SNComponent | undefined;
+  isVisible: boolean;
   note: SNNote;
-  setSelectedEditor: StateUpdater<SNComponent | undefined>;
 };
 
 const getGroupId = (group: EditorMenuGroup) =>
@@ -41,12 +41,29 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   application,
   closeOnBlur,
   closeMenu,
-  groups,
-  isOpen,
-  currentEditor,
-  setSelectedEditor,
+  isVisible,
   note,
 }) => {
+  const [editors] = useState<SNComponent[]>(() =>
+    application.componentManager
+      .componentsForArea(ComponentArea.Editor)
+      .sort((a, b) => {
+        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+      })
+  );
+  const [groups, setGroups] = useState<EditorMenuGroup[]>([]);
+  const [currentEditor, setCurrentEditor] = useState<SNComponent>();
+
+  useEffect(() => {
+    setGroups(createEditorMenuGroups(application, editors));
+  }, [application, editors]);
+
+  useEffect(() => {
+    if (note) {
+      setCurrentEditor(application.componentManager.editorForNote(note));
+    }
+  }, [application, note]);
+
   const premiumModal = usePremiumModal();
 
   const isSelectedEditor = useCallback(
@@ -138,7 +155,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
     /** Dirtying can happen above */
     application.sync();
 
-    setSelectedEditor(application.componentManager.editorForNote(note));
+    setCurrentEditor(application.componentManager.editorForNote(note));
   };
 
   const selectEditor = async (itemToBeSelected: EditorMenuItem) => {
@@ -179,7 +196,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
     <Menu
       className="pt-0.5 pb-1"
       a11yLabel="Change editor menu"
-      isOpen={isOpen}
+      isOpen={isVisible}
     >
       {groups
         .filter((group) => group.items && group.items.length)