Image keeps being re-downloaded after each backspace key pressed.

[DomainFlag]

Steps to reproduce, the simplest one is to use the Official Demo Editor demo editor. Use the image option > url tab with any image url as reference and write some text below the the actual image, and use backspace to remove the text while having the Dev Tools Network tab open.

With each backspace key pressed, the cached image is lost and react forces re-redraw with the image being downloaded again, while pressing backspace as the image is not downloaded yet it forces document re-flow + flickering resulting in bad UX.

Note that other keys (alphabetical...) works as expected only the backspace has this strange issue.

[megphillips91]

Having the same issue.

[megphillips91]

Hiya @DomainFlag I figured out the issue at least for my case.

====> this will trigger a re-render on every state change <Editor editorState={editorState} wrapperClassName="schoolistit-creator-wrapper" editorClassName="schoolistit-lesson-creator" onEditorStateChange={this.onEditorStateChange}

====> this will still update your state, but not re-render the editor. <Editor initialEditorState={editorState} wrapperClassName="schoolistit-creator-wrapper" editorClassName="schoolistit-lesson-creator" onEditorStateChange={this.onEditorStateChange}

Example #1 above is controlled editor. In my case, I do not need the actual editor to be controlled. I just need my state to update and send my content to DB for autosave. This will solve the image issue. Also speed up the experience for user.

[santhosh-umapathi-appymango]

Still i have the same issue, in my case, if i upload an image from my computer, after if i press any key it flickers, on lose focus - it flickers, on focus it flickers again. Like every actions causes a redraw of that image from scratch.

[santhosh-umapathi-appymango]

Found the problem, my cache was disabled on dev tools, so React had to download image on every state change. Enabling cache on browser solved the issue.