@uiw/react-markdown-editor

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

Install

npm i @uiw/react-markdown-editor

Document

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

Basic Usage

import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';

const Dome = () => (
  <MarkdownEditor
    value={this.state.markdown}
    onChange={this.updateMarkdown}
  />
);

ReactDOM.render(<Dome />, document.getElementById('app'));

Controlled Usage

import MarkdownEditor from '@uiw/react-markdown-editor';
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [markdown, setMarkdown] = useState("");
  return (
    <MarkdownEditor
      value="# This is a H1  \n## This is a H2  \n###### This is a H6"
      onChange={(editor, data, value) => setMarkdown(value)}
    />
  );
}

ReactDOM.render(<App />, document.getElementById('app'));

Custom Toolbars

import React from "react";
import ReactDOM from "react-dom";
import MarkdownEditor from '@uiw/react-markdown-editor';

const title2 = {
  name: 'title2',
  keyCommand: 'title2',
  icon: (
    <svg width="12" height="12" viewBox="0 0 512 512">
      <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" />
    </svg>
  ),
  execute: (editor, selection, position) => {
    const value = selection ? `## ${selection}` : '## ';
    editor.replaceSelection(value);
    position.ch = !!selection ? position.ch : position.ch + 3;
    editor.setCursor(position.line, position.ch);
    editor.focus();
  },
};

const Dome = () => (
  <MarkdownEditor
    value="Hello Markdown!"
    toolbars={[
      'bold', 'italic', 'header', title2
    ]}
  />
);

ReactDOM.render(<Dome />, document.getElementById('app'));

Support Nextjs

Use examples in nextjs. #52 #224

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

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

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 (
    <div>
      <MarkdownEditor value="Hello Markdown!" />
    </div>
  );
}

export default HomePage;

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
• previewProps - react-markdown options

Other Props Options

Development

npm run dev
npm run type-check:watch
npm 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.

License

MIT © Kenny Wong