Courses & Tutorials Programming

Awesome Draft Js – Massive Collection of Resources

admin December 24, 2020

0 13 3 minutes read

Spread the love

Draft.js is a framework for building rich text editors in React.

Table of Contents

Community

Slack channel

Presentations

Standalone Editors Built on Draft.js

Draft WYSIWYG – WYSIWYG editor that with drag&drop, resizing & tooltips.
Draft.js Editor – A Rich text editor inspired by Medium & Facebook Notes.
React-RTE – A full-featured textarea replacement similar to CKEditor or TinyMCE.
Facebook Notes Clone(ish) – Rich text editor similar to Facebook notes.
Megadraft – A rich text editor with a nice default base of plugins and extensibility.
Medium Draft – Medium-like rich text editor with a focus on keyboard shortcuts.
React-Draft-Wyiswyg – A WYISWYG editor, with various text editing options and corresponding HTML generation.
Dante 2 – Just another Medium clone built on top of DraftJs.
Last Draft – A Draft editor built with Draft.js plugins.
Z-Editor – Online Z-notations editor.
Draftail – A configurable rich text editor based on Draft.js, built for Wagtail.
Braft – Extensible Draft JS Editor

Plugins and Decorators Built for Draft.js

Draft.js Plugins – A Plugin architecture on top of Draft.js
- Alignment
- Block Breakout – Break out of block types as you type.
- Buttons
- Color Picker
- Counter – Character, word & line counting.
- Divider
- Drag and Drop
- Embed
- Emoji – Slack-like emoji support
- EmojiPicker
- Focus
- GifPicker
- Hashtags – Twitter-like hashtag support
- Image
- Inline Toolbar
- Katex – Insert and render LaTeX using Katex.
- Link
- Linkify – Automatically turn links into anchor-tags.
- List – Automatic list creation, nested lists
- Markdown Shortcuts – Markdown syntax shortcuts.
- Mathjax – Edit math using (La)TeX rendered by Mathjax.
- Mention – Twitter-like mention support
- Modal
- Prism – Syntax highlight code blocks with Prism.
- Resizeable
- RichButtons – Add and customize rich formatting buttons.
- Side Toolbar
- Sidebar
- Single Line – Restrict to a single line of input.
- Sticker – Facebook-like sticker support
- Toolbar
- Undo – Undo & Redo button.
- Video
Draft.js Gutter – Compliments line number gutter.
Draft.js Basic HTML Editor – Accept html as its input format, and return html to an onChange.
Draft.js Prism– Highlight code blocks using Prism.
Draft.js Typeahead – Support for typeahead functionality.
Draft Extend – Build extensible Draft.js editors with configurable plugins and integrated serialization.
Draft.js Code – A collection of low-level utilities for nicer code editing
Draft.js Annotatable – Out of the box annotation system for Draft.js with support for user-created annotations.
Draft.js Regex – The set of flexible helpers, like regex, blank lines preventing and pasted HTML clearing.

Common Utilities

BackDraft.js – Function to turn a rawContentBlock into a marked-up string.
Draft.js Exporter – Export and format the content from Draft.js.
Draft.js: Export ContentState to HTML – Export ContentState to HTML.
Draft.js: Export ContentState to PDFMake – Export ContentState to PDFMake.
Redraft – Renders the result of Draft.js convertToRaw using provided callbacks, works well with React
Draft.js exporter (Ruby) – Export Draft.js content state into HTML.
Draft.js exporter (Python) – Library to convert Draft.js raw ContentState to HTML
Draft.js AST Exporter – Export content into an abstract syntax tree (AST).
Draft.js AST Importer– Import an abstract syntax tree (AST) output from the companion draft-js-ast-exporter.
Draft.js Multidecorators – Combine multiple decorators.
Draft.js SimpleDecorator – Easily create flexible decorators.
DraftJS Utils – Set of utility functions for DraftJS.
DraftJs to HTML – Library for generating HTML for DraftJS editor content.
Draft Convert – Extensibly serialize & deserialize Draft.js ContentState with HTML.
HTML to DraftJS – Convert plain HTML to DraftJS Editor content.
Draft.js Exporter (Go) – Export Draft.js content state into HTML.
React Native Draft.js Render – A React Native render for Draft.js model.
Draft.js filters – Filter Draft.js content to preserve only the formatting you allow.
Sticky – A simple note taking and clipboard managing desktop application