From 5463b7b58e3a06320be7df0d672039f98edce4e4 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sat, 20 Jan 2024 20:16:26 +0530
Subject: [PATCH] chore: fix super editor menus overflowing

---
 .../javascripts/Components/NoteView/NoteView.tsx |  2 +-
 .../Popover/GetPositionedPopoverStyles.ts        |  4 ++--
 .../javascripts/Components/Popover/Utils/Rect.ts |  2 +-
 .../Plugins/ToolbarPlugin/ToolbarPlugin.tsx      | 16 +++++++++-------
 .../Components/SuperEditor/SuperEditor.tsx       |  2 ++
 .../web/src/javascripts/Constants/ElementIDs.ts  |  1 +
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
index 776cef8e3..020dd410c 100644
--- a/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
+++ b/packages/web/src/javascripts/Components/NoteView/NoteView.tsx
@@ -989,7 +989,7 @@ class NoteView extends AbstractComponent<NoteViewProps, State> {
           )}
 
           {editorMode === 'super' && (
-            <div className={classNames('blocks-editor w-full flex-grow overflow-hidden overflow-y-auto')}>
+            <div className={classNames('blocks-editor w-full flex-grow overflow-hidden')}>
               <SuperEditor
                 key={this.note.uuid}
                 application={this.application}
diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
index 879233f4f..51c33b8eb 100644
--- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
+++ b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
@@ -3,7 +3,7 @@ import { isMobileScreen } from '@/Utils'
 import { CSSProperties } from 'react'
 import { PopoverAlignment, PopoverSide } from './Types'
 import { OppositeSide, checkCollisions, getNonCollidingAlignment } from './Utils/Collisions'
-import { getAppRect, getPopoverMaxHeight, getPositionedPopoverRect } from './Utils/Rect'
+import { getPopoverMaxHeight, getPositionedPopoverRect } from './Utils/Rect'
 
 const percentOf = (percent: number, value: number) => (percent / 100) * value
 
@@ -154,7 +154,7 @@ export const getPositionedPopoverStyles = ({
   )
 
   let maxHeight = getPopoverMaxHeight(
-    getAppRect(),
+    documentRect,
     anchorRect,
     disableFlip ? side : sideWithLessOverflows,
     finalAlignment,
diff --git a/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts b/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts
index cbb59e13e..aefd44703 100644
--- a/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts
+++ b/packages/web/src/javascripts/Components/Popover/Utils/Rect.ts
@@ -24,7 +24,7 @@ export const getPopoverMaxHeight = (
   if (buttonRect) {
     switch (side) {
       case 'top':
-        constraint = appRect.height - buttonRect.top
+        constraint = Math.abs(appRect.height - buttonRect.top)
         if (topSafeAreaInset > 0) {
           constraint += topSafeAreaInset
         }
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 da0ee9b56..6b97c2067 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
@@ -65,6 +65,7 @@ import { useStateRef } from '@/Hooks/useStateRef'
 import { getDOMRangeRect } from '../../Lexical/Utils/getDOMRangeRect'
 import { getPositionedPopoverStyles } from '@/Components/Popover/GetPositionedPopoverStyles'
 import usePreference from '@/Hooks/usePreference'
+import { ElementIds } from '@/Constants/ElementIDs'
 
 const TOGGLE_LINK_AND_EDIT_COMMAND = createCommand<string | null>('TOGGLE_LINK_AND_EDIT_COMMAND')
 
@@ -503,7 +504,7 @@ const ToolbarPlugin = () => {
 
   const [isFocusInEditor, setIsFocusInEditor] = useState(false)
   const [isFocusInToolbar, setIsFocusInToolbar] = useState(false)
-  const canShowToolbarOnMobile = isFocusInEditor || isFocusInToolbar
+  const canShowToolbarOnMobile = true
   const canShowAllItems = isMobile || isToolbarFixedToTop
 
   useEffect(() => {
@@ -583,7 +584,8 @@ const ToolbarPlugin = () => {
     toolbarStore,
   ])
 
-  const popoverDocumentElement = editor.getRootElement()?.parentElement ?? document.body
+  const popoverDocumentElement =
+    document.getElementById(ElementIds.SuperEditor) ?? editor.getRootElement()?.parentElement ?? document.body
 
   return (
     <>
@@ -760,7 +762,7 @@ const ToolbarPlugin = () => {
         disableMobileFullscreenTakeover
         disableFlip
         portal={false}
-        documentElement={isMobile ? popoverDocumentElement : undefined}
+        documentElement={popoverDocumentElement}
       >
         <div className="mb-1.5 mt-1 px-3 text-sm font-semibold uppercase text-text">Table of Contents</div>
         <LexicalTableOfContents>
@@ -816,7 +818,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
-        documentElement={isMobile ? popoverDocumentElement : undefined}
+        documentElement={popoverDocumentElement}
       >
         <Menu a11yLabel="Text formatting options" className="!px-0" onClick={() => setIsTextFormatMenuOpen(false)}>
           <ToolbarMenuItem
@@ -857,7 +859,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
-        documentElement={isMobile ? popoverDocumentElement : undefined}
+        documentElement={popoverDocumentElement}
       >
         <Menu a11yLabel="Text style" className="!px-0" onClick={() => setIsTextStyleMenuOpen(false)}>
           <ToolbarMenuItem
@@ -930,7 +932,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
-        documentElement={isMobile ? popoverDocumentElement : undefined}
+        documentElement={popoverDocumentElement}
       >
         <Menu a11yLabel="Alignment" className="!px-0" onClick={() => setIsAlignmentMenuOpen(false)}>
           <ToolbarMenuItem
@@ -971,7 +973,7 @@ const ToolbarPlugin = () => {
         disableFlip
         containerClassName="md:!min-w-60 md:!w-auto"
         portal={false}
-        documentElement={isMobile ? popoverDocumentElement : undefined}
+        documentElement={popoverDocumentElement}
       >
         <Menu a11yLabel="Insert" className="!px-0" onClick={() => setIsInsertMenuOpen(false)}>
           <ToolbarMenuItem
diff --git a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
index f38e6a856..2706ca50a 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/SuperEditor.tsx
@@ -39,6 +39,7 @@ import AutoFocusPlugin from './Plugins/AutoFocusPlugin'
 import usePreference from '@/Hooks/usePreference'
 import BlockPickerMenuPlugin from './Plugins/BlockPickerPlugin/BlockPickerPlugin'
 import { EditorEventSource } from '@/Types/EditorEventSource'
+import { ElementIds } from '@/Constants/ElementIDs'
 
 export const SuperNotePreviewCharLimit = 160
 
@@ -187,6 +188,7 @@ export const SuperEditor: FunctionComponent<Props> = ({
 
   return (
     <div
+      id={ElementIds.SuperEditor}
       className="font-editor relative flex h-full w-full flex-col"
       style={
         {
diff --git a/packages/web/src/javascripts/Constants/ElementIDs.ts b/packages/web/src/javascripts/Constants/ElementIDs.ts
index 34c3f4065..19ca5fcad 100644
--- a/packages/web/src/javascripts/Constants/ElementIDs.ts
+++ b/packages/web/src/javascripts/Constants/ElementIDs.ts
@@ -14,4 +14,5 @@ export const ElementIds = {
   ItemLinkAutocompleteInput: 'item-link-autocomplete-input',
   SearchBar: 'search-bar',
   ConflictResolutionButton: 'conflict-resolution-button',
+  SuperEditor: 'super-editor',
 } as const