fix: render change editor menu only if it is open (#894)

app/assets/javascripts/components/ChangeEditorButton.tsx

@@ -49,8 +49,8 @@ export const ChangeEditorButton: FunctionComponent<Props> = observer(
     const [currentEditor, setCurrentEditor] = useState<SNComponent>();
 
     useEffect(() => {
-      setEditorMenuGroups(createEditorMenuGroups(editors));
-    }, [editors]);
+      setEditorMenuGroups(createEditorMenuGroups(application, editors));
+    }, [application, editors]);
 
     useEffect(() => {
       if (note) {
@@ -121,15 +121,17 @@ 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}
           >
-            <ChangeEditorMenu
-              closeOnBlur={closeOnBlur}
-              application={application}
-              isOpen={open}
-              currentEditor={currentEditor}
-              setSelectedEditor={setCurrentEditor}
-              note={note}
-              groups={editorMenuGroups}
-            />
+            {open && (
+              <ChangeEditorMenu
+                closeOnBlur={closeOnBlur}
+                application={application}
+                isOpen={open}
+                currentEditor={currentEditor}
+                setSelectedEditor={setCurrentEditor}
+                note={note}
+                groups={editorMenuGroups}
+              />
+            )}
           </DisclosurePanel>
         </Disclosure>
       </div>

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

@@ -39,7 +39,7 @@ type AccordionMenuGroup<T> = {
 export type EditorMenuItem = {
   name: string;
   component?: SNComponent;
-  isPremiumFeature?: boolean;
+  isEntitled: boolean;
 };
 
 export type EditorMenuGroup = AccordionMenuGroup<EditorMenuItem>;
@@ -162,8 +162,8 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
   );
 
   useEffect(() => {
-    setEditorMenuGroups(createEditorMenuGroups(editors));
-  }, [editors]);
+    setEditorMenuGroups(createEditorMenuGroups(application, editors));
+  }, [application, editors]);
 
   useEffect(() => {
     setSelectedEditor(application.componentManager.editorForNote(note));
@@ -248,15 +248,17 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         }}
         className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
       >
-        <ChangeEditorMenu
-          application={application}
-          closeOnBlur={closeOnBlur}
-          currentEditor={selectedEditor}
-          setSelectedEditor={setSelectedEditor}
-          note={note}
-          groups={editorMenuGroups}
-          isOpen={changeEditorMenuVisible}
-        />
+        {changeEditorMenuOpen && (
+          <ChangeEditorMenu
+            application={application}
+            closeOnBlur={closeOnBlur}
+            currentEditor={selectedEditor}
+            setSelectedEditor={setSelectedEditor}
+            note={note}
+            groups={editorMenuGroups}
+            isOpen={changeEditorMenuVisible}
+          />
+        )}
       </DisclosurePanel>
     </Disclosure>
   );

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

@@ -11,7 +11,6 @@ import { STRING_EDIT_LOCKED_ATTEMPT } from '@/strings';
 import { WebApplication } from '@/ui_models/application';
 import {
   ComponentArea,
-  FeatureStatus,
   ItemMutator,
   NoteMutator,
   PrefKey,
@@ -48,28 +47,6 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
 }) => {
   const premiumModal = usePremiumModal();
 
-  const isEntitledToEditor = useCallback(
-    (item: EditorMenuItem) => {
-      const isPlainEditor = !item.component;
-
-      if (item.isPremiumFeature) {
-        return false;
-      }
-
-      if (isPlainEditor) {
-        return true;
-      }
-
-      if (item.component) {
-        return (
-          application.getFeatureStatus(item.component.identifier) ===
-          FeatureStatus.Entitled
-        );
-      }
-    },
-    [application]
-  );
-
   const isSelectedEditor = useCallback(
     (item: EditorMenuItem) => {
       if (currentEditor) {
@@ -163,6 +140,11 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
   };
 
   const selectEditor = async (itemToBeSelected: EditorMenuItem) => {
+    if (!itemToBeSelected.isEntitled) {
+      premiumModal.activate(itemToBeSelected.name);
+      return;
+    }
+
     const areBothEditorsPlain = !currentEditor && !itemToBeSelected.component;
 
     if (areBothEditorsPlain) {
@@ -184,14 +166,6 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
       }
     }
 
-    if (
-      itemToBeSelected.isPremiumFeature ||
-      !isEntitledToEditor(itemToBeSelected)
-    ) {
-      premiumModal.activate(itemToBeSelected.name);
-      shouldSelectEditor = false;
-    }
-
     if (shouldSelectEditor) {
       selectComponent(itemToBeSelected.component ?? null, note);
     }
@@ -238,9 +212,7 @@ export const ChangeEditorMenu: FunctionComponent<ChangeEditorMenuProps> = ({
                   >
                     <div className="flex flex-grow items-center justify-between">
                       {item.name}
-                      {(item.isPremiumFeature || !isEntitledToEditor(item)) && (
-                        <Icon type="premium-feature" />
-                      )}
+                      {!item.isEntitled && <Icon type="premium-feature" />}
                     </div>
                   </MenuItem>
                 );

app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts

@@ -1,10 +1,11 @@
+import { WebApplication } from '@/ui_models/application';
 import {
   ComponentArea,
   FeatureDescription,
   GetFeatures,
   NoteType,
 } from '@standardnotes/features';
-import { ContentType, SNComponent } from '@standardnotes/snjs';
+import { ContentType, FeatureStatus, SNComponent } from '@standardnotes/snjs';
 import { EditorMenuItem, EditorMenuGroup } from '../ChangeEditorOption';
 
 export const PLAIN_EDITOR_NAME = 'Plain Editor';
@@ -31,11 +32,15 @@ const getEditorGroup = (
   return 'others';
 };
 
-export const createEditorMenuGroups = (editors: SNComponent[]) => {
+export const createEditorMenuGroups = (
+  application: WebApplication,
+  editors: SNComponent[]
+) => {
   const editorItems: Record<EditorGroup, EditorMenuItem[]> = {
     plain: [
       {
         name: PLAIN_EDITOR_NAME,
+        isEntitled: true,
       },
     ],
     'rich-text': [],
@@ -61,7 +66,7 @@ export const createEditorMenuGroups = (editors: SNComponent[]) => {
       ) {
         editorItems[getEditorGroup(editorFeature)].push({
           name: editorFeature.name as string,
-          isPremiumFeature: true,
+          isEntitled: false,
         });
       }
     });
@@ -70,6 +75,9 @@ export const createEditorMenuGroups = (editors: SNComponent[]) => {
     const editorItem: EditorMenuItem = {
       name: editor.name,
       component: editor,
+      isEntitled:
+        application.getFeatureStatus(editor.identifier) ===
+        FeatureStatus.Entitled,
     };
 
     editorItems[getEditorGroup(editor.package_info)].push(editorItem);