[Addon: Notes] - V5 - Weird formatting occurs when using markdown code snippet (```code```)

CodeByAlex commented 5 years ago

Describe the bug When using markdown with the notes addon, in version 5.x, special characters are showing abnormal spacing.

To Reproduce Steps to reproduce the behavior:

Follow the directions to add notes to the storybook project
add a markdown file or include markdown in your ts file (This markdown should include code snippets using tacs 3 tacs(`) code and then another 3 tacs(`)
in the configuration, add - notes: someMarkdownHere
run storybook and look to the notes section

Expected behavior I should be able to go to the notes section and see a correctly formatted code snippet

Screenshots What is currently being shown:

What should be shown:

Code snippets

See markdown below (remove slashes next to ticks):

# Component name

Component description

## Installation

directions:

/`/`/`
npm install --save libaryname
/`/`/`

## Usage

html snippet
/`/`/`
<component-a
    [x]="x value goes here"
    [y]="y value goes here"
    [z]="z value goes here"
</component-a>
/`/`/`

System:

Browser: [chrome, firefox (havee not checked ie)]
Framework: [Angular (but may not be specific to Angular)]
Addons: [addon-notes, addon-knobs, addon-a11y, addon-viewport, addon-actions]
Version: [5.0.0-beta.3]

Additional context I have run the markdown files through several MD checkers and they are valid so I think I have ruled out user error on this one.

tmeasday commented 5 years ago

Hi @CodeByAlex - I'm no expert here, but in our story (http://localhost:9011/?path=/info/addons-notes--addon-notes-rendering-inline-github-flavored-markdown) we use:

~~~js
//code
~~~

and it works fine. Maybe this is what you are supposed to do? This is also the way it was written in v4: https://storybooks-official.netlify.com/?selectedKind=Addons%7CNotes&selectedStory=withNotes%20rendering%20inline%2C%20github-flavored%20markdown&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Fnotes%2Fpanel

CodeByAlex commented 5 years ago

@tmeasday - sorry for the delay, just got back from Vacation - Thats odd because tacks are supposed to work and that's what we have been using in our code base. Another alternative is using 4 spaces before each line in the code in order to show it as a code block and that too is not formatting as expected. Any chance you could try those? Can't get them working locally.

tmeasday commented 5 years ago

@CodeByAlex have you tried in v4? I'm just wondering if this is a regression or a plain bug

CodeByAlex commented 5 years ago

@tmeasday This worked in V4 using both ticks and spaces which is why I found it odd. Was the markdown library or code changed for V5?

This would fall under regression

tmeasday commented 5 years ago

@CodeByAlex I think the area we render the code in changed? I'm not really sure TBH, I am just trying to triage it at this point :)

CodeByAlex commented 5 years ago

@tmeasday I am also receiving these errors about the validation of Dom nesting when I click to the notes tab but I am not including anything odd there. The error changes depending on the component but all deal with that validation:

vendors~main.75dfa2d4f775fd63ee97.bundle.js:75267 Warning: Failed prop type: The prop `language` is marked as required in `CopyableCode`, but its value is `undefined`.
    in CopyableCode (created by SyntaxHighlighter)
    in SyntaxHighlighter (created by Markdown)
    in pre (created by Markdown)
    in div (created by Markdown)
    in Markdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by StyledMarkdown)
    in StyledMarkdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by NotesPanel)
    in NotesPanel (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Provider (created by Preview)
    in Provider (created by Preview)
    in Preview (created by Context.Consumer)
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
printWarning @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:75267
checkPropTypes @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:75329
validatePropTypes @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:129948
createElementWithValidation @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:130037
SyntaxHighlighter @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:8649
renderWithHooks @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:96450
mountIndeterminateComponent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:98427
beginWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:99032
performUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102719
workLoop @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102759
renderRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102842
performWorkOnRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103749
performWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103661
performSyncWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103635
requestWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103504
scheduleWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103318
enqueueSetState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:94752
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:128617
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2638
requestAnimationFrame (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2636
Promise.then (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2634
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3234
navigate @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3233
onClick @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2996
callCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83760
invokeGuardedCallbackDev @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83810
invokeGuardedCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83867
invokeGuardedCallbackAndCatchFirstError @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83881
executeDispatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84172
executeDispatchesInOrder @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84194
executeDispatchesAndRelease @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84291
executeDispatchesAndReleaseTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84299
forEachAccumulated @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84273
runEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84427
runExtractedEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84435
handleTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88437
batchedUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103846
batchedUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85762
dispatchEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88516
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103897
unstable_runWithPriority @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:135160
interactiveUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103896
interactiveUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85781
dispatchInteractiveEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88493
vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117 Warning: validateDOMNesting(...): <pre> cannot appear as a descendant of <p>.
    in pre (created by Context.Consumer)
    in Styled(pre) (created by SyntaxHighlighter)
    in SyntaxHighlighter (created by CopyableCode)
    in div (created by Context.Consumer)
    in Styled(div) (created by CopyableCode)
    in div (created by Context.Consumer)
    in Styled(div) (created by CopyableCode)
    in CopyableCode (created by SyntaxHighlighter)
    in SyntaxHighlighter (created by Markdown)
    in p (created by Markdown)
    in div (created by Markdown)
    in Markdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by StyledMarkdown)
    in StyledMarkdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by NotesPanel)
    in NotesPanel (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Provider (created by Preview)
    in Provider (created by Preview)
    in Preview (created by Context.Consumer)
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
warningWithoutStack @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117
validateDOMNesting @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92212
createInstance @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92322
completeWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:100307
completeUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102549
performUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102747
workLoop @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102759
renderRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102842
performWorkOnRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103749
performWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103661
performSyncWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103635
requestWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103504
scheduleWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103318
enqueueSetState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:94752
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:128617
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2638
requestAnimationFrame (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2636
Promise.then (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2634
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3234
navigate @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3233
onClick @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2996
callCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83760
invokeGuardedCallbackDev @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83810
invokeGuardedCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83867
invokeGuardedCallbackAndCatchFirstError @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83881
executeDispatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84172
executeDispatchesInOrder @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84194
executeDispatchesAndRelease @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84291
executeDispatchesAndReleaseTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84299
forEachAccumulated @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84273
runEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84427
runExtractedEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84435
handleTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88437
batchedUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103846
batchedUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85762
dispatchEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88516
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103897
unstable_runWithPriority @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:135160
interactiveUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103896
interactiveUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85781
dispatchInteractiveEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88493
vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by Context.Consumer)
    in Styled(div) (created by CopyableCode)
    in div (created by Context.Consumer)
    in Styled(div) (created by CopyableCode)
    in CopyableCode (created by SyntaxHighlighter)
    in SyntaxHighlighter (created by Markdown)
    in p (created by Markdown)
    in div (created by Markdown)
    in Markdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by StyledMarkdown)
    in StyledMarkdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by NotesPanel)
    in NotesPanel (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Provider (created by Preview)
    in Provider (created by Preview)
    in Preview (created by Context.Consumer)
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
warningWithoutStack @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117
validateDOMNesting @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92212
createInstance @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92322
completeWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:100307
completeUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102549
performUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102747
workLoop @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102759
renderRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102842
performWorkOnRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103749
performWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103661
performSyncWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103635
requestWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103504
scheduleWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103318
enqueueSetState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:94752
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:128617
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2638
requestAnimationFrame (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2636
Promise.then (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2634
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3234
navigate @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3233
onClick @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2996
callCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83760
invokeGuardedCallbackDev @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83810
invokeGuardedCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83867
invokeGuardedCallbackAndCatchFirstError @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83881
executeDispatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84172
executeDispatchesInOrder @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84194
executeDispatchesAndRelease @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84291
executeDispatchesAndReleaseTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84299
forEachAccumulated @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84273
runEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84427
runExtractedEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84435
handleTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88437
batchedUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103846
batchedUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85762
dispatchEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88516
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103897
unstable_runWithPriority @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:135160
interactiveUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103896
interactiveUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85781
dispatchInteractiveEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88493
vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by Context.Consumer)
    in Styled(div) (created by ActionBar)
    in ActionBar (created by CopyableCode)
    in div (created by Context.Consumer)
    in Styled(div) (created by CopyableCode)
    in CopyableCode (created by SyntaxHighlighter)
    in SyntaxHighlighter (created by Markdown)
    in p (created by Markdown)
    in div (created by Markdown)
    in Markdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by StyledMarkdown)
    in StyledMarkdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by NotesPanel)
    in NotesPanel (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Provider (created by Preview)
    in Provider (created by Preview)
    in Preview (created by Context.Consumer)
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
warningWithoutStack @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117
validateDOMNesting @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92212
createInstance @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92322
completeWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:100307
completeUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102549
performUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102747
workLoop @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102759
renderRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102842
performWorkOnRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103749
performWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103661
performSyncWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103635
requestWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103504
scheduleWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103318
enqueueSetState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:94752
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:128617
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2638
requestAnimationFrame (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2636
Promise.then (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2634
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3234
navigate @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3233
onClick @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2996
callCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83760
invokeGuardedCallbackDev @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83810
invokeGuardedCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83867
invokeGuardedCallbackAndCatchFirstError @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83881
executeDispatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84172
executeDispatchesInOrder @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84194
executeDispatchesAndRelease @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84291
executeDispatchesAndReleaseTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84299
forEachAccumulated @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84273
runEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84427
runExtractedEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84435
handleTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88437
batchedUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103846
batchedUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85762
dispatchEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88516
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103897
unstable_runWithPriority @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:135160
interactiveUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103896
interactiveUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85781
dispatchInteractiveEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88493
vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (created by Context.Consumer)
    in Styled(div) (created by CopyableCode)
    in CopyableCode (created by SyntaxHighlighter)
    in SyntaxHighlighter (created by Markdown)
    in p (created by Markdown)
    in div (created by Markdown)
    in Markdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by StyledMarkdown)
    in StyledMarkdown (created by NotesPanel)
    in div (created by Context.Consumer)
    in Styled(div) (created by NotesPanel)
    in NotesPanel (created by Preview)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Provider (created by Preview)
    in Provider (created by Preview)
    in Preview (created by Context.Consumer)
    in Unknown (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Preview)
    in Preview (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout) (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ResizeDetector
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root
warningWithoutStack @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84117
validateDOMNesting @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92212
createInstance @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:92322
completeWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:100307
completeUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102549
performUnitOfWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102747
workLoop @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102759
renderRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:102842
performWorkOnRoot @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103749
performWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103661
performSyncWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103635
requestWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103504
scheduleWork @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103318
enqueueSetState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:94752
push../node_modules/react/cjs/react.development.js.Component.setState @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:128617
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2638
requestAnimationFrame (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2636
Promise.then (async)
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2634
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3234
navigate @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:3233
onClick @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:2996
callCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83760
invokeGuardedCallbackDev @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83810
invokeGuardedCallback @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83867
invokeGuardedCallbackAndCatchFirstError @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:83881
executeDispatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84172
executeDispatchesInOrder @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84194
executeDispatchesAndRelease @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84291
executeDispatchesAndReleaseTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84299
forEachAccumulated @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84273
runEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84427
runExtractedEventsInBatch @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:84435
handleTopLevel @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88437
batchedUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103846
batchedUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85762
dispatchEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88516
(anonymous) @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103897
unstable_runWithPriority @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:135160
interactiveUpdates$1 @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:103896
interactiveUpdates @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:85781
dispatchInteractiveEvent @ vendors~main.75dfa2d4f775fd63ee97.bundle.js:88493

CodeByAlex commented 5 years ago

I am closing this issue because it was resolved by changes made in pr #5802 . If anyone believes that this should be re-opened, please feel free to do so.

martinmcwhorter commented 5 years ago

I am seeing a strange, possibly related, issue with indentation of code blocks within markdown.

Much of the indentation is incorrect or wrong.

Renders as

HTML is much worse:

Renders as

I am using storybook 5.1.8 with addon-notes 5.1.8

shilman commented 5 years ago

cc @ndelangen ☝️

ndelangen commented 5 years ago

I'll pick this up

shilman commented 5 years ago

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.30 containing PR #7158 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

shilman commented 5 years ago

Ooh-la-la!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.10 containing PR #7158 that references this issue. Upgrade today to try it out!

storybookjs / storybook

[Addon: Notes] - V5 - Weird formatting occurs when using markdown code snippet (```code```) #5574