@uiw/react-markdown-editor

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


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

Install

``bash
npm i @uiw/react-markdown-editor
`

Document

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

Basic Usage

`jsx mdx:preview
import React from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const mdStr = # This is a H1 \n## This is a H2 \n###### This is a H6;

const Dome = () => {
return (
value={mdStr}
onChange={(value, viewUpdate) => {

}}
/>
)
};

export default Dome;
`

Controlled Usage

![Open in CodeSandbox](https://codesandbox.io/embed/react-markdown-editor-ybpce?file=/src/App.js)

`jsx mdx:preview
import React, { useState } from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const mdStr = # This is a H1 \n## This is a H2 \n###### This is a H6;
export default function App() {
const [markdown, setMarkdown] = useState(mdStr);
return (
value={markdown}
height="200px"
onChange={(value, viewUpdate) => setMarkdown(value)}
/>
);
}
`

Only Markdown Preview

![Open in CodeSandbox](https://codesandbox.io/embed/react-markdown-editor-forked-qyp83q?fontsize=14&hidenavigation=1&theme=dark)

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

`jsx mdx:preview
import React from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const mdStr = # This is a H1 \n## This is a H2 \n###### This is a H6;
function App() {
return (

);
}

export default App;
`

Custom Toolbars

![Open in CodeSandbox](https://codesandbox.io/embed/react-markdown-editorcustom-toolbars-forked-r9ocu?fontsize=14&hidenavigation=1&theme=dark)

`jsx mdx:preview
import React from "react";
import MarkdownEditor from '@uiw/react-markdown-editor';

const title2 = {
name: 'title2',
keyCommand: 'title2',
button: { 'aria-label': 'Add title text' },
icon: (



),
execute: ({ state, view }) => {
if (!state || !view) return;
const lineInfo = view.state.doc.lineAt(view.state.selection.main.from);
let mark = '#';
const matchMark = lineInfo.text.match(/^#+/)
if (matchMark && matchMark[0]) {
const txt = matchMark[0];
if (txt.length < 6) {
mark = txt + '#';
}
}
if (mark.length > 6) {
mark = '#';
}
const title = lineInfo.text.replace(/^#+/, '')
view.dispatch({
changes: {
from: lineInfo.from,
to: lineInfo.to,
insert: ${mark} ${title}
},
// selection: EditorSelection.range(lineInfo.from + mark.length, lineInfo.to),
selection: { anchor: lineInfo.from + mark.length },
});
},
};

const Dome = () => (
value="Hello Markdown!"
height="200px"
toolbars={[
'bold', title2
]}
/>
);

export default Dome;
`

Disable preview feature

![Open in CodeSandbox](https://codesandbox.io/embed/react-markdown-editor-https-github-com-uiwjs-react-markdown-editor-issues-205-c3kqhd?fontsize=14&hidenavigation=1&theme=dark)

`jsx mdx:preview
import React from "react";
import MarkdownEditor from '@uiw/react-markdown-editor';

const Dome = () => (
value="Hello Markdown!"
height="200px"
enablePreview={false}
/>
);

export default Dome;
`


Support Nextjs

Use examples in nextjs.

![Open in CodeSandbox](https://codesandbox.io/embed/nextjs-example-react-markdown-editor-72s9d?fontsize=14&hidenavigation=1&theme=dark)
![#52](https://github.com/uiwjs/react-md-editor/issues/52#issuecomment-848969341)
![#224](https://github.com/uiwjs/react-md-editor/issues/224#issuecomment-901112079)

`bash
npm install next-remove-imports
npm install @uiw/react-markdown-editor
`

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

`jsx
import dynamic from 'next/dynamic';
import '@uiw/react-markdown-editor/markdown-editor.css';
import '@uiw/react-markdown-preview/markdown.css';

const MarkdownEditor = dynamic(
() => import("@uiw/react-markdown-editor").then((mod) => mod.default),
{ ssr: false }
);

function HomePage() {
return (


);
}

export 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.

`html

`

`js
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
`

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

`jsx
const Demo = () => {
return (



)
}
`

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

`ts
import { ReactCodeMirrorProps } from '@uiw/react-codemirror';
export interface IMarkdownEditor extends ReactCodeMirrorProps {
className?: string;
prefixCls?: string;
/ The raw markdown that will be converted to html (required*) /
value?: string;
/* Shows a preview that will be converted to html. /
visible?: boolean;
visibleEditor?: boolean;
/* Override the default preview component /
renderPreview?: (props: MarkdownPreviewProps, initVisible: boolean) => React.ReactNode;
/* Preview expanded width @default 50% /
previewWidth?: string;
/* Whether to enable preview function @default true /
enablePreview?: boolean;
/* Whether to enable scrolling /
enableScroll?: boolean;
/* Tool display settings. /
toolbars?: Commands[];
/* The tool on the right shows the settings. /
toolbarsMode?: Commands[];
/* Tool display filter settings. /
toolbarsFilter?: (tool: Commands, idx: number) => boolean;
/* Toolbar on bottom /
toolbarBottom?: boolean;
/* Option to hide the tool bar. @deprecated The next major version will be deprecated. Please use showToolbar. /
hideToolbar?: boolean;
/* Option to hide the tool bar. /
showToolbar?: boolean;
/* @uiw/react-markdown-preview options /
previewProps?: MarkdownPreviewProps;
/* replace the default extensions /
reExtensions?: ReactCodeMirrorProps['extensions'];
/* Edit mode and preview mode switching event /
onPreviewMode?: (isHide: boolean) => void;
}
`

`ts
import React from 'react';
import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
export * from '@uiw/react-markdown-preview';
export interface ToolBarProps {
editor: React.RefObject;
preview: React.RefObject;
container: React.RefObject;
containerEditor: React.RefObject;
editorProps: IMarkdownEditor;
}
export interface MarkdownEditorRef {
editor: React.RefObject | null;
preview?: React.RefObject | null;
}
export declare type Commands = keyof typeof defaultCommands | ICommand;
export interface IToolBarProps extends ToolBarProps {
className?: string;
editorProps: IMarkdownEditor;
mode?: boolean;
prefixCls?: string;
toolbars?: T[];
onClick?: (type: string) => void;
}
declare const MarkdownEditor: MarkdownEditorComponent;
declare type MarkdownEditorComponent = React.FC> & {
Markdown: typeof MarkdownPreview;
};
export default MarkdownEditor;
`

`ts
import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
import { MarkdownPreviewProps, MarkdownPreviewRef } from '@uiw/react-markdown-preview';
export declare type ButtonHandle = (command: ICommand, props: IMarkdownEditor, options: ToolBarProps) => JSX.Element;
export declare type ICommand = {
icon?: React.ReactElement;
name?: string;
keyCommand?: string;
button?: ButtonHandle | React.ButtonHTMLAttributes;
execute?: (editor: ReactCodeMirrorRef) => void;
};
export declare const defaultCommands: {
undo: ICommand;
redo: ICommand;
bold: ICommand;
italic: ICommand;
header: ICommand;
strike: ICommand;
underline: ICommand;
quote: ICommand;
olist: ICommand;
ulist: ICommand;
todo: ICommand;
link: ICommand;
image: ICommand;
code: ICommand;
codeBlock: ICommand;
fullscreen: ICommand;
preview: ICommand;
};
export declare const getCommands: () => ICommand[];
export declare const getModeCommands: () => ICommand[];
export declare const defaultTheme: import("@codemirror/state").Extension;
`

$3

`bash
npm run watch # Listen create type and .tsx files.
npm run start # Preview code example.

npm run doc
``

$3

- @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.