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

Created on 13 Feb 2019  路  12Comments  路  Source: storybookjs/storybook

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:

  1. Follow the directions to add notes to the storybook project
  2. 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(`)
  3. in the configuration, add - notes: someMarkdownHere
  4. 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:
image

What should be shown:
image

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.

notes bug
Source
picture CodeByAlex

All 12 comments

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

tmeasday picture tmeasday on 18 Feb 2019
👍1

@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.

CodeByAlex picture CodeByAlex on 25 Feb 2019

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

tmeasday picture tmeasday on 25 Feb 2019

@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

CodeByAlex picture CodeByAlex on 25 Feb 2019

@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 :)

tmeasday picture tmeasday on 25 Feb 2019
👍1

@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 picture CodeByAlex on 25 Feb 2019

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.

CodeByAlex picture CodeByAlex on 3 Mar 2019

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

Much of the indentation is incorrect or wrong.

image

Renders as

image

HTML is much worse:
image

Renders as

image

I am using storybook 5.1.8 with addon-notes 5.1.8

martinmcwhorter picture martinmcwhorter on 19 Jun 2019

cc @ndelangen 鈽濓笍

shilman picture shilman on 20 Jun 2019

I'll pick this up

ndelangen picture ndelangen on 20 Jun 2019
👍1

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 picture shilman on 25 Jun 2019

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!

shilman picture shilman on 31 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

levithomason picture levithomason  路  3Comments
ZigGreen picture ZigGreen  路  3Comments
miljan-aleksic picture miljan-aleksic  路  3Comments
xogeny picture xogeny  路  3Comments
rpersaud picture rpersaud  路  3Comments