github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

added additional props and Tiptap Integration with Comments

Browse Source
This commit is contained in:
Palanikannan1437 2023-08-10 01:20:15 +05:30
parent 5c290e1302
commit 0b6d510cc7
5 changed files with 96 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
apps/app/components/issues/comment/add-comment.tsx
View File

@ -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"}

47
apps/app/components/issues/comment/comment-card.tsx
View File

@ -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>

4
apps/app/components/issues/description-form.tsx
View File

@ -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));

1
apps/app/components/issues/form.tsx
View File

@ -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")

48
apps/app/components/issues/main-content.tsx
View File

@ -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>
</>
);