DocsPage code preview indentation is wrong

Describe the bug When creating stories for a DocsPage with an MDX file, the code preview underneath the story seems to have the wrong indentation, even though it’s correct in the file.

To Reproduce Steps to reproduce the behavior:

1. Create a Component.stories.mdx file
2. Output a <Story name="default"><Preview><Component /></Preview></Story>
3. Go to DocsPage for that component
4. Click “Code” button to bring up code preview
5. See wrong indentation for code preview

Expected behavior The indentation (and line breaks) would be identical to how it shows up in the MDX file.

Screenshots The code:

and how it shows up in the DocsPage <Preview>:

Code snippets If applicable, add code samples to help explain your problem.

System: Environment Info:

System: OS: macOS 10.14.6 CPU: (8) x64 Intel® Core™ i7-4870HQ CPU @ 2.50GHz Binaries: Node: 12.6.0 - /usr/local/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 76.0.3809.87 Firefox: 68.0.1 Safari: 12.1.2 npmPackages: @storybook/addon-actions: ^5.2.0-rc.10 => 5.2.0-rc.11 @storybook/addon-docs: ^5.2.0-rc.11 => 5.2.0-rc.11 @storybook/addon-links: ^5.2.0-rc.10 => 5.2.0-rc.11 @storybook/addons: ^5.2.0-rc.10 => 5.2.0-rc.11 @storybook/react: ^5.2.0-rc.10 => 5.2.0-rc.11

Additional context The same exact indentation abnormality (2nd through 2nd last lines are indented one tab too far left, and last line indented two tabs too far right) seems to happen for all my DocsPage code previews, so I figured it’s either a configuration issue somewhere on my end, or a bug with the DocsPage code preview.

Thanks!

---

IssueHunt Summary

Backers (Total: $20.00)

• kylemh ($20.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[mrtraser]

Indentation still wrong for *.mdx files in storybook v5.3.8

Source:

Result:

[frassinier]

Here is a workaround for now, by editing your preview.js

import prettier from 'prettier/standalone';
import prettierBabel from 'prettier/parser-babel';

export const parameters = {
  docs: {
    transformSource: input =>
      prettier.format(input, {
        parser: 'babel',
        plugins: [prettierBabel],
      }),
  },
};

Hope it can help!