Use SyntaxHighlighter component when encountering any code in markdown in notes addon

Instead of converting markdown to an html string, use markdown-to-jsx library to convert the markdown directly into react elements, using our SyntaxHighlighter component in place of any code elements

addons/notes/package.json

@@ -28,7 +28,7 @@
     "@emotion/styled": "^0.10.6",
     "@storybook/addons": "4.0.0-alpha.23",
     "@storybook/components": "4.0.0-alpha.23",
-    "marked": "^0.5.0",
+    "markdown-to-jsx": "^6.7.4",
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {

addons/notes/src/index.js

@@ -1,11 +1,4 @@
 import addons, { makeDecorator } from '@storybook/addons';
-import marked from 'marked';
-
-function renderMarkdown(text, options) {
-  marked.setOptions({ ...marked.defaults, options });
-
-  return marked(text);
-}
 
 export const withNotes = makeDecorator({
   name: 'withNotes',
@@ -18,21 +11,20 @@ export const withNotes = makeDecorator({
 
     const storyOptions = parameters || options;
 
-    const { text, markdown, markdownOptions } =
+    const { text, markdown } =
       typeof storyOptions === 'string' ? { text: storyOptions } : storyOptions;
 
     if (!text && !markdown) {
       throw new Error('You must set of one of `text` or `markdown` on the `notes` parameter');
     }
 
-    channel.emit('storybook/notes/add_notes', text || renderMarkdown(markdown, markdownOptions));
+    channel.emit('storybook/notes/add_notes', text || markdown);
 
     return getStory(context);
   },
 });
 
-export const withMarkdownNotes = (text, options) =>
+export const withMarkdownNotes = text =>
   withNotes({
     markdown: text,
-    markdownOptions: options,
   });

addons/notes/src/register.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import addons from '@storybook/addons';
-
-import { Placeholder } from '@storybook/components';
+import { SyntaxHighlighter, Placeholder } from '@storybook/components';
+import Markdown from 'markdown-to-jsx';
 import { ADDON_ID, PANEL_ID } from './shared';
 
 const Panel = styled.div({
@@ -14,9 +14,13 @@ const Panel = styled.div({
 
 export class NotesPanel extends React.Component {
   state = {
-    text: '',
+    markdown: '',
   };
 
+  // use our SyntaxHighlighter component in place of a <code> element when
+  // converting markdown to react elements
+  markdownOpts = { overrides: { code: SyntaxHighlighter } };
+
   componentDidMount() {
     this.mounted = true;
     const { channel, api } = this.props;
@@ -39,29 +43,22 @@ export class NotesPanel extends React.Component {
     channel.removeListener('storybook/notes/add_notes', this.onAddNotes);
   }
 
-  onAddNotes = text => {
-    this.setState({ text });
+  onAddNotes = markdown => {
+    this.setState({ markdown });
   };
 
   render() {
     const { active } = this.props;
-    const { text } = this.state;
-    const textAfterFormatted = text
-      ? text
-          .trim()
-          .replace(/(<\S+.*>)\n/g, '$1')
-          .replace(/\n/g, '<br />')
-      : '';
+    const { markdown } = this.state;
 
     if (!active) {
       return null;
     }
 
-    return textAfterFormatted ? (
-      <Panel
-        className="addon-notes-container"
-        dangerouslySetInnerHTML={{ __html: textAfterFormatted }}
-      />
+    return markdown ? (
+      <Panel className="addon-notes-container">
+        <Markdown options={this.markdownOpts}>{markdown}</Markdown>
+      </Panel>
     ) : (
       <Placeholder>There is no info/note</Placeholder>
     );

examples/official-storybook/stories/notes/notes.md

@@ -3,6 +3,7 @@
 #### It is imported and compiled using a webpack markdown loader
 
 Supports code snippets too:
+
 ```jsx
 <div>
   Foo

lib/components/src/syntaxhighlighter/syntaxhighlighter.js

@@ -29,6 +29,7 @@ const Wrapper = styled.div(
         }
       : {}
 );
+
 const Scroller = styled.div(
   {
     position: 'relative',
@@ -42,12 +43,14 @@ const Scroller = styled.div(
   }),
   ({ theme }) => themedSyntax(theme)
 );
+
 const Pre = styled.pre(({ theme, padded }) => ({
   display: 'flex',
   justifyContent: 'flex-start',
   margin: 0,
   padding: padded ? theme.layoutMargin : 0,
 }));
+
 const Code = styled.code({
   flex: 1,
   paddingRight: 0,

yarn.lock

@@ -12113,6 +12113,13 @@ markdown-table@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.2.tgz#c78db948fa879903a41bce522e3b96f801c63786"
 
+markdown-to-jsx@^6.7.4:
+  version "6.7.4"
+  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.7.4.tgz#becdddf559c4dc7e4e2ee48f5e669896e97ca193"
+  dependencies:
+    prop-types "^15.5.10"
+    unquote "^1.1.0"
+
 marked@^0.3.9:
   version "0.3.19"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
@@ -18736,6 +18743,10 @@ unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
 
+unquote@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"