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.

v1.4.1

Documentation: draftail.org/docs/getting-started

Fixed

• Fix plugin keyBindingFns not being called. #246, #445

v1.4.0

Documentation: draftail.org/docs/getting-started

Added

• Make it possible to hide buttons with default labels by setting their label to null. #442

Changed

• Improve the editor props’ JSDoc annotations. #441

Fixed

• Fix empty buttons appearing when providing custom formats without a defined label or icon. #442
• Clear save timeout handler when unmounting the editor. #208, #443

v1.3.0

Documentation: draftail.org/docs/1.3.0/getting-started

🎉 blog post for this release: Draftail v1.3.0: community improvements, beyond Wagtail.

Added

• Add ability to disable the editor on demand with the readOnly prop, matching behavior of Draft.js. #201, #206, thanks to @SpearThruster.
• Add ability to use the editor as a controlled component, like vanilla Draft.js editors, with editorState and onChange props. Have a look at the controlled component documentation for further details. #180, #207.

Fixed

• Fix undo/redo button icons not being customisable (#195, #196).

v1.2.1

Documentation: draftail.org/docs/1.2.1/getting-started

Fixed

• Fix regression introduced in v1.2.0 where Draft.js-defined keyboard shortcuts were available unconditionally (#189).

v1.2.0

Documentation: draftail.org/docs/1.2.0/getting-started

🎉 blog post for this release: Draftail v1.2.0: supporting modern experiences.

Added

• Add plugins API to support extensions of the editor using the draft-js-plugins architecture (#83, #171).

This new API makes it possible to build much more advanced extensions to the editor than ever before, such as autocompletes, linkify, custom blocks, custom toolbars, and more. Read the release blog post to learn more about the motivation for those new APIs.

• Add data reset parameter to DraftUtils.resetBlockWithType().
• Add ability to disable or customise the editor toolbar with topToolbar.
• Add ability to add a toolbar below the editor with bottomToolbar.
• Add support for Markdown shortcuts for inline styles, e.g. ** for bold, _ for italic, etc (#134, #187). View the full list of keyboard shortcuts.

Changed

• Enable list continuation on Enter for custom *-list-item blocks. All that’s required is for the block type to end with -list-item.

v1.1.0

Documentation: draftail.org/docs/1.1.0/getting-started

🎉 blog post for this release: Draftail v1.1.0: a quality of life release.

Added

• Add onFocus and onBlur props to use callbacks on those events. This can be useful for form validation. #170, #174, thanks to @TheSpicyMeatball.

Fixed

• Stop unnecessarily calling onSave in the editor’s onBlur (#173).
• Prevent crash when filtering pasted content whose last block is to be removed (e.g. unsupported image) (#179).
• Prevent crash in DraftUtils.getEntitySelection, when the provided entity key isn't valid (undefined, missing) (#168).
• Fix entity removal and editing not doing anything when the selection is backwards (right to left) (#168).

Changed

• Update draftjs-filters dependency (#179).
• Update draftjs-conductor dependency.

Removed

• Remove all PropTypes. The project is now typed with Flow (#127, #178).
• Remove peerDependency on prop-types (#127, #178).

v1.0.0

Documentation: draftail.org/docs/1.0.0/getting-started

This release is functionally identical to the last one, v0.17.2.

The project has reached a high-enough level of stability to be used in production, and breaking changes will now be reflected via major version changes.

v0.17.2

Changed

• Update to [email protected]. This does not include any functional changes, but will cause a duplicated dependency for projects having both draftail and draftjs-filters as deps if they don’t also update draftjs-filters.
• Add Draft.js copy-paste handling overrides from draftjs-conductor. This makes Draftail always preserve the full content as-is when copy-pasting between editors. Fix #147 (thibaudcolas/draftjs-conductor#2).

v0.17.1

Changed

• Unsupported actions causing an atomic block to be without entity now soft-fail with an un-editable atomic block instead of hard-fail wagtail/wagtail#4370.

Fixed

• Add workaround for RichUtils image delete blind spot reported in wagtail/wagtail#4370 (#144).