springload / draftail

📝🍸 A configurable rich text editor built with Draft.js
https://www.draftail.org/
MIT License
618 stars 64 forks source link

Support & upgrade draft-js to 0.11.x #213

Open callmeberzerker opened 5 years ago

callmeberzerker commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 https://github.com/facebook/draft-js/commit/8473e411cec7b4ec64029723b8df2084c1dbcb00#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. https://github.com/facebook/draft-js/commit/13989e313da64392f72309d593669ff115348391 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: https://github.com/BSStefan/draftail/pull/1, can someone from maintainer take a look?

thibaudcolas commented 4 years ago

👋 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 commented 3 years ago

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:

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

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


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

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 #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 (`` 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 `
` 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)