27e58d91af
Replace three divergent data paths (Marked HTML loading, regex post-processing saving, separate paste parsing) with one symmetric path through @tiptap/markdown. Key changes: - Create features/editor/ module with ContentEditor (unified edit+readonly) and TitleEditor, replacing components/common/ editor files - Load content via contentType: 'markdown' instead of markdownToHtml() hack - Save content via editor.getMarkdown() directly, no post-processing - Merge RichTextEditor + ReadonlyEditor into single ContentEditor with editable prop - Extract extensions into separate modules (mention, file-upload, markdown-paste, submit-shortcut, code-block-view) - Extract shared preprocessMentionShortcodes to components/markdown/mentions.ts - Add copyMarkdown utility for clipboard operations - Upgrade all @tiptap packages from 3.20.5 to 3.22.1 (lexer isolation fix, HTML entity roundtrip fix, table alignment support) - Delete markdownToHtml.ts, readonly-editor.tsx, and 10 old component files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useState } from "react";
|
|
import { ArrowUp, Loader2 } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ContentEditor, type ContentEditorRef } from "@/features/editor";
|
|
import { FileUploadButton } from "@/components/common/file-upload-button";
|
|
import { useFileUpload } from "@/shared/hooks/use-file-upload";
|
|
|
|
interface CommentInputProps {
|
|
issueId: string;
|
|
onSubmit: (content: string, attachmentIds?: string[]) => Promise<void>;
|
|
}
|
|
|
|
function CommentInput({ issueId, onSubmit }: CommentInputProps) {
|
|
const editorRef = useRef<ContentEditorRef>(null);
|
|
const [isEmpty, setIsEmpty] = useState(true);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const { uploadWithToast } = useFileUpload();
|
|
|
|
const handleUpload = async (file: File) => {
|
|
return await uploadWithToast(file, { issueId });
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
const content = editorRef.current?.getMarkdown()?.replace(/(\n\s*)+$/, "").trim();
|
|
if (!content || submitting) return;
|
|
setSubmitting(true);
|
|
try {
|
|
await onSubmit(content);
|
|
editorRef.current?.clearContent();
|
|
setIsEmpty(true);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="relative flex max-h-56 flex-col rounded-lg bg-card pb-8 ring-1 ring-border">
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-3 py-2">
|
|
<ContentEditor
|
|
ref={editorRef}
|
|
placeholder="Leave a comment..."
|
|
onUpdate={(md) => setIsEmpty(!md.trim())}
|
|
onSubmit={handleSubmit}
|
|
onUploadFile={handleUpload}
|
|
debounceMs={100}
|
|
/>
|
|
</div>
|
|
<div className="absolute bottom-1 right-1.5 flex items-center gap-1">
|
|
<FileUploadButton
|
|
size="sm"
|
|
onSelect={(file) => editorRef.current?.uploadFile(file)}
|
|
/>
|
|
<Button
|
|
size="icon-xs"
|
|
disabled={isEmpty || submitting}
|
|
onClick={handleSubmit}
|
|
>
|
|
{submitting ? (
|
|
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
|
) : (
|
|
<ArrowUp className="h-3.5 w-3.5" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { CommentInput };
|