import React from "react"; import { useRouter } from "next/router"; import { useForm, Controller } from "react-hook-form"; // services import { FileService } from "services/file.service"; // components import { LiteTextEditorWithRef } from "@plane/lite-text-editor"; // ui import { Button, Tooltip } from "@plane/ui"; import { Globe2, Lock } from "lucide-react"; // types import type { IIssueComment } from "types"; import useEditorSuggestions from "hooks/use-editor-suggestions"; const defaultValues: Partial = { access: "INTERNAL", comment_html: "", }; type IIssueCommentEditor = { disabled?: boolean; onSubmit: (data: IIssueComment) => Promise; showAccessSpecifier?: boolean; }; type commentAccessType = { icon: any; key: string; label: "Private" | "Public"; }; const commentAccess: commentAccessType[] = [ { icon: Lock, key: "INTERNAL", label: "Private", }, { icon: Globe2, key: "EXTERNAL", label: "Public", }, ]; // services const fileService = new FileService(); export const IssueCommentEditor: React.FC = (props) => { const { disabled = false, onSubmit, showAccessSpecifier = false } = props; const editorRef = React.useRef(null); const router = useRouter(); const { workspaceSlug, projectId } = router.query; const editorSuggestions = useEditorSuggestions(workspaceSlug as string | undefined, projectId as string | undefined) const { control, formState: { isSubmitting }, handleSubmit, reset, } = useForm({ defaultValues }); const handleAddComment = async (formData: IIssueComment) => { if (!formData.comment_html || isSubmitting) return; await onSubmit(formData).then(() => { reset(defaultValues); editorRef.current?.clearEditor(); }); }; return (
{showAccessSpecifier && (
(
{commentAccess.map((access) => ( ))}
)} />
)} ( (

" : commentValue} customClassName="p-3 min-h-[100px] shadow-sm" debouncedUpdatesEnabled={false} mentionSuggestions={editorSuggestions.mentionSuggestions} mentionHighlights={editorSuggestions.mentionHighlights} onChange={(comment_json: Object, comment_html: string) => onCommentChange(comment_html)} commentAccessSpecifier={{ accessValue, onAccessChange, showAccessSpecifier, commentAccess }} /> )} /> )} />
); };