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/ChangeEditorOption.tsx

@@ -6,16 +6,10 @@ import {
   DisclosureButton,
   DisclosurePanel,
 } from '@reach/disclosure';
-import {
-  ComponentArea,
-  IconType,
-  SNComponent,
-  SNNote,
-} from '@standardnotes/snjs';
+import { IconType, SNComponent, SNNote } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from '../Icon';
-import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
 import { ChangeEditorMenu } from './changeEditor/ChangeEditorMenu';
 import {
   calculateSubmenuStyle,
@@ -49,74 +43,53 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   closeOnBlur,
   note,
 }) => {
-  const [changeEditorMenuOpen, setChangeEditorMenuOpen] = useState(false);
-  const [changeEditorMenuVisible, setChangeEditorMenuVisible] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
     right: 0,
     bottom: 0,
     maxHeight: 'auto',
   });
-  const changeEditorMenuRef = useRef<HTMLDivElement>(null);
-  const changeEditorButtonRef = useRef<HTMLButtonElement>(null);
-  const [editors] = useState<SNComponent[]>(() =>
-    application.componentManager
-      .componentsForArea(ComponentArea.Editor)
-      .sort((a, b) => {
-        return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
-      })
-  );
-  const [editorMenuGroups, setEditorMenuGroups] = useState<EditorMenuGroup[]>(
-    []
-  );
-  const [selectedEditor, setSelectedEditor] = useState(() =>
-    application.componentManager.editorForNote(note)
-  );
-
-  useEffect(() => {
-    setEditorMenuGroups(createEditorMenuGroups(application, editors));
-  }, [application, editors]);
-
-  useEffect(() => {
-    setSelectedEditor(application.componentManager.editorForNote(note));
-  }, [application, note]);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const toggleChangeEditorMenu = () => {
-    if (!changeEditorMenuOpen) {
-      const menuStyle = calculateSubmenuStyle(changeEditorButtonRef.current);
+    if (!isOpen) {
+      const menuStyle = calculateSubmenuStyle(buttonRef.current);
       if (menuStyle) {
         setMenuStyle(menuStyle);
       }
     }
 
-    setChangeEditorMenuOpen(!changeEditorMenuOpen);
+    setIsOpen(!isOpen);
   };
 
   useEffect(() => {
-    if (changeEditorMenuOpen) {
+    if (isOpen) {
       setTimeout(() => {
         const newMenuStyle = calculateSubmenuStyle(
-          changeEditorButtonRef.current,
-          changeEditorMenuRef.current
+          buttonRef.current,
+          menuRef.current
         );
 
         if (newMenuStyle) {
           setMenuStyle(newMenuStyle);
-          setChangeEditorMenuVisible(true);
+          setIsVisible(true);
         }
       });
     }
-  }, [changeEditorMenuOpen]);
+  }, [isOpen]);
 
   return (
-    <Disclosure open={changeEditorMenuOpen} onChange={toggleChangeEditorMenu}>
+    <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
       <DisclosureButton
         onKeyDown={(event) => {
           if (event.key === KeyboardKey.Escape) {
-            setChangeEditorMenuOpen(false);
+            setIsOpen(false);
           }
         }}
         onBlur={closeOnBlur}
-        ref={changeEditorButtonRef}
+        ref={buttonRef}
         className="sn-dropdown-item justify-between"
       >
         <div className="flex items-center">
@@ -126,11 +99,11 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         <Icon type="chevron-right" className="color-neutral" />
       </DisclosureButton>
       <DisclosurePanel
-        ref={changeEditorMenuRef}
+        ref={menuRef}
         onKeyDown={(event) => {
           if (event.key === KeyboardKey.Escape) {
-            setChangeEditorMenuOpen(false);
-            changeEditorButtonRef.current?.focus();
+            setIsOpen(false);
+            buttonRef.current?.focus();
           }
         }}
         style={{
@@ -139,17 +112,14 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         }}
         className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
       >
-        {changeEditorMenuOpen && (
+        {isOpen && (
           <ChangeEditorMenu
             application={application}
             closeOnBlur={closeOnBlur}
-            currentEditor={selectedEditor}
-            setSelectedEditor={setSelectedEditor}
             note={note}
-            groups={editorMenuGroups}
-            isOpen={changeEditorMenuVisible}
+            isVisible={isVisible}
             closeMenu={() => {
-              setChangeEditorMenuOpen(false);
+              setIsOpen(false);
             }}
           />
         )}

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)