Update link-selector.tsx

steven-tey · Aug 26, 2023 · f7541f0 · f7541f0
1 parent 998802f
commit f7541f0
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/ui/editor/components/link-selector.tsx b/ui/editor/components/link-selector.tsx
@@ -16,26 +16,19 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Autofocus on input by default
   useEffect(() => {
     inputRef.current && inputRef.current?.focus();
-  }, [isOpen]);
-
-  const handleLinkSubmission = () => {
-    const url = getUrlFromString(inputRef.current?.value || "");
-    if (url) {
-      editor.chain().focus().setLink({ href: url }).run();
-      setIsOpen(false);
-    }
-  };
+  });
 
   return (
     <div className="relative">
       <button
+        type="button"
         className="flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={() => {
           setIsOpen(!isOpen);
         }}
-        type="button"
       >
         <p className="text-base">↗</p>
         <p
@@ -47,7 +40,16 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         </p>
       </button>
       {isOpen && (
-        <div className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            const input = e.target[0] as HTMLInputElement;
+            const url = getUrlFromString(input.value);
+            url && editor.chain().focus().setLink({ href: url }).run();
+            setIsOpen(false);
+          }}
+          className="fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-stone-200 bg-white p-1 shadow-xl animate-in fade-in slide-in-from-top-1"
+        >
           <input
             ref={inputRef}
             type="text"
@@ -57,25 +59,21 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
           />
           {editor.getAttributes("link").href ? (
             <button
+              type="button"
               className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
               onClick={() => {
                 editor.chain().focus().unsetLink().run();
                 setIsOpen(false);
               }}
-              type="button"
             >
               <Trash className="h-4 w-4" />
             </button>
           ) : (
-            <button 
-              className="flex items-center rounded-sm p-1 text-stone-600 transition-all hover:bg-stone-100"
-              onClick={handleLinkSubmission}
-              type="button"
-            >
+            <button className="flex items-center rounded-sm p-1 text-stone-600 transition-all hover:bg-stone-100">
               <Check className="h-4 w-4" />
             </button>
           )}
-        </div>
+        </form>
       )}
     </div>
   );