DESKTOP: Adding copy to clipboard button for code block

[Rishabh-malhotraa]

fixes: #2383

Changes

Added copy to clipboard functionality for fences-code block

Note: I only tested this on the desktop app I did not test to for mobile.

TODOS:

• correcting the unit test case
• improving the regex used to replace the pre tag (it is not accurate for cases having multiple lines right now )
• 🐞 : the button moves to the left when there is an option to scroll horizontally

I will make the changes and update this as soon as possible

[Rishabh-malhotraa]

@PackElend can you please label me, thank you!

[laurent22]

Hmm, when you think about it the "copy to clipboard" button is unrelated to Markdown rendering. It's more a property of the UI, like the context menu for example. So it feels like all this shouldn't be in MdToHtml but elsewhere, maybe in the viewer component.

[Rishabh-malhotraa]

So it feels like all this shouldn't be in MdToHtml but elsewhere, maybe in the viewer component.

I did so based on the conversation in this PR, the reasoning of doing it in MdToHTML is that we only want this button to show when the fence block is rendered, which could be easily achieved by hooking additional rules to the fence token generated by markdown-it plugin, but I see your point too and I'll look into what changes can be made

[Rishabh-malhotraa]

Hmm, when you think about it the "copy to clipboard" button is unrelated to Markdown rendering. It's more a property of the UI, like the context menu for example. So it feels like all this shouldn't be in MdToHtml but elsewhere, maybe in the viewer component.

@laurent22 , Sir can you be a bit more specific about exactly what kind of change is required,
there are two ways that I can think of, that will get us the desired result

• Hook additional rule to the fence token while rendering markdown (current behaviour)
• search the dom for the pre tag and add additional HTML content(button) to it
  I believe the latter is what you were referencing to in your comment, can you please specify exactly what is required so I can go an updating this PR. thank you!