diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx index 1997ba297..7d037e1e5 100644 --- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx +++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx @@ -4,7 +4,7 @@ import { KeyboardKey } from '@standardnotes/ui-services' import { IconComponent } from '../../Lexical/Theme/IconComponent' import { sanitizeUrl } from '../../Lexical/Utils/sanitizeUrl' import { TOGGLE_LINK_COMMAND } from '@lexical/link' -import { useCallback, useState } from 'react' +import { useCallback, useState, useRef } from 'react' import { GridSelection, LexicalEditor, NodeSelection, RangeSelection } from 'lexical' import { classNames } from '@standardnotes/snjs' @@ -19,6 +19,7 @@ type Props = { const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, isAutoLink }: Props) => { const [editedLinkUrl, setEditedLinkUrl] = useState('') + const editModeContainer = useRef(null) const handleLinkSubmission = () => { if (lastSelection !== null) { @@ -36,7 +37,7 @@ const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, i }, []) return isEditMode ? ( -
+
{ + if (!editModeContainer.current?.contains(event.relatedTarget as Node)) { + setEditMode(false) + } + }} className="flex-grow rounded-sm bg-contrast p-1 text-text sm:min-w-[40ch]" />