@gravity-ui/markdown-editor
v14.9.0
Published
Markdown wysiwyg and markup editor
Downloads
2,468
Readme
@gravity-ui/markdown-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 syntax.
- Extensibility through the use of ProseMirror and CodeMirror engines.
- The ability to work in WYSIWYG and Markup modes for maximum flexibility.
Install
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.
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
- How to add GPT extension
- How to add text binding extension in markdown
Development
To start the dev storybook
npm start
i18n
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.