Fix the import of external md files

[Keraito]

Issue: Fixes #3458. Right now, if markdown is imported from an external file, the content will be displayed as HTML. Different combinations of markdown elements would lead to different combinations of HTML and semi-proper markdown (styling was off). As far as I'm aware of from playing around with it, this is caused by auto conversion to HTML when importing the .md file.

What I did

There were three options that I found that could work:

1. Use webpack to change the import to load in the file raw.
2. Automatically set the inner HTML.
3. Turn the HTML back into proper markdown.

I didn't have experience with webpack and the second option ignored all the styling from existing components. So I implemented the last option with turndown. The condition for actually running the conversion is a regex checks on an HTML element at the start of the string. The option for the start was deliberate in order not to mess with markdown containing code examples.

How to test

• Added 2 example stories, one with internal md and one with external.
• Added a snapshot test.

[Keraito]

Quick question: was I not supposed to commit the .storyshot and .snap files?

Edit: was adding a snap test in this case even necessary?

[Hypnosphi]

was I not supposed to commit the .storyshot and .snap files?

You were

[Keraito]

@Hypnosphi, is there a reason the codecov report is not triggering?

[Hypnosphi]

IDK, but it's no big problem

[Hypnosphi]

BTW, I'm OK with replacing md-loader + html-loader with raw-loader, this looks like the easiest possible solution. It would be a breaking change, but we're going to release a new major version anyway

The corresponding files are
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/webpack.config.js#L75-L83
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/webpack.config.prod.js#L70-L78

And the same for other frameworks

[codecov]

Codecov Report

Merging #3472 into master will increase coverage by 54.93%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #3472       +/-   ##
==========================================
+ Coverage   37.56%   92.5%   +54.93%     
==========================================
  Files         458       6      -452     
  Lines       10350      40    -10310     
  Branches      919       2      -917     
==========================================
- Hits         3888      37     -3851     
+ Misses       5889       2     -5887     
+ Partials      573       1      -572

Impacted Files	Coverage Δ
lib/core/src/client/preview/syncUrlWithStore.js
addons/knobs/src/components/types/Number.js
addons/a11y/src/components/Tabs.js
app/polymer/bin/index.js
addons/centered/mithril.js
...ganisation-name/update-organisation-name.output.js
addons/actions/src/preview/actions.js
addons/notes/src/index.js
...codemod/src/transforms/update-organisation-name.js
addons/knobs/src/KnobManager.js
... and 430 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 91f8463...0464ac6. Read the comment docs.

[Keraito]

The tip of my local branch was behind on remote. Fixing it the way git tells me causes merge conflicts on code from one of the older commits (removed in later commit), so I decided to force push over it.

[Hypnosphi]

Looks like notes addon relies on old imports:

https://deploy-preview-3472--storybooks-official.netlify.com/?selectedKind=Addons%7CNotes&selectedStory=withNotes%20rendering%20imported%20markdown&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fnotes%2Fpanel

The easiest fix is to replace { notes: markdownNotes } with { notes: { markdown: markdownNotes }} in example, and adjust docs accordingly

[Hypnosphi]

This part of docs needs update as well: https://github.com/storybooks/storybook/blob/master/docs/src/pages/basics/writing-stories/index.md#using-markdown

[Keraito]

Will update the according documentation!

Regarding the notes addon, @Hypnosphi: While I see it in your link, I can't seem to reproduce it on my current import-external-md branch.

[Hypnosphi]

What happens if you make a static build using yarn build-storybook?

[Keraito]

@Hypnosphi I have to run it from examples/official-storybook right? How do I check the static build after exactly?

[Hypnosphi]

Yes. You can open storybook-static/index.html in your browser manually or use some tool like html-server for it

[Keraito]

So the markdown in the notes of https://github.com/storybooks/storybook/blob/851211019d2858a86c9bda2dde46919e36efa53d/examples/official-storybook/stories/addon-notes.stories.js#L35 actually works as intended (just like my previous schreenshot). But, the story I added with an external md file does not. Did I mess up somewhere in the configs @Hypnosphi ?

[Hypnosphi]

That's weird, it works OK in deployed version

Is there a chance that you didn't run yarn dev or yarn bootstrap --core?

[Keraito]

Oh yes, now I reproduced it. I probably messed up something with the dependencies.. Will look into the notes addon and update the docs soon!

[Keraito]

Applied the requested changes @Hypnosphi

[Hypnosphi]

Looks like markdownText part is a typo in current docs, the example below uses markdown

Also, after your change there's no difference in handling inline vs imported markdown, so you can just remove this paragraph

[Keraito]

Combined the text for both examples and removed the 2nd paragraph. Please let me know if you think the description needs to be adjusted!

[Hypnosphi]

Please update storyshot:

yarn test --core --update

[Keraito]

Done!