Docusaurus: add custom button to code block? - docusaurus

Question

I’m testing to use Docusaurus for a tutorial and documentation site. I want to customize the code block in markup (md or mdx) to for example add an edit button inside the code block that will open the code in plnkr.
My question is, how can I add a button (or several buttons) in the code block and add click events to the buttons?
I have tested Eleventy https://www.11ty.dev/ recently and in that I used markdown-it-attrs to add attributes in markdown.
const markdownIt = require("markdown-it");
const markdownItAttrs = require("markdown-it-attrs");
and then in the markdown I could add attributes to a code block indicating if that should have an edit button or not.
```js {edit=yes}
let a = 2;
console.log(a);
```
And then in a script find this code block and add a button and an event listener.
.hasAttribute("edit")
.insertAdjacentHTML("afterbegin", `<button style="float: right;" class="code_edit">Edit</button>`);
.addEventListener("click", () => {
I have tried doing something similar in Docusaurus by adding a script in docusausrus.config.js
scripts: [{ defer: true, src: "/mycustom.js" }],
I can see that this script is added in the head but the script can’t find any html elements. I don’t know where to start with adding attributes to the markup.