Medium Pro Editor in React

<p align="center">
  <a href="https://github.com/abdulrahman-mh/medium-proeditor">
    <img src="https://raw.githubusercontent.com/abdulrahman-mh/medium-proeditor/main/images/preview.oblique.png" alt="Medium ProEditor logo" width="600" />
  </a>
</p>

<h2 align="center">A powerful & customizable Medium-style rich text editor</h2>

<br>

**Hit Star** ⭐ & check out the [Live Demo](https://medium-proeditor.vercel.app/)

Medium ProEditor is the ultimate Medium-style rich text editor—fast, powerful, and highly customizable. You can use it for blogs, managing CMS, online collaboration, and anything from drafting to publishing. Built for flexibility, it supports both client-side and server-side workflows with real-time collaboration. it's really Pro 😎😊

## Why Use Medium ProEditor?

- 🚀 **Fast**: Lighter & more optimized than Medium’s editor (**benchmark in progress...**) thanks to [prosemirror](https://prosemirror.net/).

- ⚡ **AI-Powered Autocomplete (Coming Soon 🤖)**: Add AI to your editor

- 🎨 **Customizable**: Plugin-based architecture easy for customization.

- 📝 **Rich Media Support**: Images, videos, tooltips, popups, and more.

- ⌨️ **Markdown Support**: Enjoy with cool **Markdown editing shortcuts**.

- 📜 **Smart Document Handling**: Version history, backend sync, and real-time collaboration.

- 🌐 **Multi-Language Support**: Built-in localization & LTR-RTL support.

- 📦 **Tree-shakeable**: Bundle only the features you need.

- 🌍 **Framework-Agnostic**: Works with [**React**](https://react.dev/), [**Vue**](https://vuejs.org/) , [**Svelte**](https://svelte.dev/), **Vanilla JS**, and more.

- ⭐ **Love this project?**: Star ⭐ the repo.

### **Medium-ProEditor VS Official Medium Editor**:

Soon, you can help with that.

### **Benchmark**:

Soon, you can help with that.

## ⚡ Quick Start

Install Medium-ProEditor:

```bash
npm install medium-proeditor
```

Plain javascript usage

```javascript
import 'medium-proeditor/themes/medium.min.css'; // Editor themes

import { Editor } from 'medium-proeditor';

// Import some features
import { HighlightMenu, InlineTooltip, Media, Emoji } from 'medium-proeditor/features';

const editor = new Editor({
  // Add some features to your editor
  features: [
    HighlightMenu, // Add highlight menu
    InlineTooltip, // Add inline tooltip menu
    Media, // Adds support for embedding media (images, videos, etc.)
    Emoji, // Add Emoji menu, type ':' to select your emoji
  ],
});
```

React Usage

```javascript
import 'medium-proeditor/themes/medium.min.css';

import { useEffect, useRef } from 'react';

import { Editor } from 'medium-proeditor';
import { HighlightMenu, InlineTooltip } from 'medium-proeditor/features';

const EditorComponent = () => {
  const editorRef = useRef(null);
  const [editor, setEditor] = useState(null); // Store editor instance

  useEffect(() => {
    if (editorRef.current) {
      // Create an editor instance
      const editor = new Editor({ features: [HighlightMenu, InlineTooltip] });
      setEditor(editor);
    }

    // Cleanup the editor
    return () => {
      editor?.destroy();
      setEditor(null);
    };
  }, []);

  return (
    <div>
      <h1>Medium Pro Editor in React</h1>
      <div ref={editorRef} />
    </div>
  );
};
```

## 💙 **Support & Donate**

Medium-ProEditor is built with passion and **100% open-source**! If you’d like to help:

💖 **Sponsor Medium-ProEditor**

☕ **[Buy Me a Coffee](#) (Soon i will have a account)** → Every donation keeps the project alive!

⭐ **[Star the Repo](#)** → Stay updated and support the project!

## 🤝 Contributing

Any Contributing are welcome, open [CONTRIBUTING.md](./CONTRIBUTE.md) for more

## Editor Keyboard Shortcuts

| Feature                 | Mac Shortcut        | Windows/Linux Shortcut |
| ----------------------- | ------------------- | ---------------------- |
| **Text Formatting**     |                     |                        |
| **Bold** (**B**)        | ⌘ + B               | Ctrl + B               |
| _Italic_ (_I_)          | ⌘ + I               | Ctrl + I               |
| Add Link                | ⌘ + K               | Ctrl + K               |
| Header (H1)             | ⌘ + Opt + 1         | Ctrl + Alt + 1         |
| Subheader (H2)          | ⌘ + Opt + 2         | Ctrl + Alt + 2         |
| Blockquote              | ⌘ + Opt + 5         | Ctrl + Alt + 5         |
| Horizontal Line         | ⌘ + Enter           | Ctrl + Enter           |
| Code Block              | ⌘ + Opt + 6         | Ctrl + Alt + 6         |
| Line Break              | Shift + Enter       | Shift + Enter          |
| **Lists & Indentation** |                     |                        |
| Outdent List            | ⌘ + [ / Shift + Tab | Shift + Tab            |
| Indent List             | ⌘ + ] / Tab         | Tab                    |

## Editor Editing Shortcuts

| Feature      | Syntax                                    |
| ------------ | ----------------------------------------- |
| Ordered List | Start with `1. ` (or any number + dot)    |
| Bullet List  | Start with `* ` (asterisk + space)        |
| Code Block   | Use triple backticks ` ``` `              |
| Inline Code  | Wrap text with backticks (e.g., \`code\`) |
| Emoji Picker | Type `:` then search for an emoji         |

## Markdown Shortcuts (Requires `markdownShortcuts` options to be enabled)

| Feature             | Syntax Example                               |
| ------------------- | -------------------------------------------- |
| Blockquote          | Type `>` for blockquote, `>>` for pull quote |
| **Bold** Text       | Type `**bold**` or `__bold__`                |
| _Italic_ Text       | Type `_italic_` or `*italic*`                |
| Horizontal Line     | Type `---` for a divider                     |
| # Big Title (H1)    | Type `# Title`                               |
| ## Small Title (H2) | Type `## Subtitle`                           |

**Tip:** These shortcuts also work when pasting formatted text!

---

## Technology

Medium ProEditor is built with [ProseMirror](https://prosemirror.net/)—a toolkit for building rich-text editors on the web.

MIT, commercial use requires a license. | © [Abdulrahman Mahmoud](https://github.com/abdulrahman-mh)