Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gravity-ui/markdown-editor
Markdown wysiwyg and markup editor
https://github.com/gravity-ui/markdown-editor
codemirror diplodoc gfm markdown prosemirror react wysiwyg yfm
Last synced: 4 days ago
JSON representation
Markdown wysiwyg and markup editor
- Host: GitHub
- URL: https://github.com/gravity-ui/markdown-editor
- Owner: gravity-ui
- License: mit
- Created: 2022-08-18T10:06:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-17T14:17:40.000Z (11 days ago)
- Last Synced: 2024-12-17T14:23:30.297Z (11 days ago)
- Topics: codemirror, diplodoc, gfm, markdown, prosemirror, react, wysiwyg, yfm
- Language: TypeScript
- Homepage: https://preview.gravity-ui.com/md-editor/
- Size: 5.42 MB
- Stars: 189
- Watchers: 15
- Forks: 13
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# @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/)
## Markdown wysiwyg and markup editor
MarkdownEditor is a powerful tool for working with Markdown, which combines WYSIWYG and Markup modes. This means that you can create and edit content in a convenient visual mode, as well as have full control over the markup.
### 🔧 Main features
- Support for the basic Markdown and [YFM](https://ydocs.tech) syntax.
- Extensibility through the use of ProseMirror and CodeMirror engines.
- The ability to work in WYSIWYG and Markup modes for maximum flexibility.
## Install
```shell
npm install @gravity-ui/markdown-editor
```
### Required dependencies
Please note that to start using the package, your project must also have the following installed: `@diplodoc/transform`, `react`, `react-dom`, `@gravity-ui/uikit`, `@gravity-ui/components` and some others. Check out the `peerDependencies` section of `package.json` for accurate information.
## Getting started
The markdown editor is supplied as a React hook to create an instance of editor and a component for rendering the view.\
To set up styling and theme see [UIKit docs](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 ;
}
```
Read more:
- [How to connect the editor in the Create React App](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-install-create-react-app--docs)
- [How to add preview for markup mode](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-preview--docs)
- [How to add HTML extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-html-block--docs)
- [How to add Latex extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-latex-extension--docs)
- [How to add Mermaid extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-mermaid-extension--docs)
- [How to write extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-creation--docs)
- [How to add GPT extension](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-connect-gpt--docs)
- [How to add text binding extension in markdown](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-develop-extension-with-popup--docs)
### Development
To start the dev storybook
```shell
npm start
```
### i18n
To set up internationalization, you just need to use the `configure`:
```typescript
import {configure} from '@gravity-ui/markdown-editor';
configure({
lang: 'ru',
});
```
Don't forget to call `configure()` from [UIKit](https://github.com/gravity-ui/uikit?tab=readme-ov-file#i18n) and other UI libraries.
### Contributing
- [Contributor Guidelines](https://preview.gravity-ui.com/md-editor/?path=/docs/docs-contributing--docs)