All notable changes to this project are documented in this file. This project adheres to Semantic Versioning.
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
- 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
- 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
.
- 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
- Fix Sass deprecation warning with
/
slash character for divisions and separators. - Fix potential SSR issue with first-child selector
- Remove IE11 support
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.
- Move Sass import from
draftail/lib/index.scss
todraftail/src/index.scss
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 |
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.
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 now accept a allowlist
attribute rather than whitelist
.
Documentation: draftail.org/docs/getting-started
Documentation: draftail.org/docs/getting-started
- Make it possible to hide buttons with default labels by setting their
label
tonull
. #442
- Improve the editor props’ JSDoc annotations. #441
- Fix empty buttons appearing when providing custom formats without a defined label or icon. #442
- Clear save timeout handler when unmounting the editor. #208, #443
Documentation: draftail.org/docs/1.3.0/getting-started
🎉 blog post for this release: Draftail v1.3.0: community improvements, beyond Wagtail.
- Add ability to disable the editor on demand with the
readOnly
prop, matching behavior of Draft.js. #201, #206, thanks to @SpearThruster. - Add ability to use the editor as a controlled component, like vanilla Draft.js editors, with
editorState
andonChange
props. Have a look at the controlled component documentation for further details. #180, #207.
Documentation: draftail.org/docs/1.2.1/getting-started
- Fix regression introduced in v1.2.0 where Draft.js-defined keyboard shortcuts were available unconditionally (#189).
Documentation: draftail.org/docs/1.2.0/getting-started
🎉 blog post for this release: Draftail v1.2.0: supporting modern experiences.
- Add
plugins
API to support extensions of the editor using the draft-js-plugins architecture (#83, #171).
This new API makes it possible to build much more advanced extensions to the editor than ever before, such as autocompletes, linkify, custom blocks, custom toolbars, and more. Read the release blog post to learn more about the motivation for those new APIs.
- Add data reset parameter to
DraftUtils.resetBlockWithType()
. - Add ability to disable or customise the editor toolbar with
topToolbar
. - Add ability to add a toolbar below the editor with
bottomToolbar
. - Add support for Markdown shortcuts for inline styles, e.g.
**
for bold,_
for italic, etc (#134, #187). View the full list of keyboard shortcuts.
- Enable list continuation on Enter for custom
*-list-item
blocks. All that’s required is for the block type to end with-list-item
.
Documentation: draftail.org/docs/1.1.0/getting-started
🎉 blog post for this release: Draftail v1.1.0: a quality of life release.
- Add
onFocus
andonBlur
props to use callbacks on those events. This can be useful for form validation. #170, #174, thanks to @TheSpicyMeatball.
- Stop unnecessarily calling
onSave
in the editor’sonBlur
(#173). - Prevent crash when filtering pasted content whose last block is to be removed (e.g. unsupported image) (#179).
- Prevent crash in
DraftUtils.getEntitySelection
, when the provided entity key isn't valid (undefined, missing) (#168). - Fix entity removal and editing not doing anything when the selection is backwards (right to left) (#168).
- Update
draftjs-filters
dependency (#179). - Update
draftjs-conductor
dependency.
- Remove all
PropTypes
. The project is now typed with Flow (#127, #178). - Remove peerDependency on
prop-types
(#127, #178).
Documentation: draftail.org/docs/1.0.0/getting-started
This release is functionally identical to the last one,
v0.17.2
.
The project has reached a high-enough level of stability to be used in production, and breaking changes will now be reflected via major version changes.
- Update to
draftjs-filters@1.0.0
. This does not include any functional changes, but will cause a duplicated dependency for projects having bothdraftail
anddraftjs-filters
as deps if they don’t also updatedraftjs-filters
. - Add Draft.js copy-paste handling overrides from
draftjs-conductor
. This makes Draftail always preserve the full content as-is when copy-pasting between editors. Fix #147 (thibaudcolas/draftjs-conductor#2).
- Unsupported actions causing an atomic block to be without entity now soft-fail with an un-editable atomic block instead of hard-fail wagtail/wagtail#4370.
- Add workaround for RichUtils image delete blind spot reported in wagtail/wagtail#4370 (#144).
- Add basic API for arbitrary controls in the toolbar.
- Expose
ToolbarButton
component in the API. - Add ability to set
ariaDescribedBy
prop of Draft.js.
- Replace block entities by a paragraph when using
onRemoveEntity
. - Replace
ListNesting
implementation with the one fromdraftjs-conductor
.
- 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.
- Remove
DraftUtils.isSelectedBlockType()
. - Remove
DraftUtils.hasCurrentInlineStyle()
.
- 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.
- Fix Markdown shortcuts for blocks removing styles and entities at the end of the block text.
- Remove React 15 from peerDependencies.
- 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.
- Remove support for
maxListNesting
greater than 10.
- 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.
- Rename
DraftUtils.addLineBreakRemovingSelection
toDraftUtils.addLineBreak
. - Replace
showUndoRedoControls
with separate propsshowUndoControl
andshowRedoControl
for which control UI can be overriden. - Make all keyboard shortcut labels language agnostic.
- Fix
DraftUtils.addLineBreak
adding line breaks in the wrong place when selection is collapsed.
- Add default block spacing to make it easier to distinguish empty blocks.
- 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.
- Prevent toolbar tooltip from having a transition delay on close.
- Prevent toolbar tooltip from staying open when hovered.
- 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.
- Make all icons
vertical-align: middle;
by default. - Update to
draftjs-filters@0.4.0
to allow filtering on undefined attributes.
- Fix icons / labels alignment in the toolbar.
- 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).
- 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)
todraftail-nested-list-item($depth)
. - Stop defining
$draftail-tooltip-radius
based on$draftail-editor-radius
. - Simplify
DraftUtils.getSelectedBlock()
implementation. - Rename
options
prop toentityType
for entity sources. - Rename
onUpdate
prop toonComplete
for entity sources. - Rename
entityConfig
prop toentityType
for entity blocks. - Replace normalize API with
draftjs-filters
(#123). - Update toolbar tooltips to show markdown markers for all blocks.
- Prevent toolbar button labels from being selected.
- Fix newline block insertion & reset creating 2 entries in undo stack (#105).
- Remove all unused variables from Sass constants.
- Remove
immutable
frompeerDependencies
. - Remove
draftjs-utils
fromdependencies
. - Remove
DraftUtils.createEntity()
. - Remove
DraftUtils.getAllBlocks()
. - Remove
DraftUtils.getEntityRange()
. - Remove
onClose
prop for entity sources.
- 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.
- 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 moveIMAGE
andEMBED
blocks outside of Draftail (#121). - Provide methods for
entityTypes
'block
to edit, remove entity.
- Remove Save and Cancel buttons from image block, thanks to @allcaps (#102)
- Remove
DraftUtils.getSelectedEntitySelection
. It can be replaced byDraftUtils.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
.
- 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 (facebookarchive/draft-js#304 (comment)).
- 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 thelabel
. - 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.jsEditor
. Sets whether spellcheck is turned on for your editor. - Add support for React 16.
- 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.
- 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).
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',
},
]}
- Add
name
attribute to button elements to simplify targeting in browser automation tests. - Publish the package as an ES2015 module.
- Upgrade draftjs-utils to latest (draftjs-utils).
- Use references to window object instead of global.
- Update dependencies to remove Immutable.js duplication
- Expose reusable Portal component as part of the API.
- Only stick toolbar when editor is active.
- Make editor slightly bigger.
- Fix
editor
class name concatenation.
- Fix CSS import present in published library.
- Make the editor toolbar sticky (requires a polyfill, documented in README).
- Add support for
placeholder
attribute.
- Improve "active block" rendering and disabled state.
- Fix missing vertical spacing between button rows.
- Fix missing pointer cursor on tooltip button.
- Remove
Element.closest
polyfill from main lib.
- Add default
strategy
for entity types based ontype
.
- Change empty
RawDraftContentState
in conversion API to be null. - Change entity type nomenclature to use
source
anddecorator
in place ofcontrol
andcomponent
.
- Implement list depth normalisation on copy/paste.
- Add title attributes on buttons to display keyboard shortcuts. Fix #37.
- Override default code-block element. Fix #41.
- Update project to use draft-js@0.10 API
- Move draftjs-utils
peerDependency
to be a dependency. - Move immutable
peerDependency
to be a dependency. - Copy/paste of rich text is now configurable via the
stripPastedStyles
option. - Copy/paste of rich text is now disabled by default. This will be enabled by default once it is better supported.
- Fix image block not unlocking editor on cancel.
- Make
hr
availability configurable withenableHorizontalRule
. #25. - Add
br
support, availability configurable withenableLineBreak
. - Prevent soft line breaks from keyboard shortcut if disabled.
- Add editor CSS to published package. #17
- Add common keyboard shortcuts (inspired by Google Docs, see documentation for the full list).
- Add support for "autolist" behavior (lines starting with
-
,*
,1.
are automatically converted to list items).
- Max nested list level is now 1.
- Max nested list level is now configurable via a prop.
- Save interval is now configurable via a prop.
- Change
hr
representation to use atomic block and entity instead of custom block type. #1 mediaControls
,dialogControls
andmodelPickerOptions
are now a singleentityTypes
array. #26sources
anddecorators
are now declared directly in theentityTypes
array items.INLINE_STYLES
property is nowinlineStyles
.BLOCK_TYPES
property is nowblockTypes
.- Inline styles and block types now use the
type
attribute instead ofstyle
. imageFormats
are now assigned directly on theIMAGE
entity type. #33- All options are now direct props of
DraftailEditor
instead of attributes of theoptions
prop. #21
- Fix erratic behavior of list nesting changes with tab and shift+tab shortcuts. #34
- Fix keyboard shortcuts giving access to unallowed formatting. #32
- Fix tooltip not opening when clicking decorator icon. #5
- draftail no longer depends on jQuery.
- draftail no longer depends on the Wagtail font icon.
- Allow customisation of block style function & block render map.
- Pressing return on an empty list item should un-indent it until it is not nested, and then remove it.
- Pressing return at the end of a block should create an empty unstyled block.
- Buttons do not trigger a form submit
This release contains breaking changes.
- Keyboard shortcuts documentation
- Expose onSave hook instead of auto field saving (#23)
- Reworking most of the editor codebase to make it more maintainable.
- Configurable block types and inline styles.
First usable release!
Template from http://keepachangelog.com/
- Something was added to the API / a new feature was introduced.