A markdown editor with preview, implemented with React.js and TypeScript.
Migrate from @uiw/react-markdown-editor 4.x to 5.x.
npm i @uiw/react-markdown-editorOfficial document demo preview (🇨🇳中国镜像网站)
importReactfrom'react';importMarkdownEditorfrom'@uiw/react-markdown-editor';constmdStr=`# This is a H1 \n## This is a H2 \n###### This is a H6`;constDome=()=>{return(<MarkdownEditorvalue={mdStr}onChange={(value,viewUpdate)=>{}}/>)};exportdefaultDome;
importReact,{useState}from'react';importMarkdownEditorfrom'@uiw/react-markdown-editor';constmdStr=`# This is a H1 \n## This is a H2 \n###### This is a H6`;exportdefaultfunctionApp(){const[markdown,setMarkdown]=useState(mdStr);return(<MarkdownEditorvalue={markdown}height="200px"onChange={(value,viewUpdate)=>setMarkdown(value)}/>);}This markdown preview sub-component is a direct export @uiw/react-markdown-preview component, API documentation, please check @uiw/react-markdown-preview.
importReactfrom'react';importMarkdownEditorfrom'@uiw/react-markdown-editor';constmdStr=`# This is a H1 \n## This is a H2 \n###### This is a H6`;functionApp(){return(<MarkdownEditor.Markdownsource={mdStr}height="200px"/>);}exportdefaultApp;importReactfrom"react";importMarkdownEditorfrom'@uiw/react-markdown-editor';consttitle2={name: 'title2',keyCommand: 'title2',button: {'aria-label': 'Add title text'},icon: (<svgwidth="12"height="12"viewBox="0 0 512 512"><pathfill="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"/></svg>),execute: ({ state, view })=>{if(!state||!view)return;constlineInfo=view.state.doc.lineAt(view.state.selection.main.from);letmark='#';constmatchMark=lineInfo.text.match(/^#+/)if(matchMark&&matchMark[0]){consttxt=matchMark[0];if(txt.length<6){mark=txt+'#';}}if(mark.length>6){mark='#';}consttitle=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},});},};constDome=()=>(<MarkdownEditorvalue="Hello Markdown!"height="200px"toolbars={['bold',title2]}/>);exportdefaultDome;Disable preview feature
importReactfrom"react";importMarkdownEditorfrom'@uiw/react-markdown-editor';constDome=()=>(<MarkdownEditorvalue="Hello Markdown!"height="200px"enablePreview={false}/>);exportdefaultDome;Use examples in nextjs.
npm install next-remove-imports
npm install @uiw/react-markdown-editor// next.config.jsconstremoveImports=require('next-remove-imports')();module.exports=removeImports({});importdynamicfrom'next/dynamic';import'@uiw/react-markdown-editor/markdown-editor.css';import'@uiw/react-markdown-preview/markdown.css';constMarkdownEditor=dynamic(()=>import("@uiw/react-markdown-editor").then((mod)=>mod.default),{ssr: false});functionHomePage(){return(<div><MarkdownEditorvalue="Hello Markdown!"/></div>);}exportdefaultHomePage;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.
<htmldata-color-mode="dark">document.documentElement.setAttribute('data-color-mode','dark')document.documentElement.setAttribute('data-color-mode','light')Inherit custom color variables by adding .wmde-markdown-var selector.
constDemo=()=>{return(<div><divclassName="wmde-markdown-var"></div><MarkdownEditorvalue="Hello Markdown!"/></div>)}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 madeonBlur?: function(editor: IInstance, event: Event)- event occurs when an object loses focusonPreviewMode?: (isHide: boolean) => void- Edit mode and preview mode switching eventpreviewProps- react-markdown options
import{ReactCodeMirrorProps}from'@uiw/react-codemirror';exportinterfaceIMarkdownEditorextendsReactCodeMirrorProps{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](https://github.com/uiwjs/react-markdown-preview#options-props) options */previewProps?: MarkdownPreviewProps;/** replace the default `extensions` */reExtensions?: ReactCodeMirrorProps['extensions'];/** Edit mode and preview mode switching event */onPreviewMode?: (isHide: boolean)=>void;}importReactfrom'react';import{ReactCodeMirrorRef}from'@uiw/react-codemirror';import{MarkdownPreviewProps,MarkdownPreviewRef}from'@uiw/react-markdown-preview';export*from'@uiw/react-markdown-preview';exportinterfaceToolBarProps{editor: React.RefObject<ReactCodeMirrorRef>;preview: React.RefObject<HTMLDivElement>;container: React.RefObject<HTMLDivElement>;containerEditor: React.RefObject<HTMLDivElement>;editorProps: IMarkdownEditor;}exportinterfaceMarkdownEditorRef{editor: React.RefObject<ReactCodeMirrorRef>|null;preview?: React.RefObject<MarkdownPreviewRef>|null;}exportdeclaretypeCommands=keyoftypeofdefaultCommands|ICommand;exportinterfaceIToolBarProps<T=Commands>extendsToolBarProps{className?: string;editorProps: IMarkdownEditor;mode?: boolean;prefixCls?: string;toolbars?: T[];onClick?: (type: string)=>void;}declareconstMarkdownEditor: MarkdownEditorComponent;declaretypeMarkdownEditorComponent=React.FC<React.PropsWithRef<IMarkdownEditor>>&{Markdown: typeofMarkdownPreview;};exportdefaultMarkdownEditor;import{ReactCodeMirrorRef}from'@uiw/react-codemirror';import{MarkdownPreviewProps,MarkdownPreviewRef}from'@uiw/react-markdown-preview';exportdeclaretypeButtonHandle=(command: ICommand,props: IMarkdownEditor,options: ToolBarProps)=>JSX.Element;exportdeclaretypeICommand={icon?: React.ReactElement;name?: string;keyCommand?: string;button?: ButtonHandle|React.ButtonHTMLAttributes<HTMLButtonElement>;execute?: (editor: ReactCodeMirrorRef)=>void;};exportdeclareconstdefaultCommands: {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;};exportdeclareconstgetCommands: ()=>ICommand[];exportdeclareconstgetModeCommands: ()=>ICommand[];exportdeclareconstdefaultTheme: import("@codemirror/state").Extension;npm run watch # Listen create type and .tsx files.
npm run start # Preview code example.
npm run doc- @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.
As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.