‏react-css-highlight؛ هایلایت متن با API جدید CSS

تو مستندات پروژه اومده که react-css-highlight سراغ یه مشکل قدیمی فرانت‌اند رفته: هایلایت کردن نتیجهٔ جست‌وجو داخل متن، بدون اینکه مجبور بشی هر تطابق رو توی یه تگ mark بپیچی. این کتابخونه به‌جاش از CSS Custom Highlight API استفاده می‌کنه — محدوده‌های متنی (Range) رو به مرورگر معرفی می‌کنه و استایل‌دهی با سلکتور ::highlight() انجام می‌گیره. نتیجه اینه که DOM اصلاً تغییر نمی‌کنه.

به گفتهٔ نویسنده، پیمایش گره‌های متنی با TreeWalker انجام می‌شه و همین باعث می‌شه حدود ۵۰۰ برابر سریع‌تر از روش‌های ساده‌لوحانه باشه. عملیات جست‌وجو هم داخل requestIdleCallback اجرا می‌شه تا موقع تایپ کاربر رابط کاربری فریز نکنه. چون هیچ گره‌ای اضافه یا جابه‌جا نمی‌شه، ری‌اکت هم مجبور به هماهنگ‌سازی دوبارهٔ درخت کامپوننت‌ها و مرورگر مجبور به چیدمان مجدد صفحه نمی‌شه.

سه راه استفاده تو ری‌اکت وجود داره: کامپوننت مبتنی بر ref برای وقتی چند هایلایت هم‌زمان روی یه محتوا لازم داری، یه رپر ساده برای حالت تک‌هایلایت، و هوک useHighlight که تعداد تطابق‌ها، وضعیت خطا و پشتیبانی مرورگر رو مستقیم برمی‌گردونه. ساده‌ترین حالتش این شکلیه:

<Highlight search="React" targetRef={contentRef} />
<div ref={contentRef}>
  <p>React is a JavaScript library for building user interfaces.</p>
</div>

یکی از بخش‌های جالب‌ترش حالت مقایسه‌ست: تابع createCompareHighlight متن تخت‌شدهٔ دو طرف رو کاراکتر به کاراکتر مقایسه می‌کنه و اختلاف‌ها رو هایلایت می‌کنه. نکتهٔ مهمش اینه که ساختار تگ‌ها هیچ اثری نداره — فرقی نمی‌کنه متن توی یه گره باشه یا بین چندتا span و لینک و رپر دیزاین‌سیستم پخش شده باشه — چون فقط رشتهٔ نهایی مقایسه می‌شه. هر طرف هم می‌تونه یه المان DOM یا یه رشتهٔ ساده باشه.

کتابخونه با تایپ‌اسکریپت نوشته شده، وابستگی خارجی نداره و رنگ هایلایت‌ها با متغیرهای CSS تنظیم می‌شه؛ چند اصطلاح رو هم می‌شه هم‌زمان با استایل‌های متفاوت هایلایت کرد. هوک مقدار isSupported رو برمی‌گردونه تا برای مرورگرهایی که هنوز این API رو ندارن حالت جایگزین نشون داده بشه. نسخهٔ vanilla هم به یه باندلر مثل Vite یا Webpack نیاز داره و با تگ اسکریپت ساده کار نمی‌کنه.

نکات کلیدی:

• هایلایت متن با CSS Custom Highlight API، بدون اضافه کردن حتی یک تگ به DOM
• پیمایش با TreeWalker و اجرای غیرمسدودکننده با requestIdleCallback
• سه الگوی استفاده در ری‌اکت: کامپوننت، رپر و هوک useHighlight
• حالت مقایسهٔ موقعیتی که مستقل از ساختار مارک‌آپ دو طرف کار می‌کنه
• بدون وابستگی، با تایپ‌اسکریپت، و قابل استفاده در Vue و Svelte و جاوااسکریپت خام