All notable changes to this project are documented in this file. This project adheres to Semantic Versioning.
Documentation: draftail.org/docs/next/getting-started
Documentation: draftail.org/docs/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
readOnlyprop, 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
editorStateandonChangeprops. 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
pluginsAPI 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-itemblocks. 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
onFocusandonBlurprops to use callbacks on those events. This can be useful for form validation. #170, #174, thanks to @TheSpicyMeatball.
- Stop unnecessarily calling
onSavein 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-filtersdependency (#179). - Update
draftjs-conductordependency.
- 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 bothdraftailanddraftjs-filtersas 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
ToolbarButtoncomponent in the API. - Add ability to set
ariaDescribedByprop of Draft.js.
- Replace block entities by a paragraph when using
onRemoveEntity. - Replace
ListNestingimplementation 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
classNameprop for blocks by dynamically adding a class based on block type. - Update to
draftjs-filters@0.7.0to preserve list items in Word. - Update
draft-jspeerDependency 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.1to fix entities not being cloned on paste.
- Remove support for
maxListNestinggreater than 10.
- Make line break and horizontal line controls configurable, by passing an object with
icon,label,descriptionprops. - Add ability to set
textAlignment,textDirectionality,autoCapitalize,autoComplete,autoCorrectprops of Draft.js.
- Rename
DraftUtils.addLineBreakRemovingSelectiontoDraftUtils.addLineBreak. - Replace
showUndoRedoControlswith separate propsshowUndoControlandshowRedoControlfor which control UI can be overriden. - Make all keyboard shortcut labels language agnostic.
- Fix
DraftUtils.addLineBreakadding 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.0to 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-unstyledclass to unstyled block, makes it easy to style unstyled blocks. - Add
$draftail-editor-backgroundvariable to override editor bg. - Add
draftail-richtext-stylesmixin to style rich text content within the editor. - Add imperative
focus()API to the editor, like that of Draft.js. - Add
onCloseprop 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.0to 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
DraftailEditorfrom default export of draftail to named export (import { DraftailEditor } from 'draftail';). - Wrap
propTypesin 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-radiusbased on$draftail-editor-radius. - Simplify
DraftUtils.getSelectedBlock()implementation. - Rename
optionsprop toentityTypefor entity sources. - Rename
onUpdateprop toonCompletefor entity sources. - Rename
entityConfigprop toentityTypefor 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
immutablefrompeerDependencies. - Remove
draftjs-utilsfromdependencies. - Remove
DraftUtils.createEntity(). - Remove
DraftUtils.getAllBlocks(). - Remove
DraftUtils.getEntityRange(). - Remove
onCloseprop 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.updateBlockEntitymethod, 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, whitelist, blacklist, 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
Iconimplementation 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
Tooltipoutside 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
Portalcomponent outside of Draftail. - Add
blockprop to entityTypes, and moveIMAGEandEMBEDblocks outside of Draftail (#121). - Provide methods for
entityTypes'blockto 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
MODELentities. - Remove built-in support for
EMBEDentities. - Remove built-in support for
DOCUMENTentities. - Remove support for
entityTypes'imageFormats. - Remove support for custom
entityTypesstrategy.
- 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
descriptionprop for all formats to describe the format's use with more text than thelabel. - Add tooltips for toolbar buttons to display the full control
descriptionas 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
spellCheckprop, 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-utilsto 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
nameattribute 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
editorclass name concatenation.
- Fix CSS import present in published library.
- Make the editor toolbar sticky (requires a polyfill, documented in README).
- Add support for
placeholderattribute.
- Improve "active block" rendering and disabled state.
- Fix missing vertical spacing between button rows.
- Fix missing pointer cursor on tooltip button.
- Remove
Element.closestpolyfill from main lib.
- Add default
strategyfor entity types based ontype.
- Change empty
RawDraftContentStatein conversion API to be null. - Change entity type nomenclature to use
sourceanddecoratorin place ofcontrolandcomponent.
- 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
peerDependencyto be a dependency. - Move immutable
peerDependencyto be a dependency. - Copy/paste of rich text is now configurable via the
stripPastedStylesoption. - 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
hravailability configurable withenableHorizontalRule. #25. - Add
brsupport, 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
hrrepresentation to use atomic block and entity instead of custom block type. #1 mediaControls,dialogControlsandmodelPickerOptionsare now a singleentityTypesarray. #26sourcesanddecoratorsare now declared directly in theentityTypesarray items.INLINE_STYLESproperty is nowinlineStyles.BLOCK_TYPESproperty is nowblockTypes.- Inline styles and block types now use the
typeattribute instead ofstyle. imageFormatsare now assigned directly on theIMAGEentity type. #33- All options are now direct props of
DraftailEditorinstead of attributes of theoptionsprop. #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 (wagtail#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.