-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0d74a7c
commit 5a82a6c
Showing
2 changed files
with
94 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
![Markdown Editor](https://github.com/user-attachments/assets/0b4e5f65-54cf-475f-9c68-557a4e9edb46) | ||
|
||
# @gravity-ui/markdown-editor · [![npm package](https://img.shields.io/npm/v/@gravity-ui/markdown-editor)](https://www.npmjs.com/package/@gravity-ui/markdown-editor) [![CI](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/ci.yml?branch=main&label=CI)](https://github.com/gravity-ui/markdown-editor/actions/workflows/ci.yml?query=branch:main) [![Release](https://img.shields.io/github/actions/workflow/status/gravity-ui/markdown-editor/release.yml?branch=main&label=Release)](https://github.com/gravity-ui/markdown-editor/actions/workflows/release.yml?query=branch:main) [![storybook](https://img.shields.io/badge/Storybook-deployed-ff4685)](https://preview.gravity-ui.com/md-editor/) | ||
|
||
## Редактор Markdown с поддержкой режимов WYSIWYG и Markup | ||
|
||
`MarkdownEditor` — эффективный инструмент для работы с Markdown, сочетающий режимы WYSIWYG и Markup. Он позволяет создавать и редактировать контент в удобном визуальном режиме с полным контролем над разметкой. | ||
|
||
### 🔧 Основные характеристики | ||
|
||
- Поддержка базового синтаксиса Markdown и [YFM](https://ydocs.tech). | ||
- Расширяемость за счет использования движков ProseMirror и CodeMirror. | ||
- Возможность работы в режимах WYSIWYG и Markup для максимальной гибкости. | ||
|
||
## Установка | ||
|
||
```shell | ||
npm install @gravity-ui/markdown-editor | ||
``` | ||
|
||
### Необходимые зависимости | ||
|
||
Для начала работы с пакетом в проекте необходимо предварительно установить следующие зависимости: `@diplodoc/transform`, `react`, `react-dom` и др. Подробную информацию можно найти в разделе `peerDependencies` файла `package.json`. | ||
|
||
## Начало работы | ||
|
||
`MarkdownEditor` поставляется в виде React-хука для создания экземпляра редактора и компонента для рендеринга представления. | ||
Для настройки стиля и темы см. [документацию UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#styles). | ||
|
||
```tsx | ||
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](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-install-create-react-app--docs) | ||
- [Как добавить предварительный просмотр для режима разметки](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-preview--docs) | ||
- [Как добавить расширение HTML](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-html-block--docs) | ||
- [Как добавить расширение Latex](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-latex-extension--docs) | ||
- [Как добавить расширение Mermaid](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-mermaid-extension--docs) | ||
- [Как создать собственное расширение](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-creation--docs) | ||
- [Как добавить расширение GPT](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-gpt--docs) | ||
- [Как добавить расширение привязки текста в Markdown](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-with-popup--docs) | ||
|
||
|
||
|
||
### i18n | ||
|
||
Для настройки интернационализации используйте `configure`: | ||
|
||
```typescript | ||
import {configure} from '@gravity-ui/markdown-editor'; | ||
|
||
configure({ | ||
lang: 'ru', | ||
}); | ||
``` | ||
|
||
Обязательно сделайте вызов `configure()` из [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) и других UI-библиотек. | ||
|
||
## Разработка | ||
|
||
Для запуска Storybook в режиме разработки выполните следующую команду: | ||
|
||
```shell | ||
npm start | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters