Support & upgrade draft-js to 0.11.x

[callmeberzerker]

Hi there!

Since 0.11.0 is released by draft-js it will be good if Draftail supports it as well. At the moment most of the things work out of box - but some chars (like B, I V - shortcut keys) are getting swallowed when you type into the editor.

[timonweb]

Just hit that same issue while working on https://github.com/timonweb/non-admin-draftail, thanks for bringing that up. For now a quick fix is to pin draft-js version to 0.10.5.

[BSStefan]

Hi all. Is there any news regarding this one?
I actually cloned the repo and tried to fix it. It looks like that this issue is connected with facebookarchive/draft-js@8473e41#diff-509bed42dbb17a2aef5c4ed42ce87170 update.
In https://github.com/springload/draftail/blob/master/lib/api/behavior.js#L123 this line will return false which won't pass that if since it was changed from (!command) => (command == null || command === '').
The fix should be easy and something like this: return hasCmd(e) ? styles[INLINE_STYLE.BOLD]: null;
If we update to the newest version 0.11.6, there is also one update that will make unit tests to fail. facebookarchive/draft-js@13989e3 They changed how entity ids are generated and now tests like this one: https://github.com/springload/draftail/blob/master/lib/components/DraftailEditor.test.js#L987 won't work since incremental id is sent.
Anyway, there are some problems with plugins and 0.10.5 so it will be really cool if it is possible to update this. If you need any help please let me know.

Edited:
I forked and created this MR in my repo: BSStefan#1, can someone from maintainer take a look?

[thibaudcolas]

👋 sorry it’s been so slow-moving – I’ll try to get to this in November, hopefully along with React 17 compatibility.

One of the main reasons this has dragged on is that https://github.com/draft-js-plugins/draft-js-plugins made their 0.11 switch as a breaking change, and I haven’t found enough compelling reasons to start using Draft.js v0.11 to justify the breaking change for Draftail. Hopefully there are more compelling reasons now than a year ago when I started #186. It might also make sense for me to make the draft-js-plugins dependency optional, for the vast majority of use cases that don’t need it.

Thank you @BSStefan for taking a look at the changes and likely fixes – I’ll make sure to reuse this in the upgrade!

[thibaudcolas]

This has stalled again. I’ve done a thorough review of the changes in Draft.js v0.11 back in November, and found more reasons to not upgrade than to upgrade. Specifically:

• Draft.js no longer enforces nested lists only incrementing by one level – you can have any list item at any depth. This isn’t necessarily something I’d hold off supporting Draft.js v0.11 for, but I personally wouldn’t want to make this possible on sites I maintain, so will need to re-implement this.
• The rich text copy-paste filtering has changed enough that I’d need to redo the project’s added filtering for it. Not necessarily a blocker either, but again something that I personally wouldn’t want to take a chance on for sites I maintain.
• There have been lots of changes to support for iOS and Android, and general IME support, which I’m not sure are necessarily 100% positives.

And then things that are definitely nice, but really pretty small:

• aria-describedby prop
• telephone links support when copy-pasting
• preserveSelectionOnBlur prop
• Clear block type when pressing backspace
• Unstyle empty list item on Enter key

And finally, things that are sorely missing in my opinion:

• No changes to the Entity API as promised for v0.11. Memory leak issues due to the above API having been retained.
• Lack of React v17 support.

---

Anyway, we’ll get there eventually. Here are the practical next steps for me:

• Recreate copy-paste test suite with original HTML clipboard contents as paste input thibaudcolas/draftjs-filters#284
• Implement fully custom rich copy-paste processing thibaudcolas/draftjs-filters#285

The main blocker for now is to get access to a Windows 10 machine for testing, with a Word license.

If someone wants to help with v0.11 support, the "nested lists incrementing restrictions" point from above is what would be the simplest to make a PR for directly in the editor.

---

Draft.js commits from v0.10.5 to v0.11.7 (filtering out any tooling-related changes): Comparing v0.10.5...v0.11.7 · facebook_draft-js (2020-11-18 22_58_04).html.zip

CHANGELOG redux with only the changes I think actually matter:

CHANGELOG redux v0.10.5 ... v0.11.7

v0.11 CHANGELOG

• Official CHANGELOG: https://github.com/facebook/draft-js/blob/master/CHANGELOG.md

master (unreleased)

Added

Fixed

Changed

v0.11.7

Added

• Add support to create editor state using text string (EditorState.createWithText)
• formatPastedText prop

Fixed

• Force the selection when composition is resolved (#2094)
• fix pasting invalid links

Changed

• Allow aria-describedby overriding

v0.11.6

Added

• 7.C - Block Operations - Consume createContentBlockFromJS public
• HtmlConversion: Add support for telephone links (#2365)

Fixed

• Prevent placeholder from unnecessarily wrapping (#2392)
• Address #2413 by making Firefox follow the same behaviour as Chrome (#2414)
• Fix draft-js pasted inline styles for code styles

Changed

• Only extend selection if it has ranges in setDraftEditorSelection.js
• use pasted block type if pasting to empty unstyled block
• DraftEntity ID Changes (uuid, getAll, loadWith)
• Add fromJS() API to Draft model objects

v0.11.5

Added

• Add editorRef prop to DraftEditor
• Add a preventScroll prop

Fixed

• fix style handling in convertFromHTMLToContentBlocks
• Fix Uncaught TypeError: Cannot read property 'nodeType' of null at ed (#2330)

v0.11.4

Added

• Add Section and Article to DefaultBlockRenderMap (#2212)

Fixed

• Fix React warnings (#2221)
• fixes chore(deps): update storybook to v5.3.8 #304, kudos to @andpor (#2197)
• @facebook-github-bot
• Fix draftjs type error for event
• fix wrong property access in convertFromHTMLToContentBlocks
• Fix typing Chinese in Edge (#2082) (#2088)
• Fix scroll behavior when node has tab chars (#2256)
• Added tests and fixed IE IndexSizeError trying to get a range from a selection when there is not one (#2271)
• Fix DOMObserver mutation data for IE (#2285)
• IE could not display composer when opening or creating a new group chat from the chat create view

Changed

• Defaulting to createEmpty if block map is empty in createWithContent (Fixes issue #2226) (#2240)
• Take over enhancements to render Draft.js in an iframe (#1938)

v0.11.2

Fixed

• fix(selection): Returns previous selection if either leaf is null (#2189)

v0.11.1

Added

• Adding 'preserveSelectionOnBlur' prop (#2128)
• Support post processor on paste entities.

Fixed

• Fixed a bug causing block data being over-written when pasted.
• Fix for workchat composer cursor jumping
• Fixes HTML importer to make image entity immutable (#2184)

Changed

• updated hastext method to not account for zero space width chars (#2163)

v0.11.0

Added

• Expose start/end positions of a decorated component within a contentBlock (start, end, blockKey props on decorator component)

• Clear block type when pressing backspace

• Allow indentation beyond one level deeper than block above.

• Add different counter-style for ordered lists based on their depth

• KeyBindingUtil: add usesMacOSHeuristics method

• Unstyle empty list item on Enter key (#769)

• Bring back the ariaOwneeID prop. (#1883)

• Ctrl-K at end of line should delete newline

• added highlighting (<mark> tag) to draft js html to content block converter

• Exports isSoftNewlineEvent as static method of KeyBindingUtil

• Add onPaste, onCut, onCopy handlers. Fix the issue of draft JS does not do copy and paste correctly with custom entities.

• GK Implementation of nested tree structure

Fixed

• Keyboard shortcuts for Linux
• Fix block tree before/after comparison
• Fix unlucky failures in character replacement
• Updated the DraftEntity flow type to be string
• Fix SelectionState’s hasEdgeWithin (#1811)
• Fixes some drag-n-drop problems (#1599)
• Fix leading line feed conversion
• Fixing major Android editing issues (#2035)
• Fixes runtime error when cutting empty selection at the end of the content
• Fixed dag and drop .length error (#2117)

Changed

• Deprecated event handlers for specific keys, use keyBidingFn instead
• Update 'latestEditorState' in render too
• Ensure selection collapses if user tries to replace with matching text
• Refactor convertFromHTMLtoContentBlocks
• Handles <br> tags in refactored HTML converter
• Stop using componentWillUpdate
• Finish modernizing convertFromHTMLToContentBlocks - nesting bug fix
• Finish modernizing convertFromHTMLToContentBlocks - max nesting bug fix
• fix(styles): avoid permanently accumulating attribute styles
• fix: set to nested list items to right depth
• draft-js: clean up useless divs from HTML when pasting content
• Warn if 'moveSelectionForward/Backward' called with non-collapsed selection
• Allow Option+Space to be handled on OSX Chrome (#1254)