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

frontend/src/components/admin/ImageNodeView.tsx

@@ -13,29 +13,48 @@ type ImageAttrs = {
 const DELETE_BUTTON_CLASS =
   'flex h-7 w-7 shrink-0 items-center justify-center border border-red-400/50 bg-ink/85 text-red-300 backdrop-blur-sm transition-colors duration-150 hover:bg-red-500/20'
 
+const INLINE_FIELD_CLASS =
+  'w-full border border-ivory/15 bg-ink px-3 py-1.5 text-xs font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none'
+
+const ADD_CAPTION_CLASS =
+  'mt-1.5 inline-flex items-center gap-1.5 border border-dashed border-ivory/25 px-3 py-1 text-[11px] font-light text-ivory/50 transition-colors duration-150 hover:border-copper hover:text-copper'
+
 /**
  * نمایش تصویر مقاله در ویرایشگر — دقیقاً با همان ساختار خروجی سایت:
  * <figure><img><figcaption>کپشن</figcaption></figure>
- * دو دکمه حذف مستقل دارد: یکی برای خود تصویر و یکی برای حذف کامل کپشن.
- * با حذف کپشن، عنصر <figcaption> به‌طور کامل از DOM حذف می‌شود و فقط تصویر می‌ماند.
+ *
+ * ویرایش کاملاً درون‌خطی است (بدون پاپ‌اور/مودال):
+ * - هر تصویر یک «جعبه توضیح/کپشن» همراه خود دارد و متن آن در figcaption ذخیره می‌شود.
+ * - دکمه X کپشن را کامل حذف می‌کند: صفت کپشن به مقدار پیش‌فرض برمی‌گردد و عنصر
+ *   figcaption با ورودی‌اش از DOM ویرایشگر (و از خروجی ذخیره‌شده) حذف می‌شود؛
+ *   فقط تصویر می‌ماند و «افزودن کپشن» دوباره جعبه را باز می‌کند.
+ * - ویرایش Alt در ویرایشگر وجود ندارد؛ Alt هنگام درج از نام فایل ثبت می‌شود.
+ * - دکمه X روی تصویر کل تصویر را حذف می‌کند.
  */
 export function ImageNodeView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
   const { src, alt, title, caption } = node.attrs as ImageAttrs
   const hasCaption = Boolean((caption ?? '').trim())
-  const [editingCaption, setEditingCaption] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const [captionOpen, setCaptionOpen] = useState(true)
+  const captionInputRef = useRef<HTMLInputElement>(null)
+  const focusOnOpen = useRef(false)
+  const showCaption = captionOpen || hasCaption
 
-  const showCaption = hasCaption || editingCaption
-
-  // هنگام افزودن کپشن تازه، ورودی خودکار فوکوس می‌گیرد
+  // فقط وقتی کاربر «افزودن کپشن» را می‌زند ورودی فوکوس می‌گیرد (نه هنگام بارگذاری مقاله)
   useEffect(() => {
-    if (editingCaption && !hasCaption) inputRef.current?.focus()
-  }, [editingCaption, hasCaption])
+    if (!focusOnOpen.current) return
+    focusOnOpen.current = false
+    captionInputRef.current?.focus()
+  }, [captionOpen])
 
-  /** حذف کپشن: مقدار صفت پاک و عنصر figcaption کاملاً unmount می‌شود */
+  /** حذف کامل کپشن: عنصر figcaption و ورودی‌اش از DOM ویرایشگر بیرون می‌رود */
   const removeCaption = () => {
     updateAttributes({ caption: '' })
-    setEditingCaption(false)
+    setCaptionOpen(false)
+  }
+
+  const addCaption = () => {
+    focusOnOpen.current = true
+    setCaptionOpen(true)
   }
 
   return (
@@ -58,18 +77,18 @@ export function ImageNodeView({ node, updateAttributes, deleteNode, selected }:
           <XIcon className="h-3.5 w-3.5" />
         </button>
 
-        {showCaption && (
+        {showCaption ? (
           <figcaption className="article-figure__caption" contentEditable={false}>
             <input
-              ref={inputRef}
+              ref={captionInputRef}
               type="text"
               value={caption ?? ''}
               onChange={(event) => updateAttributes({ caption: event.target.value })}
               placeholder="توضیح تصویر (کپشن)…"
               aria-label="کپشن تصویر"
-              className="w-full border border-ivory/15 bg-ink px-3 py-1.5 text-xs font-light text-ivory placeholder:text-ivory/30 focus:border-copper focus:outline-none"
+              className={INLINE_FIELD_CLASS}
             />
-            {/* حذف فقط کپشن — تصویر دست‌نخورده می‌ماند */}
+            {/* حذف کامل کپشن — تصویر دست‌نخورده می‌ماند */}
             <button
               type="button"
               onClick={removeCaption}
@@ -80,21 +99,18 @@ export function ImageNodeView({ node, updateAttributes, deleteNode, selected }:
               <XIcon className="h-3.5 w-3.5" />
             </button>
           </figcaption>
+        ) : (
+          <button
+            type="button"
+            contentEditable={false}
+            onClick={addCaption}
+            className={ADD_CAPTION_CLASS}
+          >
+            <PlusIcon className="h-3 w-3" aria-hidden="true" />
+            افزودن کپشن
+          </button>
         )}
       </figure>
-
-      {/* وقتی کپشنی وجود ندارد، فقط یک دکمه افزودن نمایش داده می‌شود */}
-      {!showCaption && (
-        <button
-          type="button"
-          contentEditable={false}
-          onClick={() => setEditingCaption(true)}
-          className="mt-1.5 inline-flex items-center gap-1.5 border border-dashed border-ivory/25 px-3 py-1 text-[11px] font-light text-ivory/50 transition-colors duration-150 hover:border-copper hover:text-copper"
-        >
-          <PlusIcon className="h-3 w-3" aria-hidden="true" />
-          افزودن کپشن
-        </button>
-      )}
     </NodeViewWrapper>
   )
 }