From 0af41cbcad5bf21c7cbb3370ddd8e01aa2c1bfe0 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 24 Jul 2023 16:00:45 +0530
Subject: [PATCH] chore: fix link editor dismiss

---
 .../Plugins/FloatingLinkEditorPlugin/LinkEditor.tsx    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

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