Images that copy code to clipboard when you click on them

I run a website about a programming language which is very well-integrated with a front-end which adds a lot of styling to the code that cannot be replicated in the browser. For that reason, I publish my tutorials by having blocks of text interspersed with images of code. Clicking on the images copies the code to the clipboard so that people can use them in their own front-end. Here is what the HTML code for this looks like:

img src="..." /
textareacode goes here/textarea

The textarea element is hidden using CSS. This used to work because I had disabled wpautop but now that I upgraded to Gutenberg, this doesn't seem to be an option anymore. Now it inserts br / tags in my content.

What is a long-term, proper solution to this problem? Can blocks help me?