github.com/uiwjs/react-md-editor @v4.1.1 sqlite

^{Special thanks to:}

SubList - Bill Reminder & Renewal Alerts

^{Using my app is also a way to support me:}

A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on textarea encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc.

Features

• 📑 Indent line or selected text by pressing tab key, with customizable indentation.
• ♻️ Based on textarea encapsulation, does not depend on any modern code editors.
• 🚧 Does not depend on the uiw component library.
• 🚘 Automatic list on new lines.
• 😻 GitHub flavored markdown support.
• 🌒 Support dark-mode/night-mode @v3.11.0+.
• 💡 Support next.js, Use examples in next.js.
• Line/lines duplication (Ctrl+D) and movement (Alt+UpArrow/DownArrow) @v3.24.0+.

Quick Start

npm i @uiw/react-md-editor

or

yarn add @uiw/react-md-editor

Using

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

export default function App() { const [value, setValue] = React.useState("Hello world!!!"); return (

  <MDEditor
    value={value}
    onChange={setValue}
  />
  <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />

); }

### Headless Mode

The package exposes the necessary utilities to build a headless markdown editor with your own UI. This example creates a simple textarea that supports markdown keyboard shortcuts and correct handling of newlines.

```jsx mdx:preview
import React from "react";
import { 
  handleKeyDown, 
  shortcuts, 
  TextAreaCommandOrchestrator,
  getCommands,
} from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  const textareaRef = React.useRef(null);
  const orchestratorRef = React.useRef(null);

  React.useEffect(() => {
    if (textareaRef.current) {
      orchestratorRef.current = new TextAreaCommandOrchestrator(textareaRef.current);
    }
  }, []);

  const onKeyDown = (e) => {
    handleKeyDown(e, 2, false);
    if (orchestratorRef.current) {
      shortcuts(e, getCommands(), orchestratorRef.current);
    }
  };

  return (
    <textarea
      ref={textareaRef}
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onKeyDown={onKeyDown}
      style={{ width: '100%', height: 200, padding: 10 }}
    />
  );
}

Special Markdown syntax

Supports for CSS Style

Use HTML comments `` to let Markdown support style customization.

## Title


Markdown Supports **Style**

Ignore content display via HTML comments

Shown in GitHub readme, excluded in HTML.

# Hello World

Hello World

Good!

Output:

<h1>Hello World</h1>



Good!

Security

Please note markdown needs to be sanitized if you do not completely trust your authors. Otherwise, your app is vulnerable to XSS. This can be achieved by adding rehype-sanitize as a plugin.

```jsx mdx:preview import React from "react"; import MDEditor from '@uiw/react-md-editor'; import rehypeSanitize from "rehype-sanitize";

export default function App() { const [value, setValue] = React.useState(**Hello world!!!** <IFRAME SRC=\"javascript:javascript:alert(window.origin);\"></IFRAME>); return (

  <MDEditor
    value={value}
    onChange={setValue}
    previewOptions={{
      rehypePlugins: [[rehypeSanitize]],