From 4447a4b5191d9575c4718c667233ddaf1c87c1ac Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Mon, 11 Sep 2023 12:54:19 +0530
Subject: [PATCH] fix: Tiptap comment card fix for space (#2129)

* fix:(space) fixed comment card's editor integration

* regression: removed content being set twice

* chore: added controller to manage tiptap editor

* chore: remove unused functions

---------

Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
---
 .../peek-overview/comment/comment-detail-card.tsx  | 14 +++++++++++---
 space/components/tiptap/index.tsx                  |  6 ------
 web/components/tiptap/index.tsx                    |  6 ------
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/space/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
index 7c785d988..0b4d2d5b0 100644
--- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // mobx
 import { observer } from "mobx-react-lite";
 // react-hook-form
-import { useForm, Controller } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // lib
@@ -30,10 +30,13 @@ export const CommentCard: React.FC<Props> = observer((props) => {
   // states
   const [isEditing, setIsEditing] = useState(false);
 
+  const editorRef = React.useRef<any>(null);
+
+  const showEditorRef = React.useRef<any>(null);
   const {
+    control,
     formState: { isSubmitting },
     handleSubmit,
-    control,
   } = useForm<any>({
     defaultValues: { comment_html: comment.comment_html },
   });
@@ -47,6 +50,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !issueDetailStore.peekId) return;
     issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
     setIsEditing(false);
+
+    editorRef.current?.setEditorValue(formData.comment_html);
+    showEditorRef.current?.setEditorValue(formData.comment_html);
   };
 
   return (
@@ -96,6 +102,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 render={({ field: { onChange, value } }) => (
                   <TipTapEditor
                     workspaceSlug={workspaceSlug as string}
+                    ref={editorRef}
                     value={value}
                     debouncedUpdatesEnabled={false}
                     customClassName="min-h-[50px] p-3 shadow-sm"
@@ -125,7 +132,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
             <TipTapEditor
-              workspaceSlug={workspaceSlug.toString()}
+              workspaceSlug={workspaceSlug as string}
+              ref={showEditorRef}
               value={comment.comment_html}
               editable={false}
               customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
diff --git a/space/components/tiptap/index.tsx b/space/components/tiptap/index.tsx
index 28c8b1691..84f691c35 100644
--- a/space/components/tiptap/index.tsx
+++ b/space/components/tiptap/index.tsx
@@ -56,12 +56,6 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
     },
   });
 
-  useEffect(() => {
-    if (editor) {
-      editor.commands.setContent(value);
-    }
-  }, [value]);
-
   const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
 
   useImperativeHandle(forwardedRef, () => ({
diff --git a/web/components/tiptap/index.tsx b/web/components/tiptap/index.tsx
index 28c8b1691..84f691c35 100644
--- a/web/components/tiptap/index.tsx
+++ b/web/components/tiptap/index.tsx
@@ -56,12 +56,6 @@ const Tiptap = (props: ITipTapRichTextEditor) => {
     },
   });
 
-  useEffect(() => {
-    if (editor) {
-      editor.commands.setContent(value);
-    }
-  }, [value]);
-
   const editorRef: React.MutableRefObject<Editor | null> = useRef(null);
 
   useImperativeHandle(forwardedRef, () => ({