Compare commits
No commits in common. "5371f1ba22b93d184f0b806ebe5dc668cceb0147" and "79c72517c295e77e3614b026b98359fdb09c6265" have entirely different histories.
5371f1ba22
...
79c72517c2
@ -1,4 +1,4 @@
|
||||
import React, { useRef, useEffect, useState, useCallback } from 'react';
|
||||
import React, { useRef, useEffect } from 'react';
|
||||
import {
|
||||
Bold,
|
||||
Italic,
|
||||
@ -8,16 +8,13 @@ import {
|
||||
Heading3,
|
||||
List,
|
||||
ListOrdered,
|
||||
Link as LinkIcon,
|
||||
Link,
|
||||
AlignRight,
|
||||
AlignCenter,
|
||||
AlignLeft,
|
||||
Palette,
|
||||
PaintBucket,
|
||||
Undo,
|
||||
Redo,
|
||||
Code,
|
||||
RemoveFormatting,
|
||||
} from 'lucide-react';
|
||||
|
||||
interface RichTextEditorProps {
|
||||
@ -27,7 +24,7 @@ interface RichTextEditorProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const PRESET_COLORS = [
|
||||
const COLORS = [
|
||||
{ label: 'سیاه / پیشفرض', value: '#111827' },
|
||||
{ label: 'خاکستری', value: '#4b5563' },
|
||||
{ label: 'آبی کنینا', value: '#1d4ed8' },
|
||||
@ -37,29 +34,6 @@ const PRESET_COLORS = [
|
||||
{ label: 'کهربایی / زرد', value: '#d97706' },
|
||||
];
|
||||
|
||||
const PRESET_BG_COLORS = [
|
||||
{ label: 'بیرنگ / حذف پسزمینه', value: 'transparent' },
|
||||
{ label: 'هایلایت زرد', value: '#fef08a' },
|
||||
{ label: 'هایلایت آبی', value: '#dbeafe' },
|
||||
{ label: 'هایلایت بنفش', value: '#f3e8ff' },
|
||||
{ label: 'هایلایت سبز', value: '#dcfce7' },
|
||||
{ label: 'هایلایت قرمز', value: '#fee2e2' },
|
||||
{ label: 'خاکستری ملایم', value: '#f3f4f6' },
|
||||
];
|
||||
|
||||
interface ActiveStates {
|
||||
isBold: boolean;
|
||||
isItalic: boolean;
|
||||
isUnderline: boolean;
|
||||
isH1: boolean;
|
||||
isH2: boolean;
|
||||
isH3: boolean;
|
||||
isP: boolean;
|
||||
isUL: boolean;
|
||||
isOL: boolean;
|
||||
align: 'right' | 'center' | 'left' | 'justify';
|
||||
}
|
||||
|
||||
export default function RichTextEditor({
|
||||
value,
|
||||
onChange,
|
||||
@ -69,81 +43,8 @@ export default function RichTextEditor({
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const isTypingRef = useRef(false);
|
||||
const isMountedRef = useRef(false);
|
||||
const [isCodeMode, setIsCodeMode] = useState(false);
|
||||
const [showColorPicker, setShowColorPicker] = useState(false);
|
||||
const [showBgColorPicker, setShowBgColorPicker] = useState(false);
|
||||
const [customColor, setCustomColor] = useState('#111827');
|
||||
const [customBgColor, setCustomBgColor] = useState('#fef08a');
|
||||
|
||||
const [activeStates, setActiveStates] = useState<ActiveStates>({
|
||||
isBold: false,
|
||||
isItalic: false,
|
||||
isUnderline: false,
|
||||
isH1: false,
|
||||
isH2: false,
|
||||
isH3: false,
|
||||
isP: false,
|
||||
isUL: false,
|
||||
isOL: false,
|
||||
align: 'right',
|
||||
});
|
||||
|
||||
// Query formatting states on cursor/selection change
|
||||
const updateActiveStates = useCallback(() => {
|
||||
if (!editorRef.current || isCodeMode) return;
|
||||
try {
|
||||
const doc = document as any;
|
||||
const isBold = doc.queryCommandState ? doc.queryCommandState('bold') : false;
|
||||
const isItalic = doc.queryCommandState ? doc.queryCommandState('italic') : false;
|
||||
const isUnderline = doc.queryCommandState ? doc.queryCommandState('underline') : false;
|
||||
const isUL = doc.queryCommandState ? doc.queryCommandState('insertUnorderedList') : false;
|
||||
const isOL = doc.queryCommandState ? doc.queryCommandState('insertOrderedList') : false;
|
||||
|
||||
let block = (doc.queryCommandValue ? doc.queryCommandValue('formatBlock') : '') || '';
|
||||
block = block.toLowerCase().replace(/[<>]/g, '');
|
||||
|
||||
// Check parent tag if queryCommandValue is ambiguous
|
||||
const selection = window.getSelection();
|
||||
let parentTag = '';
|
||||
if (selection && selection.rangeCount > 0) {
|
||||
let node: Node | null = selection.getRangeAt(0).commonAncestorContainer;
|
||||
if (node && node.nodeType === 3 && node.parentNode) {
|
||||
node = node.parentNode;
|
||||
}
|
||||
while (node && node !== editorRef.current) {
|
||||
const tag = (node as HTMLElement).tagName?.toLowerCase();
|
||||
if (['h1', 'h2', 'h3', 'p', 'ul', 'ol'].includes(tag)) {
|
||||
parentTag = tag;
|
||||
break;
|
||||
}
|
||||
node = node.parentNode;
|
||||
}
|
||||
}
|
||||
|
||||
const activeBlock = parentTag || block;
|
||||
|
||||
setActiveStates({
|
||||
isBold,
|
||||
isItalic,
|
||||
isUnderline,
|
||||
isH1: activeBlock === 'h1',
|
||||
isH2: activeBlock === 'h2',
|
||||
isH3: activeBlock === 'h3',
|
||||
isP: activeBlock === 'p' || (!['h1', 'h2', 'h3'].includes(activeBlock) && !isUL && !isOL),
|
||||
isUL,
|
||||
isOL,
|
||||
align: doc.queryCommandState && doc.queryCommandState('justifyCenter')
|
||||
? 'center'
|
||||
: doc.queryCommandState && doc.queryCommandState('justifyLeft')
|
||||
? 'left'
|
||||
: 'right',
|
||||
});
|
||||
} catch {
|
||||
// Ignored if document commands aren't ready
|
||||
}
|
||||
}, [isCodeMode]);
|
||||
|
||||
// Sync value from props on initial mount or when external change occurs
|
||||
// Sync value from props on initial mount or when external change occurs (not while active)
|
||||
useEffect(() => {
|
||||
if (!editorRef.current) return;
|
||||
if (!isMountedRef.current) {
|
||||
@ -152,43 +53,22 @@ export default function RichTextEditor({
|
||||
return;
|
||||
}
|
||||
|
||||
// Only update innerHTML if it's different and not currently focused/typing
|
||||
if (editorRef.current.innerHTML !== (value || '')) {
|
||||
if (!isTypingRef.current && document.activeElement !== editorRef.current) {
|
||||
editorRef.current.innerHTML = value || '';
|
||||
}
|
||||
}
|
||||
}, [value, isCodeMode]);
|
||||
}, [value]);
|
||||
|
||||
const exec = (command: string, val: string | undefined = undefined) => {
|
||||
if (isCodeMode) return;
|
||||
editorRef.current?.focus();
|
||||
document.execCommand(command, false, val);
|
||||
if (editorRef.current) {
|
||||
onChange(editorRef.current.innerHTML);
|
||||
}
|
||||
setTimeout(updateActiveStates, 20);
|
||||
};
|
||||
|
||||
// Robust formatBlock handler for H1, H2, H3, P
|
||||
const setBlockTag = (tagName: 'h1' | 'h2' | 'h3' | 'p') => {
|
||||
if (isCodeMode) return;
|
||||
editorRef.current?.focus();
|
||||
|
||||
// Cross-browser formatBlock
|
||||
const blockValue = `<${tagName}>`;
|
||||
const success = document.execCommand('formatBlock', false, blockValue);
|
||||
if (!success) {
|
||||
document.execCommand('formatBlock', false, tagName);
|
||||
}
|
||||
|
||||
if (editorRef.current) {
|
||||
onChange(editorRef.current.innerHTML);
|
||||
}
|
||||
setTimeout(updateActiveStates, 20);
|
||||
};
|
||||
|
||||
const handleLink = () => {
|
||||
if (isCodeMode) return;
|
||||
const url = prompt('آدرس لینک (URL) را وارد کنید:', 'https://');
|
||||
if (url) {
|
||||
exec('createLink', url);
|
||||
@ -202,167 +82,99 @@ export default function RichTextEditor({
|
||||
setTimeout(() => {
|
||||
isTypingRef.current = false;
|
||||
}, 50);
|
||||
updateActiveStates();
|
||||
}
|
||||
};
|
||||
|
||||
const clearFormatting = () => {
|
||||
exec('removeFormat');
|
||||
setBlockTag('p');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`border border-gray-200 rounded-2xl bg-white overflow-hidden shadow-xs relative ${className}`}>
|
||||
<div className={`border border-gray-200 rounded-2xl bg-white overflow-hidden shadow-xs ${className}`}>
|
||||
{/* Toolbar */}
|
||||
<div className="bg-gray-50/80 border-b border-gray-100 p-2 flex flex-wrap items-center gap-1 text-gray-700 select-none">
|
||||
<div className="bg-gray-50/80 border-b border-gray-100 p-2 flex flex-wrap items-center gap-1 text-gray-700">
|
||||
{/* Headings */}
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200 shadow-2xs">
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => setBlockTag('h1')}
|
||||
className={`px-2 py-1.5 rounded-lg text-xs font-black transition-all flex items-center gap-1 cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isH1
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-purple-700'
|
||||
}`}
|
||||
title="تگ تیتر بزرگ H1 (سئو)"
|
||||
onClick={() => exec('formatBlock', '<h1>')}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg text-xs font-bold transition-colors cursor-pointer"
|
||||
title="تگ تیتر H1 (برای سئو)"
|
||||
>
|
||||
<Heading1 className="w-3.5 h-3.5" />
|
||||
<span>H1</span>
|
||||
<Heading1 className="w-4 h-4 text-purple-700" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => setBlockTag('h2')}
|
||||
className={`px-2 py-1.5 rounded-lg text-xs font-black transition-all flex items-center gap-1 cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isH2
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-purple-600'
|
||||
}`}
|
||||
onClick={() => exec('formatBlock', '<h2>')}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg text-xs font-bold transition-colors cursor-pointer"
|
||||
title="تگ تیتر H2"
|
||||
>
|
||||
<Heading2 className="w-3.5 h-3.5" />
|
||||
<span>H2</span>
|
||||
<Heading2 className="w-4 h-4 text-purple-600" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => setBlockTag('h3')}
|
||||
className={`px-2 py-1.5 rounded-lg text-xs font-black transition-all flex items-center gap-1 cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isH3
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100 hover:text-purple-500'
|
||||
}`}
|
||||
onClick={() => exec('formatBlock', '<h3>')}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg text-xs font-bold transition-colors cursor-pointer"
|
||||
title="تگ تیتر H3"
|
||||
>
|
||||
<Heading3 className="w-3.5 h-3.5" />
|
||||
<span>H3</span>
|
||||
<Heading3 className="w-4 h-4 text-purple-500" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => setBlockTag('p')}
|
||||
className={`px-2.5 py-1.5 rounded-lg text-xs font-bold transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isP && !activeStates.isH1 && !activeStates.isH2 && !activeStates.isH3
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
onClick={() => exec('formatBlock', '<p>')}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg text-[11px] font-bold transition-colors cursor-pointer text-gray-600 px-2"
|
||||
title="پاراگراف عادی (P)"
|
||||
>
|
||||
P
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Basic Formats (Bold, Italic, Underline) */}
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200 shadow-2xs">
|
||||
{/* Basic Formats */}
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('bold')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isBold
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
title="بولد (ضخیم)"
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="Bold"
|
||||
>
|
||||
<Bold className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('italic')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isItalic
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
title="ایتالیک (کج)"
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="Italic"
|
||||
>
|
||||
<Italic className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('underline')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isUnderline
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
title="خط زیرین (Underline)"
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="Underline"
|
||||
>
|
||||
<Underline className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={clearFormatting}
|
||||
className="p-1.5 rounded-lg text-gray-500 hover:bg-gray-100 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-40"
|
||||
title="پاکسازی قالببندی و استایلها"
|
||||
>
|
||||
<RemoveFormatting className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Alignment */}
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200 shadow-2xs">
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('justifyRight')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.align === 'right'
|
||||
? 'bg-purple-50 text-purple-700 font-bold'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="راستچین"
|
||||
>
|
||||
<AlignRight className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('justifyCenter')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.align === 'center'
|
||||
? 'bg-purple-50 text-purple-700 font-bold'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="وسطچین"
|
||||
>
|
||||
<AlignCenter className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('justifyLeft')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.align === 'left'
|
||||
? 'bg-purple-50 text-purple-700 font-bold'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="چپچین"
|
||||
>
|
||||
<AlignLeft className="w-4 h-4" />
|
||||
@ -370,249 +182,81 @@ export default function RichTextEditor({
|
||||
</div>
|
||||
|
||||
{/* Lists & Link */}
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200 shadow-2xs">
|
||||
<div className="flex items-center gap-0.5 bg-white p-0.5 rounded-xl border border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('insertUnorderedList')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isUL
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
title="لیست بالتدار (نقطهای)"
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="لیست بالتدار"
|
||||
>
|
||||
<List className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('insertOrderedList')}
|
||||
className={`p-1.5 rounded-lg transition-all cursor-pointer disabled:opacity-40 ${
|
||||
activeStates.isOL
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
|
||||
title="لیست شمارهدار"
|
||||
>
|
||||
<ListOrdered className="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={handleLink}
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer text-blue-600 disabled:opacity-40"
|
||||
title="درج لینک اینترنتی"
|
||||
className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer text-blue-600"
|
||||
title="درج لینک"
|
||||
>
|
||||
<LinkIcon className="w-4 h-4" />
|
||||
<Link className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Text Color Picker & Custom HEX */}
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => {
|
||||
setShowColorPicker(!showColorPicker);
|
||||
setShowBgColorPicker(false);
|
||||
}}
|
||||
className={`flex items-center gap-1.5 bg-white px-2.5 py-1.5 rounded-xl border border-gray-200 shadow-2xs text-xs font-bold cursor-pointer disabled:opacity-40 ${
|
||||
showColorPicker ? 'ring-2 ring-purple-500 bg-purple-50' : 'hover:bg-gray-50'
|
||||
}`}
|
||||
title="انتخاب رنگ متن"
|
||||
>
|
||||
<Palette className="w-3.5 h-3.5 text-purple-600" />
|
||||
<span>رنگ متن</span>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full border border-black/20"
|
||||
style={{ backgroundColor: customColor }}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{showColorPicker && (
|
||||
<div className="absolute top-full right-0 mt-1.5 p-3 bg-white rounded-2xl shadow-xl border border-gray-200 z-50 w-56 space-y-2.5 font-vazir text-right">
|
||||
<span className="text-[11px] font-bold text-gray-500 block">رنگهای پیشنهادی:</span>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{PRESET_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
exec('foreColor', c.value);
|
||||
setCustomColor(c.value);
|
||||
setShowColorPicker(false);
|
||||
}}
|
||||
className="w-6 h-6 rounded-lg border border-black/10 cursor-pointer hover:scale-110 transition-transform"
|
||||
style={{ backgroundColor: c.value }}
|
||||
title={c.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-gray-100 flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={customColor}
|
||||
onChange={(e) => {
|
||||
setCustomColor(e.target.value);
|
||||
exec('foreColor', e.target.value);
|
||||
}}
|
||||
className="w-8 h-8 rounded-lg cursor-pointer border-none bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={customColor}
|
||||
onChange={(e) => {
|
||||
setCustomColor(e.target.value);
|
||||
exec('foreColor', e.target.value);
|
||||
}}
|
||||
placeholder="#111827"
|
||||
className="w-full text-xs font-mono font-bold px-2 py-1 border border-gray-200 rounded-lg outline-none uppercase"
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Background Color Picker & Custom HEX */}
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => {
|
||||
setShowBgColorPicker(!showBgColorPicker);
|
||||
setShowColorPicker(false);
|
||||
}}
|
||||
className={`flex items-center gap-1.5 bg-white px-2.5 py-1.5 rounded-xl border border-gray-200 shadow-2xs text-xs font-bold cursor-pointer disabled:opacity-40 ${
|
||||
showBgColorPicker ? 'ring-2 ring-purple-500 bg-purple-50' : 'hover:bg-gray-50'
|
||||
}`}
|
||||
title="هایلایت و رنگ پسزمینه متن"
|
||||
>
|
||||
<PaintBucket className="w-3.5 h-3.5 text-amber-500" />
|
||||
<span>هایلایت</span>
|
||||
<span
|
||||
className="w-3 h-3 rounded-full border border-black/20"
|
||||
style={{ backgroundColor: customBgColor }}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{showBgColorPicker && (
|
||||
<div className="absolute top-full right-0 mt-1.5 p-3 bg-white rounded-2xl shadow-xl border border-gray-200 z-50 w-56 space-y-2.5 font-vazir text-right">
|
||||
<span className="text-[11px] font-bold text-gray-500 block">رنگهای هایلایت:</span>
|
||||
<div className="grid grid-cols-7 gap-1">
|
||||
{PRESET_BG_COLORS.map((c) => (
|
||||
<button
|
||||
key={c.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
exec('hiliteColor', c.value);
|
||||
setCustomBgColor(c.value);
|
||||
setShowBgColorPicker(false);
|
||||
}}
|
||||
className="w-6 h-6 rounded-lg border border-black/10 cursor-pointer hover:scale-110 transition-transform"
|
||||
style={{ backgroundColor: c.value }}
|
||||
title={c.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-2 border-t border-gray-100 flex items-center gap-2">
|
||||
<input
|
||||
type="color"
|
||||
value={customBgColor === 'transparent' ? '#ffffff' : customBgColor}
|
||||
onChange={(e) => {
|
||||
setCustomBgColor(e.target.value);
|
||||
exec('hiliteColor', e.target.value);
|
||||
}}
|
||||
className="w-8 h-8 rounded-lg cursor-pointer border-none bg-transparent"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={customBgColor}
|
||||
onChange={(e) => {
|
||||
setCustomBgColor(e.target.value);
|
||||
exec('hiliteColor', e.target.value);
|
||||
}}
|
||||
placeholder="#fef08a"
|
||||
className="w-full text-xs font-mono font-bold px-2 py-1 border border-gray-200 rounded-lg outline-none uppercase"
|
||||
dir="ltr"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* HTML Code View vs Visual */}
|
||||
<div className="flex items-center bg-white p-0.5 rounded-xl border border-gray-200 shadow-2xs">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setIsCodeMode(!isCodeMode);
|
||||
setShowColorPicker(false);
|
||||
setShowBgColorPicker(false);
|
||||
}}
|
||||
className={`px-2.5 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center gap-1.5 cursor-pointer ${
|
||||
isCodeMode
|
||||
? 'bg-purple-600 text-white shadow-xs'
|
||||
: 'text-gray-700 hover:bg-gray-100'
|
||||
}`}
|
||||
title="نمایش و ویرایش مستقیم کد HTML"
|
||||
>
|
||||
<Code className="w-3.5 h-3.5" />
|
||||
<span>{isCodeMode ? 'نمای دیداری' : 'کد HTML'}</span>
|
||||
</button>
|
||||
{/* Color Palette */}
|
||||
<div className="flex items-center gap-1 bg-white px-2 py-1 rounded-xl border border-gray-200">
|
||||
<Palette className="w-3.5 h-3.5 text-gray-400" />
|
||||
<div className="flex items-center gap-1">
|
||||
{COLORS.map((c) => (
|
||||
<button
|
||||
key={c.value}
|
||||
type="button"
|
||||
onClick={() => exec('foreColor', c.value)}
|
||||
className="w-3.5 h-3.5 rounded-full border border-black/10 cursor-pointer hover:scale-125 transition-transform"
|
||||
style={{ backgroundColor: c.value }}
|
||||
title={c.label}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Undo / Redo */}
|
||||
<div className="flex items-center gap-0.5 ms-auto">
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('undo')}
|
||||
className="p-1.5 hover:bg-gray-200 disabled:opacity-40 rounded-lg transition-colors cursor-pointer"
|
||||
title="بازگشت به عقب (Undo)"
|
||||
className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
|
||||
title="Undo"
|
||||
>
|
||||
<Undo className="w-3.5 h-3.5 text-gray-500" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isCodeMode}
|
||||
onClick={() => exec('redo')}
|
||||
className="p-1.5 hover:bg-gray-200 disabled:opacity-40 rounded-lg transition-colors cursor-pointer"
|
||||
title="حرکت به جلو (Redo)"
|
||||
className="p-1.5 hover:bg-gray-200 rounded-lg transition-colors cursor-pointer"
|
||||
title="Redo"
|
||||
>
|
||||
<Redo className="w-3.5 h-3.5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor Content Area */}
|
||||
{isCodeMode ? (
|
||||
<textarea
|
||||
value={value || ''}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder="کد HTML را اینجا وارد یا ویرایش کنید..."
|
||||
className="w-full p-4 min-h-[140px] max-h-[350px] font-mono text-xs text-emerald-400 bg-slate-950 outline-none resize-y leading-relaxed"
|
||||
dir="ltr"
|
||||
spellCheck={false}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
onInput={handleInput}
|
||||
onKeyUp={updateActiveStates}
|
||||
onMouseUp={updateActiveStates}
|
||||
onClick={updateActiveStates}
|
||||
onFocus={updateActiveStates}
|
||||
data-placeholder={placeholder}
|
||||
className="p-4 min-h-[140px] max-h-[350px] overflow-y-auto outline-none text-sm leading-relaxed text-gray-800 font-vazir empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 [&_h1]:text-2xl [&_h1]:font-black [&_h1]:my-2.5 [&_h1]:text-gray-900 [&_h2]:text-xl [&_h2]:font-bold [&_h2]:my-2 [&_h2]:text-gray-900 [&_h3]:text-lg [&_h3]:font-bold [&_h3]:my-1.5 [&_h3]:text-gray-900 [&_p]:my-1 [&_p]:leading-relaxed [&_ul]:list-disc [&_ul]:ms-6 [&_ul]:my-2 [&_ol]:list-decimal [&_ol]:ms-6 [&_ol]:my-2 [&_a]:text-blue-600 [&_a]:underline"
|
||||
dir="rtl"
|
||||
/>
|
||||
)}
|
||||
{/* Editable Area */}
|
||||
<div
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
onInput={handleInput}
|
||||
data-placeholder={placeholder}
|
||||
className="p-4 min-h-[140px] max-h-[350px] overflow-y-auto outline-none text-xs leading-relaxed text-gray-800 font-vazir empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400"
|
||||
dir="rtl"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -138,8 +138,8 @@ export default function Hero({ banners = [], onShopNavigate }: { banners?: Banne
|
||||
{titleParts[1] && <span className="text-canina-blue ">{titleParts[1]}</span>}
|
||||
</h1>
|
||||
|
||||
<div
|
||||
className="text-sm lg:text-xl text-medical-gray-600 mb-3 sm:mb-5 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-vazir animate-fade-in [&_p]:text-sm [&_p]:lg:text-xl [&_p]:leading-relaxed [&_p]:my-0 [&_span]:text-inherit"
|
||||
<p
|
||||
className="text-sm lg:text-xl text-medical-gray-600 mb-3 sm:mb-5 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-vazir animate-fade-in"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: subtitle
|
||||
}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user