83 lines
2.0 KiB
TypeScript
83 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Image, FileText } from 'lucide-react';
|
|
|
|
interface EditorProps {
|
|
note?: {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
};
|
|
onSave?: (note: { id: string; title: string; content: string }) => void;
|
|
}
|
|
|
|
export const Editor: React.FC<EditorProps> = ({ note, onSave }) => {
|
|
const [title, setTitle] = useState(note?.title || '');
|
|
const [content, setContent] = useState(note?.content || '');
|
|
|
|
useEffect(() => {
|
|
if (note) {
|
|
setTitle(note.title);
|
|
setContent(note.content);
|
|
}
|
|
}, [note]);
|
|
|
|
const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setTitle(e.target.value);
|
|
};
|
|
|
|
const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setContent(e.target.value);
|
|
};
|
|
|
|
const handleSave = () => {
|
|
if (note?.id) {
|
|
onSave?.({
|
|
id: note.id,
|
|
title,
|
|
content
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
{/* Title Bar */}
|
|
<div className="p-4 border-b">
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={handleTitleChange}
|
|
placeholder="Note title"
|
|
className="w-full text-xl font-semibold focus:outline-none bg-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* Editor Area */}
|
|
<div className="flex-1 p-4">
|
|
<textarea
|
|
value={content}
|
|
onChange={handleContentChange}
|
|
placeholder="Start writing..."
|
|
className="w-full h-full resize-none focus:outline-none bg-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* Toolbar */}
|
|
<div className="p-4 border-t">
|
|
<div className="flex space-x-2">
|
|
<button
|
|
className="p-2 text-gray-500 hover:text-gray-700"
|
|
onClick={handleSave}
|
|
>
|
|
<FileText className="h-5 w-5" />
|
|
</button>
|
|
<button className="p-2 text-gray-500 hover:text-gray-700">
|
|
<Image className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|