124 lines
3.5 KiB
TypeScript
124 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Image, FileText, Link, List } from 'lucide-react';
|
|
|
|
interface Note {
|
|
id: string;
|
|
title: string;
|
|
lastModified: string;
|
|
size: number;
|
|
type: string;
|
|
mime: string;
|
|
etag: string;
|
|
content?: 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 || '');
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fetchNoteContent = async () => {
|
|
if (note?.id) {
|
|
try {
|
|
setLoading(true);
|
|
const response = await fetch(`/api/nextcloud/files/${encodeURIComponent(note.id)}`);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch note content');
|
|
}
|
|
const data = await response.json();
|
|
setContent(data.content || '');
|
|
} catch (err) {
|
|
console.error('Error fetching note content:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
if (note) {
|
|
setTitle(note.title);
|
|
fetchNoteContent();
|
|
} else {
|
|
setTitle('');
|
|
setContent('');
|
|
}
|
|
}, [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?.({
|
|
...note,
|
|
title,
|
|
content
|
|
});
|
|
}
|
|
};
|
|
|
|
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">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-primary"></div>
|
|
</div>
|
|
) : (
|
|
<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>
|
|
);
|
|
};
|