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.

Individua l’implementazione del componente ClipboardCopy e i relativi test, quindi esamina il comportamento del suo wrapper div quando viene usato intorno a elementi di codice inline provenienti da un visualizzatore Markdown. Il lavoro è completato quando il componente supporta il comportamento del wrapper richiesto, tramite uno span predefinito oppure una proprietà per personalizzare il wrapper, senza generare HTML non valido.