ClipboardCopy - custom wrapper component

ClipboardCopy uses a div element to wrap everything and style the element. When using the component in conjunction with a markdown viewer, this ends up generating invalid html if the ClipboardCopy is used to style inline <code> tags.

An example is this visualization which comes from a markdown content rendered using react-markdown, customized to use ClipboardCopy and CodeBlock components (for single-line and multi-line snippet of code respectively) to style the code tags (visible at the bottom of the screen):

which generates this warning:

This could be solved by either defaulting the ClipboardCopy to use a span element by default, or by providing a customization property for the wrapping element as done for other components in the library.

Localisez l’implémentation du composant ClipboardCopy et ses tests, puis examinez le comportement de son wrapper div lorsqu’il est utilisé autour d’éléments de code inline provenant d’un afficheur Markdown. La tâche est terminée lorsque le composant prend en charge le comportement de wrapper demandé, soit avec un span par défaut, soit avec une propriété de personnalisation du wrapper, sans générer de HTML invalide.