Skip to content

Latest commit

 

History

History
115 lines (82 loc) · 4.75 KB

README.md

File metadata and controls

115 lines (82 loc) · 4.75 KB

Markdown Editor

@gravity-ui/markdown-editor · npm package CI Release storybook

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:

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.

Z-index levels

This project uses a z-index map to control the layers of elements. Defined levels:

level z-index value
background -1
default 0
forefront 1
img-settings-button 2
table-view-button 100
table-cell-button 110
sticky-toolbar 2000
tooltip 2100

Usage

To apply z-index to components, use the z-index mixin, passing the key as an argument:

@use 'styles/mixins.scss';

.tooltip {
  @include mixins.z-index('tooltip');
}

Contributing