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"
/>
</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;
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 data-color-mode="dark"></html>
document.documentElement.setAttribute("data-color-mode", "dark");
document.documentElement.setAttribute("data-color-mode", "light");
Inherit custom color variables by adding .wmde-markdown-var selector.
const Demo = () => {
return (
<div>
<div className="wmde-markdown-var"> </div>
<MarkdownEditor value="Hello Markdown!" />
</div>
);
};
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 madeonBlur?: function(editor: IInstance, event: Event)- event occurs when an object loses focuspreviewProps- react-markdown 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.
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.