chore: update super floating toolbar positioning [skip e2e]

packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts

@@ -2,7 +2,7 @@ import { MediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import { isMobileScreen } from '@/Utils'
 import { CSSProperties } from 'react'
 import { PopoverAlignment, PopoverSide } from './Types'
-import { OppositeSide, checkCollisions, getNonCollidingAlignment, getOverflows } from './Utils/Collisions'
+import { OppositeSide, checkCollisions, getNonCollidingAlignment } from './Utils/Collisions'
 import { getAppRect, getPopoverMaxHeight, getPositionedPopoverRect } from './Utils/Rect'
 
 const percentOf = (percent: number, value: number) => (percent / 100) * value
@@ -122,13 +122,10 @@ export const getPositionedPopoverStyles = ({
 
   const rectForPreferredSide = getPositionedPopoverRect(popoverRect, anchorRect, side, align)
   const preferredSideRectCollisions = checkCollisions(rectForPreferredSide, documentRect)
-  const preferredSideOverflows = getOverflows(rectForPreferredSide, documentRect)
 
   const oppositeSide = OppositeSide[side]
-  const rectForOppositeSide = getPositionedPopoverRect(popoverRect, anchorRect, oppositeSide, align)
-  const oppositeSideOverflows = getOverflows(rectForOppositeSide, documentRect)
 
-  const sideWithLessOverflows = preferredSideOverflows[side] < oppositeSideOverflows[oppositeSide] ? side : oppositeSide
+  const sideWithLessOverflows = preferredSideRectCollisions[side] ? oppositeSide : side
   const finalAlignment = getNonCollidingAlignment({
     finalSide: sideWithLessOverflows,
     preferredAlignment: align,

packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts

@@ -1,5 +1,5 @@
 import { PopoverSide, PopoverAlignment, RectCollisions } from '../Types'
-import { getAppRect, getPositionedPopoverRect } from './Rect'
+import { getPositionedPopoverRect } from './Rect'
 
 export const OppositeSide: Record<PopoverSide, PopoverSide> = {
   top: 'bottom',
@@ -20,7 +20,7 @@ export const getOverflows = (popoverRect: DOMRect, documentRect: DOMRect): Recor
 }
 
 export const checkCollisions = (popoverRect: DOMRect, containerRect: DOMRect): RectCollisions => {
-  const appRect = getAppRect(containerRect)
+  const appRect = containerRect
 
   return {
     top: popoverRect.top < appRect.top,

packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/getDOMRangeRect.ts

@@ -1,10 +1,12 @@
-/**
+function mergeRects(rects: DOMRect[]): DOMRect {
- * Copyright (c) Meta Platforms, Inc. and affiliates.
+  const left = Math.min(...rects.map((rect) => rect.left))
- *
+  const top = Math.min(...rects.map((rect) => rect.top))
- * This source code is licensed under the MIT license found in the
+  const right = Math.max(...rects.map((rect) => rect.right))
- * LICENSE file in the root directory of this source tree.
+  const bottom = Math.max(...rects.map((rect) => rect.bottom))
- *
+
- */
+  return new DOMRect(left, top, right - left, bottom - top)
+}
+
 export function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLElement): DOMRect {
   const domRange = nativeSelection.getRangeAt(0)
 
@@ -17,7 +19,8 @@ export function getDOMRangeRect(nativeSelection: Selection, rootElement: HTMLEle
     }
     rect = inner.getBoundingClientRect()
   } else {
-    rect = domRange.getBoundingClientRect()
+    const clientRects = domRange.getClientRects()
+    rect = mergeRects(Array.from(clientRects))
   }
 
   return rect

packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx

@@ -57,7 +57,6 @@ import { getDOMRangeRect } from '../../Lexical/Utils/getDOMRangeRect'
 import { getPositionedPopoverStyles } from '@/Components/Popover/GetPositionedPopoverStyles'
 import { getAdjustedStylesForNonPortalPopover } from '@/Components/Popover/Utils/getAdjustedStylesForNonPortal'
 import LinkEditor from '../FloatingLinkEditorPlugin/LinkEditor'
-import { movePopoverToFitInsideRect } from '@/Components/Popover/Utils/movePopoverToFitInsideRect'
 import LinkTextEditor, { $isLinkTextNode } from '../FloatingLinkEditorPlugin/LinkTextEditor'
 import { URL_REGEX } from '@/Constants/Constants'
 
@@ -237,7 +236,6 @@ function TextFormatFloatingToolbar({
         const adjustedStyles = getAdjustedStylesForNonPortalPopover(toolbarElement, calculatedStyles, rootElement)
         toolbarElement.style.setProperty('--translate-x', adjustedStyles['--translate-x'])
         toolbarElement.style.setProperty('--translate-y', adjustedStyles['--translate-y'])
-        movePopoverToFitInsideRect(toolbarElement, rootElementRect)
       }
     } else if (!activeElement || activeElement.id !== 'link-input') {
       setLastSelection(null)