How to add custom plugins to Draftail?

Use the extensible API to build custom controls or integrate with the draft-js-plugins ecosystem; the documentation provides a 'Getting started with extensions' guide for step-by-step implementation.

Draftail vs TipTap: which is better for React?

Draftail is tightly integrated with Draft.js and focuses on keyboard shortcuts, while TipTap is built on ProseMirror with more active maintenance; choose Draftail for Draft.js compatibility, but TipTap for newer features and support.

Does Draftail support image uploads out of the box?

No, image handling requires custom implementation using the API for controls; the README mentions building custom controls for images, so developers need to code upload logic themselves.

How to handle paste from Google Docs in Draftail?

Draftail's robust paste handling works for various sources, including Google Docs, by cleaning and preserving formatting automatically; no extra setup is needed beyond basic configuration.

Is Draftail accessible for screen readers?

Accessibility is a work in progress, with the project tested using aXe but acknowledging room for improvement; developers should verify compliance for critical a11y requirements in their use cases.

Can I use Draftail without React?

No, Draftail is built on Draft.js, which is a React library, so it requires a React environment; for non-React projects, consider alternatives like Quill or TinyMCE.

Open-Awesome

Draftail

MITTypeScriptv2.0.1

A configurable rich text editor built with Draft.js, focusing on keyboard-centric editing and extensibility.

Visit Website GitHub

632 stars66 forks0 contributors

What is Draftail?

Draftail is a configurable rich text editor built with Draft.js, designed to provide a keyboard-centric editing experience with robust paste handling and auto-formatting capabilities. It solves the need for a flexible, extensible text editor in React-based applications, particularly for content management systems.

Target Audience

React developers building content management systems, admin panels, or any application requiring a customizable rich text editor with strong keyboard support.

Value Proposition

Developers choose Draftail for its emphasis on keyboard shortcuts, seamless paste handling from external editors, and extensible API that integrates with the draft-js-plugins ecosystem, offering a balance of usability and customization.

Overview

📝🍸 A configurable rich text editor built with Draft.js

Use Cases

Best For

Building custom CMS interfaces with rich text editing
Implementing keyboard-accessible text editors in React applications
Creating extensible editors with custom controls for links and media
Integrating with existing draft-js-plugins for advanced functionality
Projects requiring paste support from Word and other external editors
Applications where undo/redo history and auto-formatting are critical

Not Ideal For

Projects prioritizing long-term stability and active library maintenance, given Draft.js's archived status.
Applications requiring a rich text editor without a React dependency.
Teams seeking out-of-the-box, fully styled editors with minimal CSS customization.

Pros & Cons

Pros

Extensive Keyboard Shortcuts

Designed for mouse-free editing with comprehensive keyboard shortcuts, making it efficient for power users, as highlighted in the README's focus on a 'keyboard-centric experience'.

Seamless Paste Integration

Handles pasting from Word and other editors flawlessly without extra configuration, with the README stating 'Paste from Word. Or any other editor. It just works.'

Powerful Extensibility

Offers an API for building custom controls and integrates with the draft-js-plugins ecosystem, allowing developers to add advanced features like links and images.

Auto-Formatting Convenience

Supports autolists and text shortcuts for headings and code blocks, enabling quick formatting without manual toolbar clicks, as described with examples like 'start a line with - to create a list item.'

Cons

Relies on Archived Library

Built on Draft.js, which has been archived and no longer receives updates, raising concerns about future bug fixes, security vulnerabilities, and compatibility with newer React versions.

React-Only Dependency

Tied exclusively to React, making it unsuitable for projects using other frameworks or seeking a framework-agnostic solution, limiting its adoption scope.

Accessibility Uncertainty

Admits to only 'trying to follow accessibility best practices' and invites feedback for improvement, indicating potential gaps in screen reader support and other a11y features.

Frequently Asked Questions

Related Projects

React-Draft-Wyiswyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg

Stars6,470

Forks1,151

Last commit1 year ago

Braft

美观易用的React富文本编辑器，基于draft-js开发

Stars4,589

Forks583

Last commit1 year ago

React-RTE

Pure React rich text WYSIWYG editor based on draft-js.

Stars2,867

Forks428

Last commit3 years ago

Medium Draft

📝 A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts.

Stars1,716

Forks235

Last commit5 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub