A markdown editor with preview, implemented with React.js and TypeScript.

Migrate from @uiw/react-markdown-editor 4.x to 5.x.

Install

1npm i @uiw/react-markdown-editor

Document

Official document demo preview (🇨🇳中国镜像网站)

Basic Usage

1import React from 'react';
2import MarkdownEditor from '@uiw/react-markdown-editor';
3
4const mdStr = `# This is a H1  \n## This is a H2  \n###### This is a H6`;
5
6const Dome = () => {
7  return (
8    <MarkdownEditor
9      value={mdStr}
10      onChange={(value, viewUpdate) => {
11
12      }}
13    />
14  )
15};
16
17export default Dome;

Controlled Usage

1import React, { useState } from 'react';
2import MarkdownEditor from '@uiw/react-markdown-editor';
3
4const mdStr = `# This is a H1  \n## This is a H2  \n###### This is a H6`;
5export default function App() {
6  const [markdown, setMarkdown] = useState(mdStr);
7  return (
8    <MarkdownEditor
9      value={markdown}
10      height="200px"
11      onChange={(value, viewUpdate) => setMarkdown(value)}
12    />
13  );
14}

Only Markdown Preview

This markdown preview sub-component is a direct export @uiw/react-markdown-preview component, API documentation, please check @uiw/react-markdown-preview.

1import React from 'react';
2import MarkdownEditor from '@uiw/react-markdown-editor';
3
4const mdStr = `# This is a H1  \n## This is a H2  \n###### This is a H6`;
5function App() {
6  return (
7    <MarkdownEditor.Markdown source={mdStr} height="200px" />
8  );
9}
10
11export default App;

Custom Toolbars

1import React from "react";
2import MarkdownEditor from '@uiw/react-markdown-editor';
3
4const title2 = {
5  name: 'title2',
6  keyCommand: 'title2',
7  button: { 'aria-label': 'Add title text' },
8  icon: (
9    <svg width="12" height="12" viewBox="0 0 512 512">
10      <path fill="currentColor" d="M496 80V48c0-8.837-7.163-16-16-16H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.621v128H154.379V96H192c8.837 0 16-7.163 16-16V48c0-8.837-7.163-16-16-16H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h37.275v320H32c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.621V288H357.62v128H320c-8.837 0-16 7.163-16 16v32c0 8.837 7.163 16 16 16h160c8.837 0 16-7.163 16-16v-32c0-8.837-7.163-16-16-16h-37.275V96H480c8.837 0 16-7.163 16-16z" />
11    </svg>
12  ),
13  execute: ({ state, view }) => {
14    if (!state || !view) return;
15    const lineInfo = view.state.doc.lineAt(view.state.selection.main.from);
16    let mark = '#';
17    const matchMark = lineInfo.text.match(/^#+/)
18    if (matchMark && matchMark[0]) {
19      const txt = matchMark[0];
20      if (txt.length < 6) {
21        mark = txt + '#';
22      }
23    }
24    if (mark.length > 6) {
25      mark = '#';
26    }
27    const title = lineInfo.text.replace(/^#+/, '')
28    view.dispatch({
29      changes: {
30        from: lineInfo.from,
31        to: lineInfo.to,
32        insert: `${mark} ${title}`
33      },
34      // selection: EditorSelection.range(lineInfo.from + mark.length, lineInfo.to),
35      selection: { anchor: lineInfo.from + mark.length },
36    });
37  },
38};
39
40const Dome = () => (
41  <MarkdownEditor
42    value="Hello Markdown!"
43    height="200px"
44    toolbars={[
45      'bold', title2
46    ]}
47  />
48);
49
50export default Dome;

Disable preview feature

1import React from "react";
2import MarkdownEditor from '@uiw/react-markdown-editor';
3
4const Dome = () => (
5  <MarkdownEditor
6    value="Hello Markdown!"
7    height="200px"
8    enablePreview={false}
9  />
10);
11
12export default Dome;

Support Nextjs

Use examples in nextjs.

1npm install next-remove-imports
2npm install @uiw/react-markdown-editor

1// next.config.js
2const removeImports = require('next-remove-imports')();
3module.exports = removeImports({});

1import dynamic from 'next/dynamic';
2import '@uiw/react-markdown-editor/markdown-editor.css';
3import '@uiw/react-markdown-preview/markdown.css';
4
5const MarkdownEditor = dynamic(
6  () => import("@uiw/react-markdown-editor").then((mod) => mod.default),
7  { ssr: false }
8);
9
10function HomePage() {
11  return (
12    <div>
13      <MarkdownEditor value="Hello Markdown!" />
14    </div>
15  );
16}
17
18export default HomePage;

Support dark-mode/night-mode

By default, the dark-mode is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark" parameter for html Element.

1<html data-color-mode="dark">

1document.documentElement.setAttribute('data-color-mode', 'dark')
2document.documentElement.setAttribute('data-color-mode', 'light')

Inherit custom color variables by adding .wmde-markdown-var selector.

1const Demo = () => {
2  return (
3    <div>
4      <div className="wmde-markdown-var"> </div>
5      <MarkdownEditor value="Hello Markdown!" />
6    </div>
7  )
8}

Props

• value (string) - the raw markdown that will be converted to html (required)
• visible?: boolean - Shows a preview that will be converted to html.
• toolbars?: ICommand[] | string[] - Tool display settings.
• toolbarsMode?: ICommand[] | string[] - Tool display settings.
• onChange?:function(editor: IInstance, data: CodeMirror.EditorChange, value: string) - called when a change is made
• onBlur?: function(editor: IInstance, event: Event) - event occurs when an object loses focus
• onPreviewMode?: (isHide: boolean) => void - Edit mode and preview mode switching event
• previewProps - react-markdown options

1import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
2export interface IMarkdownEditor extends ReactCodeMirrorProps {
3  className?: string;
4  prefixCls?: string;
5  /** The raw markdown that will be converted to html (**required**) */
6  value?: string;
7  /** Shows a preview that will be converted to html. */
8  visible?: boolean;
9  visibleEditor?: boolean;
10  /** Override the default preview component */
11  renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
12  /** Preview expanded width @default `50%` */
13  previewWidth?: string;
14  /** Whether to enable preview function @default `true` */
15  enablePreview?: boolean;
16  /** Whether to enable scrolling */
17  enableScroll?: boolean;
18  /** Tool display settings. */
19  toolbars?: Commands[];
20  /** The tool on the right shows the settings. */
21  toolbarsMode?: Commands[];
22  /** Tool display filter settings. */
23  toolbarsFilter?: (tool: Commands, idx: number) => boolean;
24  /** Toolbar on bottom */
25  toolbarBottom?: boolean;
26  /** Option to hide the tool bar. @deprecated The next major version will be deprecated. Please use `showToolbar`. */
27  hideToolbar?: boolean;
28  /** Option to hide the tool bar. */
29  showToolbar?: boolean;
30  /** [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview#options-props) options */
31  previewProps?: MarkdownPreviewProps;
32  /** replace the default `extensions` */
33  reExtensions?: ReactCodeMirrorProps['extensions'];
34  /** Edit mode and preview mode switching event */
35  onPreviewMode?: (isHide: boolean) => void;
36}

1import React from 'react';
2import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
3import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
4export * from '@uiw/react-markdown-preview';
5export interface ToolBarProps {
6  editor: React.RefObject<ReactCodeMirrorRef>;
7  preview: React.RefObject<HTMLDivElement>;
8  container: React.RefObject<HTMLDivElement>;
9  containerEditor: React.RefObject<HTMLDivElement>;
10  editorProps: IMarkdownEditor;
11}
12export interface MarkdownEditorRef {
13  editor: React.RefObject<ReactCodeMirrorRef> | null;
14  preview?: React.RefObject<MarkdownPreviewRef> | null;
15}
16export declare type Commands = keyof typeof defaultCommands | ICommand;
17export interface IToolBarProps<T = Commands> extends ToolBarProps {
18  className?: string;
19  editorProps: IMarkdownEditor;
20  mode?: boolean;
21  prefixCls?: string;
22  toolbars?: T[];
23  onClick?: (type: string) => void;
24}
25declare const MarkdownEditor: MarkdownEditorComponent;
26declare type MarkdownEditorComponent = React.FC<React.PropsWithRef<IMarkdownEditor>> & {
27  Markdown: typeof MarkdownPreview;
28};
29export default MarkdownEditor;

1import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
2import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
3export declare type ButtonHandle = (command: ICommand, props: IMarkdownEditor, options: ToolBarProps) => JSX.Element;
4export declare type ICommand = {
5  icon?: React.ReactElement;
6  name?: string;
7  keyCommand?: string;
8  button?: ButtonHandle | React.ButtonHTMLAttributes<HTMLButtonElement>;
9  execute?: (editor: ReactCodeMirrorRef) => void;
10};
11export declare const defaultCommands: {
12  undo: ICommand;
13  redo: ICommand;
14  bold: ICommand;
15  italic: ICommand;
16  header: ICommand;
17  strike: ICommand;
18  underline: ICommand;
19  quote: ICommand;
20  olist: ICommand;
21  ulist: ICommand;
22  todo: ICommand;
23  link: ICommand;
24  image: ICommand;
25  code: ICommand;
26  codeBlock: ICommand;
27  fullscreen: ICommand;
28  preview: ICommand;
29};
30export declare const getCommands: () => ICommand[];
31export declare const getModeCommands: () => ICommand[];
32export declare const defaultTheme: import("@codemirror/state").Extension;

Development

1npm run watch # Listen create type and .tsx files.
2npm run start # Preview code example.
3
4npm run doc

Related

• @uiw/react-textarea-code-editor: A simple code editor with syntax highlighting.
• @uiw/react-codemirror: CodeMirror component for React. @codemirror
• @uiw/react-monacoeditor: Monaco Editor component for React.
• @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
• @uiw/react-markdown-preview: React component preview markdown text in web browser.

Contributors

As always, thanks to our amazing contributors!

Made with action-contributors.

License

Licensed under the MIT License.