Wrap editor in a ThemeProvider in Docusaurus

[JamesSingleton]

Not so much an "issue", but since Discussions isn't enabled on this repo, to the issues I go! I was using react-live in Docusaurus and components that I was rendering expect a ThemeProvider (similar to Material UI) to wrap them. However, this gets a little redundant to wrap each editor in a ThemeProvider

<ThemeProvider>
  <Header title="My Title" />
</ThemeProvider

It would be nice if there was a way to default wrap everything, similar to decorators in Storybook.

[jpdriver]

hey @JamesSingleton 👋🏻 i'm not sure i fully understand your use case.. please can you spin up a CodeSandbox / GitHub repo so i can take a look? thanks in advance

[JamesSingleton]

HI @jpdriver,

I have created one https://codesandbox.io/s/billowing-fire-yf059?file=/docs/intro.md. So if you go into the docs/intro you will see a jsx live. Currently I am wrapping it with a ThemeProvider, I would rather not paste ThemeProvider in each react-live instance and instead by default have the theme provider included.

[Josh-Cena]

@JamesSingleton Maintainer of Docusaurus here. I don't quite understand how you expect this to be done on the react-live side: how do they know which ThemeProvider you want? What about other users wanting other kinds of providers, or those that don't need any? If you are using Docusaurus, you can wrap your CodeBlock theme component from @docusaurus/theme-live-codeblock: https://docusaurus.io/docs/next/advanced/swizzling#wrapping-theme-components

Something like:

// src/theme/CodeBlock.js

import CodeBlock from '@theme-original/CodeBlock';
import React from 'react';
import ThemeProvider from '...';

export default function WrappedCodeBlock(props) {
  return (
    <ThemeProvider>
      <CodeBlock {...props} />
    </ThemeProvider>
  );
}

[dyaa]

I came across this issue while searching, Would it be possible that react-live access a higher context in the tree?