rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: update super floating toolbar positioning [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-08-12 00:59:25 +05:30
parent 796e78f642
commit 2194bdaf75
4 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/web/src/javascripts/Components/Popover/GetPositionedPopoverStyles.ts
View File

@@ -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,

4
packages/web/src/javascripts/Components/Popover/Utils/Collisions.ts
View File

@@ -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,

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

@@ -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

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

@@ -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)