search

jpuri / react-draft-wysiwyg

A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
MIT License
6.41k stars 1.16k forks source link

Error in Firefox/Safari when using keyboard navigation after inserting an image #238

Open lavoiedn opened 7 years ago

lavoiedn commented 7 years ago

Greetings,

When using Firefox (version: 54.0a2 (2017-03-13)), I encountered an error with keyboard navigation and image insertion. Here are the steps to reproduce:

  1. Insert an image.
  2. Using the up and down arrows on your keyboard, place the caret to the right of the image.
  3. Start entering text.

After following those steps, an error will appear in your browser's console:

Error: Unknown DraftEntity key.

Any text entered with the caret to the right of the image seems to be added between the figure element and the next valid content div. It is impossible to delete this text using backspace in the editor after getting this error.

I'm thinking it has something to do with the way Firefox handles keyboard navigation when an element with contenteditable=false is the child of an element with contenteditable=true.

A colleague was also able to reproduce the error in Safari.

mguijarr commented 7 years ago

I found the same issue. I tried to fix it, but no luck. I read about a similar issue here (if it helps ?)

jpuri commented 7 years ago

Hi, Extremely sorry for much delayed response, I found that this issue is related to FF issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1132768

This hack fixes it: https://github.com/jpuri/react-draft-wysiwyg/blob/master/js/src/components/Editor/index.js#L217

Its inspired by this PR: https://github.com/jpuri/react-draft-wysiwyg/pull/245 - thanks @gablabelle