|
| 1 | + |
| 2 | + |
| 3 | +# @gravity-ui/markdown-editor · [](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [](https://preview.gravity-ui.com/md-editor/) |
| 4 | + |
| 5 | +## Редактор Markdown с поддержкой режимов WYSIWYG и Markup |
| 6 | + |
| 7 | +`MarkdownEditor` — эффективный инструмент для работы с Markdown, сочетающий режимы WYSIWYG и Markup. Он позволяет создавать и редактировать контент в удобном визуальном режиме с полным контролем над разметкой. |
| 8 | + |
| 9 | +### 🔧 Основные характеристики |
| 10 | + |
| 11 | +- Поддержка базового синтаксиса Markdown и [YFM](https://ydocs.tech). |
| 12 | +- Расширяемость за счет использования движков ProseMirror и CodeMirror. |
| 13 | +- Возможность работы в режимах WYSIWYG и Markup для максимальной гибкости. |
| 14 | + |
| 15 | +## Установка |
| 16 | + |
| 17 | +```shell |
| 18 | +npm install @gravity-ui/markdown-editor |
| 19 | +``` |
| 20 | + |
| 21 | +### Необходимые зависимости |
| 22 | + |
| 23 | +Для начала работы с пакетом в проекте необходимо предварительно установить следующие зависимости: `@diplodoc/transform`, `react`, `react-dom` и др. Подробную информацию можно найти в разделе `peerDependencies` файла `package.json`. |
| 24 | + |
| 25 | +## Начало работы |
| 26 | + |
| 27 | +`MarkdownEditor` поставляется в виде React-хука для создания экземпляра редактора и компонента для рендеринга представления. |
| 28 | +Для настройки стиля и темы см. [документацию UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles). |
| 29 | + |
| 30 | +```tsx |
| 31 | +import React from 'react'; |
| 32 | +import {useMarkdownEditor, MarkdownEditorView} from '@gravity-ui/markdown-editor'; |
| 33 | +import {toaster} from '@gravity-ui/uikit/toaster-singleton-react-18'; |
| 34 | + |
| 35 | +function Editor({onSubmit}) { |
| 36 | + const editor = useMarkdownEditor({allowHTML: false}); |
| 37 | + |
| 38 | + React.useEffect(() => { |
| 39 | + function submitHandler() { |
| 40 | + // Serialize current content to markdown markup |
| 41 | + const value = editor.getValue(); |
| 42 | + onSubmit(value); |
| 43 | + } |
| 44 | + |
| 45 | + editor.on('submit', submitHandler); |
| 46 | + return () => { |
| 47 | + editor.off('submit', submitHandler); |
| 48 | + }; |
| 49 | + }, [onSubmit]); |
| 50 | + |
| 51 | + return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />; |
| 52 | +} |
| 53 | +``` |
| 54 | +Полезные ссылки: |
| 55 | +- [Как подключить редактор в Create React App](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-install-create-react-app--docs) |
| 56 | +- [Как добавить предварительный просмотр для режима разметки](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-preview--docs) |
| 57 | +- [Как добавить расширение HTML](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-html-block--docs) |
| 58 | +- [Как добавить расширение Latex](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-latex-extension--docs) |
| 59 | +- [Как добавить расширение Mermaid](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-mermaid-extension--docs) |
| 60 | +- [Как создать собственное расширение](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-creation--docs) |
| 61 | +- [Как добавить расширение GPT](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-gpt--docs) |
| 62 | +- [Как добавить расширение привязки текста в Markdown](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-with-popup--docs) |
| 63 | + |
| 64 | + |
| 65 | + |
| 66 | +### i18n |
| 67 | + |
| 68 | +Для настройки интернационализации используйте `configure`: |
| 69 | + |
| 70 | +```typescript |
| 71 | +import {configure} from '@gravity-ui/markdown-editor'; |
| 72 | + |
| 73 | +configure({ |
| 74 | + lang: 'ru', |
| 75 | +}); |
| 76 | +``` |
| 77 | + |
| 78 | +Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек. |
| 79 | + |
| 80 | +## Разработка |
| 81 | + |
| 82 | +Для запуска Storybook в режиме разработки выполните следующую команду: |
| 83 | + |
| 84 | +```shell |
| 85 | +npm start |
| 86 | +``` |
0 commit comments