‏MDXEditor: ویرایشگر مارک‌داون برای ری‌اکت

MDXEditor یه کامپوننت متن‌باز ری‌اکته که نوشتن مارک‌داون رو طبیعی‌تر می‌کنه. به‌جای اینکه کاربر بین حالت ویرایش خام و پیش‌نمایش جابجا بشه، همه‌چیز رو مستقیم و به‌صورت بصری می‌نویسه — درست شبیه Notion یا Google Docs.

یکی از نکات جالبش اینه که می‌تونی با contentEditableClassName همون CSS که روی صفحه اصلی سایتت استفاده می‌کنی رو روی ناحیه ویرایش هم اعمال کنی. یعنی محتوا توی ویرایشگر دقیقاً همون‌شکلی به نظر می‌رسه که بعد از انتشار خواهد داشت:

<MdxEditor
  markdown={markdown}
  className={className}
  contentEditableClassName="my-prose-class"
/>

برای بلوک‌های کد هم پشتیبانی خوبی داره. با فعال کردن پلاگین CodeMirror می‌تونی زبان‌های موردنظرت رو تعریف کنی تا نویسنده‌ها مستقیم توی سند، کد بنویسن و ویرایش کنن — با هایلایت سینتکس کامل:

<MdxEditor
  markdown={markdown}
  plugins={[
    codeBlockPlugin(),
    codeMirrorPlugin({
      codeBlockLanguages: {
        tsx: 'TypeScript',
        css: 'CSS'
      }
    })
  ]}
/>

خروجی مارک‌داون هم قابل تنظیمه. از طریق prop مربوطه می‌تونی جزئیاتی مثل علامت آیتم‌های لیست (+ یا -) یا نوع نشانه‌گذاری تأکید (_ یا *) رو کنترل کنی تا خروجی با استاندارد پروژه‌ات هماهنگ باشه.

در کنار اینا، امکانات دیگه‌ای مثل ویرایشگر جدول، دیالوگ لینک، پشتیبانی از تصویر، ویرایشگر front-matter، میان‌برهای مارک‌داون، نمای diff/source، پشتیبانی از JSX و نوار ابزار قابل سفارشی‌سازی هم داره.

نکات کلیدی:

• ویرایشگر WYSIWYG مارک‌داون برای ری‌اکت، بدون نیاز به حالت پیش‌نمایش جداگانه
• امکان استفاده از CSS سایت روی ناحیه ویرایش با contentEditableClassName
• پشتیبانی از بلوک‌های کد با هایلایت سینتکس از طریق CodeMirror
• خروجی مارک‌داون کاملاً قابل تنظیم (سبک بولت، فاصله‌گذاری، نشانه‌های تأکید)
• امکانات متنوع: جدول، تصویر، لینک، front-matter، JSX و نوار ابزار سفارشی