From 3c5c6723ac4dc018d07ba8b79537262d3a009be3 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Thu, 14 Dec 2023 16:03:18 +0530
Subject: [PATCH] refactor: use ariakit for super note popovers

---
 .../BlockPickerPlugin/BlockPickerMenuItem.tsx |  4 +-
 .../BlockPickerPlugin/BlockPickerPlugin.tsx   | 86 +++++++++---------
 .../SuperEditor/Plugins/ClassNames.ts         |  6 +-
 .../ItemSelectionPlugin.tsx                   | 88 +++++++++----------
 4 files changed, 90 insertions(+), 94 deletions(-)

diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
index 51f002a3e..2840a134a 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerMenuItem.tsx
@@ -19,9 +19,7 @@ export function BlockPickerMenuItem({
     <li
       key={option.key}
       tabIndex={-1}
-      className={`border-bottom gap-3 border-[0.5px] border-border ${PopoverItemClassNames} ${
-        isSelected ? PopoverItemSelectedClassNames : ''
-      }`}
+      className={`gap-3 ${PopoverItemClassNames} ${isSelected ? PopoverItemSelectedClassNames : ''}`}
       ref={option.setRefElement}
       role="option"
       aria-selected={isSelected}
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
index 20807f9d2..04dc5c198 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/BlockPickerPlugin/BlockPickerPlugin.tsx
@@ -8,9 +8,7 @@ import { BlockPickerOption } from './BlockPickerOption'
 import { BlockPickerMenuItem } from './BlockPickerMenuItem'
 import { GetDynamicPasswordBlocks, GetPasswordBlockOption } from '../Blocks/Password'
 import { GetDynamicTableBlocks, GetTableBlockOption } from '../Blocks/Table'
-import Popover from '@/Components/Popover/Popover'
 import { GetDatetimeBlockOptions } from '../Blocks/DateTime'
-import { isMobileScreen } from '@/Utils'
 import { useApplication } from '@/Components/ApplicationProvider'
 import { GetRemoteImageBlockOption } from '../Blocks/RemoteImage'
 import { InsertRemoteImageDialog } from '../RemoteImagePlugin/RemoteImagePlugin'
@@ -29,6 +27,8 @@ import { GetQuoteBlockOption } from '../Blocks/Quote'
 import { GetDividerBlockOption } from '../Blocks/Divider'
 import { GetCollapsibleBlockOption } from '../Blocks/Collapsible'
 import { GetEmbedsBlockOptions } from '../Blocks/Embeds'
+import { Popover, PopoverProvider } from '@ariakit/react'
+import { PopoverClassNames } from '../ClassNames'
 
 export default function BlockPickerMenuPlugin(): JSX.Element {
   const [editor] = useLexicalComposerContext()
@@ -111,47 +111,47 @@ export default function BlockPickerMenuPlugin(): JSX.Element {
   return (
     <>
       {modal}
-      <LexicalTypeaheadMenuPlugin<BlockPickerOption>
-        onQueryChange={setQueryString}
-        onSelectOption={onSelectOption}
-        triggerFn={checkForTriggerMatch}
-        options={options}
-        menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
-          if (!anchorElementRef.current || !options.length) {
-            return null
-          }
-
-          return (
-            <Popover
-              title="Block picker"
-              align="start"
-              anchorElement={anchorElementRef.current}
-              open={true}
-              disableMobileFullscreenTakeover={true}
-              side={isMobileScreen() ? 'top' : 'bottom'}
-              maxHeight={(mh) => mh / 2}
-            >
-              <ul>
-                {options.map((option, i: number) => (
-                  <BlockPickerMenuItem
-                    index={i}
-                    isSelected={selectedIndex === i}
-                    onClick={() => {
-                      setHighlightedIndex(i)
-                      selectOptionAndCleanUp(option)
-                    }}
-                    onMouseEnter={() => {
-                      setHighlightedIndex(i)
-                    }}
-                    key={option.key}
-                    option={option}
-                  />
-                ))}
-              </ul>
-            </Popover>
-          )
-        }}
-      />
+      <PopoverProvider>
+        <LexicalTypeaheadMenuPlugin<BlockPickerOption>
+          onQueryChange={setQueryString}
+          onSelectOption={onSelectOption}
+          triggerFn={checkForTriggerMatch}
+          options={options}
+          menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+            if (!anchorElementRef.current || !options.length) {
+              return null
+            }
+            return (
+              <Popover
+                open
+                getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
+                autoFocus={false}
+                autoFocusOnShow={false}
+                className={PopoverClassNames}
+                fitViewport
+              >
+                <ul className="divide-y divide-border">
+                  {options.map((option, i: number) => (
+                    <BlockPickerMenuItem
+                      index={i}
+                      isSelected={selectedIndex === i}
+                      onClick={() => {
+                        setHighlightedIndex(i)
+                        selectOptionAndCleanUp(option)
+                      }}
+                      onMouseEnter={() => {
+                        setHighlightedIndex(i)
+                      }}
+                      key={option.key}
+                      option={option}
+                    />
+                  ))}
+                </ul>
+              </Popover>
+            )
+          }}
+        />
+      </PopoverProvider>
     </>
   )
 }
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
index fb1f58a49..60ed515b6 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ClassNames.ts
@@ -1,9 +1,7 @@
 import { classNames } from '@standardnotes/utils'
 
-export const PopoverClassNames = classNames(
-  'z-dropdown-menu w-full',
-  'cursor-auto flex-col overflow-y-auto rounded bg-default h-auto',
-)
+export const PopoverClassNames =
+  'max-h-[min(var(--popover-available-height,_50vh),_50vh)] w-[--popover-available-width] overflow-y-auto rounded border border-[--popover-border-color] bg-default shadow-main [backdrop-filter:var(--popover-backdrop-filter)] md:max-w-xs md:bg-[--popover-background-color]'
 
 export const PopoverItemClassNames = classNames(
   'flex w-full items-center text-base overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
index 6b8a9d015..377e17eef 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ItemSelectionPlugin/ItemSelectionPlugin.tsx
@@ -7,11 +7,11 @@ import { ItemOption } from './ItemOption'
 import { useApplication } from '@/Components/ApplicationProvider'
 import { ContentType, SNNote } from '@standardnotes/snjs'
 import { getLinkingSearchResults } from '@/Utils/Items/Search/getSearchResults'
-import Popover from '@/Components/Popover/Popover'
 import { INSERT_BUBBLE_COMMAND, INSERT_FILE_COMMAND } from '../Commands'
 import { useLinkingController } from '../../../../Controllers/LinkingControllerProvider'
-import { isMobileScreen } from '@/Utils'
 import { useTypeaheadAllowingSpacesAndPunctuation } from './useTypeaheadAllowingSpacesAndPunctuation'
+import { Popover, PopoverProvider } from '@ariakit/react'
+import { PopoverClassNames } from '../ClassNames'
 
 type Props = {
   currentNote: SNNote
@@ -83,47 +83,47 @@ export const ItemSelectionPlugin: FunctionComponent<Props> = ({ currentNote }) =
   }, [application, editor, currentNote, queryString, linkingController])
 
   return (
-    <LexicalTypeaheadMenuPlugin<ItemOption>
-      onQueryChange={setQueryString}
-      onSelectOption={onSelectOption}
-      triggerFn={checkForTriggerMatch}
-      options={options}
-      menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
-        if (!anchorElementRef.current || !options.length) {
-          return null
-        }
-
-        return (
-          <Popover
-            title="Select item"
-            align="start"
-            anchorElement={anchorElementRef}
-            open={true}
-            disableMobileFullscreenTakeover={true}
-            side={isMobileScreen() ? 'top' : 'bottom'}
-            maxHeight={(mh) => mh / 2}
-          >
-            <ul>
-              {options.map((option, i: number) => (
-                <ItemSelectionItemComponent
-                  searchQuery={queryString || ''}
-                  index={i}
-                  isSelected={selectedIndex === i}
-                  onClick={() => {
-                    setHighlightedIndex(i)
-                    selectOptionAndCleanUp(option)
-                  }}
-                  onMouseEnter={() => {
-                    setHighlightedIndex(i)
-                  }}
-                  key={option.key}
-                  option={option}
-                />
-              ))}
-            </ul>
-          </Popover>
-        )
-      }}
-    />
+    <PopoverProvider>
+      <LexicalTypeaheadMenuPlugin<ItemOption>
+        onQueryChange={setQueryString}
+        onSelectOption={onSelectOption}
+        triggerFn={checkForTriggerMatch}
+        options={options}
+        menuRenderFn={(anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
+          if (!anchorElementRef.current || !options.length) {
+            return null
+          }
+          return (
+            <Popover
+              open
+              getAnchorRect={() => anchorElementRef.current!.getBoundingClientRect()}
+              autoFocus={false}
+              autoFocusOnShow={false}
+              className={PopoverClassNames}
+              fitViewport
+            >
+              <ul className="divide-y divide-border">
+                {options.map((option, i: number) => (
+                  <ItemSelectionItemComponent
+                    searchQuery={queryString || ''}
+                    index={i}
+                    isSelected={selectedIndex === i}
+                    onClick={() => {
+                      setHighlightedIndex(i)
+                      selectOptionAndCleanUp(option)
+                    }}
+                    onMouseEnter={() => {
+                      setHighlightedIndex(i)
+                    }}
+                    key={option.key}
+                    option={option}
+                  />
+                ))}
+              </ul>
+            </Popover>
+          )
+        }}
+      />
+    </PopoverProvider>
   )
 }