forked from github/plane
89 lines
2.8 KiB
TypeScript
89 lines
2.8 KiB
TypeScript
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 [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(() => {
|
|
setDescriptionHTML(value);
|
|
}, [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}
|
|
/>
|
|
);
|
|
};
|