README-ru.md

@gravity-ui/markdown-editor ·

Редактор Markdown с поддержкой режимов WYSIWYG и Markup

MarkdownEditor — эффективный инструмент для работы с Markdown, сочетающий режимы WYSIWYG и Markup. Он позволяет создавать и редактировать контент в удобном визуальном режиме с полным контролем над разметкой.

🔧 Основные характеристики

• Поддержка базового синтаксиса Markdown и YFM.
• Расширяемость за счет использования движков ProseMirror и CodeMirror.
• Возможность работы в режимах WYSIWYG и Markup для максимальной гибкости.

Установка

npm install @gravity-ui/markdown-editor

Необходимые зависимости

Для начала работы с пакетом в проекте необходимо предварительно установить следующие зависимости: @diplodoc/transform, react, react-dom и др. Подробную информацию можно найти в разделе peerDependencies файла package.json.

Начало работы

MarkdownEditor поставляется в виде React-хука для создания экземпляра редактора и компонента для рендеринга представления. Для настройки стиля и темы см. документацию UIKit.

import React from 'react';
import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor';
import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18';

function Editor({onSubmit}) {
  const editor = useMarkdownEditor({allowHTML: false});

  React.useEffect(() => {
    function submitHandler() {
      // Serialize current content to markdown markup
      const value = editor.getValue();
      onSubmit(value);
    }

    editor.on('submit', submitHandler);
    return () => {
      editor.off('submit', submitHandler);
    };
  }, [onSubmit]);

  return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
}

Полезные ссылки:

• Как подключить редактор в Create React App
• Как добавить предварительный просмотр для режима разметки
• Как добавить расширение HTML
• Как добавить расширение Latex
• Как добавить расширение Mermaid
• Как создать собственное расширение
• Как добавить расширение GPT
• Как добавить расширение привязки текста в Markdown

Разработка

Для запуска Storybook в режиме разработки выполните следующую команду:

npm start

i18n

Для настройки интернационализации используйте configure:

import {configure} from '@gravity-ui/markdown-editor';

configure({
  lang: 'ru',
});

Обязательно сделайте вызов configure() из UIKit и других UI-библиотек.

Участие в разработке

• Информация для контрибьюетров