This doesn't work with CSF format

[tleite]

I'm writing my stories in CSF format (which is supposed to be the new standard) and when I add {copyCodeBlock("<p>test</p>")} it returns the HTML but not rendered, as such:

<div class='container_30UTmB' aria-labelledby='30UTmB' tabindex='0'> <span id='30UTmB' class='containerLabel_30UTmB'>code block.</span> <pre class='displayCode_30UTmB'><code>&lt;p&gt;test&lt;&#x2F;p&gt;</code></pre> <button type='button' class='copyButton_30UTmB' id='copyButton_30UTmB' aria-live='polite' onclick="(function() { var textarea = document.createElement('textarea'); var button = document.querySelector('#copyButton_30UTmB'); textarea.innerHTML = '<p>test</p>'; document.body.appendChild(textarea); textarea.select(); button.innerHTML = 'Copied!'; setTimeout(function() { button.innerHTML = 'Click to copy'; }, 1500); document.execCommand('copy'); document.body.removeChild(textarea); })();" >Click to copy</button> </div>

[Pickra]

CCB was built to work anywhere a string can be inserted as a DOM element, which works with Storybook's storiesOf API because anything can go in a story, not just the component. I haven't done alot of research, but my understanding is CSF only exports a component, so CCB won't work. You'd have to replace Storybook's internal component for displaying the component's code with CCB.

You are welcome to make a PR if you come up with a solution.