v0.9.0

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 [email protected].

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',
    },
]}