import React, { useState, useRef, useEffect } from 'react';
import {
Bold,
Italic,
Underline,
Strikethrough,
List,
ListOrdered,
Quote,
Link,
Code,
Type,
Heading1,
Heading2,
Heading3,
Save,
Copy,
FileText,
Check,
Palette
} from 'lucide-react';
export default function App() {
const [content, setContent] = useState('');
const [isSaved, setIsSaved] = useState(false);
const [copied, setCopied] = useState(false);
const [theme, setTheme] = useState('light');
const textareaRef = useRef(null);
const toggleBold = () => {
document.execCommand('bold', false, null);
setIsSaved(false);
};
const toggleItalic = () => {
document.execCommand('italic', false, null);
setIsSaved(false);
};
const toggleUnderline = () => {
document.execCommand('underline', false, null);
setIsSaved(false);
};
const toggleStrikethrough = () => {
document.execCommand('strikethrough', false, null);
setIsSaved(false);
};
const toggleBulletList = () => {
document.execCommand('insertUnorderedList', false, null);
setIsSaved(false);
};
const toggleNumberedList = () => {
document.execCommand('insertOrderedList', false, null);
setIsSaved(false);
};
const toggleBlockquote = () => {
document.execCommand('formatBlock', false, 'blockquote');
setIsSaved(false);
};
const toggleCode = () => {
document.execCommand('formatBlock', false, 'pre');
setIsSaved(false);
};
const addLink = () => {
const url = prompt('URL girin:');
if (url) {
document.execCommand('createLink', false, url);
setIsSaved(false);
}
};
const formatHeading = (level) => {
document.execCommand('formatBlock', false, `h${level}`);
setIsSaved(false);
};
const handleContentChange = () => {
const newContent = textareaRef.current.innerHTML;
setContent(newContent);
setIsSaved(false);
};
const saveContent = () => {
setIsSaved(true);
setTimeout(() => setIsSaved(false), 2000);
};
const copyContent = () => {
navigator.clipboard.writeText(content);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
const toolbarButtons = [
{ icon: Bold, label: 'Kalın', action: toggleBold, shortcut: 'Ctrl+B' },
{ icon: Italic, label: 'İtalik', action: toggleItalic, shortcut: 'Ctrl+I' },
{ icon: Underline, label: 'Altı Çizili', action: toggleUnderline, shortcut: 'Ctrl+U' },
{ icon: Strikethrough, label: 'Üstü Çizili', action: toggleStrikethrough },
{ icon: List, label: 'Madde İşareti', action: toggleBulletList },
{ icon: ListOrdered, label: 'Numaralı Liste', action: toggleNumberedList },
{ icon: Quote, label: 'Alıntı', action: toggleBlockquote },
{ icon: Code, label: 'Kod Bloğu', action: toggleCode },
{ icon: Link, label: 'Link', action: addLink, shortcut: 'Ctrl+K' },
{ icon: Heading1, label: 'Başlık 1', action: () => formatHeading(1) },
{ icon: Heading2, label: 'Başlık 2', action: () => formatHeading(2) },
{ icon: Heading3, label: 'Başlık 3', action: () => formatHeading(3) },
];
return (
<div className={`min-h-screen transition-colors duration-300 ${theme === 'light' ? 'bg-gray-50 text-gray-900' : 'bg-gray-900 text-gray-100'}`}>
<div className="container mx-auto px-4 py-8 max-w-6xl">
{/* Başlık */}
<div className="flex items-center justify-between mb-8">
<div className="flex items-center space-x-3">
<FileText className="w-8 h-8 text-blue-600" />
<h1 className="text-3xl font-bold">Metin Editörü</h1>
</div>
<div className="flex items-center space-x-4">
<button
onClick={toggleTheme}
className={`p-2 rounded-lg transition-colors ${
theme === 'light'
? 'bg-gray-200 hover:bg-gray-300 text-gray-700'
: 'bg-gray-700 hover:bg-gray-600 text-gray-300'
}`}
title="Temayı Değiştir"
>
<Palette className="w-5 h-5" />
</button>
<button
onClick={copyContent}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
copied
? 'bg-green-500 text-white'
: theme === 'light'
? 'bg-gray-200 hover:bg-gray-300 text-gray-700'
: 'bg-gray-700 hover:bg-gray-600 text-gray-300'
}`}
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
<span>{copied ? 'Kopyalandı!' : 'Kopyala'}</span>
</button>
<button
onClick={saveContent}
className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-colors ${
isSaved
? 'bg-green-500 text-white'
: theme === 'light'
? 'bg-blue-600 hover:bg-blue-700 text-white'
: 'bg-blue-500 hover:bg-blue-600 text-white'
}`}
>
{isSaved ? <Check className="w-4 h-4" /> : <Save className="w-4 h-4" />}
<span>{isSaved ? 'Kaydedildi!' : 'Kaydet'}</span>
</button>
</div>
</div>
{/* Araç Çubuğu */}
<div className={`flex flex-wrap items-center gap-2 p-4 rounded-lg mb-4 ${
theme === 'light' ? 'bg-white shadow-sm' : 'bg-gray-800'
}`}>
{toolbarButtons.map(({ icon: Icon, label, action, shortcut }, index) => (
<button
key={index}
onClick={action}
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium transition-colors hover:bg-opacity-20 ${
theme === 'light'
? 'hover:bg-gray-200 text-gray-700'
: 'hover:bg-gray-600 text-gray-300'
}`}
title={`${label} ${shortcut ? `(${shortcut})` : ''}`}
>
<Icon className="w-4 h-4" />
<span className="hidden sm:inline">{label}</span>
</button>
))}
</div>
{/* Editör */}
<div className="relative">
<div
ref={textareaRef}
contentEditable
onInput={handleContentChange}
className={`w-full min-h-96 p-6 rounded-lg border-2 focus:border-blue-500 focus:outline-none transition-colors resize-none ${
theme === 'light'
? 'bg-white border-gray-200 shadow-sm'
: 'bg-gray-800 border-gray-700 text-gray-100'
}`}
placeholder="İçeriğinizi buraya yazmaya başlayın..."
/>
{/* Karakter Sayacı */}
<div className={`absolute bottom-2 right-2 text-xs ${
theme === 'light' ? 'text-gray-500' : 'text-gray-400'
}`}>
{content.length} karakter
</div>
</div>
{/* Önizleme Bölümü */}
<div className="mt-8">
<h2 className="text-xl font-semibold mb-4 flex items-center">
<Type className="w-5 h-5 mr-2" />
Önizleme
</h2>
<div className={`p-6 rounded-lg border-2 ${
theme === 'light'
? 'bg-white border-gray-200 shadow-sm'
: 'bg-gray-800 border-gray-700'
}`}>
{content ? (
<div
dangerouslySetInnerHTML={{ __html: content }}
className="prose prose-lg max-w-none"
/>
) : (
<p className={theme === 'light' ? 'text-gray-400' : 'text-gray-500'}>
Biçimlendirilmiş içeriğiniz burada görünecek...
</p>
)}
</div>
</div>
</div>
</div>
);
}