import { FC, useEffect, useRef, useState } from "react"; import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor"; import { useForm } from "react-hook-form"; import { Check, Globe2, Lock, Pencil, Trash2, X } from "lucide-react"; // hooks import { CustomMenu } from "@plane/ui"; import { isEmptyHtmlString } from "helpers/string.helper"; import { useIssueDetail, useMention, useUser, useWorkspace } from "hooks/store"; // components // ui // services import { FileService } from "services/file.service"; // types import { TIssueComment } from "@plane/types"; import { IssueCommentReaction } from "../../reactions/issue-comment"; import { TActivityOperations } from "../root"; import { IssueCommentBlock } from "./comment-block"; // helpers const fileService = new FileService(); type TIssueCommentCard = { workspaceSlug: string; commentId: string; activityOperations: TActivityOperations; ends: "top" | "bottom" | undefined; showAccessSpecifier?: boolean; }; export const IssueCommentCard: FC = (props) => { const { workspaceSlug, commentId, activityOperations, ends, showAccessSpecifier = false } = props; // hooks const { comment: { getCommentById }, } = useIssueDetail(); const { currentUser } = useUser(); const { mentionHighlights, mentionSuggestions } = useMention(); // refs const editorRef = useRef(null); const showEditorRef = useRef(null); // state const [isEditing, setIsEditing] = useState(false); const comment = getCommentById(commentId); const workspaceStore = useWorkspace(); const workspaceId = workspaceStore.getWorkspaceBySlug(comment?.workspace_detail?.slug as string)?.id as string; const { formState: { isSubmitting }, handleSubmit, setFocus, watch, setValue, } = useForm>({ defaultValues: { comment_html: comment?.comment_html }, }); const onEnter = (formData: Partial) => { if (isSubmitting || !comment) return; setIsEditing(false); activityOperations.updateComment(comment.id, formData); editorRef.current?.setEditorValue(formData.comment_html); showEditorRef.current?.setEditorValue(formData.comment_html); }; useEffect(() => { isEditing && setFocus("comment_html"); }, [isEditing, setFocus]); const isEmpty = watch("comment_html") === "" || watch("comment_html")?.trim() === "" || watch("comment_html") === "

" || isEmptyHtmlString(watch("comment_html") ?? ""); if (!comment || !currentUser) return <>; return ( {currentUser?.id === comment.actor && ( setIsEditing(true)} className="flex items-center gap-1"> Edit comment {showAccessSpecifier && ( <> {comment.access === "INTERNAL" ? ( activityOperations.updateComment(comment.id, { access: "EXTERNAL" })} className="flex items-center gap-1" > Switch to public comment ) : ( activityOperations.updateComment(comment.id, { access: "INTERNAL" })} className="flex items-center gap-1" > Switch to private comment )} )} activityOperations.removeComment(comment.id)} className="flex items-center gap-1" > Delete comment )} } ends={ends} > <>
{ if (e.key === "Enter" && !e.shiftKey && !isEmpty) { handleSubmit(onEnter)(e); } }} > setValue("comment_html", comment_html)} mentionSuggestions={mentionSuggestions} mentionHighlights={mentionHighlights} />
{showAccessSpecifier && (
{comment.access === "INTERNAL" ? : }
)}
); };