chore: fix link editor positoning on desktop/web [skip e2e]

This commit is contained in:
Aman Harwara
2023-10-24 20:04:33 +05:30
parent ccc9d705a5
commit 80d9b0c31c

View File

@@ -50,6 +50,7 @@ const FloatingLinkEditor = ({
}, [linkText]) }, [linkText])
const linkEditorRef = useRef<HTMLDivElement>(null) const linkEditorRef = useRef<HTMLDivElement>(null)
const rangeRect = useRef<DOMRect>()
const updateLinkEditorPosition = useCallback(() => { const updateLinkEditorPosition = useCallback(() => {
if (isMobile) { if (isMobile) {
@@ -66,15 +67,17 @@ const FloatingLinkEditor = ({
const nativeSelection = window.getSelection() const nativeSelection = window.getSelection()
const rootElement = editor.getRootElement() const rootElement = editor.getRootElement()
if (nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode)) { if (nativeSelection !== null && rootElement !== null) {
const rangeRect = getDOMRangeRect(nativeSelection, rootElement) if (rootElement.contains(nativeSelection.anchorNode)) {
rangeRect.current = getDOMRangeRect(nativeSelection, rootElement)
}
const linkEditorRect = linkEditorElement.getBoundingClientRect() const linkEditorRect = linkEditorElement.getBoundingClientRect()
const rootElementRect = rootElement.getBoundingClientRect() const rootElementRect = rootElement.getBoundingClientRect()
const calculatedStyles = getPositionedPopoverStyles({ const calculatedStyles = getPositionedPopoverStyles({
align: 'start', align: 'center',
side: 'top', side: 'top',
anchorRect: rangeRect, anchorRect: rangeRect.current,
popoverRect: linkEditorRect, popoverRect: linkEditorRect,
documentRect: rootElementRect, documentRect: rootElementRect,
offset: 12, offset: 12,
@@ -133,6 +136,10 @@ const FloatingLinkEditor = ({
setEditMode(false) setEditMode(false)
} }
useEffect(() => {
setTimeout(updateLinkEditorPosition)
}, [isEditMode, updateLinkEditorPosition])
return ( return (
<Portal> <Portal>
<div <div