[v2] Add support for MDX scoped components in live preview

🚀 Feature

I’m trying to use v2 live code editor with MDX files, and seems like the context of MDX is not passed to the LivePreview component. I had a quick glance at the docusaurus-theme-live-codeblock and it seems like it could do something like described in here: https://www.christopherbiscardi.com/post/using-mdx-scope-in-react-live-scope/

Is this something we could add to the theme?

Have you read the Contributing Guidelines on issues?

Yes

Motivation

Seems like using components that are also already imported into docs file in live preview is more straight forward.

Pitch

Similar as in mentioned blog post, I think we just have to add mdx components to the context of the LivePreview in the theme. That would enable usage of live preview like this:

import { Button } from '@material-ui/core'

# Button
Some description

<Button /> 

\```jsx live
<Button variant="solid">test</Button>
\```

[johnny353535]

You can add your own scope by overwriting the MDX’s code component. The <CodeBlock /> component Docusaurus uses to render the live editor accepts a scope prop that will make your own modules available in the live editor.

Step-by-step guide

1. Make sure @docusaurus/theme-live-codeblock is installed and configured in your docusaurus configuration
2. Swizzle MDXComponents by running docusaurus swizzle @docusaurus/theme-classic MDXComponents
3. Go to src/theme/MDXComponents/index.js and pass your scope to the CodeBlock component

import * as Components from 'MyComponentLibrary';

...

code: props => {
  const { children } = props;

  const scope = {
    ...React,
    ...Components
  };

  if (typeof children === 'string') {
    return <CodeBlock {...props} scope={scope} />;
  }
  return children;
},

...

The scope will be passed through to react-live’s LiveProvider (more info) and your own components will be available in the live editor.

[arifszn]

Hey, late to the party but we have provided a way to easily add components to the react-live scope:

https://v2.docusaurus.io/docs/markdown-features/#interactive-code-editor yarn run swizzle @docusaurus/theme-live-codeblock ReactLiveScope

I’ve tried to support adding automatically imports of MDX into the react-live scope, so that it can be done “automagically”, like Gatsby does, but it’s kinda more complex than I thought. Gatsby integration does read mdx files to extract at build time (using a babel plugin as far as I remember) the mdx scope of the mdx file (imports + exports), and reinject them and add the mdxprovider scope to finally get the react-live scope.

#3466 Can you please look at the issue? Our work has stopped because of this.