search

springload / draftail

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

Copied content from Word Doc crashes Draftail/Wagtail #179

Closed xfxf closed 5 years ago

xfxf commented 5 years ago

Copying and pasting the attached document (at least using Word for Mac version 16.15, but am fairly sure will do using Word for Windows too) into Draftail or Wagtail causes the editor to crash: "Oops. The editor just crashed." or "The editor just crashed. Content has been reset to the last saved version.".

This is reproducible in the latest version of Wagtail, as well as the editor at https://www.draftail.org/

I assume there is a wonky character or element here which Draftail/Draft.js isn't handling properly related to the anchored image (my expectation is Draftail/Wagtail should ignore the image, as it normally does), but copying the image only doesn't seem to make the editor crash, only when the text and image is copied in.

draftail-crash-elon-musk-article.docx

thibaudcolas commented 5 years ago

👌 I have opened this at https://github.com/wagtail/wagtail/issues/4985 as well so people following the Wagtail issue tracker are aware of the issue.

Copy-pasting my notes from Slack:

Thanks for reporting this @xfxf. It's caused by the image but I'm not entirely sure what's going wrong. At least it seems to be caused by Draftail, rather than Draft.js itself, so should be simple to fix once the issue is identified

The crash is due to Draftail trying to move the selection to the image block as if it was text after insertion. I'm not quite sure which of the filters (https://github.com/thibaudcolas/draftjs-filters/blob/008fe2c012d0157392feabf1572fe6232f5867e8/src/lib/filters/editor.js#L116-L136) fails to catch this. Or maybe they do catch it, but Draft.js doesn't update the selection to move to the block above.

@xfxf if you or anyone else wants to investigate this further, the first step is to create a failing test case with the "Draft.js output without filters" I pasted in https://github.com/thibaudcolas/draftjs-filters/issues/27 as an input, and the same content without the atomic block as output. Then figure out why the block is kept by the filters.

thibaudcolas commented 5 years ago

@xfxf this should now be fixed in https://www.draftail.org/, if you have a moment to try and confirm that would help. Hopefully this will reach Wagtail as part of the v2.5 release.