From e716dd930454c0fbb21ff60989803c25e5c3ee3d Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Tue, 21 Nov 2023 08:31:17 +0300
Subject: [PATCH] Add Link Bubble Menu fixes (#326)

---
 .../LinkBubbleMenu/LinkBubbleMenu.module.tsx  |  1 -
 src/components/Editor/SimplifiedEditor.tsx    | 25 ++++++++++++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/Editor/LinkBubbleMenu/LinkBubbleMenu.module.tsx b/src/components/Editor/LinkBubbleMenu/LinkBubbleMenu.module.tsx
index 7b80de09..2b87ab50 100644
--- a/src/components/Editor/LinkBubbleMenu/LinkBubbleMenu.module.tsx
+++ b/src/components/Editor/LinkBubbleMenu/LinkBubbleMenu.module.tsx
@@ -7,7 +7,6 @@ import styles from './LinkBubbleMenu.module.scss'
 type Props = {
   editor: Editor
   ref: (el: HTMLDivElement) => void
-  shouldShow: boolean
   onClose: () => void
 }
 
diff --git a/src/components/Editor/SimplifiedEditor.tsx b/src/components/Editor/SimplifiedEditor.tsx
index a0448215..7d4783c4 100644
--- a/src/components/Editor/SimplifiedEditor.tsx
+++ b/src/components/Editor/SimplifiedEditor.tsx
@@ -146,6 +146,9 @@ const SimplifiedEditor = (props: Props) => {
           const { empty } = selection
           return !empty && shouldShowLinkBubbleMenu()
         },
+        tippyOptions: {
+          placement: 'bottom',
+        },
       }),
       ImageFigure,
       Image,
@@ -223,16 +226,21 @@ const SimplifiedEditor = (props: Props) => {
       return
     }
 
+    if (event.code === 'Escape' && editor()) {
+      handleHideLinkBubble()
+    }
+
     if (event.code === 'Enter' && props.submitByCtrlEnter && (event.metaKey || event.ctrlKey)) {
       event.preventDefault()
       props.onSubmit(html())
       handleClear()
     }
 
-    if (event.code === 'KeyK' && (event.metaKey || event.ctrlKey) && !editor().state.selection.empty) {
-      event.preventDefault()
-      setShouldShowLinkBubbleMenu(true)
-    }
+    // if (event.code === 'KeyK' && (event.metaKey || event.ctrlKey) && !editor().state.selection.empty) {
+    //   event.preventDefault()
+    //   handleShowLinkBubble()
+    //
+    // }
   }
 
   onMount(() => {
@@ -264,6 +272,12 @@ const SimplifiedEditor = (props: Props) => {
     editor().chain().focus().run()
     setShouldShowLinkBubbleMenu(true)
   }
+
+  const handleHideLinkBubble = () => {
+    editor().commands.focus()
+    setShouldShowLinkBubbleMenu(false)
+  }
+
   return (
     <ShowOnlyOnClient>
       <div
@@ -386,10 +400,9 @@ const SimplifiedEditor = (props: Props) => {
           />
         </Show>
         <LinkBubbleMenuModule
-          shouldShow={shouldShowLinkBubbleMenu()}
           editor={editor()}
           ref={(el) => (linkBubbleMenuRef.current = el)}
-          onClose={() => setShouldShowLinkBubbleMenu(false)}
+          onClose={handleHideLinkBubble}
         />
       </div>
     </ShowOnlyOnClient>