From 1633765ebbd7432f2fe4c3e0b85a4c03a0996181 Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Thu, 17 Aug 2023 21:56:32 +0530
Subject: [PATCH] prevent enter key on Link selector to trigger modal submit

---
 .../tiptap/bubble-menu/link-selector.tsx      | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/apps/app/components/tiptap/bubble-menu/link-selector.tsx b/apps/app/components/tiptap/bubble-menu/link-selector.tsx
index 7d8e079c6..1596870f7 100644
--- a/apps/app/components/tiptap/bubble-menu/link-selector.tsx
+++ b/apps/app/components/tiptap/bubble-menu/link-selector.tsx
@@ -1,6 +1,6 @@
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
-import { Dispatch, FC, SetStateAction, useEffect, useRef } from "react";
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
 import { cn } from "../utils";
 import isValidHttpUrl from "./utils/link-validator";
 interface LinkSelectorProps {
@@ -9,9 +9,19 @@ interface LinkSelectorProps {
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 }
 
+
 export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const onLinkSubmit = useCallback(() => {
+    const input = inputRef.current;
+    const url = input?.value;
+    if (url && isValidHttpUrl(url)) {
+      editor.chain().focus().setLink({ href: url }).run();
+      setIsOpen(false);
+    }
+  }, [editor, inputRef, setIsOpen]);
+
   useEffect(() => {
     inputRef.current && inputRef.current?.focus();
   });
@@ -40,6 +50,11 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
       {isOpen && (
         <div
           className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 dow-xl animate-in fade-in slide-in-from-top-1"
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault(); onLinkSubmit();
+            }
+          }}
         >
           <input
             ref={inputRef}
@@ -62,12 +77,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
           ) : (
             <button className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90" type="button"
               onClick={() => {
-                const input = inputRef.current;
-                const url = input?.value;
-                if (url && isValidHttpUrl(url)) {
-                  editor.chain().focus().setLink({ href: url }).run();
-                  setIsOpen(false);
-                }
+                onLinkSubmit();
               }}
             >
               <Check className="h-4 w-4" />