Skip to content

v2.0.0

Latest
Compare
Choose a tag to compare
@thibaudcolas thibaudcolas released this 21 Dec 22:15
· 2 commits to main since this release

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.