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

chore: fix issue with link editor position on iOS

Browse Source
This commit is contained in:
Aman Harwara
2024-01-21 12:50:27 +05:30
parent 327f732adc
commit f2bcab6131
1 changed files with 114 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/FloatingLinkEditor.tsx
View File

@@ -12,7 +12,6 @@ import { classNames } from '@standardnotes/snjs'
import Icon from '@/Components/Icon/Icon' import Icon from '@/Components/Icon/Icon'
import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip' import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
import { TOGGLE_LINK_COMMAND } from '@lexical/link' import { TOGGLE_LINK_COMMAND } from '@lexical/link'
import Portal from '@/Components/Portal/Portal'
import { mergeRegister } from '@lexical/utils' import { mergeRegister } from '@lexical/utils'
import { KeyboardKey } from '@standardnotes/ui-services' import { KeyboardKey } from '@standardnotes/ui-services'
import Button from '@/Components/Button/Button' import Button from '@/Components/Button/Button'
@@ -20,6 +19,9 @@ import { sanitizeUrl } from '../../Lexical/Utils/sanitizeUrl'
import { getSelectedNode } from '../../Lexical/Utils/getSelectedNode' import { getSelectedNode } from '../../Lexical/Utils/getSelectedNode'
import { $isLinkTextNode } from './ToolbarLinkTextEditor' import { $isLinkTextNode } from './ToolbarLinkTextEditor'
import { useElementResize } from '@/Hooks/useElementRect' import { useElementResize } from '@/Hooks/useElementRect'
import { createPortal } from 'react-dom'
import { ElementIds } from '@/Constants/ElementIDs'
import { getAdjustedStylesForNonPortalPopover } from '@/Components/Popover/Utils/getAdjustedStylesForNonPortal'
const FloatingLinkEditor = ({ const FloatingLinkEditor = ({
linkUrl, linkUrl,
@@ -90,7 +92,8 @@ const FloatingLinkEditor = ({
maxHeightFunction: () => 'none', maxHeightFunction: () => 'none',
}) })
if (calculatedStyles) { if (calculatedStyles) {
Object.entries(calculatedStyles).forEach(([key, value]) => { const adjustedStyles = getAdjustedStylesForNonPortalPopover(linkEditorElement, calculatedStyles)
Object.entries(adjustedStyles).forEach(([key, value]) => {
linkEditorElement.style.setProperty(key, value) linkEditorElement.style.setProperty(key, value)
}) })
linkEditorElement.style.opacity = '1' linkEditorElement.style.opacity = '1'
@@ -145,8 +148,7 @@ const FloatingLinkEditor = ({
setTimeout(updateLinkEditorPosition) setTimeout(updateLinkEditorPosition)
}, [isEditMode, updateLinkEditorPosition]) }, [isEditMode, updateLinkEditorPosition])
return ( return createPortal(
<Portal>
<div <div
id="super-link-editor" id="super-link-editor"
className="absolute bottom-12 left-1/2 z-modal w-[calc(100%_-_1rem)] -translate-x-1/2 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] md:bottom-[unset] md:left-0 md:top-0 md:w-auto md:translate-x-0 md:opacity-0" className="absolute bottom-12 left-1/2 z-modal w-[calc(100%_-_1rem)] -translate-x-1/2 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] md:bottom-[unset] md:left-0 md:top-0 md:w-auto md:translate-x-0 md:opacity-0"
@@ -275,8 +277,8 @@ const FloatingLinkEditor = ({
)} )}
</div> </div>
)} )}
</div> </div>,
</Portal> document.getElementById(ElementIds.SuperEditor) ?? document.body,
) )
} }