‏ادیتور متن غنی و کاملاً نیتیو برای ری‌اکت نیتیو

تو مخزن این پروژه اومده که react-native-enriched-html یه راهکار متن غنی (Rich Text) برای ری‌اکت نیتیوئه که به گفتهٔ تیم Software Mansion دو تا برگ برنده داره: کامپوننت‌هاش کاملاً نیتیو هستن و استایل‌دهی هم زنده و همگام (synchronous) انجام می‌شه. پارس کردن هم بر پایهٔ HTML هست، پس خروجی ادیتور یه رشتهٔ HTML استاندارده که می‌تونی همون‌جوری ذخیره‌ش کنی.

نکتهٔ طراحی‌ش اینه که EnrichedTextInput یه ورودی uncontrolled هست؛ مقدارش رو تو state یا props نگه نمی‌داره و مستقیم با کامپوننت‌های پلتفرم حرف می‌زنه. برای همین هر کاری مثل تغییر استایل باید از طریق ref صدا زده بشه، و وضعیت استایل‌ها هم از رویداد onChangeState میاد:

const ref = useRef<EnrichedTextInputInstance>(null);
const [stylesState, setStylesState] = useState<OnChangeStateEvent | null>();

<EnrichedTextInput ref={ref} onChangeState={(e) => setStylesState(e.nativeEvent)} />
<Button
  title={stylesState?.bold.isActive ? 'Unbold' : 'Bold'}
  onPress={() => ref.current?.toggleBold()}
/>

هر استایل تو این رویداد سه تا پرچم داره: isActive که یعنی الان فعاله (دکمه رو هایلایت کن)، isBlocking که یعنی یه استایل دیگه فعلاً اجازهٔ اعمالش رو نمی‌ده (دکمه رو غیرفعال کن) و isConflicting که یعنی با استایل فعال فعلی تضاد داره. مثلاً داخل بلاک می‌شه، و زدن هدینگ روی یه پاراگراف اون رو برمی‌داره. فقط یه استایل سطح‌پاراگراف تو هر پاراگراف می‌تونه فعال باشه.

جدا از استایل‌های پایه (بولد، ایتالیک، زیرخط، خط‌خورده، کد اینلاین، H1 تا H6، کدبلاک، نقل‌قول و انواع لیست)، لینک‌ها هم خودکار تشخیص داده می‌شن — با پراپ linkRegex می‌تونی الگوش رو عوض کنی — یا دستی با setLink ست می‌شن. منشن‌ها با mentionIndicators (پیش‌فرض @) شروع می‌شن و سه رویداد onStartMention، onChangeMention و onEndMention برای ساختن لیست انتخاب کاربر در اختیارت می‌ذارن. تصویر اینلاین هم با setImage اضافه می‌شه و با پراپ htmlStyle می‌تونی ظاهر همه‌چیز رو تنظیم کنی.

نکات کلیدی:

• ورودی و نمایش متن غنی، هر دو نیتیو و مخصوص معماری جدید (Fabric)
• خروجی و ورودی بر پایهٔ HTML؛ EnrichedText همون HTML رو ۱:۱ رندر می‌کنه
• ورودی uncontrolled و کنترل کامل از طریق ref و رویداد onChangeState
• سه پرچم isActive، isBlocking و isConflicting برای ساختن نوار ابزار
• پشتیبانی از لینک، منشن، تصویر اینلاین و آیتم دلخواه تو منوی متن
• اندروید، iOS و وب؛ ری‌اکت نیتیو ۰.۸۱ تا ۰.۸۶ و ناسازگار با Expo Go