feat(notes): add marked options

[aymeric-duchein]

Issue:

Hi all,
I don't think there where any way to enable code syntax highlight when using withMarkdownNotes using it like that:

storiesOf('Notes', module).add( 'Markdown Highlight', withMarkdownNotes(`
~~~javascript
const test = () => 'this is highlighted';
let foo = 'bar';
~~~`)(() => {
      return {
        component: MyComponent,
        props: { }
      }
    })
  )

So we currently have something like this:

I haven't found any PR or Issue addressing this issue except maybe this closed one: #951

What I did

I came up with the following solution that solves this issue while allowing backward-compatibility.

 - export const withMarkdownNotes = (text) => {
 + export const withMarkdownNotes = (text, options) => {
     const channel = addons.getChannel();
     return getStory => context => {
 +     marked.setOptions({ ...marked.defaults, options });
       // send the notes to the channel before the story is rendered
       channel.emit('storybook/notes/add_notes', marked(text));
       return getStory(context);
     };
   };

changing above code snippet to this: (I'm using Prism but that's only a personnal preference)

storiesOf('Notes', module).add( 'Markdown Highlight', withMarkdownNotes(`
~~~javascript
const test = () => 'this is highlighted';
let foo = 'bar';
~~~`,  
     { highlight: (code, lang) => Prism.highlight(code, Prism.languages[lang], lang) }
)(() => {
      return {
        component: MyComponent,
        props: { }
      }
    })
  )

You should now be able (with a bit of css, i.e. a prism theme) to obtain this:

If you think this need some testing I'll gladly add them or if there is anything that I missed feel free to tell me.

[codecov]

Codecov Report

Merging #3225 into master will decrease coverage by 0.1%.
The diff coverage is 50%.

@@            Coverage Diff             @@
##           master    #3225      +/-   ##
==========================================
- Coverage   35.74%   35.63%   -0.11%     
==========================================
  Files         472      472              
  Lines       10134    10122      -12     
  Branches     1196      928     -268     
==========================================
- Hits         3622     3607      -15     
- Misses       5784     5935     +151     
+ Partials      728      580     -148

Impacted Files	Coverage Δ
addons/notes/src/index.js	57.14% <50%> (-4.4%)	⬇️
app/mithril/src/server/utils.js	0% <0%> (-83.34%)	⬇️
...ddons/actions/src/components/ActionLogger/style.js	0% <0%> (ø)	⬆️
addons/jest/src/components/Result.js	0% <0%> (ø)	⬆️
lib/core/src/client/preview/syncUrlWithStore.js	40.9% <0%> (ø)	⬆️
app/react-native/src/bin/storybook-start.js	0% <0%> (ø)	⬆️
addons/info/src/components/types/OneOf.js	61.11% <0%> (ø)	⬆️
addons/info/src/components/markdown/code.js	76.92% <0%> (ø)	⬆️
addons/storyshots/src/vue/renderTree.js	60% <0%> (ø)	⬆️
addons/a11y/src/components/WrapStory.js	54.09% <0%> (ø)	⬆️
... and 76 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d0d6e4f...c37fdf1. Read the comment docs.

[anoopsinghbayes]

@aymeric-duchein how do you pass the prism theme (css) to the notes panel?

[anoopsinghbayes]

@aymeric-duchein here is what i tried
details using 4.0.0-alpha.16 of notes with angular

{
    notes: {
      markdown: buttonMarkdown,
      markdownOptions: {
        highlight: function (code, lang) {
          return Prism.highlight(code, Prism.languages[lang], lang);
        }
      }
    }
  }

but i dont see Prism tokenizing my input.

currently using a work around as follows
added the following css ref in manager-head.hml

<link rel="stylesheet" href="assets/prismjs/themes/prism.css">

 //helper.js
import marked from "marked";
import Prism from "prismjs";

const mdToHTML = (md) => {
  marked.setOptions({
    ...marked.defaults,
    highlight: function (code, lang) {
      return Prism.highlight(code, Prism.languages[lang], lang);
    }
  });
  const HTML = marked(md);
  return HTML;
};

export default mdToHTML;

//some where inside index.stories.ts

import mdToHTML from "./helper/mdToHTML";
import * as buttonMarkdown from "./button.md";

//.....
 notes: {
      text: mdToHTML(buttonMarkdown)
}

the above one works but i lose code formatting

[aymeric-duchein]

It seems that the code changed a lot since the last time I used storybook. From what I can gather maybe @tmeasday could help you on this one.

[tmeasday]

@anoopsinghbayes that code looks like it should work:

https://github.com/storybooks/storybook/blob/93745d706710e9e45b8cb8ddec4c6e773e181a41/addons/notes/src/index.js#L19

I'm not sure exactly why it not work -- perhaps we should add an example to the official storybook that uses the option?

[tmeasday]

Although, shouldn't it be {...marked.defaults, ...options} or even just marked(markdown, options)?

I haven't tested this directly, I just converted the old code. @anoopsinghbayes if you wanted to send a PR with an example it would be awesome. I bet you'd be able to fix the issue too, the code isn't too complicated! Let me know I can help.

[anoopsinghbayes]

@tmeasday ,I was struggling to get the storybook application setup(proxy and other yarn related issues)
now that it is fixed ,i can send a PR,
i am trying to add a test for this but i dont know how to run the test for addons\notes :-(

[tmeasday]

Oh! Sure, the best way is to just run the storybook and take a look. You can do (from the top-level of the project):

yarn
yarn bootstrap --core
cd examples/official-storybook
yarn storybook

and then browse to the official storybook (I think it's http://localhost:9011), and look at the addon/notes stories within it. The files for those stories are here: https://github.com/storybooks/storybook/blob/master/examples/official-storybook/stories/addon-notes.stories.js

[andrei-ilyukovich]

@anoopsinghbayes, Are you going to create a PR for that?
@tmeasday to my mind it would be awesome to have code highlighting out-of-the-box in addon-notes, what do you think about it?

[tmeasday]

I think it'd be great!