plane/web/components/issues/issue-detail/issue-activity/comments/comment-card.tsx

import { FC, useEffect, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { Check, Globe2, Lock, Pencil, Trash2, X } from "lucide-react";
// hooks
import { useIssueDetail, useMention, useUser, useWorkspace } from "hooks/store";
// components
import { IssueCommentBlock } from "./comment-block";
import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
import { IssueCommentReaction } from "../../reactions/issue-comment";
// ui
import { CustomMenu } from "@plane/ui";
// services
import { FileService } from "services/file.service";
// types
import { TIssueComment } from "@plane/types";
import { TActivityOperations } from "../root";
// helpers
import { isEmptyHtmlString } from "helpers/string.helper";

const fileService = new FileService();

type TIssueCommentCard = {
  workspaceSlug: string;
  commentId: string;
  activityOperations: TActivityOperations;
  ends: "top" | "bottom" | undefined;
  showAccessSpecifier?: boolean;
};

export const IssueCommentCard: FC<TIssueCommentCard> = (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<any>(null);
  const showEditorRef = useRef<any>(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<Partial<TIssueComment>>({
    defaultValues: { comment_html: comment?.comment_html },
  });

  const onEnter = (formData: Partial<TIssueComment>) => {
    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") === "<p></p>" ||
    isEmptyHtmlString(watch("comment_html") ?? "");

  if (!comment || !currentUser) return <></>;
  return (
    <IssueCommentBlock
      commentId={commentId}
      quickActions={
        <>
          {currentUser?.id === comment.actor && (
            <CustomMenu ellipsis>
              <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
                <Pencil className="h-3 w-3" />
                Edit comment
              </CustomMenu.MenuItem>
              {showAccessSpecifier && (
                <>
                  {comment.access === "INTERNAL" ? (
                    <CustomMenu.MenuItem
                      onClick={() => activityOperations.updateComment(comment.id, { access: "EXTERNAL" })}
                      className="flex items-center gap-1"
                    >
                      <Globe2 className="h-3 w-3" />
                      Switch to public comment
                    </CustomMenu.MenuItem>
                  ) : (
                    <CustomMenu.MenuItem
                      onClick={() => activityOperations.updateComment(comment.id, { access: "INTERNAL" })}
                      className="flex items-center gap-1"
                    >
                      <Lock className="h-3 w-3" />
                      Switch to private comment
                    </CustomMenu.MenuItem>
                  )}
                </>
              )}
              <CustomMenu.MenuItem
                onClick={() => activityOperations.removeComment(comment.id)}
                className="flex items-center gap-1"
              >
                <Trash2 className="h-3 w-3" />
                Delete comment
              </CustomMenu.MenuItem>
            </CustomMenu>
          )}
        </>
      }
      ends={ends}
    >
      <>
        <form className={`flex-col gap-2 ${isEditing ? "flex" : "hidden"}`}>
          <div
            onKeyDown={(e) => {
              if (e.key === "Enter" && !e.shiftKey && !isEmpty) {
                handleSubmit(onEnter)(e);
              }
            }}
          >
            <LiteTextEditorWithRef
              cancelUploadImage={fileService.cancelUpload}
              uploadFile={fileService.getUploadFileFunction(comment?.workspace_detail?.slug as string)}
              deleteFile={fileService.getDeleteImageFunction(workspaceId)}
              restoreFile={fileService.getRestoreImageFunction(workspaceId)}
              ref={editorRef}
              value={watch("comment_html") ?? ""}
              debouncedUpdatesEnabled={false}
              customClassName="min-h-[50px] p-3 shadow-sm"
              onChange={(comment_json: Object, comment_html: string) => setValue("comment_html", comment_html)}
              mentionSuggestions={mentionSuggestions}
              mentionHighlights={mentionHighlights}
            />
          </div>
          <div className="flex gap-1 self-end">
            <button
              type="button"
              onClick={handleSubmit(onEnter)}
              disabled={isSubmitting || isEmpty}
              className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
            >
              <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" />
            </button>
            <button
              type="button"
              className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
              onClick={() => setIsEditing(false)}
            >
              <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
            </button>
          </div>
        </form>
        <div className={`relative ${isEditing ? "hidden" : ""}`}>
          {showAccessSpecifier && (
            <div className="absolute right-2.5 top-2.5 z-[1] text-custom-text-300">
              {comment.access === "INTERNAL" ? <Lock className="h-3 w-3" /> : <Globe2 className="h-3 w-3" />}
            </div>
          )}
          <LiteReadOnlyEditorWithRef
            ref={showEditorRef}
            value={comment.comment_html ?? ""}
            customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
            mentionHighlights={mentionHighlights}
          />

          <IssueCommentReaction
            workspaceSlug={workspaceSlug}
            projectId={comment?.project_detail?.id}
            commentId={comment.id}
            currentUser={currentUser}
          />
        </div>
      </>
    </IssueCommentBlock>
  );
};