111 lines
2.7 KiB
TypeScript
111 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Save } from 'lucide-react';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
// Dynamically import the editor to avoid SSR issues
|
|
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
|
|
import 'react-quill/dist/quill.snow.css';
|
|
|
|
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;
|
|
currentFolder: string;
|
|
}
|
|
|
|
export function Editor({ note, onSave, currentFolder }: EditorProps) {
|
|
const [content, setContent] = useState('');
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (note?.content) {
|
|
setIsLoading(true);
|
|
setContent(note.content);
|
|
setIsLoading(false);
|
|
} else {
|
|
setContent('');
|
|
}
|
|
}, [note]);
|
|
|
|
const handleSave = async () => {
|
|
if (!note) return;
|
|
|
|
setIsSaving(true);
|
|
try {
|
|
const updatedNote = {
|
|
...note,
|
|
content,
|
|
lastModified: new Date().toISOString(),
|
|
size: content.length
|
|
};
|
|
onSave(updatedNote);
|
|
} catch (error) {
|
|
console.error('Failed to save note:', error);
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="p-4">
|
|
<div className="h-4 w-full bg-gray-200 rounded animate-pulse"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!note) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<p className="text-gray-500">Select a note to edit</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between p-4 border-b">
|
|
<h2 className="text-xl font-semibold">{note.title}</h2>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving}
|
|
className="flex items-center space-x-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
<Save className="h-4 w-4" />
|
|
<span>{isSaving ? 'Saving...' : 'Save'}</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
<ReactQuill
|
|
theme="snow"
|
|
value={content}
|
|
onChange={setContent}
|
|
className="h-full"
|
|
modules={{
|
|
toolbar: [
|
|
[{ header: [1, 2, 3, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ list: 'ordered' }, { list: 'bullet' }],
|
|
['link', 'image'],
|
|
['clean']
|
|
]
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|