Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[6.2.0-beta.11] MDX Merges Heading Levels 1 and 2

See original GitHub issue

Describe the bug In a stories file using markdown (*.stories.mdx), if a heading level 1, denoted by a single pound symbol # at the beginning of the line, is followed by a heading level 2, denoted by two pound symbols ##, even if there are multiple blank lines between them, these two headings will be merged onto the same line.

This issue does not occur if heading level 1 is followed a sentence on the next line which is not a heading or if a heading level 1 is followed by any other heading levels such as 3 ###, 4, ####, or 5 #####.

To Reproduce Steps to reproduce the behavior:

Create a *.stories.mdx file and set it up for a component. Add a heading level 1, press Enter, and add a heading level 2.
When you load the *.stories.mdx file in the browser, you will see both headings appear together on the same line, with the text of the level 2 heading slightly smaller (as expected).

This issue occurs in the 6.2.0-beta.11 release but not in the stable 6.0.21 release of Storybook, I presume in the @storybook/addon-essentials package.

Expected behavior Heading level 2 is expected to appear on the line below heading level 1, just as it does in the source *.stories.mdx file.

Screenshots This is the error occurring in the 6.2.0-beta.11 release:

Storybook 6 2 0-BETA Error with Markdown

For comparison, here are the two headings appearing just fine in 6.0.21 Storybook tutorial:

Storybook 6 0 21 Markdown Working Fine

FYI, the styling of the two headers is a lot nicer in 6.0.21 and quite harsh in 6.2.0-beta.11. I sure hope this changes!

Code snippets The headings in both *.stories.mdx files are coded identically:

# Avatar

## Displays an image that represents a user or organization

Issue Analytics

State:
Created 3 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

1reaction

jonniebigodescommented, Mar 26, 2021

@KenACollins that’s a weird one. I’ve created a branch on my end and bumped the Storybook packages to the quasi latest versions, tested it, and wasn’t able to reproduce it. Here is the pull request and here the deployed Storybook.

I tested this before deploying and once again no such luck

0reactions

jonniebigodescommented, Mar 31, 2021

@KenACollins indeed. Storybook 6.2 was just released, check the blog post here. I’m glad that the issue is now fixed on your end!

Let us know of any issues you might encounter with Storybook and good luck with the Design System you’re working on!

Stay safe

Top Results From Across the Web

storybook/CHANGELOG.v6.md at next - GitHub

Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

Untitled

Altshopping co uk review, Mirakkel akkel challenger 1 grand finale full episode, ... 93.7 british columbia, Icomania level 2 yellow character.

storybook/addon-controls/README.md - UNPKG

1, # Storybook Controls Addon. 2 ... 39, - [How do controls work with MDX?]( ... merged, so story-level annotations overwrite component-level annotations....

@storybook/addon-controls - NPM Package Overview - Socket

Package contains a reference to a license without a matching LICENSE file. Found 1 instance in 1 package. Dependencies have 5 critical issues....

Untitled

Level 6 star wars commander, Impossibilidades cifra club, Safari upload enabler ipad ... Skins staffel 1 folge 2 teil 1, Dell latitude e6410...