@storybook/addon-ondevice-notes: Markdown is very buggy

[LaurensUP]

These are my findings and bugs with the Notes addon for React Native:

• Headers need a newline to get formatting

# Button
Some text

doesn't format the heading

• If you put the newline, the rest of the content disappears

# Button

Some text

-> Formats the heading, but Some text disappears

• Documentation says you need a new line between each element, but if you do that, the things below your element don't get rendered

• If you don't add a new line between your element, it works, but everything in the Notes section is on one line

// Doesn't work
    *Button*

    \`\`\`
    <Button variant="primary" title="Activate" />
    \`\`\`
    Main **button** in the application

// Works, but everything is on one line...
    *Button*
    \`\`\`
    <Button variant="primary" title="Activate" />
    \`\`\`
    Main **button** in the application

[dannyhw]

@LaurensUP yeah it's unfortunate, when I was trying to fix it I couldn't find any good libraries. I'll take another look.

[Michael-Ivlev]

@dannyhw what is the best way to write docs and descriptions for the components?

[dannyhw]

@Michael-Ivlev seems pretty subjective to me and I'm not sure but it could be worth experimenting with this:

https://github.com/EvanBacon/expo-mdx/tree/main/packages/mdx

Then you could make custom render functions with mdx in them.

[dannyhw]

heres an example I was experimenting with just now

[Michael-Ivlev]

@dannyhw thank you but i use react native cli without expo,
is it possible to use markdown in notes ? how can i do it ?

[dannyhw]

@Michael-Ivlev as far as I know it doesn't require expo
Notes isn't worth investing time into because the addon is deprecated on storybook core
Though I mean technically I could make a NotesMdx addon that requires the MDX transformer

[dannyhw]

Notes addon will be fixed to use a better markdown renderer in v7