jpuri / react-draft-wysiwyg

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

Content does not change after setting the focus on the image #743

Open stcrash opened 6 years ago

stcrash commented 6 years ago

Hello!

Very inspired by your library. Thanks for your work!

I found a bug in the getSelectedBlocksType method in draftjs-utils. The atomic value in the getSelectedBlocksType method is not reset when the focus is lost.

I do the following:

  1. Upload an image (getSelectedBlocksType == 'unstyled')
  2. I click on the line with the text (getSelectedBlocksType == 'unstyled')
  3. I click on the image (getSelectedBlocksType == 'atomic')
  4. I click on the line with the text (getSelectedBlocksType == 'atomic'). Must be unstyled!
  5. I click on the area outside the editor
  6. I click on the line with the text (getSelectedBlocksType == 'unstyled')

image 3 video.zip

After focusing on the image in react-draft-wysiwyg, you cannot edit the text. It helps to lose focus from the editor.

To fix this, you need to remove the check in the condition in the file: react-draft-wysiwyg/src/Editor/index.js: 238-241

if (
  !readOnly /* &&
  !(
    getSelectedBlocksType(editorState) === "atomic" &&
    editorState.getSelection().isCollapsed
  ) */
) {
 ...
}

But this does not solve the problem fundamentally. The bug is in getSelectedBlocksType in the draftjs-utils library Please make changes to the library

thanh-dong commented 5 years ago

I could reproduce it in my project, too

Lars-Nijboer commented 5 years ago

I'm having the same issue. Finally got around to a working img delete/backspace. This is a problem still.

Ychop commented 2 years ago

Any update on this?