Addon-docs: Source editing support

[shilman]

Add editing support to #6641

Details TBD

[github-actions]

Automention: Hey @elevatebart @igor-dv @JeroenReumkens, you've been tagged! Can you give a hand here?

[libetl]

What do we want here ?

[libetl]

I can try to help

[shilman]

@libetl Haven't really spec'ed it out yet. Will definitely loop you in once this gets started.

There are some "lightweight" in-place code editors like https://github.com/FormidableLabs/react-live and I'd like to support this interaction. However, I'm unclear how this will integrate with the rest of the Storybook UI and also cross-framework.

More soon cc @elevatebart @JeroenReumkens

[kevinSuttle]

I've seen how the folks at Segment handle this:

https://github.com/segmentio/evergreen/blob/7fc8135c2b80afd6c7158853f7ffdf4acfffbced/docs/src/components/Playground.js

https://github.com/segmentio/evergreen/blob/7fc8135c2b80afd6c7158853f7ffdf4acfffbced/docs/src/components/MDXPlayground.js

Live example: https://evergreen.segment.com/components/button/

[kevinSuttle]

Is https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.8 related to this?

Also, I just stumbled across this: https://mdxjs.com/guides/live-code/

[shilman]

@kevinSuttle thanks for the link--that looks really useful. this is probably a 5.3 feature and still unclear how to fit it in in a cross-framework way!

[kevinSuttle]

still unclear how to fit it in in a cross-framework way!

Definitely. That's not an easy task for sure. Thanks for your work on this!

[elevatebart]

The vue-inbrowser-compiler for VueJs is compiling vue components live and can be leveraged. For React there is buble.
It means definitely a lot of work to get cross framework compatibility with angular's typescript and ember functions.

[bodograumann]

react-styleguidist / vue-styleguidist allow this. We are looking to use addon-docs instead of styleguidist. Would be great if editing was allowed. Maybe have a look at their solution.

[shilman]

@bodograumann we have the vue-styleguidist maintainer, @elevatebart, on our team now -- if anybody can figure it out, it's him!

[jonsalvas]

any updates on this? Really useful feature imo