From 5df3e596045deeaeda51e996a74ef5a33d06ba54 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 23 Feb 2022 20:55:26 +0530
Subject: [PATCH] fix: render change editor menu only if it is open (#894)

---
 .../components/ChangeEditorButton.tsx         | 24 ++++++-----
 .../NotesOptions/ChangeEditorOption.tsx       | 26 ++++++------
 .../changeEditor/ChangeEditorMenu.tsx         | 40 +++----------------
 .../changeEditor/createEditorMenuGroups.ts    | 14 +++++--
 4 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/app/assets/javascripts/components/ChangeEditorButton.tsx b/app/assets/javascripts/components/ChangeEditorButton.tsx
index f2481f554..715dd94d7 100644
--- a/app/assets/javascripts/components/ChangeEditorButton.tsx
+++ b/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>
diff --git a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx b/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
index 58074efeb..3abf7989e 100644
--- a/app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx
+++ b/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>
   );
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx b/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
index 54d0dc429..ac4a0631d 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/ChangeEditorMenu.tsx
+++ b/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>
                 );
diff --git a/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts b/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
index f73ead3a1..2a9b16907 100644
--- a/app/assets/javascripts/components/NotesOptions/changeEditor/createEditorMenuGroups.ts
+++ b/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);