متن اجتماعی (SocialText)

معرفی

SocialText متن کاربر را نمایش می‌دهد: کپشن، نظر، لید خبر یا پنجرهٔ رونوشت.

• جهت از خود متن می‌آید، برای هر خط جدا، و صریح نوشته می‌شود. هر خط جهت نخستین حرف قوی بیرون از پیوند، هشتگ و منشن را می‌گیرد؛ خط انگلیسی چپ‌چین و خط فارسی راست‌چین می‌شود. خطی که حرف قوی ندارد (ردیف هشتگ‌های پایان کپشن، ردیف منشن، شکلک یا تاریخ) جهت کپشن را می‌گیرد، نه جهت dir="auto" که آن را چپ‌چین و هشتگ‌های فارسی را وارونه می‌کند. متنی که فقط هشتگ است جهت هشتگ‌هایش را می‌گیرد و متنی که فقط منشن یا عدد است جهت ظرفش را. خطی که از چپ به راست خوانده می‌شود ارقام لاتین را نگه می‌دارد.
• نشانی پیش از هشتگ و منشن شناخته می‌شود. # و @ داخل یک نشانی یا ایمیل هرگز هشتگ یا منشن نمی‌شوند؛ نشانه‌گذاری پایان جمله (لاتین و فارسی) جزو پیوند نیست.
• هشتگ و منشن جزیرهٔ جهت‌دارند. #sale در جملهٔ فارسی هرگز sale# نمی‌شود و @brand به brand@ تبدیل نمی‌شود.
• کد محصول یا نسخهٔ لاتین داخل متن فارسی (AUTUMN26، v2.0، 3.5mm) یکجا با ارقام لاتین نمایش داده می‌شود.
• متنی که lang آن فارسی نیست (مثلاً ar) ارقام را همان‌طور که نویسنده نوشته نمایش می‌دهد.
• پیوند، هشتگ، منشن و دکمهٔ «نمایش بیشتر» رنگ brand-600 دارند که در هر دو پوسته کنتراست متن بدنه را دارد.

چه زمانی استفاده کنیم:

• هر متنی که کاربر نوشته است: کپشن پست، متن نظر، زندگی‌نامهٔ حساب، لید خبر، رونوشت پخش.
• وقتی متن باید به چند خط محدود شود (ردیف فهرست، کارت).

چه زمانی استفاده نکنیم:

• برای متن رابط کاربری (برچسب، عنوان، توضیح دکمه): این متن‌ها جهت صفحه را دارند.
• برای متن Markdown: از MarkdownRenderer استفاده کنید.

استفاده

import { SocialText } from '@partodata/ui/social'

export function Caption({ text, lang }: { text: string; lang?: string }) {
  return <SocialText text={text} lang={lang} maxLines={3} expandable />
}

حالت‌ها و انواع

محدود کردن خط و طول خط

maxLines متن را به چند خط محدود می‌کند؛ با expandable دکمهٔ «نمایش بیشتر» فقط وقتی نمایش داده می‌شود که متن واقعاً بریده شده باشد. expandable بدون maxLines خطای نوع است، چون چیزی برای باز کردن نیست. measure="readable" (پیش‌فرض) طول خط را حدود 70 نویسه نگه می‌دارد؛ کپشنی که در ردیف 1500 پیکسلی کشیده شود خواندنی نیست. این اندازه مال هر خط است و هر خط به لبه‌ای می‌چسبد که خودش از آن شروع می‌شود: در کپشن دوزبانه، خط انگلیسی از لبهٔ چپ متن کارت و خط فارسی از لبهٔ راست آن شروع می‌شود، نه وسط کارت. در ظرفی که خودش باریک است measure="none" بگذارید.

علامت‌گذاری عبارت‌ها

highlights عبارت‌های جست‌وجو یا کلیدواژهٔ یک رونوشت را علامت می‌زند؛ بزرگی و کوچکی حرف لاتین و «ی/ي» و «ک/ك» تفاوتی ندارند.

برای عبارت جست‌وجوی کاربر از highlight استفاده کنید؛ آرایه یا RegExp می‌گیرد، بر highlights مقدم است و نیم‌فاصله را هم نادیده می‌گیرد. Post هم همین prop را دارد.

<SocialText text={post.text} highlight={[query]} />

هشتگ و منشن تعاملی

با onHashtagClick و onMentionClick هشتگ‌ها و منشن‌ها دکمه می‌شوند (مثلاً برای فیلتر بر اساس هشتگ یا باز کردن حساب). کلیک و کلیدهای Enter و Space روی آن‌ها و روی پیوندها به کارت بیرونی نمی‌رسند؛ Escape و کلیدهای جهت به فهرست بیرونی می‌رسند.

راهنمای استفاده

Props

نوع ورودی برای کامپوننتی که SocialText را در بر می‌گیرد

SocialTextProps همان چیزی است که SocialText می‌پذیرد: ویژگی‌های جدول بالا (SocialTextBaseProps) به‌اضافهٔ قاعدهٔ expandable فقط همراه با maxLines (SocialTextClampProps). کامپوننتی که SocialText را در بر می‌گیرد ورودی‌اش را با SocialTextProps تعریف کند:

import { SocialText, type SocialTextProps } from '@partodata/ui/social'

export function Caption(props: SocialTextProps) {
  return <SocialText {...props} />
}

برای حذف یک ویژگی، آن را از SocialTextBaseProps حذف کنید و SocialTextClampProps را دوباره اضافه کنید؛ Omit روی خود SocialTextProps این قاعده را از بین می‌برد و دادن نتیجه‌اش به SocialText کامپایل نمی‌شود.

دسترسی‌پذیری

• پیوندها در زبانهٔ جدید باز می‌شوند (rel="noopener noreferrer")؛ ایمیل با mailto:.
• دکمهٔ «نمایش بیشتر» وضعیتش را با aria-expanded اعلام می‌کند و فقط وقتی متن واقعاً بریده شده است نمایش داده می‌شود.
• علامت‌گذاری با عنصر mark است و صفحه‌خوان متن را بدون تغییر می‌خواند.
• ارقام در DOM لاتین‌اند و قلم آن‌ها را فارسی نمایش می‌دهد؛ رونوشت، جست‌وجو و صفحه‌خوان درست کار می‌کنند.
• خط خالی ارتفاعش را از CSS می‌گیرد؛ کپشنی که رونوشت می‌شود نویسهٔ نامرئی ندارد.
• رنگ پیوند و هشتگ (brand-600) روی صفحه و کارت در هر دو پوسته دست‌کم 4.5 به 1 است؛ بردن نشانگر روی آن‌ها با پس‌زمینهٔ کم‌رنگ و فوکوس با حلقهٔ فوکوس مرورگر نشان داده می‌شوند (خط زیر در سیستم طراحی ممنوع است، چون با حروف پیوستهٔ فارسی برخورد می‌کند).

کامپوننت‌های مرتبط

• Handle — شناسهٔ حساب جدا از متن، مثلاً در سرِ پست.
• MediaFrame — رسانهٔ همان پست؛ در ردیف، بندانگشتی کنار همین متن.
• مدل محتوای اجتماعی — text، excerpt و highlights از کجا می‌آیند.