Repository files navigation

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 andYFM 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-editor

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 thepeerDependencies section ofpackage.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 seeUIKit docs.

importReactfrom'react';import{useMarkdownEditor,MarkdownEditorView}from'@gravity-ui/markdown-editor';functionEditor({onSubmit}){consteditor=useMarkdownEditor({allowHTML:false});React.useEffect(()=>{functionsubmitHandler(){// Serialize current content to markdown markupconstvalue=editor.getValue();onSubmit(value);}editor.on('submit',submitHandler);return()=>{editor.off('submit',submitHandler);};},[onSubmit]);return<MarkdownEditorViewstickyToolbarautofocuseditor={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

To start the dev storybook

npm start

To set up internationalization, you just need to use theconfigure:

import{configure}from'@gravity-ui/markdown-editor';configure({lang:'ru',});

Don't forget to callconfigure() fromUIKit and other UI libraries.

• Contributor Guidelines