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 thecommandPalette
rendering prop and thecommands
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 atype
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
todraftail/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
todraftail/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
.