MDXEditor — rich text редактор Markdown и MDX для React

Если ты когда-нибудь пытался прикрутить к React-приложению нормальный редактор Markdown — знаешь, насколько это может быть больно. MDXEditor предлагает готовое решение: open source компонент с визуальным редактированием в стиле Notion или Google Docs.

Основные возможности

• contentEditable-режим — пользователь работает с отформатированным текстом, а не сырым Markdown
• Стилизация области редактирования через свой CSS-класс:

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

• Блоки кода с подсветкой синтаксиса через CodeMirror — авторы редактируют сниппеты прямо в документе
• Настройка языков для блоков кода под нужды проекта:

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

Гибкий контроль над Markdown-выводом

Можно тонко настроить, как именно содержимое конвертируется обратно в Markdown — маркеры списков, пробельные символы, символы выделения. Например, использовать + вместо - для маркеров и _ вместо * для курсива:

<MdxEditor
 markdown={markdown}
 toMarkdownOptions={{
 bullet: '+',
 emphasis: '_'
 }}
/>

Это особенно удобно, если форматирование должно совпадать с уже существующим пайплайном обработки контента — не нужно городить постпроцессинг поверх.

Коротко

• Open source, React-компонент
• Визуальное редактирование Markdown и MDX
• CodeMirror под капотом для блоков кода
• Настраиваемый Markdown-вывод через toMarkdownOptions

Хорошая база, если хочется дать авторам удобный редактор без отдельного CMS-монстра. 🦆