import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; import { observer } from "mobx-react-lite"; // hooks import { useMention, useUser, useWorkspace } from "hooks/store"; // services import { FileService } from "services/file.service"; // icons import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-react"; // ui import { CustomMenu } from "@plane/ui"; import { CommentReaction } from "components/issues"; import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor"; // helpers import { calculateTimeAgo } from "helpers/date-time.helper"; // types import type { IIssueActivity } from "@plane/types"; // services const fileService = new FileService(); type Props = { comment: IIssueActivity; handleCommentDeletion: (comment: string) => void; onSubmit: (commentId: string, data: Partial) => void; showAccessSpecifier?: boolean; workspaceSlug: string; }; export const CommentCard: React.FC = observer((props) => { const { comment, handleCommentDeletion, onSubmit, showAccessSpecifier = false, workspaceSlug } = props; const workspaceStore = useWorkspace(); const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string; // states const [isEditing, setIsEditing] = useState(false); // refs const editorRef = React.useRef(null); const showEditorRef = React.useRef(null); // store hooks const { currentUser } = useUser(); const { mentionHighlights, mentionSuggestions } = useMention(); // form info const { formState: { isSubmitting }, handleSubmit, setFocus, watch, setValue, } = useForm({ defaultValues: comment, }); const onEnter = (formData: Partial) => { if (isSubmitting) return; setIsEditing(false); onSubmit(comment.id, formData); editorRef.current?.setEditorValue(formData.comment_html); showEditorRef.current?.setEditorValue(formData.comment_html); }; useEffect(() => { isEditing && setFocus("comment"); }, [isEditing, setFocus]); return (
{comment.actor_detail.avatar && comment.actor_detail.avatar !== "" ? ( { ) : (
{comment.actor_detail.is_bot ? comment.actor_detail.first_name.charAt(0) : comment.actor_detail.display_name.charAt(0)}
)}
{comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name}

commented {calculateTimeAgo(comment.created_at)}

setValue("comment_html", comment_html)} mentionSuggestions={mentionSuggestions} mentionHighlights={mentionHighlights} />
{showAccessSpecifier && (
{comment.access === "INTERNAL" ? : }
)}
{currentUser?.id === comment.actor && ( setIsEditing(true)} className="flex items-center gap-1"> Edit comment {showAccessSpecifier && ( <> {comment.access === "INTERNAL" ? ( onSubmit(comment.id, { access: "EXTERNAL" })} className="flex items-center gap-1" > Switch to public comment ) : ( onSubmit(comment.id, { access: "INTERNAL" })} className="flex items-center gap-1" > Switch to private comment )} )} { handleCommentDeletion(comment.id); }} className="flex items-center gap-1" > Delete comment )}
); });