Update blog editor features

frontend/src/components/admin/ArticleEditor.tsx

@@ -3,15 +3,19 @@ import { EditorContent, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import Image from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
+import { Mark, mergeAttributes } from '@tiptap/core'
 import {
   BoldIcon,
   ItalicIcon,
+  Heading1Icon,
   Heading2Icon,
   Heading3Icon,
   ImagePlusIcon,
+  LanguagesIcon,
   Link2Icon,
   ListIcon,
   ListOrderedIcon,
+  PilcrowIcon,
   QuoteIcon,
   Redo2Icon,
   StrikethroughIcon,
@@ -22,12 +26,20 @@ import {
 import Swal from 'sweetalert2'
 import { useAdmin } from '../../admin/AdminContext'
 import { adminApi } from '../../admin/adminClient'
+import { ENGLISH_TEXT_MARK, EnglishText } from './EnglishText'
+
+const SmallSizeMark = Mark.create({
+  name: 'smallSize',
+  parseHTML() { return [{ tag: 'span[data-small]' }] },
+  renderHTML({ HTMLAttributes }) {
+    return ['span', mergeAttributes(HTMLAttributes, { 'data-small': 'true' }), 0]
+  }
+})
 
-/** اکستنشن‌های مشترک ویرایشگر و رندر مقاله — هر دو باید یکسان باشند */
 export const ARTICLE_EXTENSIONS = [
   StarterKit.configure({
     link: false,
-    heading: { levels: [2, 3] },
+    heading: { levels: [1, 2, 3] },
   }),
   Image.configure({ allowBase64: false }),
   Link.configure({
@@ -35,6 +47,8 @@ export const ARTICLE_EXTENSIONS = [
     HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
     isAllowedUri: (uri: string) => /^(https?:\/\/|\/|#|mailto:|tel:)/i.test(uri),
   }),
+  SmallSizeMark,
+  EnglishText,
 ]
 
 type ArticleEditorProps = {
@@ -73,10 +87,6 @@ function ToolButton({
 
 const Divider = () => <span className="mx-1 h-5 w-px bg-ivory/10" aria-hidden="true" />
 
-/**
- * ویرایشگر WYSIWYG مقاله (TipTap) — راست‌به‌چپ، با آپلود مستقیم تصویر به MinIO
- * (انتخاب فایل، چسباندن یا کشیدن تصویر داخل متن).
- */
 export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
   const { runSave } = useAdmin()
   const fileRef = useRef<HTMLInputElement>(null)
@@ -118,9 +128,14 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
   async function uploadAndInsert(file: File) {
     if (!editor) return
     setUploading(true)
+    
+    // استفاده از ریگکس یونیکد اصلاح‌شده برای نام فایل و Alt
+    const originalName = file.name.replace(/\.[^.]+$/, '')
+    const cleanAlt = originalName.replace(/[^\w\u0600-\u06FF\s-]/g, '-').replace(/\s+/g, '-').toLowerCase()
+
     await runSave(async () => {
       const { url } = await adminApi.upload(file)
-      editor.chain().focus().setImage({ src: url, alt: file.name.replace(/\.[^.]+$/, '') }).run()
+      editor.chain().focus().setImage({ src: url, alt: cleanAlt }).run()
     })
     setUploading(false)
   }
@@ -158,47 +173,32 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
 
   return (
     <div className="border border-ivory/15 bg-char">
-      <div className="flex flex-wrap items-center gap-0.5 border-b border-ivory/10 px-2 py-1.5">
+      <div className="flex flex-wrap items-center gap-1 border-b border-ivory/10 px-2 py-1.5">
+        
+        {/* قالب‌بندی بلوک — پاراگراف و تیترها با سایز مشخص */}
         <ToolButton
-          label="بولد"
-          active={editor.isActive('bold')}
-          onClick={() => editor.chain().focus().toggleBold().run()}
+          label="پاراگراف (۱۴ پیکسل)"
+          active={editor.isActive('paragraph')}
+          onClick={() => editor.chain().focus().setParagraph().run()}
         >
-          <BoldIcon className="h-4 w-4" />
+          <PilcrowIcon className="h-4 w-4" />
         </ToolButton>
         <ToolButton
-          label="ایتالیک"
-          active={editor.isActive('italic')}
-          onClick={() => editor.chain().focus().toggleItalic().run()}
+          label="تیتر ۱ (۱۸ پیکسل)"
+          active={editor.isActive('heading', { level: 1 })}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
         >
-          <ItalicIcon className="h-4 w-4" />
+          <Heading1Icon className="h-4 w-4" />
         </ToolButton>
         <ToolButton
-          label="زیرخط"
-          active={editor.isActive('underline')}
-          onClick={() => editor.chain().focus().toggleUnderline().run()}
-        >
-          <UnderlineIcon className="h-4 w-4" />
-        </ToolButton>
-        <ToolButton
-          label="خط‌خورده"
-          active={editor.isActive('strike')}
-          onClick={() => editor.chain().focus().toggleStrike().run()}
-        >
-          <StrikethroughIcon className="h-4 w-4" />
-        </ToolButton>
-
-        <Divider />
-
-        <ToolButton
-          label="تیتر میانی"
+          label="تیتر ۲ (۱۶ پیکسل)"
           active={editor.isActive('heading', { level: 2 })}
           onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
         >
           <Heading2Icon className="h-4 w-4" />
         </ToolButton>
         <ToolButton
-          label="تیتر کوچک"
+          label="تیتر ۳ (۱۴ پیکسل)"
           active={editor.isActive('heading', { level: 3 })}
           onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
         >
@@ -207,25 +207,54 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
 
         <Divider />
 
-        <ToolButton
-          label="لیست نقطه‌ای"
-          active={editor.isActive('bulletList')}
-          onClick={() => editor.chain().focus().toggleBulletList().run()}
+        <select
+          className="h-8 bg-ink border border-ivory/15 text-ivory/90 text-xs px-2 outline-none focus:border-copper cursor-pointer transition-colors"
+          value={editor.isActive('smallSize') ? '12' : '14'}
+          onChange={(e) => {
+            if (e.target.value === '12') {
+              editor.chain().focus().setMark('smallSize').run()
+            } else {
+              editor.chain().focus().unsetMark('smallSize').run()
+            }
+          }}
         >
+          <option value="14">سایز ۱۴ (فارسی)</option>
+          <option value="12">سایز ۱۲ (انگلیسی)</option>
+        </select>
+
+        {/* متن انگلیسی — span با dir=ltr و سایز ۱۲ پیکسل */}
+        <ToolButton
+          label="متن انگلیسی (۱۲ پیکسل، چپ‌به‌راست)"
+          active={editor.isActive(ENGLISH_TEXT_MARK)}
+          onClick={() => editor.chain().focus().toggleMark(ENGLISH_TEXT_MARK).run()}
+        >
+          <LanguagesIcon className="h-4 w-4" />
+        </ToolButton>
+
+        <Divider />
+
+        <ToolButton label="بولد" active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()}>
+          <BoldIcon className="h-4 w-4" />
+        </ToolButton>
+        <ToolButton label="ایتالیک" active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()}>
+          <ItalicIcon className="h-4 w-4" />
+        </ToolButton>
+        <ToolButton label="زیرخط" active={editor.isActive('underline')} onClick={() => editor.chain().focus().toggleUnderline().run()}>
+          <UnderlineIcon className="h-4 w-4" />
+        </ToolButton>
+        <ToolButton label="خط‌خورده" active={editor.isActive('strike')} onClick={() => editor.chain().focus().toggleStrike().run()}>
+          <StrikethroughIcon className="h-4 w-4" />
+        </ToolButton>
+
+        <Divider />
+
+        <ToolButton label="لیست نقطه‌ای" active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()}>
           <ListIcon className="h-4 w-4" />
         </ToolButton>
-        <ToolButton
-          label="لیست شماره‌ای"
-          active={editor.isActive('orderedList')}
-          onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        >
+        <ToolButton label="لیست شماره‌ای" active={editor.isActive('orderedList')} onClick={() => editor.chain().focus().toggleOrderedList().run()}>
           <ListOrderedIcon className="h-4 w-4" />
         </ToolButton>
-        <ToolButton
-          label="نقل‌قول"
-          active={editor.isActive('blockquote')}
-          onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        >
+        <ToolButton label="نقل‌قول" active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()}>
           <QuoteIcon className="h-4 w-4" />
         </ToolButton>
 
@@ -264,4 +293,4 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
       />
     </div>
   )
-}
+}