feat: hide less used functions in overflow dropdown (#876)

* feat: hide less used functions in overflow dropdown * chore: add story to show Tiptap editor
opengovsg · Nov 15, 2024 · f36ab4d · f36ab4d
1 parent 1e92052
commit f36ab4d
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 64 deletions.
diff --git a/apps/studio/public/assets/css/preview-tw.css b/apps/studio/public/assets/css/preview-tw.css
@@ -1766,6 +1766,10 @@ video {
   flex-shrink: 0;
 }
 
+.flex-grow {
+  flex-grow: 1;
+}
+
 .grow {
   flex-grow: 1;
 }

diff --git a/apps/studio/src/components/PageEditor/MenuBar/AccordionMenuBar.tsx b/apps/studio/src/components/PageEditor/MenuBar/AccordionMenuBar.tsx
@@ -72,22 +72,6 @@ export const AccordionMenuBar = ({ editor }: { editor: Editor }) => {
         action: () => editor.chain().focus().toggleStrike().run(),
         isActive: () => editor.isActive("strike"),
       },
-      {
-        type: "item",
-        icon: MdSuperscript,
-        title: "Superscript",
-        action: () =>
-          editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
-        isActive: () => editor.isActive("superscript"),
-      },
-      {
-        type: "item",
-        icon: MdSubscript,
-        title: "Subscript",
-        action: () =>
-          editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
-        isActive: () => editor.isActive("subscript"),
-      },
       {
         type: "divider",
       },
@@ -204,6 +188,28 @@ export const AccordionMenuBar = ({ editor }: { editor: Editor }) => {
           },
         ],
       },
+      // Lesser-used commands are kept inside the overflow items list
+      {
+        type: "overflow-list",
+        items: [
+          {
+            type: "item",
+            icon: MdSuperscript,
+            title: "Superscript",
+            action: () =>
+              editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
+            isActive: () => editor.isActive("superscript"),
+          },
+          {
+            type: "item",
+            icon: MdSubscript,
+            title: "Subscript",
+            action: () =>
+              editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
+            isActive: () => editor.isActive("subscript"),
+          },
+        ],
+      },
     ],
     [editor, onLinkModalOpen, onTableSettingsModalOpen],
   )

diff --git a/apps/studio/src/components/PageEditor/MenuBar/CalloutMenuBar.tsx b/apps/studio/src/components/PageEditor/MenuBar/CalloutMenuBar.tsx
@@ -53,22 +53,6 @@ export const CalloutMenuBar = ({ editor }: { editor: Editor }) => {
         action: () => editor.chain().focus().toggleStrike().run(),
         isActive: () => editor.isActive("strike"),
       },
-      {
-        type: "item",
-        icon: MdSuperscript,
-        title: "Superscript",
-        action: () =>
-          editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
-        isActive: () => editor.isActive("superscript"),
-      },
-      {
-        type: "item",
-        icon: MdSubscript,
-        title: "Subscript",
-        action: () =>
-          editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
-        isActive: () => editor.isActive("subscript"),
-      },
       {
         type: "divider",
       },
@@ -104,6 +88,28 @@ export const CalloutMenuBar = ({ editor }: { editor: Editor }) => {
         action: onLinkModalOpen,
         isActive: () => editor.isActive("link"),
       },
+      // Lesser-used commands are kept inside the overflow items list
+      {
+        type: "overflow-list",
+        items: [
+          {
+            type: "item",
+            icon: MdSuperscript,
+            title: "Superscript",
+            action: () =>
+              editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
+            isActive: () => editor.isActive("superscript"),
+          },
+          {
+            type: "item",
+            icon: MdSubscript,
+            title: "Subscript",
+            action: () =>
+              editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
+            isActive: () => editor.isActive("subscript"),
+          },
+        ],
+      },
     ],
     [editor, onLinkModalOpen],
   )

diff --git a/apps/studio/src/components/PageEditor/MenuBar/MenubarItem/Factory.tsx b/apps/studio/src/components/PageEditor/MenuBar/MenubarItem/Factory.tsx
@@ -3,6 +3,7 @@ import { MenubarDetailedList } from "./DetailedList"
 import { MenubarDivider } from "./Divider"
 import { MenubarHorizontalList } from "./HorizontalList"
 import { MenubarItem } from "./Item"
+import { MenubarOverflowList } from "./OverflowList"
 import { MenubarVerticalList } from "./VerticalList"
 
 export const MenubarItemFactory = (
@@ -19,5 +20,10 @@ export const MenubarItemFactory = (
       return <MenubarDetailedList {...item} />
     case "item":
       return <MenubarItem {...item} />
+    case "overflow-list":
+      return <MenubarOverflowList {...item} />
+    default:
+      const _: never = item
+      return <></>
   }
 }
diff --git a/apps/studio/src/components/PageEditor/MenuBar/MenubarItem/OverflowList.tsx b/apps/studio/src/components/PageEditor/MenuBar/MenubarItem/OverflowList.tsx
@@ -0,0 +1,68 @@
+import {
+  HStack,
+  Icon,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from "@chakra-ui/react"
+import { IconButton } from "@opengovsg/design-system-react"
+import { BiDotsHorizontalRounded } from "react-icons/bi"
+
+import type { MenubarNestedItem } from "./types"
+import { MenuItem } from "../../MenuItem"
+
+export interface MenubarOverflowListProps {
+  type: "overflow-list"
+  items: MenubarNestedItem[]
+}
+
+export const MenubarOverflowList = ({
+  items,
+}: MenubarOverflowListProps): JSX.Element => {
+  return (
+    <Popover placement="bottom">
+      {({ isOpen }) => (
+        <>
+          <PopoverTrigger>
+            <IconButton
+              variant="clear"
+              colorScheme="neutral"
+              isActive={isOpen}
+              _active={{
+                bg: "interaction.muted.main.active",
+              }}
+              h="1.75rem"
+              w="1.75rem"
+              minH="1.75rem"
+              minW="1.75rem"
+              p="0.25rem"
+              aria-label="More options"
+            >
+              <Icon
+                as={BiDotsHorizontalRounded}
+                fontSize="1.25rem"
+                color="base.content.medium"
+              />
+            </IconButton>
+          </PopoverTrigger>
+          <PopoverContent w="fit-content">
+            <PopoverBody>
+              <HStack>
+                {items.map((subItem, index) => (
+                  <MenuItem
+                    key={index}
+                    icon={subItem.icon}
+                    title={subItem.title}
+                    action={subItem.action}
+                    isActive={subItem.isActive}
+                  />
+                ))}
+              </HStack>
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  )
+}
diff --git a/apps/studio/src/components/PageEditor/MenuBar/MenubarItem/types.ts b/apps/studio/src/components/PageEditor/MenuBar/MenubarItem/types.ts
@@ -4,6 +4,7 @@ import type { MenubarDetailedListProps } from "./DetailedList"
 import type { MenubarDividerProps } from "./Divider"
 import type { MenubarHorizontalListProps } from "./HorizontalList"
 import type { MenubarItemProps } from "./Item"
+import type { MenubarOverflowListProps } from "./OverflowList"
 import type { MenubarVerticalListProps } from "./VerticalList"
 
 export interface MenubarNestedItem {
@@ -24,3 +25,4 @@ export type PossibleMenubarItemProps =
   | MenubarHorizontalListProps
   | MenubarDetailedListProps
   | MenubarItemProps
+  | MenubarOverflowListProps
diff --git a/apps/studio/src/components/PageEditor/MenuBar/ProseMenuBar.tsx b/apps/studio/src/components/PageEditor/MenuBar/ProseMenuBar.tsx
@@ -107,22 +107,6 @@ export const ProseMenuBar = ({ editor }: { editor: Editor }) => {
         action: () => editor.chain().focus().toggleStrike().run(),
         isActive: () => editor.isActive("strike"),
       },
-      {
-        type: "item",
-        icon: MdSuperscript,
-        title: "Superscript",
-        action: () =>
-          editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
-        isActive: () => editor.isActive("superscript"),
-      },
-      {
-        type: "item",
-        icon: MdSubscript,
-        title: "Subscript",
-        action: () =>
-          editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
-        isActive: () => editor.isActive("subscript"),
-      },
       {
         type: "horizontal-list",
         label: "Lists",
@@ -152,6 +136,28 @@ export const ProseMenuBar = ({ editor }: { editor: Editor }) => {
         action: onLinkModalOpen,
         isActive: () => editor.isActive("link"),
       },
+      // Lesser-used commands are kept inside the overflow items list
+      {
+        type: "overflow-list",
+        items: [
+          {
+            type: "item",
+            icon: MdSuperscript,
+            title: "Superscript",
+            action: () =>
+              editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
+            isActive: () => editor.isActive("superscript"),
+          },
+          {
+            type: "item",
+            icon: MdSubscript,
+            title: "Subscript",
+            action: () =>
+              editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
+            isActive: () => editor.isActive("subscript"),
+          },
+        ],
+      },
     ],
     [editor, onLinkModalOpen],
   )

diff --git a/apps/studio/src/components/PageEditor/MenuBar/TextMenuBar.tsx b/apps/studio/src/components/PageEditor/MenuBar/TextMenuBar.tsx
@@ -127,22 +127,6 @@ export const TextMenuBar = ({ editor }: { editor: Editor }) => {
         action: () => editor.chain().focus().toggleStrike().run(),
         isActive: () => editor.isActive("strike"),
       },
-      {
-        type: "item",
-        icon: MdSuperscript,
-        title: "Superscript",
-        action: () =>
-          editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
-        isActive: () => editor.isActive("superscript"),
-      },
-      {
-        type: "item",
-        icon: MdSubscript,
-        title: "Subscript",
-        action: () =>
-          editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
-        isActive: () => editor.isActive("subscript"),
-      },
       {
         type: "horizontal-list",
         label: "Lists",
@@ -254,6 +238,28 @@ export const TextMenuBar = ({ editor }: { editor: Editor }) => {
           },
         ],
       },
+      // Lesser-used commands are kept inside the overflow items list
+      {
+        type: "overflow-list",
+        items: [
+          {
+            type: "item",
+            icon: MdSuperscript,
+            title: "Superscript",
+            action: () =>
+              editor.chain().focus().unsetSubscript().toggleSuperscript().run(),
+            isActive: () => editor.isActive("superscript"),
+          },
+          {
+            type: "item",
+            icon: MdSubscript,
+            title: "Subscript",
+            action: () =>
+              editor.chain().focus().unsetSuperscript().toggleSubscript().run(),
+            isActive: () => editor.isActive("subscript"),
+          },
+        ],
+      },
     ],
     [editor, onLinkModalOpen, onTableSettingsModalOpen],
   )

diff --git a/apps/studio/src/stories/Page/EditPage/EditContentPage.stories.tsx b/apps/studio/src/stories/Page/EditPage/EditContentPage.stories.tsx
@@ -99,3 +99,15 @@ export const WithBanner: Story = {
     ],
   },
 }
+
+export const AddTextBlock: Story = {
+  play: async (context) => {
+    const { canvasElement } = context
+    const canvas = within(canvasElement)
+    await AddBlock.play?.(context)
+
+    await userEvent.click(
+      canvas.getByRole("button", { name: /Add a block of text/i }),
+    )
+  },
+}