From f6bfe9e8689b4765cb293ce72c3326f52ce23051 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 25 Oct 2023 11:14:34 +0530
Subject: [PATCH] chore: consolidate super toolbar items and remove need for
 scroll [skip e2e]

---
 packages/icons/src/Icons/ic-list-check.svg    |   3 +
 packages/icons/src/Icons/index.ts             |   2 +
 .../Components/Icon/IconNameToSvgMapping.tsx  |   1 +
 .../src/javascripts/Components/Menu/Menu.tsx  |  11 +-
 .../javascripts/Components/Menu/MenuItem.tsx  |   4 +-
 .../SuperEditor/Plugins/Blocks/List.tsx       |   2 +-
 .../Plugins/CodeOptionsPlugin/CodeOptions.tsx |   2 +-
 .../Plugins/SearchPlugin/SearchDialog.tsx     |   2 +-
 .../Plugins/ToolbarPlugin/ToolbarPlugin.tsx   | 468 ++++++++++++------
 9 files changed, 329 insertions(+), 166 deletions(-)
 create mode 100644 packages/icons/src/Icons/ic-list-check.svg

diff --git a/packages/icons/src/Icons/ic-list-check.svg b/packages/icons/src/Icons/ic-list-check.svg
new file mode 100644
index 000000000..019e1d35b
--- /dev/null
+++ b/packages/icons/src/Icons/ic-list-check.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+	<path fill="currentColor" fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147l1.146-1.147a.5.5 0 0 1 .708 0z" />
+</svg>
diff --git a/packages/icons/src/Icons/index.ts b/packages/icons/src/Icons/index.ts
index f8c78a9d5..2820c656a 100644
--- a/packages/icons/src/Icons/index.ts
+++ b/packages/icons/src/Icons/index.ts
@@ -35,6 +35,7 @@ import CheckBoldIcon from './ic-check-bold.svg'
 import CheckCircleFilledIcon from './ic-check-circle-filled.svg'
 import CheckCircleIcon from './ic-check-circle.svg'
 import CheckIcon from './ic-check.svg'
+import CheckListIcon from './ic-list-check.svg'
 import ChevronDownIcon from './ic-chevron-down.svg'
 import ChevronLeftIcon from './ic-chevron-left.svg'
 import ChevronRightIcon from './ic-chevron-right.svg'
@@ -254,6 +255,7 @@ export {
   CheckCircleFilledIcon,
   CheckCircleIcon,
   CheckIcon,
+  CheckListIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
diff --git a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
index 48d602d27..b055e4aae 100644
--- a/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
+++ b/packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx
@@ -49,6 +49,7 @@ export const IconNameToSvgMapping = {
   'link-off': icons.LinkOffIcon,
   'list-bulleted': icons.ListBulleted,
   'list-numbered': icons.ListNumbered,
+  'list-check': icons.CheckListIcon,
   'lock-filled': icons.LockFilledIcon,
   'menu-arrow-down-alt': icons.MenuArrowDownAlt,
   'menu-arrow-down': icons.MenuArrowDownIcon,
diff --git a/packages/web/src/javascripts/Components/Menu/Menu.tsx b/packages/web/src/javascripts/Components/Menu/Menu.tsx
index 86a1e2c0d..4fe1f1777 100644
--- a/packages/web/src/javascripts/Components/Menu/Menu.tsx
+++ b/packages/web/src/javascripts/Components/Menu/Menu.tsx
@@ -1,8 +1,7 @@
 import {
-  CSSProperties,
+  ComponentPropsWithoutRef,
   forwardRef,
   KeyboardEventHandler,
-  ReactNode,
   useCallback,
   useImperativeHandle,
   useRef,
@@ -12,15 +11,11 @@ import { useListKeyboardNavigation } from '@/Hooks/useListKeyboardNavigation'
 import { mergeRefs } from '@/Hooks/mergeRefs'
 import { MutuallyExclusiveMediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 
-type MenuProps = {
-  className?: string
-  style?: CSSProperties | undefined
+interface MenuProps extends ComponentPropsWithoutRef<'menu'> {
   a11yLabel: string
-  children: ReactNode
   closeMenu?: () => void
   isOpen: boolean
   initialFocus?: number
-  onKeyDown?: KeyboardEventHandler<HTMLMenuElement>
   shouldAutoFocus?: boolean
 }
 
@@ -35,6 +30,7 @@ const Menu = forwardRef(
       initialFocus,
       onKeyDown,
       shouldAutoFocus = true,
+      ...props
     }: MenuProps,
     forwardedRef,
   ) => {
@@ -73,6 +69,7 @@ const Menu = forwardRef(
         ref={mergeRefs([menuElementRef, forwardedRef])}
         style={style}
         aria-label={a11yLabel}
+        {...props}
       >
         {children}
       </menu>
diff --git a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
index a38fe471d..dd1056934 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -7,7 +7,7 @@ import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
 import MenuListItem from './MenuListItem'
 
-type MenuItemProps = {
+export interface MenuItemProps extends ComponentPropsWithoutRef<'button'> {
   children: ReactNode
   onClick?: MouseEventHandler<HTMLButtonElement>
   onBlur?: (event: { relatedTarget: EventTarget | null }) => void
@@ -17,7 +17,7 @@ type MenuItemProps = {
   tabIndex?: number
   disabled?: boolean
   shortcut?: PlatformedKeyboardShortcut
-} & ComponentPropsWithoutRef<'button'>
+}
 
 const MenuItem = forwardRef(
   (
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/List.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/List.tsx
index 86f6c347e..391d08c1a 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/List.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/List.tsx
@@ -12,7 +12,7 @@ export const BulletedListBlock = {
 
 export const ChecklistBlock = {
   name: 'Check List',
-  iconName: 'check' as LexicalIconName,
+  iconName: 'list-check' as LexicalIconName,
   keywords: ['check list', 'todo list'],
   onSelect: (editor: LexicalEditor) => editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined),
 }
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx
index b2c79eb77..d36b19bab 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/CodeOptionsPlugin/CodeOptions.tsx
@@ -93,7 +93,7 @@ const CodeOptionsPlugin = () => {
 
   return (
     <>
-      <div className="absolute right-6 top-2 rounded border border-border bg-default p-2">
+      <div className="absolute right-6 top-13 rounded border border-border bg-default p-2">
         <Dropdown
           label="Change code block language"
           items={CODE_LANGUAGE_OPTIONS.map(([value, label]) => ({
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx
index 43ad24084..d1bc86c1b 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/SearchPlugin/SearchDialog.tsx
@@ -53,7 +53,7 @@ export const SearchDialog = ({ open, closeDialog }: { open: boolean; closeDialog
 
   return (
     <div
-      className="absolute right-6 top-4 z-10 flex select-none rounded border border-border bg-default"
+      className="absolute right-6 top-13 z-10 flex select-none rounded border border-border bg-default"
       ref={setElement}
     >
       <button
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
index 2a74a98ed..a03f69e40 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -25,7 +25,16 @@ import { mergeRegister, $findMatchingParent, $getNearestNodeOfType } from '@lexi
 import { $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { $isListNode, ListNode } from '@lexical/list'
 import { $isHeadingNode } from '@lexical/rich-text'
-import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  ComponentPropsWithoutRef,
+  ForwardedRef,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { CenterAlignBlock, JustifyAlignBlock, LeftAlignBlock, RightAlignBlock } from '../Blocks/Alignment'
 import { BulletedListBlock, ChecklistBlock, NumberedListBlock } from '../Blocks/List'
 import { CodeBlock } from '../Blocks/Code'
@@ -48,9 +57,10 @@ import { $isLinkTextNode } from './ToolbarLinkTextEditor'
 import Popover from '@/Components/Popover/Popover'
 import LexicalTableOfContents from '@lexical/react/LexicalTableOfContents'
 import Menu from '@/Components/Menu/Menu'
-import MenuItem from '@/Components/Menu/MenuItem'
+import MenuItem, { MenuItemProps } from '@/Components/Menu/MenuItem'
 import { remToPx } from '@/Utils'
 import FloatingLinkEditor from './FloatingLinkEditor'
+import MenuItemSeparator from '@/Components/Menu/MenuItemSeparator'
 
 const TOGGLE_LINK_AND_EDIT_COMMAND = createCommand<string | null>('TOGGLE_LINK_AND_EDIT_COMMAND')
 
@@ -69,16 +79,32 @@ const blockTypeToBlockName = {
   quote: 'Quote',
 }
 
+const blockTypeToIconName = {
+  bullet: 'list-bulleted',
+  check: 'list-check',
+  code: 'code',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  number: 'list-numbered',
+  paragraph: 'paragraph',
+  quote: 'quote',
+}
+
 interface ToolbarButtonProps extends ComponentPropsWithoutRef<'button'> {
   name: string
   active?: boolean
-  iconName: string
+  iconName?: string
+  children?: ReactNode
   onSelect: () => void
 }
 
 const ToolbarButton = forwardRef(
   (
-    { name, active, iconName, onSelect, disabled, ...props }: ToolbarButtonProps,
+    { name, active, iconName, children, onSelect, disabled, ...props }: ToolbarButtonProps,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
     const [editor] = useLexicalComposerContext()
@@ -105,11 +131,15 @@ const ToolbarButton = forwardRef(
               active && 'bg-info text-info-contrast',
             )}
           >
-            <Icon
-              type={iconName}
-              size="custom"
-              className="h-4 w-4 !text-current md:h-3.5 md:w-3.5 [&>path]:!text-current"
-            />
+            {children ? (
+              children
+            ) : iconName ? (
+              <Icon
+                type={iconName}
+                size="custom"
+                className="h-4 w-4 !text-current md:h-3.5 md:w-3.5 [&>path]:!text-current"
+              />
+            ) : null}
           </div>
         </ToolbarItem>
       </StyledTooltip>
@@ -117,6 +147,24 @@ const ToolbarButton = forwardRef(
   },
 )
 
+interface ToolbarMenuItemProps extends Omit<MenuItemProps, 'children'> {
+  name: string
+  iconName: string
+  active?: boolean
+}
+
+const ToolbarMenuItem = ({ name, iconName, active, ...props }: ToolbarMenuItemProps) => {
+  return (
+    <MenuItem
+      className={classNames('overflow-hidden md:py-2', active ? '!bg-info text-info-contrast' : 'hover:bg-contrast')}
+      {...props}
+    >
+      <Icon type={iconName} className="-mt-px mr-2.5 flex-shrink-0" />
+      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{name}</span>
+    </MenuItem>
+  )
+}
+
 const ToolbarPlugin = () => {
   const application = useApplication()
   const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
@@ -149,6 +197,18 @@ const ToolbarPlugin = () => {
   const [isTOCOpen, setIsTOCOpen] = useState(false)
   const tocAnchorRef = useRef<HTMLButtonElement>(null)
 
+  const [isTextFormatMenuOpen, setIsTextFormatMenuOpen] = useState(false)
+  const textFormatAnchorRef = useRef<HTMLButtonElement>(null)
+
+  const [isTextStyleMenuOpen, setIsTextStyleMenuOpen] = useState(false)
+  const textStyleAnchorRef = useRef<HTMLButtonElement>(null)
+
+  const [isAlignmentMenuOpen, setIsAlignmentMenuOpen] = useState(false)
+  const alignmentAnchorRef = useRef<HTMLButtonElement>(null)
+
+  const [isInsertMenuOpen, setIsInsertMenuOpen] = useState(false)
+  const insertAnchorRef = useRef<HTMLButtonElement>(null)
+
   const [canUndo, setCanUndo] = useState(false)
   const [canRedo, setCanRedo] = useState(false)
 
@@ -400,7 +460,7 @@ const ToolbarPlugin = () => {
       <div
         className={classNames(
           'bg-contrast',
-          'md:w-full md:border-b md:border-border md:px-2 md:py-1 md:translucent-ui:border-[--popover-border-color] md:translucent-ui:bg-[--popover-background-color] md:translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
+          'md:w-full md:border-b md:border-border md:px-1 md:py-1 md:translucent-ui:border-[--popover-border-color] md:translucent-ui:bg-[--popover-background-color] md:translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)]',
           !canShowToolbar || !isEditable ? 'hidden' : '',
         )}
         id="super-mobile-toolbar"
@@ -420,7 +480,7 @@ const ToolbarPlugin = () => {
         )}
         <div className="flex w-full flex-shrink-0 border-t border-border md:border-0">
           <Toolbar
-            className="super-toolbar flex items-center gap-1 overflow-x-auto px-1"
+            className="super-toolbar flex items-center gap-1 overflow-x-auto px-1 md:flex-wrap"
             ref={toolbarRef}
             store={toolbarStore}
           >
@@ -431,6 +491,11 @@ const ToolbarPlugin = () => {
               onSelect={() => setIsTOCOpen(!isTOCOpen)}
               ref={tocAnchorRef}
             />
+            <ToolbarButton
+              name="Search"
+              iconName="search"
+              onSelect={() => application.keyboardService.triggerCommand(SUPER_TOGGLE_SEARCH)}
+            />
             <ToolbarButton
               name="Undo"
               iconName="undo"
@@ -461,12 +526,6 @@ const ToolbarPlugin = () => {
               active={isUnderline}
               onSelect={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
             />
-            <ToolbarButton
-              name="Highlight"
-              iconName="draw"
-              active={isHighlight}
-              onSelect={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'highlight')}
-            />
             <ToolbarButton
               name="Link"
               iconName="link"
@@ -475,24 +534,6 @@ const ToolbarPlugin = () => {
                 editor.dispatchCommand(TOGGLE_LINK_AND_EDIT_COMMAND, '')
               }}
             />
-            <ToolbarButton
-              name="Strikethrough"
-              iconName="strikethrough"
-              active={isStrikethrough}
-              onSelect={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
-            />
-            <ToolbarButton
-              name="Subscript"
-              iconName="subscript"
-              active={isSubscript}
-              onSelect={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')}
-            />
-            <ToolbarButton
-              name="Superscript"
-              iconName="superscript"
-              active={isSuperscript}
-              onSelect={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')}
-            />
             <ToolbarButton
               name="Inline Code"
               iconName="code-tags"
@@ -500,127 +541,45 @@ const ToolbarPlugin = () => {
               onSelect={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'code')}
             />
             <ToolbarButton
-              name="Search"
-              iconName="search"
-              onSelect={() => application.keyboardService.triggerCommand(SUPER_TOGGLE_SEARCH)}
-            />
+              name="Formatting options"
+              onSelect={() => {
+                setIsTextFormatMenuOpen(!isTextFormatMenuOpen)
+              }}
+              ref={textFormatAnchorRef}
+            >
+              <Icon type="text" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
+              <Icon type="chevron-down" size="custom" className="ml-1 h-4 w-4 md:h-3.5 md:w-3.5" />
+            </ToolbarButton>
             <ToolbarButton
-              name={ParagraphBlock.name}
-              iconName={ParagraphBlock.iconName}
-              active={blockType === 'paragraph'}
-              onSelect={() => ParagraphBlock.onSelect(editor)}
-            />
+              name="Text style"
+              onSelect={() => {
+                setIsTextStyleMenuOpen(!isTextStyleMenuOpen)
+              }}
+              ref={textStyleAnchorRef}
+            >
+              <Icon type={blockTypeToIconName[blockType]} size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
+              <Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" />
+            </ToolbarButton>
             <ToolbarButton
-              name={H1Block.name}
-              iconName={H1Block.iconName}
-              active={blockType === 'h1'}
-              onSelect={() => H1Block.onSelect(editor)}
-            />
+              name="Alignment"
+              onSelect={() => {
+                setIsAlignmentMenuOpen(!isAlignmentMenuOpen)
+              }}
+              ref={alignmentAnchorRef}
+            >
+              <Icon type="align-left" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
+              <Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" />
+            </ToolbarButton>
             <ToolbarButton
-              name={H2Block.name}
-              iconName={H2Block.iconName}
-              active={blockType === 'h2'}
-              onSelect={() => H2Block.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={H3Block.name}
-              iconName={H3Block.iconName}
-              active={blockType === 'h3'}
-              onSelect={() => H3Block.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={IndentBlock.name}
-              iconName={IndentBlock.iconName}
-              onSelect={() => IndentBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={OutdentBlock.name}
-              iconName={OutdentBlock.iconName}
-              onSelect={() => OutdentBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={LeftAlignBlock.name}
-              iconName={LeftAlignBlock.iconName}
-              active={elementFormat === 'left'}
-              onSelect={() => LeftAlignBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={CenterAlignBlock.name}
-              iconName={CenterAlignBlock.iconName}
-              active={elementFormat === 'center'}
-              onSelect={() => CenterAlignBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={RightAlignBlock.name}
-              iconName={RightAlignBlock.iconName}
-              active={elementFormat === 'right'}
-              onSelect={() => RightAlignBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={JustifyAlignBlock.name}
-              iconName={JustifyAlignBlock.iconName}
-              active={elementFormat === 'justify'}
-              onSelect={() => JustifyAlignBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={BulletedListBlock.name}
-              iconName={BulletedListBlock.iconName}
-              active={blockType === 'bullet'}
-              onSelect={() => BulletedListBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={NumberedListBlock.name}
-              iconName={NumberedListBlock.iconName}
-              active={blockType === 'number'}
-              onSelect={() => NumberedListBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={ChecklistBlock.name}
-              iconName={ChecklistBlock.iconName}
-              active={blockType === 'check'}
-              onSelect={() => ChecklistBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name="Table"
-              iconName="table"
-              onSelect={() =>
-                showModal('Insert Table', (onClose) => <InsertTableDialog activeEditor={editor} onClose={onClose} />)
-              }
-            />
-            <ToolbarButton
-              name="Image from URL"
-              iconName="image"
-              onSelect={() =>
-                showModal('Insert image from URL', (onClose) => <InsertRemoteImageDialog onClose={onClose} />)
-              }
-            />
-            <ToolbarButton
-              name={CodeBlock.name}
-              iconName={CodeBlock.iconName}
-              active={blockType === 'code'}
-              onSelect={() => CodeBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={QuoteBlock.name}
-              iconName={QuoteBlock.iconName}
-              active={blockType === 'quote'}
-              onSelect={() => QuoteBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={DividerBlock.name}
-              iconName={DividerBlock.iconName}
-              onSelect={() => DividerBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={CollapsibleBlock.name}
-              iconName={CollapsibleBlock.iconName}
-              onSelect={() => CollapsibleBlock.onSelect(editor)}
-            />
-            <ToolbarButton
-              name={PasswordBlock.name}
-              iconName={PasswordBlock.iconName}
-              onSelect={() => PasswordBlock.onSelect(editor)}
-            />
+              name="Insert"
+              onSelect={() => {
+                setIsInsertMenuOpen(!isInsertMenuOpen)
+              }}
+              ref={insertAnchorRef}
+            >
+              <Icon type="add" size="custom" className="h-4 w-4 md:h-3.5 md:w-3.5" />
+              <Icon type="chevron-down" size="custom" className="ml-2 h-4 w-4 md:h-3.5 md:w-3.5" />
+            </ToolbarButton>
           </Toolbar>
           {isMobile && (
             <button
@@ -638,7 +597,7 @@ const ToolbarPlugin = () => {
         anchorElement={tocAnchorRef}
         open={isTOCOpen}
         togglePopover={() => setIsTOCOpen(!isTOCOpen)}
-        side="bottom"
+        side={isMobile ? 'top' : 'bottom'}
         align="start"
         className="py-1"
         disableMobileFullscreenTakeover
@@ -686,6 +645,207 @@ const ToolbarPlugin = () => {
           }}
         </LexicalTableOfContents>
       </Popover>
+      <Popover
+        title="Text formatting options"
+        anchorElement={textFormatAnchorRef}
+        open={isTextFormatMenuOpen}
+        togglePopover={() => setIsTextFormatMenuOpen(!isTextFormatMenuOpen)}
+        side={isMobile ? 'top' : 'bottom'}
+        align="start"
+        className="py-1"
+        disableMobileFullscreenTakeover
+        disableFlip
+        containerClassName="md:!min-w-60 md:!w-auto"
+      >
+        <Menu
+          a11yLabel="Text formatting options"
+          isOpen
+          className="!px-0"
+          onClick={() => setIsTextFormatMenuOpen(false)}
+        >
+          <ToolbarMenuItem
+            name="Highlight"
+            iconName="draw"
+            active={isHighlight}
+            onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'highlight')}
+          />
+          <ToolbarMenuItem
+            name="Strikethrough"
+            iconName="strikethrough"
+            active={isStrikethrough}
+            onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
+          />
+          <ToolbarMenuItem
+            name="Subscript"
+            iconName="subscript"
+            active={isSubscript}
+            onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'subscript')}
+          />
+          <ToolbarMenuItem
+            name="Superscript"
+            iconName="superscript"
+            active={isSuperscript}
+            onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'superscript')}
+          />
+        </Menu>
+      </Popover>
+      <Popover
+        title="Text style"
+        anchorElement={textStyleAnchorRef}
+        open={isTextStyleMenuOpen}
+        togglePopover={() => setIsTextStyleMenuOpen(!isTextStyleMenuOpen)}
+        side={isMobile ? 'top' : 'bottom'}
+        align="start"
+        className="py-1"
+        disableMobileFullscreenTakeover
+        disableFlip
+        containerClassName="md:!min-w-60 md:!w-auto"
+      >
+        <Menu a11yLabel="Text style" isOpen className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
+          <ToolbarMenuItem
+            name="Normal"
+            iconName="paragraph"
+            active={blockType === 'paragraph'}
+            onClick={() => ParagraphBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Heading 1"
+            iconName="h1"
+            active={blockType === 'h1'}
+            onClick={() => H1Block.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Heading 2"
+            iconName="h2"
+            active={blockType === 'h2'}
+            onClick={() => H2Block.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Heading 3"
+            iconName="h3"
+            active={blockType === 'h3'}
+            onClick={() => H3Block.onSelect(editor)}
+          />
+          <MenuItemSeparator />
+          <ToolbarMenuItem
+            name="Bulleted List"
+            iconName="list-bulleted"
+            active={blockType === 'bullet'}
+            onClick={() => BulletedListBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Numbered List"
+            iconName="list-numbered"
+            active={blockType === 'number'}
+            onClick={() => NumberedListBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Check List"
+            iconName="list-check"
+            active={blockType === 'check'}
+            onClick={() => ChecklistBlock.onSelect(editor)}
+          />
+          <MenuItemSeparator />
+          <ToolbarMenuItem
+            name="Quote"
+            iconName="quote"
+            active={blockType === 'quote'}
+            onClick={() => QuoteBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Code Block"
+            iconName="code"
+            active={blockType === 'code'}
+            onClick={() => CodeBlock.onSelect(editor)}
+          />
+        </Menu>
+      </Popover>
+      <Popover
+        title="Alignment"
+        anchorElement={alignmentAnchorRef}
+        open={isAlignmentMenuOpen}
+        togglePopover={() => setIsAlignmentMenuOpen(!isAlignmentMenuOpen)}
+        side={isMobile ? 'top' : 'bottom'}
+        align="start"
+        className="py-1"
+        disableMobileFullscreenTakeover
+        disableFlip
+        containerClassName="md:!min-w-60 md:!w-auto"
+      >
+        <Menu a11yLabel="Alignment" isOpen className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
+          <ToolbarMenuItem
+            name="Left align"
+            iconName="align-left"
+            active={elementFormat === 'left'}
+            onClick={() => LeftAlignBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Center align"
+            iconName="align-center"
+            active={elementFormat === 'center'}
+            onClick={() => CenterAlignBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Right align"
+            iconName="align-right"
+            active={elementFormat === 'right'}
+            onClick={() => RightAlignBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name="Justify"
+            iconName="align-justify"
+            active={elementFormat === 'justify'}
+            onClick={() => JustifyAlignBlock.onSelect(editor)}
+          />
+          <MenuItemSeparator />
+          <ToolbarMenuItem name="Indent" iconName="indent" onClick={() => IndentBlock.onSelect(editor)} />
+          <ToolbarMenuItem name="Outdent" iconName="outdent" onClick={() => OutdentBlock.onSelect(editor)} />
+        </Menu>
+      </Popover>
+      <Popover
+        title="Insert"
+        anchorElement={insertAnchorRef}
+        open={isInsertMenuOpen}
+        togglePopover={() => setIsInsertMenuOpen(!isInsertMenuOpen)}
+        side={isMobile ? 'top' : 'bottom'}
+        align="start"
+        className="py-1"
+        disableMobileFullscreenTakeover
+        disableFlip
+        containerClassName="md:!min-w-60 md:!w-auto"
+      >
+        <Menu a11yLabel="Insert" isOpen className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
+          <ToolbarMenuItem
+            name="Table"
+            iconName="table"
+            onClick={() =>
+              showModal('Insert Table', (onClose) => <InsertTableDialog activeEditor={editor} onClose={onClose} />)
+            }
+          />
+          <ToolbarMenuItem
+            name="Image from URL"
+            iconName="image"
+            onClick={() =>
+              showModal('Insert image from URL', (onClose) => <InsertRemoteImageDialog onClose={onClose} />)
+            }
+          />
+          <ToolbarMenuItem
+            name={DividerBlock.name}
+            iconName={DividerBlock.iconName}
+            onClick={() => DividerBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name={CollapsibleBlock.name}
+            iconName={CollapsibleBlock.iconName}
+            onClick={() => CollapsibleBlock.onSelect(editor)}
+          />
+          <ToolbarMenuItem
+            name={PasswordBlock.name}
+            iconName={PasswordBlock.iconName}
+            onClick={() => PasswordBlock.onSelect(editor)}
+          />
+        </Menu>
+      </Popover>
     </>
   )
 }