fix(admin): resolve Tiptap editor bugs, dynamic RTL/LTR layout, sticky TOC, and equalize Bidi typography

frontend/src/components/admin/ArticleEditor.tsx

@@ -25,10 +25,13 @@ import {
 } from 'lucide-react'
 import { useAdmin } from '../../admin/AdminContext'
 import { adminApi } from '../../admin/adminClient'
+import { DEFAULT_IMAGE_ALT } from '../../data/constants'
 import { buildLinkRel, isAllowedHref, isUrlLike, normalizeHref, parseLinkRel } from '../../utils/link'
 import { ArticleImage } from './ArticleImage'
+import { BidiTypography, bidiPluginKey } from './BidiTypography'
 import { EnglishText } from './EnglishText'
 import { LinkModal } from './LinkModal'
+import { applyBlockFormat, handleHeadingEnter } from './blockFormat'
 import type { LinkModalValue } from './LinkModal'
 
 /**
@@ -59,13 +62,22 @@ export const ARTICLE_EXTENSIONS = [
   }),
   LegacySmallSizeMark,
   EnglishText,
+  BidiTypography,
 ]
 
 type ArticleEditorProps = {
   doc: Record<string, unknown>
   onChange: (json: Record<string, unknown>) => void
+  /**
+   * شناسه محتوا — با هر تغییر آن، بدنه ویرایشگر از `doc` جاری دوباره بارگذاری می‌شود
+   * (مثلاً وقتی مقاله از سرور می‌رسد). بدون این prop محتوا فقط یک‌بار مقداردهی می‌شود.
+   */
+  contentKey?: string | number
 }
 
+/** نمونه ویرایشگر TipTap — همان چیزی که useEditor برمی‌گرداند */
+type EditorInstance = NonNullable<ReturnType<typeof useEditor>>
+
 type TextDirection = 'rtl' | 'ltr'
 
 /** نحوه اعمال لینک: روی انتخاب فعلی، درج متن تازه یا تبدیل محدوده تایپ‌شده */
@@ -126,7 +138,7 @@ const Divider = () => <span className="mx-1 h-5 w-px bg-ivory/10" aria-hidden="t
  * ویرایشگر WYSIWYG مقاله (TipTap) — نود تصویر کپشن‌دار، مودال لینک سئو-محور،
  * کلید راست‌چین/چپ‌چین (فقط روی متن اثر دارد، نه نوار ابزار) و آپلود تصویر به MinIO.
  */
-export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
+export function ArticleEditor({ doc, onChange, contentKey }: ArticleEditorProps) {
   const { runSave } = useAdmin()
   const fileRef = useRef<HTMLInputElement>(null)
   const [uploading, setUploading] = useState(false)
@@ -192,6 +204,8 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
         })
         return false
       },
+      // Enter داخل تیتر، بلوک تازه را پاراگراف می‌کند تا قالب تیتر سرایت نکند
+      handleKeyDown: (view, event) => handleHeadingEnter(view, event),
     },
     onUpdate: ({ editor: instance }) => onChange(instance.getJSON()),
   })
@@ -201,14 +215,40 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
     if (!editor) return
     editor.view.dom.setAttribute('dir', direction)
     editor.view.dom.setAttribute('lang', direction === 'rtl' ? 'fa' : 'en')
+    // تزئین‌های دوزبانه (اندازه ۲ پیکسل کوچک‌تر متن لاتین) با جهت تازه بازمحاسبه می‌شوند
+    editor.view.dispatch(editor.state.tr.setMeta(bidiPluginKey, direction))
   }, [editor, direction])
 
+  /**
+   * ترکیب (نمونه ویرایشگر، شناسه محتوا) که آخرین بار بارگذاری شده است.
+   * تغییرهای معمول سند (تایپ کاربر) نباید بدنه را از نو بارگذاری کنند.
+   */
+  const loadedContentRef = useRef<{ editor: EditorInstance; key: string | number } | null>(null)
+
+  // بارگذاری بدنه با تغییر شناسه محتوا (رسیدن مقاله از سرور) یا ساخته‌شدن نمونه ویرایشگر
+  useEffect(() => {
+    if (!editor || contentKey === undefined) return
+    const loaded = loadedContentRef.current
+    if (loaded && loaded.editor === editor && loaded.key === contentKey) return
+    const incoming = doc && Object.keys(doc).length ? doc : null
+    if (!incoming) return
+    loadedContentRef.current = { editor, key: contentKey }
+    // emitUpdate=false تا بارگذاری، ذخیره خودکارِ بی‌مورد را فعال نکند
+    editor.commands.setContent(incoming, { emitUpdate: false })
+  }, [editor, contentKey, doc])
+
   async function uploadAndInsert(file: File) {
     if (!editor) return
     setUploading(true)
     await runSave(async () => {
       const { url } = await adminApi.upload(file)
-      editor.chain().focus().setImage({ src: url, alt: file.name.replace(/\.[^.]+$/, '') }).run()
+      // نام پیش‌فرض از نام فایل ساخته می‌شود و در نبود آن، مقدار پیش‌فرض ثابت می‌ماند
+      const defaultAlt = file.name.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ').trim()
+      editor
+        .chain()
+        .focus()
+        .setImage({ src: url, alt: defaultAlt || DEFAULT_IMAGE_ALT })
+        .run()
     })
     setUploading(false)
   }
@@ -271,28 +311,28 @@ export function ArticleEditor({ doc, onChange }: ArticleEditorProps) {
           <ToolButton
             label="پاراگراف"
             active={editor.isActive('paragraph')}
-            onClick={() => editor.chain().focus().setParagraph().run()}
+            onClick={() => applyBlockFormat(editor.view, 'paragraph')}
           >
             <PilcrowIcon className="h-4 w-4" />
           </ToolButton>
           <ToolButton
             label="تیتر ۱"
             active={editor.isActive('heading', { level: 1 })}
-            onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            onClick={() => applyBlockFormat(editor.view, 1)}
           >
             <Heading1Icon className="h-4 w-4" />
           </ToolButton>
           <ToolButton
             label="تیتر ۲"
             active={editor.isActive('heading', { level: 2 })}
-            onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            onClick={() => applyBlockFormat(editor.view, 2)}
           >
             <Heading2Icon className="h-4 w-4" />
           </ToolButton>
           <ToolButton
             label="تیتر ۳"
             active={editor.isActive('heading', { level: 3 })}
-            onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+            onClick={() => applyBlockFormat(editor.view, 3)}
           >
             <Heading3Icon className="h-4 w-4" />
           </ToolButton>