fix(frontend): کپشن وسط‌چین، نام تصویر در Alt، و تورفتگی واضح H3 در فهرست

- کپشن: قاعدهٔ وسط‌چینِ .article-body figcaption با قاعده‌های [data-dir=...] برای
  راست/چپ‌چین بازنویسی می‌شد و عملاً وسط‌چین نمی‌شد؛ figcaption از آن فهرست‌ها
  برداشته شد. متن کپشن در ویرایشگر هم وسط‌چین شد تا با خروجی سایت یکی باشد.
- نام تصویر: نامی که پیش از بارگذاری نوشته می‌شود، حالا همان Alt تصویر می‌شود
  (پیش‌تر نام فایل مبنا بود و باید دستی در جعبهٔ زیر تصویر اصلاح می‌شد).
- فهرست مطالب: H3 با ps-4 فقط ۴ پیکسل بیشتر از H2 تورفتگی داشت (عملاً نامرئی)؛
  حالا ps-6 با فونت یک پله کوچک‌تر.
This commit is contained in:
aramesh-site deploy
2026-09-28 07:49:08 +00:00
parent c9e0720764
commit 98c7977a19
3 changed files with 17 additions and 9 deletions
+3 -1
View File
@@ -120,7 +120,9 @@ export function TableOfContents({ items, title = 'فهرست مطالب', classN
onClick={(event) => go(event, item.id)} onClick={(event) => go(event, item.id)}
aria-current={isActive ? 'location' : undefined} aria-current={isActive ? 'location' : undefined}
className={`block w-full text-start text-sm font-light leading-8 transition-colors duration-200 ease-lux ${ className={`block w-full text-start text-sm font-light leading-8 transition-colors duration-200 ease-lux ${
item.level === 3 ? 'ps-4 text-[13px]' : '' // H3 زیرمجموعهٔ H2 است: تورفتگی واضح‌تر و یک پله کوچک‌تر؛ با ps-4
// تفاوتش با H2 فقط ۴ پیکسل بود و به چشم نمی‌آمد.
item.level === 3 ? 'ps-6 text-[13px]' : ''
} ${ } ${
isActive isActive
? 'font-normal text-copper' ? 'font-normal text-copper'
@@ -311,12 +311,15 @@ export function ArticleEditor({ doc, onChange, contentKey }: ArticleEditorProps)
setUploading(true) setUploading(true)
await runSave(async () => { await runSave(async () => {
const { url } = await adminApi.upload(file, name) const { url } = await adminApi.upload(file, name)
// نام پیش‌فرض از نام فایل ساخته می‌شود و در نبود آن، مقدار پیش‌فرض ثابت می‌ماند // «نام تصویر»ای که کاربر پیش از بارگذاری نوشته، همان Alt تصویر می‌شود؛
const defaultAlt = file.name.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ').trim() // در نبود آن نام فایل و در نبود آن مقدار پیش‌فرض — تا نیازی به اصلاح دستی
// در جعبهٔ زیر تصویر نباشد.
const typedName = (name ?? '').trim()
const fileAlt = file.name.replace(/\.[^.]+$/, '').replace(/[-_]+/g, ' ').trim()
editor editor
.chain() .chain()
.focus() .focus()
.setImage({ src: url, alt: defaultAlt || DEFAULT_IMAGE_ALT }) .setImage({ src: url, alt: typedName || fileAlt || DEFAULT_IMAGE_ALT })
.run() .run()
}) })
setUploading(false) setUploading(false)
+8 -5
View File
@@ -151,19 +151,18 @@ html[lang='en'] .article-body h3 {
} }
/* تیترها و فهرست‌ها هم‌تراز نمی‌شوند — فقط متن پاراگراف تراز می‌شود /* تیترها و فهرست‌ها هم‌تراز نمی‌شوند — فقط متن پاراگراف تراز می‌شود
(تیتر کوتاه با justify کشیده و بدقلق می‌شود و فهرست نقطه‌گذاری‌اش به‌هم می‌ریزد). */ (تیتر کوتاه با justify کشیده و بدقلق می‌شود و فهرست نقطه‌گذاری‌اش به‌هم می‌ریزد).
کپشن عمداً در این فهرست نیست: کپشن تصویر همیشه وسط‌چین است (قاعدهٔ پایین‌تر). */
[data-dir='rtl'] .article-body h1, [data-dir='rtl'] .article-body h1,
[data-dir='rtl'] .article-body h2, [data-dir='rtl'] .article-body h2,
[data-dir='rtl'] .article-body h3, [data-dir='rtl'] .article-body h3,
[data-dir='rtl'] .article-body li, [data-dir='rtl'] .article-body li {
[data-dir='rtl'] .article-body figcaption {
text-align: right; text-align: right;
} }
[data-dir='ltr'] .article-body h1, [data-dir='ltr'] .article-body h1,
[data-dir='ltr'] .article-body h2, [data-dir='ltr'] .article-body h2,
[data-dir='ltr'] .article-body h3, [data-dir='ltr'] .article-body h3,
[data-dir='ltr'] .article-body li, [data-dir='ltr'] .article-body li {
[data-dir='ltr'] .article-body figcaption {
text-align: left; text-align: left;
} }
[data-dir='ltr'] .article-body h1 { [data-dir='ltr'] .article-body h1 {
@@ -283,6 +282,10 @@ html[lang='en'] .article-body h3 {
/* تراز از جهت بلوک پیروی می‌کند — در مقاله انگلیسی چپ و در فارسی راست */ /* تراز از جهت بلوک پیروی می‌کند — در مقاله انگلیسی چپ و در فارسی راست */
text-align: start; text-align: start;
} }
/* متن کپشن در ویرایشگر هم وسط‌چین است تا با خروجی سایت یکی باشد */
[data-wysiwyg] .article-figure__caption input[type='text'] {
text-align: center;
}
[data-wysiwyg] .article-figure-node.is-selected .article-figure { [data-wysiwyg] .article-figure-node.is-selected .article-figure {
outline: 1px dashed rgba(213, 135, 76, 0.8); outline: 1px dashed rgba(213, 135, 76, 0.8);
outline-offset: 3px; outline-offset: 3px;