From 2194bdaf75c68284b3142d426a43ef634058197a Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Sat, 12 Aug 2023 00:59:25 +0530 Subject: [PATCH] chore: update super floating toolbar positioning [skip e2e] --- .../Popover/GetPositionedPopoverStyles.ts | 7 ++----- .../Components/Popover/Utils/Collisions.ts | 4 ++-- .../Lexical/Utils/getDOMRangeRect.ts | 19 +++++++++++-------- .../FloatingTextFormatToolbarPlugin/index.tsx | 2 -- 4 files changed, 15 insertions(+), 17 deletions(-) diff --git a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts b/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts index bce68fe13..7f66278c9 100644 --- a/packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts +++ b/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, diff --git a/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts b/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts index 73553237a..cc7ebfbcd 100644 --- a/packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts +++ b/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 = { 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, diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/getDOMRangeRect.ts b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/getDOMRangeRect.ts index 422437cb9..17ef46964 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/getDOMRangeRect.ts +++ b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Utils/getDOMRangeRect.ts @@ -1,10 +1,12 @@ -/** - * Copyright (c) Meta Platforms, Inc. and affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - */ +function mergeRects(rects: DOMRect[]): DOMRect { + const left = Math.min(...rects.map((rect) => rect.left)) + const top = Math.min(...rects.map((rect) => rect.top)) + const right = Math.max(...rects.map((rect) => rect.right)) + 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 diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx index 2439b64c5..616723b04 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingTextFormatToolbarPlugin/index.tsx +++ b/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)