139 lines
3.8 KiB
TypeScript
139 lines
3.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Bold,
|
|
Italic,
|
|
List,
|
|
ListOrdered,
|
|
Heading1,
|
|
Heading2,
|
|
Quote,
|
|
MoreVertical,
|
|
X
|
|
} from 'lucide-react';
|
|
|
|
const NoteEditor = () => {
|
|
const [content, setContent] = useState('');
|
|
const [isToolbarOpen, setIsToolbarOpen] = useState(false);
|
|
const [viewportHeight, setViewportHeight] = useState('100vh');
|
|
|
|
// Handle viewport resize when keyboard appears
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
const visualViewport = window.visualViewport;
|
|
if (visualViewport) {
|
|
setViewportHeight(`${visualViewport.height}px`);
|
|
}
|
|
};
|
|
|
|
window.visualViewport?.addEventListener('resize', handleResize);
|
|
window.visualViewport?.addEventListener('scroll', handleResize);
|
|
|
|
return () => {
|
|
window.visualViewport?.removeEventListener('resize', handleResize);
|
|
window.visualViewport?.removeEventListener('scroll', handleResize);
|
|
};
|
|
}, []);
|
|
|
|
const execCommand = (command, value = false) => {
|
|
document.execCommand(command, false, value);
|
|
};
|
|
|
|
const ToolbarButton = ({ icon: Icon, command, value, label }) => (
|
|
<Button
|
|
variant="ghost"
|
|
size="lg"
|
|
className="p-4 h-auto flex flex-col items-center gap-1"
|
|
onClick={() => {
|
|
execCommand(command, value);
|
|
// Don't close toolbar for formatting commands
|
|
if (command === 'save') setIsToolbarOpen(false);
|
|
}}
|
|
>
|
|
<Icon className="w-6 h-6" />
|
|
<span className="text-xs">{label}</span>
|
|
</Button>
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 flex flex-col"
|
|
style={{ height: viewportHeight }}
|
|
>
|
|
{/* Main toolbar button */}
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
className="fixed top-2 right-2 z-20"
|
|
onClick={() => setIsToolbarOpen(!isToolbarOpen)}
|
|
>
|
|
{isToolbarOpen ? <X className="w-4 h-4" /> : <MoreVertical className="w-4 h-4" />}
|
|
</Button>
|
|
|
|
{/* Expandable toolbar */}
|
|
{isToolbarOpen && (
|
|
<Card className="absolute top-12 right-2 z-10 p-2 shadow-lg">
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<ToolbarButton
|
|
icon={Bold}
|
|
command="bold"
|
|
label="Bold"
|
|
/>
|
|
<ToolbarButton
|
|
icon={Italic}
|
|
command="italic"
|
|
label="Italic"
|
|
/>
|
|
<ToolbarButton
|
|
icon={List}
|
|
command="insertUnorderedList"
|
|
label="Bullet List"
|
|
/>
|
|
<ToolbarButton
|
|
icon={ListOrdered}
|
|
command="insertOrderedList"
|
|
label="Numbered List"
|
|
/>
|
|
<ToolbarButton
|
|
icon={Heading1}
|
|
command="formatBlock"
|
|
value="<h1>"
|
|
label="Heading 1"
|
|
/>
|
|
<ToolbarButton
|
|
icon={Heading2}
|
|
command="formatBlock"
|
|
value="<h2>"
|
|
label="Heading 2"
|
|
/>
|
|
<ToolbarButton
|
|
icon={Quote}
|
|
command="formatBlock"
|
|
value="<blockquote>"
|
|
label="Quote"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Editor area */}
|
|
<div className="flex-1 overflow-auto">
|
|
<div
|
|
className="min-h-full p-4 focus:outline-none"
|
|
contentEditable={true}
|
|
onInput={(e) => setContent(e.currentTarget.innerHTML)}
|
|
suppressContentEditableWarning={true}
|
|
style={{
|
|
WebkitUserSelect: 'text',
|
|
WebkitTouchCallout: 'none',
|
|
overflowY: 'auto',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NoteEditor;
|