From c1310b1cb756053cacc63791db5bb59c7463a342 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dcaro=20Sant=27Ana?= <icarosantana6477@gmail.com>
Date: Sat, 12 Aug 2023 17:28:35 -0300
Subject: [PATCH 1/8] fix: add type "button" on bubble-menu buttons to avoid
 send form

---
 ui/editor/components/bubble-menu.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/editor/components/bubble-menu.tsx b/ui/editor/components/bubble-menu.tsx
index 6e354a6a6..3aa15a03a 100644
--- a/ui/editor/components/bubble-menu.tsx
+++ b/ui/editor/components/bubble-menu.tsx
@@ -108,6 +108,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
             key={index}
             onClick={item.command}
             className="p-2 text-stone-600 hover:bg-stone-100 active:bg-stone-200"
+            type="button"
           >
             <item.icon
               className={cn("h-4 w-4", {

From 34f87f39190616a5b46b8e1dbf1d2c90c6b94c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dcaro=20Sant=27Ana?= <icarosantana6477@gmail.com>
Date: Sat, 12 Aug 2023 17:47:33 -0300
Subject: [PATCH 2/8] fix: node-selector buttons

---
 ui/editor/components/node-selector.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/ui/editor/components/node-selector.tsx b/ui/editor/components/node-selector.tsx
index d933f3611..19af8fbd1 100644
--- a/ui/editor/components/node-selector.tsx
+++ b/ui/editor/components/node-selector.tsx
@@ -103,6 +103,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
       <button
         className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={() => setIsOpen(!isOpen)}
+        type="button"
       >
         <span>{activeItem?.name}</span>
         <ChevronDown className="h-4 w-4" />
@@ -118,6 +119,7 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
                 setIsOpen(false);
               }}
               className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              type="button"
             >
               <div className="flex items-center space-x-2">
                 <div className="rounded-sm border border-stone-200 p-1">

From 91612410ba46a312fa9070f3519f07d4d26bb3cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dcaro=20Sant=27Ana?= <icarosantana6477@gmail.com>
Date: Sat, 12 Aug 2023 17:47:46 -0300
Subject: [PATCH 3/8] fix: color-selector buttons

---
 ui/editor/components/color-selector.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui/editor/components/color-selector.tsx b/ui/editor/components/color-selector.tsx
index 16d132032..422501e77 100644
--- a/ui/editor/components/color-selector.tsx
+++ b/ui/editor/components/color-selector.tsx
@@ -109,6 +109,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
       <button
         className="flex h-full items-center gap-1 p-2 text-sm font-medium text-stone-600 hover:bg-stone-100 active:bg-stone-200"
         onClick={() => setIsOpen(!isOpen)}
+        type="button"
       >
         <span
           className="rounded-sm px-1"
@@ -136,6 +137,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 setIsOpen(false);
               }}
               className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              type="button"
             >
               <div className="flex items-center space-x-2">
                 <div
@@ -165,6 +167,7 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
                 setIsOpen(false);
               }}
               className="flex items-center justify-between rounded-sm px-2 py-1 text-sm text-stone-600 hover:bg-stone-100"
+              type="button"
             >
               <div className="flex items-center space-x-2">
                 <div

From ec42dde8216de199ddd5d68ac362be49c3b91403 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dcaro=20Sant=27Ana?= <icarosantana6477@gmail.com>
Date: Sat, 12 Aug 2023 18:01:44 -0300
Subject: [PATCH 4/8] fix: refactory link-selector, to avoid send form if
 editor inside on form

---
 ui/editor/components/link-selector.tsx | 34 ++++++++++++++------------
 1 file changed, 19 insertions(+), 15 deletions(-)

diff --git a/ui/editor/components/link-selector.tsx b/ui/editor/components/link-selector.tsx
index dd986ad34..aa8bd2d82 100644
--- a/ui/editor/components/link-selector.tsx
+++ b/ui/editor/components/link-selector.tsx
@@ -1,4 +1,4 @@
-import { cn, getUrlFromString } from "@/lib/utils";
+import { cn, getUrlFromString } from "@/utils/editor";
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
 import { Dispatch, FC, SetStateAction, useEffect, useRef } from "react";
@@ -16,10 +16,17 @@ 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">
@@ -28,6 +35,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         onClick={() => {
           setIsOpen(!isOpen);
         }}
+        type="button"
       >
         <p className="text-base">↗</p>
         <p
@@ -39,16 +47,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
         </p>
       </button>
       {isOpen && (
-        <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"
-        >
+        <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">
           <input
             ref={inputRef}
             type="text"
@@ -63,15 +62,20 @@ export const LinkSelector: FC<LinkSelectorProps> = ({
                 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">
+            <button 
+              className="flex items-center rounded-sm p-1 text-stone-600 transition-all hover:bg-stone-100"
+              onClick={handleLinkSubmission}
+              type="button"
+            >
               <Check className="h-4 w-4" />
             </button>
           )}
-        </form>
+        </div>
       )}
     </div>
   );

From 2a9dc0ebf2d5c73212214f0e4dbf88b751cc57ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dcaro=20Sant=27Ana?= <icarosantana6477@gmail.com>
Date: Sat, 12 Aug 2023 18:07:42 -0300
Subject: [PATCH 5/8] fix: link-selector

---
 ui/editor/components/link-selector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/editor/components/link-selector.tsx b/ui/editor/components/link-selector.tsx
index aa8bd2d82..1629dcd1f 100644
--- a/ui/editor/components/link-selector.tsx
+++ b/ui/editor/components/link-selector.tsx
@@ -1,4 +1,4 @@
-import { cn, getUrlFromString } from "@/utils/editor";
+import { cn, getUrlFromString } from "@/lib/utils";
 import { Editor } from "@tiptap/core";
 import { Check, Trash } from "lucide-react";
 import { Dispatch, FC, SetStateAction, useEffect, useRef } from "react";

From ba65045eca3bfc65eecec7ebdf762c75e4732d2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=8Dcaro=20Sant=27Ana?= <icarosantana6477@gmail.com>
Date: Sat, 12 Aug 2023 18:10:25 -0300
Subject: [PATCH 6/8] chore: move EditorBubbleMenu to outside Editor div, to
 prevent wrong focus on link-selector input

---
 ui/editor/index.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/ui/editor/index.tsx b/ui/editor/index.tsx
index bcb29d4bb..6b63b6950 100644
--- a/ui/editor/index.tsx
+++ b/ui/editor/index.tsx
@@ -132,18 +132,20 @@ export default function Editor() {
   }, [editor, content, hydrated]);
 
   return (
-    <div
-      onClick={() => {
-        editor?.chain().focus().run();
-      }}
-      className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
-    >
-      <div className="absolute right-5 top-5 mb-5 rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
-        {saveStatus}
-      </div>
+    <div>
       {editor && <EditorBubbleMenu editor={editor} />}
-      {editor?.isActive("image") && <ImageResizer editor={editor} />}
-      <EditorContent editor={editor} />
+      <div
+        onClick={() => {
+          editor?.chain().focus().run();
+        }}
+        className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
+      >
+        <div className="absolute right-5 top-5 mb-5 rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
+          {saveStatus}
+        </div>
+        {editor?.isActive("image") && <ImageResizer editor={editor} />}
+        <EditorContent editor={editor} />
+      </div>
     </div>
   );
 }

From 998802f0d7c64a52a0c9db1ae33250a7522fd0d5 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Fri, 25 Aug 2023 22:24:43 -0500
Subject: [PATCH 7/8] Update index.tsx

---
 ui/editor/index.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/ui/editor/index.tsx b/ui/editor/index.tsx
index 6b63b6950..bcb29d4bb 100644
--- a/ui/editor/index.tsx
+++ b/ui/editor/index.tsx
@@ -132,20 +132,18 @@ export default function Editor() {
   }, [editor, content, hydrated]);
 
   return (
-    <div>
-      {editor && <EditorBubbleMenu editor={editor} />}
-      <div
-        onClick={() => {
-          editor?.chain().focus().run();
-        }}
-        className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
-      >
-        <div className="absolute right-5 top-5 mb-5 rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
-          {saveStatus}
-        </div>
-        {editor?.isActive("image") && <ImageResizer editor={editor} />}
-        <EditorContent editor={editor} />
+    <div
+      onClick={() => {
+        editor?.chain().focus().run();
+      }}
+      className="relative min-h-[500px] w-full max-w-screen-lg border-stone-200 bg-white p-12 px-8 sm:mb-[calc(20vh)] sm:rounded-lg sm:border sm:px-12 sm:shadow-lg"
+    >
+      <div className="absolute right-5 top-5 mb-5 rounded-lg bg-stone-100 px-2 py-1 text-sm text-stone-400">
+        {saveStatus}
       </div>
+      {editor && <EditorBubbleMenu editor={editor} />}
+      {editor?.isActive("image") && <ImageResizer editor={editor} />}
+      <EditorContent editor={editor} />
     </div>
   );
 }

From f7541f0eaa0c2e70ec5e435d37c3f1f26769ef33 Mon Sep 17 00:00:00 2001
From: Steven Tey <stevensteel97@gmail.com>
Date: Fri, 25 Aug 2023 22:26:11 -0500
Subject: [PATCH 8/8] Update link-selector.tsx

---
 ui/editor/components/link-selector.tsx | 34 ++++++++++++--------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/ui/editor/components/link-selector.tsx b/ui/editor/components/link-selector.tsx
index 1629dcd1f..f50c8b69a 100644
--- 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>
   );