Storybook: Markdown shows up as HTML with addon-info

[SethDavenport]

Bug or support request summary

I'm using @storybook/addon-info to get some markdown into my stories, however, I'm loading it from an external file:

// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import docs from './README.md';

const withDocs = withInfo(docs);

storiesOf('A story', module)
  .add('primary', withDocs(() => <p>Some JSX</p>))

What I'm noticing is that it works fine if the markdown just has a header:

# Header

But as soon as I add another line, the info panel shows the first few lines as escaped HTML instead:

# Header

some text

Any idea what I'm doing wrong?

Steps to reproduce

1. make a vanilla react storybook: no custom webpack, etc.
2. install @storybook/addon-info
3. use this babelrc:

{
  "presets": [
    "babel-preset-env",
    "react",
    "flow"
  ],
  "plugins": [
    "transform-object-rest-spread",
    "transform-async-to-generator",
    "babel-plugin-styled-components"
  ]
}

1. Make a story:

// @flow
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import docs from './README.md';

const withDocs = withInfo(docs);

storiesOf('A story', module)
  .add('primary', withDocs(() => <p>Some JSX</p>))

1. Add a header and a paragraph to the readme.md file.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.4.2
• @storybook/addon-info 3.4.2

Affected platforms

Mac OS Sierra, Chrome 65

[Keraito]

Sorry @SethDavenport, I forgot to reply here after looking into a fix and proposing the changes.

Basically, the problem is that the content of a .md file, when imported, is automatically turned into the corresponding HTML. This results in some flaky rendering. As a workaround while waiting for the PR, you can try using webpack to change the import to load in the file raw or use an library like turndown to turn it into proper Markdown again.

[SethDavenport]

OK yeah that makes sense. I'll give that a shot. Thanks.

[SethDavenport]

I ended up doing this, which works fine:

.storybook/webpack.config.js:

module.exports = {
  module: {
    rules: [{
      test: /\.mkd$/,
      use: 'raw-loader',
    }],
  },
};

I had to rename my markdown files to .mkd instead of .md because raw loading .md still ends up with HTML. I think this must be related to how you guys handle custom webpack config? I'm guessing you merge it into the base config somehow such that overriding the rules for an extension augments the loaders instead of overriding them? Anyway this works for my purposes so :+1:

Thanks for the help (and for a really useful tool).

[Hypnosphi]

released as 4.0.0-alpha.6