draftail - npm Package Versions

[v0.17.0]

Added

• Add basic API for arbitrary controls in the toolbar.
• Expose ToolbarButton component in the API.
• Add ability to set ariaDescribedBy prop of Draft.js.

Changed

• Replace block entities by a paragraph when using onRemoveEntity.
• Replace ListNesting implementation with the one from draftjs-conductor.

Fixed

• Fix copy-paste filter running more often than necessary.
• Use darker placeholder text color to pass WCAG2.0 AAA level contrast ratio. Overridable via $draftail-placeholder-text.
• Fix HR block spacing at the top of the editor.

Removed

• Remove DraftUtils.isSelectedBlockType().
• Remove DraftUtils.hasCurrentInlineStyle().

[v0.16.0]

Changed

• Remove toolbar z-index when the editor is not focused, to reduce chances of interferring with other components.
• Adjust toolbar button alignment for text-only buttons.
• Replace className prop for blocks by dynamically adding a class based on block type.
• Update to draftjs-filters@0.7.0 to preserve list items in Word.
• Update draft-js peerDependency version to 0.10.5.

Fixed

• Fix Markdown shortcuts for blocks removing styles and entities at the end of the block text.

Removed

• Remove React 15 from peerDependencies.

[v0.15.0]

Changed

• Replace nested-list-items Sass helper with new auto-generated CSS in JS.
• Update to draftjs-filters@0.6.1 to fix entities not being cloned on paste.

Removed

• Remove support for maxListNesting greater than 10.

[v0.14.0]

Added

• Make line break and horizontal line controls configurable, by passing an object with icon, label, description props.
• Add ability to set textAlignment, textDirectionality, autoCapitalize, autoComplete, autoCorrect props of Draft.js.

Changed

• Rename DraftUtils.addLineBreakRemovingSelection to DraftUtils.addLineBreak.
• Replace showUndoRedoControls with separate props showUndoControl and showRedoControl for which control UI can be overriden.
• Make all keyboard shortcut labels language agnostic.

Fixed

• Fix DraftUtils.addLineBreak adding line breaks in the wrong place when selection is collapsed.

[v0.13.0]

Added

• Add default block spacing to make it easier to distinguish empty blocks.

Changed

• Make rich text styles specific to Draftail.
• Update to draftjs-filters@0.5.0 to improve filtering on undefined attributes.
• Update editor read-only styles to integrate better with any background color.

Fixed

• Prevent toolbar tooltip from having a transition delay on close.
• Prevent toolbar tooltip from staying open when hovered.

[v0.12.0]

Added

• Add Draftail-unstyled class to unstyled block, makes it easy to style unstyled blocks.
• Add $draftail-editor-background variable to override editor bg.
• Add draftail-richtext-styles mixin to style rich text content within the editor.
• Add imperative focus() API to the editor, like that of Draft.js.
• Add onClose prop to sources, to close the source without focusing the editor again.

Changed

• Make all icons vertical-align: middle; by default.
• Update to draftjs-filters@0.4.0 to allow filtering on undefined attributes.

Fixed

• Fix icons / labels alignment in the toolbar.

[v0.11.0]

Added

• Add new Sass constants to make the editor more themable: $draftail-editor-padding, $draftail-editor-text, $draftail-editor-font-family, $draftail-editor-font-size, $draftail-editor-line-height, $draftail-toolbar-radius, $draftail-editor-border, $draftail-toolbar-tooltip-radius, $draftail-toolbar-tooltip-duration, $draftail-toolbar-tooltip-delay.
• Delay toolbar tooltip opening on hover by 0.5s, animated over 0.1s.
• Make Markdown-style markers work on non-empty blocks (#53).

Changed

• Switch to rollup for package compilation.
• Move DraftailEditor from default export of draftail to named export (import { DraftailEditor } from 'draftail';).
• Wrap propTypes in env check so they only appear in dev build.
• Rename / namespace all overridable Sass constants.
• Rename nested-list-item($depth) to draftail-nested-list-item($depth).
• Stop defining $draftail-tooltip-radius based on $draftail-editor-radius.
• Simplify DraftUtils.getSelectedBlock() implementation.
• Rename options prop to entityType for entity sources.
• Rename onUpdate prop to onComplete for entity sources.
• Rename entityConfig prop to entityType for entity blocks.
• Replace normalize API with draftjs-filters (#123).
• Update toolbar tooltips to show markdown markers for all blocks.

Fixed

• Prevent toolbar button labels from being selected.
• Fix newline block insertion & reset creating 2 entries in undo stack (#105).

Removed

• Remove all unused variables from Sass constants.
• Remove immutable from peerDependencies.
• Remove draftjs-utils from dependencies.
• Remove DraftUtils.createEntity().
• Remove DraftUtils.getAllBlocks().
• Remove DraftUtils.getEntityRange().
• Remove onClose prop for entity sources.

[v0.10.0]

Added

• Add new DraftUtils.getEntitySelection(editorState, entityKey) method, returning the selection corresponding to a given entity. Note: only works if the entity is in the currently selected block.
• Add DraftUtils.updateBlockEntity method, with workaround for Draft.s 0.10 entity data update bug.
• Add shortcuts for blockquote and code block to toolbar tooltips.
• Use alternative keyboard shortcuts for more formats.
• Add default labels & descriptions for built-in formats (#122).
• Process, filter, migrate available blocks, styles and entities when pasting rich text (#50 & #103 thanks to @inostia, see #123 for next steps).
• Add support for custom text decorators (#121).
• Add predefined classes for block depth levels above 4, of the format public-DraftStyleDefault-depth${depth}.
• Add nested-list-item($depth) Sass mixin to generate styles for arbitrary list item nesting.
• Introduce new Draftail- class namespace for all styles (#63).
• Expose Sass stylesheets to Draftail users, for extension.

Changed

• Exclude toolbar buttons from default focus navigation flow.
• Disable ligatures in the editor, to simplify cursor behaviour.
• Stop bundling the Draft.js styles. They now have to be manually included. The previous approach was prone to version mismatches.
• Configure text antialiasing for Firefox.
• Change Icon implementation to use SVG by default. Supports symbol references, SVG path(s), and arbitrary React components (#119).
• Disable pointer events on all icons by default.
• Remove toolbar hover styles.
• Make more of the editor styling overridable.
• Move Tooltip outside of Draftail package.
• Refactor tooltip for inline entities to be defined directly in decorators. They should now define their own tooltip (or other control), rather than rely on data-tooltip.
• Move Portal component outside of Draftail.
• Add block prop to entityTypes, and move IMAGE and EMBED blocks outside of Draftail (#121).
• Provide methods for entityTypes' block to edit, remove entity.

Removed

• Remove Save and Cancel buttons from image block, thanks to @allcaps (#102)
• Remove DraftUtils.getSelectedEntitySelection. It can be replaced by DraftUtils.getEntitySelection(editorState, DraftUtils.getSelectionEntity(editorState)).
• Remove built-in support for MODEL entities.
• Remove built-in support for EMBED entities.
• Remove built-in support for DOCUMENT entities.
• Remove support for entityTypes' imageFormats.
• Remove support for custom entityTypes strategy.

Fixed

• Update handleNewLine to defer breakout in code-block. Fix #104.
• Fix toolbar entity edit and remove not working on selection pre first char. Fix #109.
• Fix block type transformations moving selection to the wrong block.
• Fix editor scrolling in the wrong position when breaking a big block (https://github.com/facebook/draft-js/issues/304#issuecomment-327606596).

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