[addon-docs] ArgsTable Markdown description does not include newlines in code blocks

[niklasmh]

EDIT: Possible duplicate of #11358 (as it describes the same problem), thus this issue focuses on TypeScript interfaces and not propTypes (I have no idea if they use the same rules for code block rendering).

Describe the bug
Code formatting in ArgsTable descriptions does not support linebreaks/wrap/newlines. More specifically, the code blocks that are actually blocks behaves like inline elements.

To Reproduce
Steps to reproduce the behavior:

1. Create a TypeScript component with an interface with at least one property.
2. Add a JSDoc comment (with a multiline code block, e.g. ```\nline1\nline2\n```) before one of the properties.
3. Create a MDX story and include the component as well as an ArgsTable for that story.

Expected behavior
I would expect that code blocks (i.e. <pre><code>Code block</code></pre>, not <code>Inline code</code>) treated newlines as new lines.

The examples provided in the screenshots below should look like this:

Inline code: test // This code should *not* support newlines

Block code:

line1 // This code should support newlines
line2

Screenshots

This code:

Generates this:

Behind the scenes, the HTML is correct, meaning the problem is in the CSS. The CSS needs to specify pre > code to use white-space: pre-wrap and not white-space: nowrap as it currently does:

System

Without newlines:

Environment Info: System: OS: Linux 4.4 Ubuntu 20.04.1 LTS (Focal Fossa) CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz CPU @ 2.40GHz Binaries: Node: 10.19.0 - /usr/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /mnt/c/Users/niklas.hole/Documents/GitHub/ctrl/node_modules/.bin/npm npmPackages: @storybook/addon-controls: ^6.0.20 => 6.0.20 @storybook/addon-essentials: ^6.0.20 => 6.0.20 @storybook/addon-storysource: ^6.0.20 => 6.0.20 @storybook/client-api: ^6.0.21 => 6.0.21 @storybook/react: ^6.0.20 => 6.0.20

With newlines (much easier to read, eh?):

Environment Info:
  System:
    OS: Linux 4.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
 CPU @ 2.40GHz
  Binaries:
    Node: 10.19.0 - /usr/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /mnt/c/Users/niklas.hole/Documents/GitHub/ctrl/node_modules/.bin/npm
  npmPackages:
    @storybook/addon-controls: ^6.0.20 => 6.0.20
    @storybook/addon-essentials: ^6.0.20 => 6.0.20
    @storybook/addon-storysource: ^6.0.20 => 6.0.20
    @storybook/client-api: ^6.0.21 => 6.0.21
    @storybook/react: ^6.0.20 => 6.0.20

[shilman]

Yep, closing as dupe to #11358 😄

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.0-alpha.31 containing PR #12882 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease