Copy-paste image with srcset makes replace-image features break

[programmin]

1) Go to a page with some large responsive image, select around it and copy

2) Paste into TinyMCE editor, image looks fine (but has srcset!).

3) Click the image edit button, click replace button and choose another image.

For this, and other cases where a plugin or feature changes the src of an image tag, it doesn't actually visibly change it because of the leftover srcset most browsers look at. I thought srcset was disallowed in editor and database since the theme and plugin should be able to filter the final behavior when the_content is rendered. Seems this should be enforced on paste at least.

[samuelsidler]

When I follow your steps, I get to step 3 and I don't have a replace button. Is that from a plugin or am I following the steps wrong? (I definitely see srcset in the Text editor after Step 2 though.)

[joemcgill]

Hi @programmin,

We generally respect user added content as long as it's not insecure. So if a user adds HTML for an image in the editor that includes a srcset, we chose to leave it alone and make sure the internal srcset functions don't overwrite what the user added.

However, that doesn't address your concern, which is that replacing the image in the editor should also update (or remove) any previous srcset and sizes attributes. Is that correct?

[programmin]

Yes, it should be noted that even pasting from your own page on your blog (view mode, with wp generated srcset) will break the editor's replace functionality. There are other applications other than this replacer that expect image to change when you modify it with src=.

[azaozz]

Replying to joemcgill:

...replacing the image in the editor should also update (or remove) any previous srcset and sizes attributes.

Right. The problem is that after replacing the image, the srcset still points to the old image and the browsers use it over the src.

The correct fix is to remove both srcset and sizes for now. If the next step is to insert images in the editor with these attributes, this should work right.

[azaozz]

In 36376:

TinyMCE: remove the srcset and sizes attributes (if any) after replacing or editing an image.

See #35434.

[azaozz]

An alternative to [36376] would be to always remove srcset and sizes on editing an image in the media modal. Leaving this open to decide if that is better.

[joemcgill]

Thanks @azaozz,

Generally, I would lean toward scrubbing srcset and sizes from the editor any time the image is edited, but I don't see much harm in leaving them if someone is simply changing sizes. We may need to revisit this if we want to show responsive images in the editor.