From f5a689d076498aed75dc88e3b392836221b043c9 Mon Sep 17 00:00:00 2001
From: Labeeb Latheef <labeebklatif@gmail.com>
Date: Tue, 17 Dec 2024 20:53:37 -0500
Subject: [PATCH] Filters text options based on config

---
 src/components/Editor/Menu/Bubble/Options.jsx |  4 +-
 src/components/Editor/Menu/Bubble/index.jsx   |  6 +-
 src/components/Editor/Menu/Bubble/utils.jsx   | 81 +++++++++++--------
 src/components/Editor/Menu/Fixed/index.jsx    |  2 -
 src/components/Editor/Menu/Headless/index.jsx |  2 -
 5 files changed, 49 insertions(+), 46 deletions(-)

diff --git a/src/components/Editor/Menu/Bubble/Options.jsx b/src/components/Editor/Menu/Bubble/Options.jsx
index b0e5de35..37a514c2 100644
--- a/src/components/Editor/Menu/Bubble/Options.jsx
+++ b/src/components/Editor/Menu/Bubble/Options.jsx
@@ -31,12 +31,11 @@ const Options = ({
   isEmojiPickerActive,
   setIsEmojiPickerActive,
   setIsEmbedModalOpen,
-  children,
 }) => {
   const { t } = useTranslation();
   const { Menu, MenuItem } = Dropdown;
 
-  const dropdownOptions = getTextMenuDropdownOptions({ editor });
+  const dropdownOptions = getTextMenuDropdownOptions({ editor, options });
   const nodeType = getNodeType(dropdownOptions);
   const isEmojiActive = options.includes(EDITOR_OPTIONS.EMOJI);
   const isTextColorOptionActive = options.includes(EDITOR_OPTIONS.TEXT_COLOR);
@@ -137,7 +136,6 @@ const Options = ({
         {...{ editor, mentions }}
         tooltipContent={tooltips.mention || t("neetoEditor.menu.mention")}
       />
-      {children}
     </>
   );
 };
diff --git a/src/components/Editor/Menu/Bubble/index.jsx b/src/components/Editor/Menu/Bubble/index.jsx
index 1e4f5020..19320abb 100644
--- a/src/components/Editor/Menu/Bubble/index.jsx
+++ b/src/components/Editor/Menu/Bubble/index.jsx
@@ -19,7 +19,6 @@ const Bubble = ({
   isEmojiPickerActive,
   setIsEmojiPickerActive,
   setIsEmbedModalOpen,
-  children,
 }) => {
   const [isInvalidLink, setIsInvalidLink] = useState(false);
   const [isLinkOptionActive, setIsLinkOptionActive] = useState(false);
@@ -39,6 +38,7 @@ const Bubble = ({
   const noTextOptions = isNotPresent(
     textOptions.filter(option => bubbleMenuOptions.includes(option))
   );
+
   if (!editor || (!isImageNodeSelected && noTextOptions)) {
     return null;
   }
@@ -78,9 +78,7 @@ const Bubble = ({
             tooltips,
           }}
           options={textOptions}
-        >
-          {children}
-        </Options>
+        />
       </BubbleMenuTipTap>
     </div>
   );
diff --git a/src/components/Editor/Menu/Bubble/utils.jsx b/src/components/Editor/Menu/Bubble/utils.jsx
index c977f4c6..140ebf88 100644
--- a/src/components/Editor/Menu/Bubble/utils.jsx
+++ b/src/components/Editor/Menu/Bubble/utils.jsx
@@ -21,6 +21,7 @@ import {
 import { Button } from "neetoui";
 import { assoc, fromPairs, not, prop } from "ramda";
 
+import { EDITOR_OPTIONS } from "src/common/constants";
 import { generateFocusProps } from "utils/focusHighlighter";
 
 export const createMenuOptions = ({
@@ -190,41 +191,51 @@ export const buildBubbleMenuOptions = ({
   );
 };
 
-export const getTextMenuDropdownOptions = ({ editor }) => [
-  {
-    optionName: "Heading 1",
-    active: editor.isActive("heading", { level: 1 }),
-    command: () =>
-      editor.chain().focus().setNode("heading", { level: 1 }).run(),
-  },
-  {
-    optionName: "Heading 2",
-    active: editor.isActive("heading", { level: 2 }),
-    command: () =>
-      editor.chain().focus().setNode("heading", { level: 2 }).run(),
-  },
-  {
-    optionName: "Heading 3",
-    active: editor.isActive("heading", { level: 3 }),
-    command: () =>
-      editor.chain().focus().setNode("heading", { level: 3 }).run(),
-  },
-  {
-    optionName: "Ordered List",
-    active: editor.isActive("orderedList"),
-    command: () => editor.chain().focus().toggleOrderedList().run(),
-  },
-  {
-    optionName: "Bulleted List",
-    active: editor.isActive("bulletList"),
-    command: () => editor.chain().focus().toggleBulletList().run(),
-  },
-  {
-    optionName: "Text",
-    active: editor.isActive("paragraph"),
-    command: () => editor.chain().focus().setNode("paragraph").run(),
-  },
-];
+export const getTextMenuDropdownOptions = ({ editor, options }) => {
+  const textOptions = {
+    [EDITOR_OPTIONS.H1]: {
+      optionName: "Heading 1",
+      active: editor.isActive("heading", { level: 1 }),
+      command: () =>
+        editor.chain().focus().setNode("heading", { level: 1 }).run(),
+    },
+    [EDITOR_OPTIONS.H2]: {
+      optionName: "Heading 2",
+      active: editor.isActive("heading", { level: 2 }),
+      command: () =>
+        editor.chain().focus().setNode("heading", { level: 2 }).run(),
+    },
+    [EDITOR_OPTIONS.H3]: {
+      optionName: "Heading 3",
+      active: editor.isActive("heading", { level: 3 }),
+      command: () =>
+        editor.chain().focus().setNode("heading", { level: 3 }).run(),
+    },
+    [EDITOR_OPTIONS.LIST_ORDERED]: {
+      optionName: "Ordered List",
+      active: editor.isActive("orderedList"),
+      command: () => editor.chain().focus().toggleOrderedList().run(),
+    },
+    [EDITOR_OPTIONS.LIST_BULLETS]: {
+      optionName: "Bulleted List",
+      active: editor.isActive("bulletList"),
+      command: () => editor.chain().focus().toggleBulletList().run(),
+    },
+    [EDITOR_OPTIONS.PARAGRAPH]: {
+      optionName: "Text",
+      active: editor.isActive("paragraph"),
+      command: () => editor.chain().focus().setNode("paragraph").run(),
+    },
+  };
+
+  const result = [];
+  options.forEach(option => {
+    if (!textOptions[option]) return;
+    result.push(textOptions[option]);
+  });
+
+  return result;
+};
 
 export const getNodeType = options =>
   options.find(prop("active"))?.optionName || "Text";
diff --git a/src/components/Editor/Menu/Fixed/index.jsx b/src/components/Editor/Menu/Fixed/index.jsx
index 106e5dc5..16a9767b 100644
--- a/src/components/Editor/Menu/Fixed/index.jsx
+++ b/src/components/Editor/Menu/Fixed/index.jsx
@@ -31,7 +31,6 @@ const Fixed = ({
   attachmentProps,
   isEmojiPickerActive,
   setIsEmojiPickerActive,
-  children,
   openLinkInNewTab,
 }) => {
   const [focusedButtonIndex, setFocusedButtonIndex] = useState(0);
@@ -180,7 +179,6 @@ const Fixed = ({
         {isNotEmpty(moreMenuItems) && (
           <MoreMenu {...{ editor }} groups={moreMenuItems} />
         )}
-        {children}
       </div>
       {!isEmpty(variables) && (
         <div
diff --git a/src/components/Editor/Menu/Headless/index.jsx b/src/components/Editor/Menu/Headless/index.jsx
index ae189c1d..922c0229 100644
--- a/src/components/Editor/Menu/Headless/index.jsx
+++ b/src/components/Editor/Menu/Headless/index.jsx
@@ -14,7 +14,6 @@ const Headless = ({
   mediaUploader,
   unsplashApiKey,
   addonCommands = [],
-  children,
   className,
   attachmentProps,
   isEmojiPickerActive,
@@ -51,7 +50,6 @@ const Headless = ({
       {allOptions.map(option => (
         <Option {...{ editor }} key={option.optionName} {...option} />
       ))}
-      {children}
       {isMediaUploaderActive && (
         <MediaUploader
           {...{ editor, mediaUploader, unsplashApiKey }}