From 0b6d510cc7aeae9e318a4d7157ecb75715762e9a Mon Sep 17 00:00:00 2001
From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com>
Date: Thu, 10 Aug 2023 01:20:15 +0530
Subject: [PATCH] added additional props and Tiptap Integration with Comments

---
 .../components/issues/comment/add-comment.tsx | 47 +++++++++++-------
 .../issues/comment/comment-card.tsx           | 47 +++++++++++++-----
 .../components/issues/description-form.tsx    |  4 ++
 apps/app/components/issues/form.tsx           |  1 +
 apps/app/components/issues/main-content.tsx   | 48 +++++++++----------
 5 files changed, 96 insertions(+), 51 deletions(-)

diff --git a/apps/app/components/issues/comment/add-comment.tsx b/apps/app/components/issues/comment/add-comment.tsx
index 3b3cd21b0..157f56dce 100644
--- a/apps/app/components/issues/comment/add-comment.tsx
+++ b/apps/app/components/issues/comment/add-comment.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 
 import { useRouter } from "next/router";
-import dynamic from "next/dynamic";
 
 import { mutate } from "swr";
 
@@ -12,11 +11,12 @@ import issuesServices from "services/issues.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Loader, SecondaryButton } from "components/ui";
+import { SecondaryButton } from "components/ui";
 // types
 import type { ICurrentUserResponse, IIssueComment } from "types";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), {
 //   ssr: false,
@@ -34,7 +34,14 @@ import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
 //
 // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
-//
+
+const TiptapEditor = React.forwardRef<
+  ITiptapRichTextEditor,
+  ITiptapRichTextEditor
+>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
+
+TiptapEditor.displayName = "TiptapEditor";
+
 const defaultValues: Partial<IIssueComment> = {
   comment_json: "",
   comment_html: "",
@@ -51,6 +58,7 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
     handleSubmit,
     control,
     setValue,
+    watch,
     formState: { isSubmitting },
     reset,
   } = useForm<IIssueComment>({ defaultValues });
@@ -98,19 +106,26 @@ export const AddComment: React.FC<Props> = ({ issueId, user, disabled = false })
     <div>
       <form onSubmit={handleSubmit(onSubmit)}>
         <div className="issue-comments-section">
-          {/* <Controller */}
-          {/*   name="comment_json" */}
-          {/*   control={control} */}
-          {/*   render={({ field: { value } }) => ( */}
-          {/*     <WrappedRemirrorRichTextEditor */}
-          {/*       value={value} */}
-          {/*       onJSONChange={(jsonValue) => setValue("comment_json", jsonValue)} */}
-          {/*       onHTMLChange={(htmlValue) => setValue("comment_html", htmlValue)} */}
-          {/*       placeholder="Enter your comment..." */}
-          {/*       ref={editorRef} */}
-          {/*     /> */}
-          {/*   )} */}
-          {/* /> */}
+          <Controller
+            name="comment_html"
+            control={control}
+            render={({ field: { value, onChange } }) =>
+              <TiptapEditor
+                ref={editorRef}
+                value={
+                  !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                    ? watch("comment_html")
+                    : value
+                }
+                customClassName="p-3 min-h-[50px]"
+                debouncedUpdatesEnabled={false}
+                onChange={(comment_json: Object, comment_html: string) => {
+                  onChange(comment_html);
+                  setValue("comment_json", comment_json);
+                }}
+              />
+            }
+          />
 
           <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
             {isSubmitting ? "Adding..." : "Comment"}
diff --git a/apps/app/components/issues/comment/comment-card.tsx b/apps/app/components/issues/comment/comment-card.tsx
index 008290f43..10da0b74e 100644
--- a/apps/app/components/issues/comment/comment-card.tsx
+++ b/apps/app/components/issues/comment/comment-card.tsx
@@ -15,6 +15,7 @@ import { CommentReaction } from "components/issues";
 import { timeAgo } from "helpers/date-time.helper";
 // types
 import type { IIssueComment } from "types";
+import Tiptap, { ITiptapRichTextEditor } from "components/tiptap";
 
 // const RemirrorRichTextEditor = dynamic(() => import("components/rich-text-editor"), { ssr: false });
 //
@@ -26,7 +27,14 @@ import type { IIssueComment } from "types";
 // >((props, ref) => <RemirrorRichTextEditor {...props} forwardedRef={ref} />);
 //
 // WrappedRemirrorRichTextEditor.displayName = "WrappedRemirrorRichTextEditor";
-//
+
+const TiptapEditor = React.forwardRef<
+  ITiptapRichTextEditor,
+  ITiptapRichTextEditor
+>((props, ref) => <Tiptap {...props} forwardedRef={ref} />);
+
+TiptapEditor.displayName = "TiptapEditor";
+
 type Props = {
   comment: IIssueComment;
   onSubmit: (comment: IIssueComment) => void;
@@ -45,6 +53,7 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
     formState: { isSubmitting },
     handleSubmit,
     setFocus,
+    watch,
     setValue,
   } = useForm<IIssueComment>({
     defaultValues: comment,
@@ -55,9 +64,10 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
     setIsEditing(false);
 
     onSubmit(formData);
+    console.log("watching", formData.comment_html)
 
-    editorRef.current?.setEditorValue(formData.comment_json);
-    showEditorRef.current?.setEditorValue(formData.comment_json);
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
   };
 
   useEffect(() => {
@@ -105,14 +115,24 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}
             onSubmit={handleSubmit(onEnter)}
           >
-            <WrappedRemirrorRichTextEditor
-              value={comment.comment_html}
-              onBlur={(jsonValue, htmlValue) => {
-                setValue("comment_json", jsonValue);
-                setValue("comment_html", htmlValue);
-              }}
-              placeholder="Enter Your comment..."
+            {/* <WrappedRemirrorRichTextEditor */}
+            {/*   value={comment.comment_html} */}
+            {/*   onBlur={(jsonValue, htmlValue) => { */}
+            {/*     setValue("comment_json", jsonValue); */}
+            {/*     setValue("comment_html", htmlValue); */}
+            {/*   }} */}
+            {/*   placeholder="Enter Your comment..." */}
+            {/*   ref={editorRef} */}
+            {/* /> */}
+            <TiptapEditor
               ref={editorRef}
+              value={watch("comment_html")}
+              debouncedUpdatesEnabled={false}
+              customClassName="min-h-[50px] p-3"
+              onChange={(comment_json: Object, comment_html: string) => {
+                setValue("comment_json", comment_json);
+                setValue("comment_html", comment_html);
+              }}
             />
             <div className="flex gap-1 self-end">
               <button
@@ -132,6 +152,12 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
+            <TiptapEditor
+              ref={showEditorRef}
+              value={comment.comment_html}
+              editable={false}
+              customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
+            />
             {/* <WrappedRemirrorRichTextEditor */}
             {/*   value={comment.comment_html} */}
             {/*   editable={false} */}
@@ -139,7 +165,6 @@ export const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentD
             {/*   customClassName="text-xs border border-custom-border-200 bg-custom-background-100" */}
             {/*   ref={showEditorRef} */}
             {/* /> */}
-
             <CommentReaction projectId={comment.project} commentId={comment.id} />
           </div>
         </div>
diff --git a/apps/app/components/issues/description-form.tsx b/apps/app/components/issues/description-form.tsx
index fcf10073d..1eb02915f 100644
--- a/apps/app/components/issues/description-form.tsx
+++ b/apps/app/components/issues/description-form.tsx
@@ -123,8 +123,12 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
                     ? watch("description_html")
                     : value
                 }
+                debouncedUpdatesEnabled={true}
                 setIsSubmitting={setIsSubmitting}
+                customClassName="min-h-[150px]"
+                editorContentCustomClassNames="pt-9"
                 onChange={(description: Object, description_html: string) => {
+                  setIsSubmitting(true);
                   onChange(description_html);
                   setValue("description", description);
                   handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting(false));
diff --git a/apps/app/components/issues/form.tsx b/apps/app/components/issues/form.tsx
index 8d66edd21..8f71c8e53 100644
--- a/apps/app/components/issues/form.tsx
+++ b/apps/app/components/issues/form.tsx
@@ -372,6 +372,7 @@ export const IssueForm: FC<IssueFormProps> = ({
 
                       return (
                         <Tiptap
+                          debouncedUpdatesEnabled={false}
                           value={
                             !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                               ? watch("description_html")
diff --git a/apps/app/components/issues/main-content.tsx b/apps/app/components/issues/main-content.tsx
index 7c29f0810..d2ff8a1ec 100644
--- a/apps/app/components/issues/main-content.tsx
+++ b/apps/app/components/issues/main-content.tsx
@@ -129,30 +129,30 @@ export const IssueMainContent: React.FC<Props> = ({
           isAllowed={memberRole.isMember || memberRole.isOwner || !uneditable}
         />
 
-        {/*   <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} /> */}
-        {/**/}
-        {/*   <div className="mt-2 space-y-2"> */}
-        {/*     <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} /> */}
-        {/*   </div> */}
-        {/* </div> */}
-        {/* <div className="flex flex-col gap-3 py-3"> */}
-        {/*   <h3 className="text-lg">Attachments</h3> */}
-        {/*   <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"> */}
-        {/*     <IssueAttachmentUpload disabled={uneditable} /> */}
-        {/*     <IssueAttachments /> */}
-        {/*   </div> */}
-        {/* </div> */}
-        {/* <div className="space-y-5 pt-3"> */}
-        {/*   <h3 className="text-lg text-custom-text-100">Comments/Activity</h3> */}
-        {/*   <IssueActivitySection */}
-        {/*     issueId={(archivedIssueId as string) ?? (issueId as string)} */}
-        {/*     user={user} */}
-        {/*   /> */}
-        {/*   <AddComment */}
-        {/*     issueId={(archivedIssueId as string) ?? (issueId as string)} */}
-        {/*     user={user} */}
-        {/*     disabled={uneditable} */}
-        {/*   /> */}
+        <IssueReaction workspaceSlug={workspaceSlug} issueId={issueId} projectId={projectId} />
+
+        <div className="mt-2 space-y-2">
+          <SubIssuesList parentIssue={issueDetails} user={user} disabled={uneditable} />
+        </div>
+      </div>
+      <div className="flex flex-col gap-3 py-3">
+        <h3 className="text-lg">Attachments</h3>
+        <div className="grid  grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+          <IssueAttachmentUpload disabled={uneditable} />
+          <IssueAttachments />
+        </div>
+      </div>
+      <div className="space-y-5 pt-3">
+        <h3 className="text-lg text-custom-text-100">Comments/Activity</h3>
+        <IssueActivitySection
+          issueId={(archivedIssueId as string) ?? (issueId as string)}
+          user={user}
+        />
+        <AddComment
+          issueId={(archivedIssueId as string) ?? (issueId as string)}
+          user={user}
+          disabled={uneditable}
+        />
       </div>
     </>
   );