@thibaudcolas thibaudcolas released this Nov 27, 2017 · 524 commits to master since this release

Assets 2

Added

  • Add support for custom inline styles, thanks to @vincentaudebert (#97).
  • Add basic styles for common inline styles.
  • Add new description prop for all formats to describe the format's use with more text than the label.
  • Add tooltips for toolbar buttons to display the full control description as well as its keyboard shortcut.
  • Add separate button groups in the toolbar.
  • Add basic undo/redo controls in the toolbar (#100), displaying the related keyboard shortcuts.
  • Introduce icons for hr: and br: .
  • Add keyboard shortcuts for superscript & subscript.
  • Add more Markdown-like markers for heading levels (## ), code block (triple backtick), blockquote (> ), hr (---) (#53).
  • Add spellCheck prop, passed to Draft.js Editor. Sets whether spellcheck is turned on for your editor.
  • Add support for React 16.

Changed

  • Update keyboard shortcuts format to follow that of Google Docs.
  • Refine toolbar styles. Fix toolbar to the top of the page when sticky.
  • Make the editor look closer to a textarea (#96).
  • Update strikethrough shortcut from Google Docs.
  • Update Draft.js dependency to 0.10.4, and draftjs-utils to 0.8.8.
  • Stop preserving Markdown-like block marker when undoing block type change.
  • Stop restricting block type changes based on Markdown-style markers to unstyled blocks only.

Fixed

  • Fix tooltip position when scrolling (#99).
  • Fix beforeInput text replacement happening on non-collapsed selections.
  • Prevent text inserted after entities from continuing the entity. Fix #86 (#106).

How to upgrade

This release does not have many breaking changes, but the editor's toolbar styles have changed a lot and this may cause breakage.

First, update Draftail and its Draft.js peer dependency: npm install --save draft-js@^0.10.4 draftail@0.9.0.

Then, you will want to update controls to leverage the new description prop. It will be displayed in the new toolbar tooltips. Here is a brief example:

blockTypes={[
    {
        type: BLOCK_TYPE.HEADER_THREE,
        label: 'H3',
        // Use a description to further convey what the control does.
+        description: 'Heading 3',
    },
    {
        type: BLOCK_TYPE.UNORDERED_LIST_ITEM,
        // The icon is enough – but use the new prop to help screen reader users.
-        label: 'UL',
+        description: 'Bulleted list',
        icon: 'icon-list-ul',
    },
]}