react-draft-wysiwyg icon indicating copy to clipboard operation
react-draft-wysiwyg copied to clipboard

Content does not change after setting the focus on the image

Open stcrash opened this issue 6 years ago • 3 comments

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

stcrash avatar Oct 24 '18 08:10 stcrash

I could reproduce it in my project, too

thanh-dong avatar Apr 04 '19 09:04 thanh-dong

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

Lars-Nijboer avatar Apr 30 '19 13:04 Lars-Nijboer

Any update on this?

Ychop avatar Sep 21 '22 09:09 Ychop