How to create a rich-text block that has a code-block that can be copied

[Locky]

Hey there, what would be the easiest way to implement a code block that can be copied within a rich-text element? I’ve tried to edit the rich-text and rich-text-input element blocks in the editor but couldn’t see a way to adjust the ```, codeblock tags.

The use case is similar to what you’d see in chatgpt - a code block with an option to copy at the top right.

[jptrinh]

Hey Locky!

Here is one way to do it:

1. Creating a variable for each of the codeblocks
   
   

• waitForContent: add a little delay to let the content load.
• codeblocksList: return all code tags
• Iterator: we are looping through all the code elements previously returned from the codeblocksList
• addCopyButton workflow: for each code block, insert values in a global array variable (copyButton) with the following informations:

{
    "top": item.offsetTop,
    "content": item.innerHTML
}

2. Displaying the buttons
   
   
   
   I have a div button-wrapper that holds a button. It has an absolute positioning with a top and bottom value set to 0. This div is bound to the copyButton variable.
   The button is on absolute position, with the top property bound to item.top.
   There is a copyContent workflow on the button that has a Copy to clipboard action with item.content as a value.

Here a walkthrough video

Copy code button