https://github.com/ryuever/react-tapable-editor

A pluginable, intuitive medium/notion like rich text editor(currently in wip)
https://github.com/ryuever/react-tapable-editor

draft-js medium-editor notion-editor react rich-text-editor tapable webpack

Last synced: about 1 month ago
JSON representation

A pluginable, intuitive medium/notion like rich text editor(currently in wip)

• Host: GitHub
• URL: https://github.com/ryuever/react-tapable-editor
• Owner: ryuever
• Created: 2020-02-15T08:30:22.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-10-11T17:00:09.000Z (about 4 years ago)
• Last Synced: 2024-04-09T20:26:28.735Z (9 months ago)
• Topics: draft-js, medium-editor, notion-editor, react, rich-text-editor, tapable, webpack
• Language: TypeScript
• Homepage:
• Size: 4.12 MB
• Stars: 366
• Watchers: 11
• Forks: 42
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-tapable-editor

_A pluginable, intuitive medium/notion like rich text editor_

The original idea is to build an easy used rich text editor. `react-tapable-editor` is built on [draft-js](https://github.com/facebook/draft-js), and its plugin system is besed on [tapable](https://github.com/webpack/tapable) which is famous as the engine of [webpack](https://github.com/webpack/webpack).

## Features

### BlockStyle

- [x] header

- [x] quotation

- [x] list

- [x] quotation

![gif](./docs/basic.gif)

#### code block

- [x] highlight with prism

- [x] copy from vscode, style could be preserved.

- [ ] copy from github, code will suppress into one line.

![code](./docs/code.gif)

#### Image

![image](./docs/image.gif)

### Experimental feature

#### Drag and drop block

![drag-block](./docs/drag-block.gif)

[drag to make layout design](./docs/drag.md)

#### TODO consider smooth reflow...

## How to start

```bash

$ npm install

$ npm run storybook

```

## FAQ

### why choose draft-js

- [awesome-draft-js](https://github.com/nikgraf/awesome-draft-js)

- [Why Wagtail’s new editor is built with Draft.js](https://wagtail.io/blog/why-wagtail-new-editor-is-built-with-draft-js/)

- [Rethinking rich text pipelines with Draft.js](https://wagtail.io/blog/rethinking-rich-text-pipelines-with-draft-js/)