How to strip images from pasted content in the Block Editor?

[gion-andri]

I’m trying to find a way to strip all images when a user pastes external content into the block editor (for example, from another website or a Word document).

I’ve looked for a hook or filter to modify the paste behavior, but I can’t find a clear way to intercept or change what gets passed into the paste handler.

Is there a way to:

• modify the pasteHandler, or
• filter or sanitize the pasted content before it’s inserted into the editor?

Ideally, I’d like to remove any <img> tags (or block equivalents) before they are inserted into the post content.

Thanks in advance for any pointers!

[ellatrix]

Hi! There's currently no way intercept the paste behavior. Could you elaborate on the use case? Why should images not be pasted? The user can still remove the pasted images? Do you want to prevent images to be inserted in general, or only prevent pasting images? (And if only pasting, why?)

[gion-andri]

Sure. We use WordPress for a newspaper workflow. Editors copy content from another system that inserts icons (images with inline data strings) to represent tab or newline characters.

When this content is pasted into WordPress, those images don’t show up immediately. After saving and reloading, WordPress sometimes displays broken/empty image artifacts. As a result, the editorial team has to save the article and reload just to check whether one of these icons appeared and needs to be removed.

Since these images always use the same CSS class, it would be really helpful if we could automatically strip them on paste.

[ellatrix]

Ok, interesting! That sounds like something is broken in Gutenberg perhaps. Could you share an example of the HTML text pasted (it's logged in the browser console), I'm curious why these images are only appearing after a reload. If there are broken images, it would be good to strip them so it's fixed for everyone else too

[gion-andri]

Sure, here is an example. If I paste that text in wordpress, I get artefacts like this:

example-paste-text.txt

Steps to reproduce:

• copy the content of the file
• past it in an article using the gutenberg editor
• most of the images are invisible
• save and reload the page
• you will see something like this: