Image Block: Undo includes pulsing state as an undo step

[tg-ephox]

Issue Overview

Image Block left in uploading state (pulsing) if 'Undo' clicked after upload.

Steps to Reproduce (for bugs)

1. Add Image block
2. Upload Image
3. Click Undo

Expected Behavior

Undo will revert to Placeholder Image block

Current Behavior

Undo leaves image in the uploading state (pulsing).

Possible Solution

Don't use setAttributes for temporary block state. This also means that if the browser was to be closed during uploading (which might take a while for large images) then the image blob URL will be left in the post content.

Screenshots / Video

Related Issues and/or PRs

Todos

• Tests
• Documentation

[noisysocks]

From my duplicate bug report which I just closed:

This also happens when the block is created by drag-and-dropping media directly into the editor. The Gallery and File blocks have similar bugs as well.

The problem is that we use the href attribute to store the blob: URL of the media that is being uploaded. This causes other related bugs, too. For example, if you refresh the page while media is uploading, the block doesn't display correctly.

We probably should be using this.setState() instead of this.props.setAttributes() to store intermittent data such as the file that is currently being uploaded. It's not clear how we would support file transforms if we do this, though.

[mcsf]

Closing in favor of umbrella issue #8119