From ad888f9dd0dcce1e2d5db31988341e456e376c12 Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Fri, 8 Sep 2023 21:13:04 +0530 Subject: [PATCH 1/4] fix:(space) fixed comment card's editor integration --- .../comment/comment-detail-card.tsx | 50 ++++++++++--------- space/components/tiptap/index.tsx | 6 --- 2 files changed, 26 insertions(+), 30 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 7c785d98895..b0c05d2d37f 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 { useForm } from "react-hook-form"; // headless ui import { Menu, Transition } from "@headlessui/react"; // lib @@ -30,10 +30,14 @@ export const CommentCard: React.FC = observer((props) => { // states const [isEditing, setIsEditing] = useState(false); + const editorRef = React.useRef(null); + + const showEditorRef = React.useRef(null); const { formState: { isSubmitting }, handleSubmit, - control, + watch, + setValue } = useForm({ defaultValues: { comment_html: comment.comment_html }, }); @@ -47,6 +51,9 @@ export const CommentCard: React.FC = 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 ( @@ -90,20 +97,16 @@ export const CommentCard: React.FC = observer((props) => { className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`} >
- ( - { - onChange(comment_html); - }} - /> - )} + { + setValue("comment_json", comment_json); + setValue("comment_html", comment_html); + }} />
@@ -125,7 +128,8 @@ export const CommentCard: React.FC = observer((props) => {
= observer((props) => { {}} + onClick={() => { }} className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80" > @@ -163,9 +167,8 @@ export const CommentCard: React.FC = observer((props) => { onClick={() => { setIsEditing(true); }} - className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${ - active ? "bg-custom-background-80" : "" - }`} + className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${active ? "bg-custom-background-80" : "" + }`} > Edit @@ -178,9 +181,8 @@ export const CommentCard: React.FC = observer((props) => { diff --git a/space/components/tiptap/index.tsx b/space/components/tiptap/index.tsx index 28c8b16913b..84f691c35d5 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 = useRef(null); useImperativeHandle(forwardedRef, () => ({ From 1af3e344bd61d6b55c6ee74da078127637ef21b1 Mon Sep 17 00:00:00 2001 From: Palanikannan1437 <73993394+Palanikannan1437@users.noreply.github.com> Date: Fri, 8 Sep 2023 21:14:14 +0530 Subject: [PATCH 2/4] regression: removed content being set twice --- web/components/tiptap/index.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/web/components/tiptap/index.tsx b/web/components/tiptap/index.tsx index 28c8b16913b..84f691c35d5 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 = useRef(null); useImperativeHandle(forwardedRef, () => ({ From 6c24dd64937358fb13c1c54cb0c76b27325c6eff Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 11 Sep 2023 12:49:36 +0530 Subject: [PATCH 3/4] chore: added controller to manage tiptap editor --- .../comment/comment-detail-card.tsx | 42 +++++++++++-------- 1 file changed, 25 insertions(+), 17 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 b0c05d2d37f..11268fa4a01 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 } from "react-hook-form"; +import { Controller, useForm } from "react-hook-form"; // headless ui import { Menu, Transition } from "@headlessui/react"; // lib @@ -34,10 +34,11 @@ export const CommentCard: React.FC = observer((props) => { const showEditorRef = React.useRef(null); const { + control, formState: { isSubmitting }, handleSubmit, watch, - setValue + setValue, } = useForm({ defaultValues: { comment_html: comment.comment_html }, }); @@ -97,16 +98,21 @@ export const CommentCard: React.FC = observer((props) => { className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`} >
- { - setValue("comment_json", comment_json); - setValue("comment_html", comment_html); - }} + ( + { + onChange(comment_html); + }} + /> + )} />
@@ -143,7 +149,7 @@ export const CommentCard: React.FC = observer((props) => { { }} + onClick={() => {}} className="relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none cursor-pointer hover:bg-custom-background-80" > @@ -167,8 +173,9 @@ export const CommentCard: React.FC = observer((props) => { onClick={() => { setIsEditing(true); }} - className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${active ? "bg-custom-background-80" : "" - }`} + className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${ + active ? "bg-custom-background-80" : "" + }`} > Edit @@ -181,8 +188,9 @@ export const CommentCard: React.FC = observer((props) => { From 1d0cbcdd21cf8dcff2a43a54808489c5a0d158b9 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Mon, 11 Sep 2023 12:53:02 +0530 Subject: [PATCH 4/4] chore: remove unused functions --- .../issues/peek-overview/comment/comment-detail-card.tsx | 2 -- 1 file changed, 2 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 11268fa4a01..0b4d2d5b08f 100644 --- a/space/components/issues/peek-overview/comment/comment-detail-card.tsx +++ b/space/components/issues/peek-overview/comment/comment-detail-card.tsx @@ -37,8 +37,6 @@ export const CommentCard: React.FC = observer((props) => { control, formState: { isSubmitting }, handleSubmit, - watch, - setValue, } = useForm({ defaultValues: { comment_html: comment.comment_html }, });