Addon-docs: Override generated code snippet.

[alanshortis]

Part of my system is to show typography, and something I would like to do is wrap my tags in a div with contentEditable so that the sample text can be edited. This works well, expect my wrapping div appears in the genrated code snippet as they're also children of the Preview and Story componnents.

<Preview inline="false">
  <Story name="Heading 1">
    <Editable>
      <h1>Why should I register to vote?</h1>
    </Editable>
  </Story>
</Preview>

As above, the code snippet would inclide my Editable wrapper but this isn't something an end user should even be aware of.

Ideally, it'd be possible to provide an optional snippet that is show as the code sample rather than the automatically generated one.

A workaround for this particular scenario is to use the knobs addon to allow text editing in the Canvas view, but this doesn't help with other scenarios where some wrapping HTML might help with showing off a component but is not relevent to the code snippet.

I'd be willing to take a look at implemting a solution if this feature is deemed helpful.

[VladimirPittner]

Hi,
I think what you are looking for is prop mdxSource of Preview that will let you pass custom "source code" -> https://github.com/storybookjs/storybook/blob/v5.3.14/addons/docs/src/blocks/Preview.tsx#L15

[alanshortis]

Thanks @VladimirPittner - that's exactly what I needed.

[shilman]

Duplicate to #7479