Copying and pasting to Wordpress "code editor" code via the front end and clipboard

Question

I'm trying to emulate what these folks do with their "Copy code" button: https://gutenberghub.com/templates/team-56

Their approach is great for copying to clipboard and pasting directly to the Wordpress block editor - either on the back end of the editor or via the front end (just paste it in the new block field and it creates the blocks automatically).

I developed a plugin which works great and pastes the code I need to the clipboard.

Works great if I paste to the code editor.

But when I paste the code into the front end of the block editor it transforms it into preformatted content instead of automatically converting to the blocks represented by the code.

Yet, if I drop the same code from the clipboard into an editor first, e.g. BBEdit, and then copy that, it works fine. So it seems as if the content is right, but the format is off. Like I need to get it to plain text?

Please see what I mean in this video:

https://vimeo.com/592493785/77dbc8f885

This doesn't happen with the Gutenberg Hub clipboard content.

Any help would be very much appreciated.

Thanks!

Alex.

Answer 1

I figured this out.

I'm using clipboard.js and found that making the data-clipboard-target a textarea, i.e. doing the copying from a text-only element, it had the same effect as pasting into a text editor.

Thanks!

Alex.