chore: fix link editor dismiss

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<HTMLDivElement>(null)
 
   const handleLinkSubmission = () => {
     if (lastSelection !== null) {
@@ -36,7 +37,7 @@ const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, i
   }, [])
 
   return isEditMode ? (
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2" ref={editModeContainer}>
       <input
         id="link-input"
         ref={focusInput}
@@ -53,6 +54,11 @@ const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, i
             setEditMode(false)
           }
         }}
+        onBlur={(event) => {
+          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]"
       />
       <button