plane/web/components/issues/description-input.tsx

import { FC, useState, useEffect } from "react";
// components
import { RichReadOnlyEditor, RichTextEditor } from "@plane/rich-text-editor";
import { Loader } from "@plane/ui";
// hooks
import { useMention, useWorkspace } from "@/hooks/store";
import useDebounce from "@/hooks/use-debounce";
// services
import { FileService } from "@/services/file.service";
const fileService = new FileService();
// types
import { TIssueOperations } from "./issue-detail";

export type IssueDescriptionInputProps = {
  workspaceSlug: string;
  projectId: string;
  issueId: string;
  value: string | undefined;
  initialValue: string | undefined;
  disabled?: boolean;
  issueOperations: TIssueOperations;
  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
};

export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = (props) => {
  const { workspaceSlug, projectId, issueId, value, initialValue, disabled, issueOperations, setIsSubmitting } = props;
  // states
  const [localIssueId, setLocalIssueId] = useState(issueId);
  const [descriptionHTML, setDescriptionHTML] = useState(value);
  // store hooks
  const { mentionHighlights, mentionSuggestions } = useMention();
  const { getWorkspaceBySlug } = useWorkspace();
  // hooks
  const debouncedValue = useDebounce(descriptionHTML, 1500);
  // computed values
  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id as string;

  useEffect(() => {
    if (issueId !== localIssueId) {
      setDescriptionHTML(undefined);
      setLocalIssueId(issueId);
    } else {
      setDescriptionHTML(value);
    }
    return () => setDescriptionHTML(undefined);
  }, [issueId, localIssueId, value]);

  useEffect(() => {
    if (debouncedValue && debouncedValue !== value) {
      issueOperations.update(workspaceSlug, projectId, issueId, { description_html: debouncedValue }).finally(() => {
        setIsSubmitting("submitted");
      });
    }
    // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedValue]);

  if (!descriptionHTML) {
    return (
      <Loader>
        <Loader.Item height="150px" />
      </Loader>
    );
  }

  if (disabled) {
    return (
      <RichReadOnlyEditor
        value={descriptionHTML}
        customClassName="!p-0 !pt-2 text-custom-text-200"
        noBorder={disabled}
        mentionHighlights={mentionHighlights}
      />
    );
  }

  return (
    <RichTextEditor
      cancelUploadImage={fileService.cancelUpload}
      uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
      deleteFile={fileService.getDeleteImageFunction(workspaceId)}
      restoreFile={fileService.getRestoreImageFunction(workspaceId)}
      value={descriptionHTML}
      initialValue={initialValue}
      dragDropEnabled
      customClassName="min-h-[150px] shadow-sm"
      onChange={(description: any, description_html: string) => {
        setIsSubmitting("submitting");
        setDescriptionHTML(description_html === "" ? "<p></p>" : description_html);
      }}
      mentionSuggestions={mentionSuggestions}
      mentionHighlights={mentionHighlights}
    />
  );
};