From 5b6b43fb8301f6ee3d37dec8fe1b64c97c9bf793 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 16 Aug 2023 18:25:11 +0530
Subject: [PATCH] fix: quick action buttons: (#1884)

---
 .../core/modals/gpt-assistant-modal.tsx       |  2 +-
 .../components/issues/comment/add-comment.tsx |  2 +-
 .../issues/comment/comment-card.tsx           |  2 +-
 .../components/issues/description-form.tsx    | 19 ++++++++++++-------
 apps/app/components/issues/form.tsx           |  2 +-
 .../pages/create-update-block-inline.tsx      |  5 +----
 .../components/tiptap/bubble-menu/index.tsx   | 10 +++++++---
 .../tiptap/bubble-menu/link-selector.tsx      |  8 ++++++--
 .../tiptap/bubble-menu/node-selector.tsx      |  9 +++++++--
 apps/app/components/tiptap/index.tsx          |  9 +++++----
 .../components/tiptap/slash-command/index.tsx |  9 +++++----
 11 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/apps/app/components/core/modals/gpt-assistant-modal.tsx b/apps/app/components/core/modals/gpt-assistant-modal.tsx
index 6b06256cf..a3b748d66 100644
--- a/apps/app/components/core/modals/gpt-assistant-modal.tsx
+++ b/apps/app/components/core/modals/gpt-assistant-modal.tsx
@@ -145,7 +145,7 @@ export const GptAssistantModal: React.FC<Props> = ({
       }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
-        <div id="tiptap-container" className="text-sm">
+        <div className="text-sm">
           Content:
           <TiptapEditor
             value={htmlContent ?? `<p>${content}</p>`}
diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 6f49e900a..1dc75a7a6 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -87,7 +87,7 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
   return (
     <div>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div id="tiptap-container" className="issue-comments-section">
+        <div className="issue-comments-section">
           <Controller
             name="comment_html"
             control={control}
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 21e503a09..08ea0f1d5 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -101,7 +101,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
             onSubmit={handleSubmit(onEnter)}
           >
-            <div id="tiptap-container">
+            <div>
               <TiptapEditor
                 ref={editorRef}
                 value={watch("comment_html")}
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index 7c163527a..c0c6157a2 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -112,8 +112,9 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         {characterLimit && (
           <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
             <span
-              className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-                }`}
+              className={`${
+                watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
+              }`}
             >
               {watch("name").length}
             </span>
@@ -122,7 +123,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
         )}
       </div>
       <span>{errors.name ? errors.name.message : null}</span>
-      <div id="tiptap-container" className="relative">
+      <div className="relative">
         <Controller
           name="description_html"
           control={control}
@@ -133,8 +134,8 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
               <Tiptap
                 value={
                   !value ||
-                    value === "" ||
-                    (typeof value === "object" && Object.keys(value).length === 0)
+                  value === "" ||
+                  (typeof value === "object" && Object.keys(value).length === 0)
                     ? watch("description_html")
                     : value
                 }
@@ -154,8 +155,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
             );
           }}
         />
-        <div className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === 'saved' ? 'fadeOut' : 'fadeIn'}`}>
-          {isSubmitting === 'submitting' ? 'Saving...' : 'Saved'}
+        <div
+          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
+            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+          }`}
+        >
+          {isSubmitting === "submitting" ? "Saving..." : "Saved"}
         </div>
       </div>
     </div>
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index a7913b3cf..0e73ca349 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -333,7 +333,7 @@ export const IssueForm: FC<IssueFormProps> = ({
                 </div>
               )}
               {(fieldsToShow.includes("all") || fieldsToShow.includes("description")) && (
-                <div id="tiptap-container" className="relative">
+                <div className="relative">
                   <div className="flex justify-end">
                     {issueName && issueName !== "" && (
                       <button
diff --git a/apps/app/components/pages/create-update-block-inline.tsx b/apps/app/components/pages/create-update-block-inline.tsx
index 18ff92579..496434369 100644
--- a/apps/app/components/pages/create-update-block-inline.tsx
+++ b/apps/app/components/pages/create-update-block-inline.tsx
@@ -284,10 +284,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
               maxLength={255}
             />
           </div>
-          <div
-            id="tiptap-container"
-            className="page-block-section relative -mt-2 text-custom-text-200"
-          >
+          <div className="page-block-section relative -mt-2 text-custom-text-200">
             <Controller
               name="description_html"
               control={control}
diff --git a/apps/app/components/tiptap/bubble-menu/index.tsx b/apps/app/components/tiptap/bubble-menu/index.tsx
index 590dfab5e..259b5ecea 100644
--- a/apps/app/components/tiptap/bubble-menu/index.tsx
+++ b/apps/app/components/tiptap/bubble-menu/index.tsx
@@ -97,10 +97,14 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
         {items.map((item, index) => (
           <button
             key={index}
+            type="button"
             onClick={item.command}
-            className={cn("p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors", {
-              "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
-            })}
+            className={cn(
+              "p-2 text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5 transition-colors",
+              {
+                "text-custom-text-100 bg-custom-primary-100/5": item.isActive(),
+              }
+            )}
           >
             <item.icon
               className={cn("h-4 w-4", {
diff --git a/apps/app/components/tiptap/bubble-menu/link-selector.tsx b/apps/app/components/tiptap/bubble-menu/link-selector.tsx
index f843db0ac..4a2859155 100644
--- a/apps/app/components/tiptap/bubble-menu/link-selector.tsx
+++ b/apps/app/components/tiptap/bubble-menu/link-selector.tsx
@@ -19,7 +19,11 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
   return (
     <div className="relative">
       <button
-        className={cn("flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100", { "bg-custom-background-100": isOpen })}
+        type="button"
+        className={cn(
+          "flex h-full items-center space-x-2 px-3 py-1.5 text-sm font-medium text-custom-text-300 hover:bg-custom-background-100 active:bg-custom-background-100",
+          { "bg-custom-background-100": isOpen }
+        )}
         onClick={() => {
           setIsOpen(!isOpen);
         }}
@@ -48,7 +52,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
             ref={inputRef}
             type="url"
             placeholder="Paste a link"
-            className="flex-1 bg-custom-background-100 border border-custom-primary-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
+            className="flex-1 bg-custom-background-100 border-r border-custom-border-300 p-1 text-sm outline-none placeholder:text-custom-text-400"
             defaultValue={editor.getAttributes("link").href || ""}
           />
           {editor.getAttributes("link").href ? (
diff --git a/apps/app/components/tiptap/bubble-menu/node-selector.tsx b/apps/app/components/tiptap/bubble-menu/node-selector.tsx
index 12ad2174b..f6f1f18dc 100644
--- a/apps/app/components/tiptap/bubble-menu/node-selector.tsx
+++ b/apps/app/components/tiptap/bubble-menu/node-selector.tsx
@@ -91,8 +91,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
   return (
     <div className="relative h-full">
       <button
-        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
+        className="flex h-full items-center gap-1 whitespace-nowrap p-2 text-sm font-medium text-custom-text-300 hover:bg-custom-primary-100/5 active:bg-custom-primary-100/5"
       >
         <span>{activeItem?.name}</span>
         <ChevronDown className="h-4 w-4" />
@@ -103,11 +104,15 @@ export const NodeSelector: FC<NodeSelectorProps> = ({ editor, isOpen, setIsOpen
           {items.map((item, index) => (
             <button
               key={index}
+              type="button"
               onClick={() => {
                 item.command();
                 setIsOpen(false);
               }}
-              className={cn("flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100", { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name })}
+              className={cn(
+                "flex items-center justify-between rounded-sm px-2 py-1 text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100",
+                { "bg-custom-primary-100/5 text-custom-text-100": activeItem.name === item.name }
+              )}
             >
               <div className="flex items-center space-x-2">
                 <div className="rounded-sm border border-custom-border-300 p-1">
diff --git a/apps/app/components/tiptap/index.tsx b/apps/app/components/tiptap/index.tsx
index 3220d127b..0ecaf69b0 100644
--- a/apps/app/components/tiptap/index.tsx
+++ b/apps/app/components/tiptap/index.tsx
@@ -113,19 +113,20 @@ const Tiptap = (props: ITiptapRichTextEditor) => {
   }, 1000);
 
   const editorClassNames = `relative w-full max-w-screen-lg sm:rounded-lg sm:shadow-lg mt-2 p-3 relative focus:outline-none rounded-md
-      ${noBorder ? '' : 'border border-custom-border-200'
-    } ${borderOnFocus ? 'focus:border border-custom-border-300' : 'focus:border-0'
-    } ${customClassName}`;
+      ${noBorder ? "" : "border border-custom-border-200"} ${
+    borderOnFocus ? "focus:border border-custom-border-300" : "focus:border-0"
+  } ${customClassName}`;
 
   if (!editor) return null;
   editorRef.current = editor;
 
   return (
     <div
+      id="tiptap-container"
       onClick={() => {
         editor?.chain().focus().run();
       }}
-      className={`tiptap-editor-container ${editorClassNames}`}
+      className={`tiptap-editor-container cursor-text ${editorClassNames}`}
     >
       {editor && <EditorBubbleMenu editor={editor} />}
       <div className={`${editorContentCustomClassNames}`}>
diff --git a/apps/app/components/tiptap/slash-command/index.tsx b/apps/app/components/tiptap/slash-command/index.tsx
index 400c27266..7c686e06b 100644
--- a/apps/app/components/tiptap/slash-command/index.tsx
+++ b/apps/app/components/tiptap/slash-command/index.tsx
@@ -264,7 +264,10 @@ const CommandList = ({
     >
       {items.map((item: CommandItemProps, index: number) => (
         <button
-          className={cn(`flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`, { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex })}
+          className={cn(
+            `flex w-full items-center space-x-2 rounded-md px-2 py-1 text-left text-sm text-custom-text-200 hover:bg-custom-primary-100/5 hover:text-custom-text-100`,
+            { "bg-custom-primary-100/5  text-custom-text-100": index === selectedIndex }
+          )}
           key={index}
           onClick={() => selectItem(index)}
         >
@@ -282,8 +285,6 @@ const renderItems = () => {
   let component: ReactRenderer | null = null;
   let popup: any | null = null;
 
-  const container = document.querySelector("#tiptap-container") as HTMLElement;
-
   return {
     onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
       component = new ReactRenderer(CommandList, {
@@ -294,7 +295,7 @@ const renderItems = () => {
       // @ts-ignore
       popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
-        appendTo: () => container,
+        appendTo: () => document.querySelector("#tiptap-container"),
         content: component.element,
         showOnCreate: true,
         interactive: true,