73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
import React, { useState } from "react";
|
|
import { marked } from "marked";
|
|
import type { CommentData } from "../../types/comments";
|
|
|
|
interface CommentFormProps {
|
|
onAdd: (comment: CommentData) => void;
|
|
}
|
|
|
|
const CommentForm: React.FC<CommentFormProps> = ({ onAdd }) => {
|
|
const [text, setText] = useState<string>("");
|
|
const [markdownEnabled, setMarkdownEnabled] = useState<boolean>(false);
|
|
const [preview, setPreview] = useState<boolean>(false);
|
|
|
|
function handleSubmit() {
|
|
if (!text.trim()) return;
|
|
|
|
const newComment: CommentData = {
|
|
user_name: "User",
|
|
comment_text: text,
|
|
created_at: new Date().toISOString(),
|
|
markdown_enabled: markdownEnabled,
|
|
};
|
|
|
|
onAdd(newComment);
|
|
setText("");
|
|
setPreview(false);
|
|
}
|
|
|
|
return (
|
|
<div className="comment-form">
|
|
<textarea
|
|
placeholder="Add a comment..."
|
|
value={text}
|
|
onChange={(e) => setText(e.target.value)}
|
|
/>
|
|
|
|
<div className="comment-controls">
|
|
<label className="toggle-label">
|
|
<input
|
|
type="checkbox"
|
|
checked={markdownEnabled}
|
|
onChange={() => setMarkdownEnabled((prev) => !prev)}
|
|
/>
|
|
Enable Markdown
|
|
</label>
|
|
|
|
<label className="toggle-label">
|
|
<input
|
|
type="checkbox"
|
|
disabled={!markdownEnabled}
|
|
checked={preview}
|
|
onChange={() => setPreview((prev) => !prev)}
|
|
/>
|
|
Preview Markdown
|
|
</label>
|
|
|
|
<button className="btn" onClick={handleSubmit}>
|
|
Add Comment
|
|
</button>
|
|
</div>
|
|
|
|
{markdownEnabled && preview && (
|
|
<div
|
|
className="markdown-preview"
|
|
dangerouslySetInnerHTML={{ __html: marked(text) }}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommentForm;
|