avosalmon/react-markdown-editor

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

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'));

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