97 lines
2.7 KiB
TypeScript
97 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Image, FileText, Link, List } from 'lucide-react';
|
|
|
|
interface Note {
|
|
id: string;
|
|
title: string;
|
|
content: string;
|
|
lastEdited: Date;
|
|
category?: string;
|
|
tags?: string[];
|
|
}
|
|
|
|
interface EditorProps {
|
|
note?: Note | null;
|
|
onSave?: (note: Note) => 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,
|
|
lastEdited: new Date(),
|
|
category: note.category,
|
|
tags: note.tags
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-carnet-bg">
|
|
{/* Title Bar */}
|
|
<div className="p-4 border-b border-carnet-border">
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={handleTitleChange}
|
|
placeholder="Titre"
|
|
className="w-full text-xl font-semibold text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none bg-transparent"
|
|
/>
|
|
</div>
|
|
|
|
{/* Toolbar */}
|
|
<div className="px-4 py-2 border-b border-carnet-border">
|
|
<div className="flex space-x-1">
|
|
<button className="p-1.5 rounded hover:bg-carnet-hover">
|
|
<List className="h-4 w-4 text-carnet-text-muted" />
|
|
</button>
|
|
<button className="p-1.5 rounded hover:bg-carnet-hover">
|
|
<Link className="h-4 w-4 text-carnet-text-muted" />
|
|
</button>
|
|
<button className="p-1.5 rounded hover:bg-carnet-hover">
|
|
<Image className="h-4 w-4 text-carnet-text-muted" />
|
|
</button>
|
|
<button
|
|
className="p-1.5 rounded hover:bg-carnet-hover"
|
|
onClick={handleSave}
|
|
>
|
|
<FileText className="h-4 w-4 text-carnet-text-muted" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Editor Area */}
|
|
<div className="flex-1 p-4">
|
|
<textarea
|
|
value={content}
|
|
onChange={handleContentChange}
|
|
placeholder="Ecrire..."
|
|
className="w-full h-full resize-none focus:outline-none bg-transparent text-carnet-text-primary placeholder-carnet-text-muted"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|