draftail

Draftail

:memo::cocktail: A configurable rich text editor built with Draft.js. Check out our demos!

Features

Draftail aims for a mouse-free, keyboard-centric experience. Here are important features worth highlighting:

• Support for keyboard shortcuts. Lots of them!
• Paste from Word. Or any other editor. It just works.
• Autolists – start a line with - , * , 1. to create a list item.
• Shortcuts for heading levels ##, code blocks ```, text formats **, and more.
• Undo / redo – until the end of times.
• Common text types: headings, paragraphs, quotes, lists.
• Common text styles: Bold, italic, and many more.
• API to build custom controls for links, images, and more.
• Compatibility with the draft-js-plugins ecosystem to build more advanced extensions.

This project adheres to Semantic Versioning, and measures performance and code coverage. We also try to follow accessibility best practices (tested with aXe) – please get in touch if you can help us do better in this area.

Documentation

• Getting started
• API reference
• User guide
• Getting started with extensions

Contributing

See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Please have a look at our contribution guidelines.

If you just want to set up the project on your own computer, the contribution guidelines also contain all of the setup commands.

Credits

Draftail is made possible by the work of Springload. View the full list of contributors. MIT licensed. The draftail.org documentation and demos are powered by Netlify.

Changelog

[v2.0.0]

This release contains breaking changes compared to v1.4.1. It’s identical to the v2.0.0-rc.6 pre-release.

Documentation: Getting started

Added

Toolbars

• Add a new optional FloatingToolbar component so the editor can be rendered with a minimal height.
• Add a new optional BlockToolbar component, intended for keyboard and first-time users.
• Add a new optional MetaToolbar component intended to display editor metadata at the bottom of the editor.
• Add a new optional InlineToolbar component, which is user-configurable to display either a static or floating toolbar.
• Add a new optional CommandPalette component, usable with the commandPalette rendering prop and the commands data prop.
• Placeholder follow focus
• Heading blocks highlight
• Single-line editing support

Miscellaneous improvements

• Add strict TypeScript module definition for Draftail. #388, #429
• Implement onPaste handler for entities to be able to create themselves on paste.
• Empty blocks now have a Draftail-block--empty class for styling.
• Add support for Windows High contrast mode / Contrast themes for the whole editor UI.
• Pass Draft.js ARIA props through. #436, #438
• Add a name prop and className to ToolbarGroup so different groups can have different styles, for example Draftail-ToolbarGroup--entities.

Changed

• The controls API now expects JS objects similarly to other APIs. Controls can now declare in what type of toolbar they should be rendered: block (static top toolbar), inline (floating toolbar), meta (bottom / meta toolbar). They can also have a type to help with troubleshooting.
• Draftail now uses CSS logical properties and values to support right-to-left (RTL) languages.
• Latest draftjs-conductor
• Latest draftjs-filters
• Dismiss keyboard shortcuts
• Move Sass import from draftail/lib/index.scss to draftail/src/index.scss

Fixed

• Fix Sass deprecation warning with / slash character for divisions and separators.
• Fix potential SSR issue with first-child selector

Removed

• Remove IE11 support

Breaking changes

TypeScript type definitions

For projects using TypeScript, the addition of type definitions is likely to cause new linting issues being reported in case Draftail’s new types are incompatible with the implementation.

Sass import

• Move Sass import from draftail/lib/index.scss to draftail/src/index.scss

Browser support

The editor now supports modern browsers only, in particular IE11 support has been removed. The new browser support follows evergreen browsers only. The oldest-supported browser is currently Safari 14.1.

| Browser | Device/OS | Version(s) | | ------------- | ---------- | ---------- | | Mobile Safari | iOS Phone | Last 2 | | Mobile Safari | iOS Tablet | Last 2 | | Chrome | Android | Last 2 | | Chrome | Desktop | Last 2 | | MS Edge | Windows | Last 2 | | Firefox | Desktop | Latest | | Firefox ESR | Desktop | Latest | | Safari | macOS | Last 3 |

RTL support

To introduce RTL support, a lot of the editor’s styles have been rewritten to use CSS logical properties and values, as well as Flexbox and Grid layout. This could lead to issues with bespoke UI customisations.

Controls API shape

The controls prop now takes objects rather than React components. Controls which aren’t updated to the new API will render in the static "top" toolbar only.

Entities API shape

Entities now accept a allowlist attribute rather than whitelist.