feat(v2): allow adding components to react-live scope (#2826)

* feat(v2): add components to react-live scope (#2807)

* fix admonition issue + improve react-live scope doc

* fix again admonition :(

* remove forwarding of mdx components to react-live scope (for now)

* remove useless dep

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -9,6 +9,7 @@ import React from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
 import Playground from '@theme/Playground';
+import ReactLiveScope from '@theme/ReactLiveScope';
 import CodeBlock from '@theme-init/CodeBlock';
 
 const withLiveEditor = (Component) => {
@@ -20,7 +21,7 @@ const withLiveEditor = (Component) => {
       return (
         <Playground
           key={isClient}
-          scope={{...React}}
+          scope={ReactLiveScope}
           theme={prismTheme}
           {...props}
         />

packages/docusaurus-theme-live-codeblock/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+};
+
+export default ReactLiveScope;

website/docs/markdown-features.mdx

@@ -759,6 +759,57 @@ function Clock(props) {
 }
 ```
 
+:::caution react-live and imports
+
+It is not possible to import components directly from the react-live code editor, you have to define available imports upfront.
+
+:::
+
+By default, all React imports are available. If you need more imports available, swizzle the react-live scope:
+
+```bash npm2yarn
+npm run swizzle @docusaurus/theme-live-codeblock ReactLiveScope
+```
+
+```jsx {3-15,21} title="src/theme/ReactLiveScope/index.js"
+import React from 'react';
+
+const ButtonExample = (props) => (
+  <button
+    {...props}
+    style={{
+      backgroundColor: 'white',
+      border: 'solid red',
+      borderRadius: 20,
+      padding: 10,
+      cursor: 'pointer',
+      ...props.style,
+    }}
+  />
+);
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  ButtonExample,
+};
+
+export default ReactLiveScope;
+```
+
+The `ButtonExample` component is now available to use:
+
+```jsx live
+function MyPlayground(props) {
+  return (
+    <div>
+      <ButtonExample onClick={() => alert('hey!')}>Click me</ButtonExample>
+    </div>
+  );
+}
+```
+
 ### Multi-language support code blocks
 
 With MDX, you can easily create interactive components within your documentation, for example, to display code in multiple programming languages and switching between them using a tabs component.

website/src/theme/ReactLiveScope/components.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const ButtonExample = (props) => (
+  <button
+    {...props}
+    style={{
+      backgroundColor: 'white',
+      border: 'solid red',
+      borderRadius: 20,
+      padding: 10,
+      cursor: 'pointer',
+      ...props.style,
+    }}
+  />
+);

website/src/theme/ReactLiveScope/index.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import * as components from './components';
+
+// Add react-live imports you need here
+const ReactLiveScope = {
+  React,
+  ...React,
+  ...components,
+};
+
+export default ReactLiveScope;