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

@@ -7,14 +7,11 @@ import {
   DisclosurePanel,
 } from '@reach/disclosure';
 import VisuallyHidden from '@reach/visually-hidden';
-import { ComponentArea, SNComponent } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { useRef, useState } from 'preact/hooks';
 import { Icon } from './Icon';
 import { ChangeEditorMenu } from './NotesOptions/changeEditor/ChangeEditorMenu';
-import { createEditorMenuGroups } from './NotesOptions/changeEditor/createEditorMenuGroups';
-import { EditorMenuGroup } from './NotesOptions/ChangeEditorOption';
 import { useCloseOnBlur } from './utils';
 
 type Props = {
@@ -26,7 +23,8 @@ type Props = {
 export const ChangeEditorButton: FunctionComponent<Props> = observer(
   ({ application, appState, onClickPreprocessing }) => {
     const note = Object.values(appState.notes.selectedNotes)[0];
-    const [open, setOpen] = useState(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [isVisible, setIsVisible] = useState(false);
     const [position, setPosition] = useState({
       top: 0,
       right: 0,
@@ -35,28 +33,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
     const buttonRef = useRef<HTMLButtonElement>(null);
     const panelRef = useRef<HTMLDivElement>(null);
     const containerRef = useRef<HTMLDivElement>(null);
-    const [closeOnBlur] = useCloseOnBlur(containerRef, setOpen);
+    const [closeOnBlur] = useCloseOnBlur(containerRef, setIsOpen);
-    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 [currentEditor, setCurrentEditor] = useState<SNComponent>();
-
-    useEffect(() => {
-      setEditorMenuGroups(createEditorMenuGroups(application, editors));
-    }, [application, editors]);
-
-    useEffect(() => {
-      if (note) {
-        setCurrentEditor(application.componentManager.editorForNote(note));
-      }
-    }, [application, note]);
 
     const toggleChangeEditorMenu = async () => {
       const rect = buttonRef.current?.getBoundingClientRect();
@@ -81,22 +58,25 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
           right: document.body.clientWidth - rect.right,
         });
 
-        const newOpenState = !open;
+        const newOpenState = !isOpen;
         if (newOpenState && onClickPreprocessing) {
           await onClickPreprocessing();
         }
 
-        setOpen(newOpenState);
+        setIsOpen(newOpenState);
+        setTimeout(() => {
+          setIsVisible(newOpenState);
+        });
       }
     };
 
     return (
       <div ref={containerRef}>
-        <Disclosure open={open} onChange={toggleChangeEditorMenu}>
+        <Disclosure open={isOpen} onChange={toggleChangeEditorMenu}>
           <DisclosureButton
             onKeyDown={(event) => {
               if (event.key === 'Escape') {
-                setOpen(false);
+                setIsOpen(false);
               }
             }}
             onBlur={closeOnBlur}
@@ -109,7 +89,7 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
           <DisclosurePanel
             onKeyDown={(event) => {
               if (event.key === 'Escape') {
-                setOpen(false);
+                setIsOpen(false);
                 buttonRef.current?.focus();
               }
             }}
@@ -121,17 +101,14 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
             className="sn-dropdown sn-dropdown--animated min-w-68 max-h-120 max-w-xs flex flex-col overflow-y-auto fixed"
             onBlur={closeOnBlur}
           >
-            {open && (
+            {isOpen && (
               <ChangeEditorMenu
                 closeOnBlur={closeOnBlur}
                 application={application}
-                isOpen={open}
+                isVisible={isVisible}
-                currentEditor={currentEditor}
-                setSelectedEditor={setCurrentEditor}
                 note={note}
-                groups={editorMenuGroups}
                 closeMenu={() => {
-                  setOpen(false);
+                  setIsOpen(false);
                 }}
               />
             )}

app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx

@@ -6,16 +6,10 @@ import {
   DisclosureButton,
   DisclosurePanel,
 } from '@reach/disclosure';
-import {
+import { IconType, SNComponent, SNNote } from '@standardnotes/snjs';
-  ComponentArea,
-  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 [isOpen, setIsOpen] = useState(false);
-  const [changeEditorMenuVisible, setChangeEditorMenuVisible] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const [menuStyle, setMenuStyle] = useState<SubmenuStyle>({
     right: 0,
     bottom: 0,
     maxHeight: 'auto',
   });
-  const changeEditorMenuRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
-  const changeEditorButtonRef = useRef<HTMLButtonElement>(null);
+  const buttonRef = 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 toggleChangeEditorMenu = () => {
-    if (!changeEditorMenuOpen) {
+    if (!isOpen) {
-      const menuStyle = calculateSubmenuStyle(changeEditorButtonRef.current);
+      const menuStyle = calculateSubmenuStyle(buttonRef.current);
       if (menuStyle) {
         setMenuStyle(menuStyle);
       }
     }
 
-    setChangeEditorMenuOpen(!changeEditorMenuOpen);
+    setIsOpen(!isOpen);
   };
 
   useEffect(() => {
-    if (changeEditorMenuOpen) {
+    if (isOpen) {
       setTimeout(() => {
         const newMenuStyle = calculateSubmenuStyle(
-          changeEditorButtonRef.current,
+          buttonRef.current,
-          changeEditorMenuRef.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);
+            setIsOpen(false);
-            changeEditorButtonRef.current?.focus();
+            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}
+            isVisible={isVisible}
-            isOpen={changeEditorMenuVisible}
             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[];
+  isVisible: boolean;
-  isOpen: boolean;
-  currentEditor: SNComponent | undefined;
   note: SNNote;
-  setSelectedEditor: StateUpdater<SNComponent | undefined>;
 };
 
 const getGroupId = (group: EditorMenuGroup) =>
@@ -41,12 +41,29 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   application,
   closeOnBlur,
   closeMenu,
-  groups,
+  isVisible,
-  isOpen,
-  currentEditor,
-  setSelectedEditor,
   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)