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.
- Support for the basic Markdown and YFM syntax.
- Extensibility through the use of ProseMirror and CodeMirror engines.
- The ability to work in WYSIWYG and Markup modes for maximum flexibility.
npm install @gravity-ui/markdown-editorPlease 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.
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.
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} />;
}Read more:
- How to connect the editor in the Create React App
- How to add preview for markup mode
- How to add HTML extension
- How to add Latex extension
- How to add Mermaid extension
- How to write extension
To set up internationalization, you just need to use the configure:
import {configure} from '@gravity-ui/markdown-editor';
configure({
lang: 'ru',
});Don't forget to call configure() from UIKit and other UI libraries.
To start the dev storybook
npm start
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent