feat: add a way to provide global scope for live editor

src/components/Code.js

@@ -50,14 +50,21 @@ const LivePreview = styled(BaseLivePreview)`
   }
 `
 
+const globalScope = {}
+
+export function LiveScope({ scope }) {
+  Object.assign(globalScope, scope)
+  return null
+}
+
 export function Code({ children, lang = 'markup', live, noInline }) {
   const scope = useMDXScope()
   if (live) {
     return (
       <LiveProvider
         code={children.trim()}
         transformCode={code => `/* @jsx mdx */${code}`}
-        scope={{ mdx, ...scope }}
+        scope={{ mdx, ...scope, ...globalScope }}
         language={lang}
         theme={theme}
         noInline={noInline}

src/components/Playground.js

@@ -0,0 +1,6 @@
+import React from 'react'
+import { Code } from './Code'
+
+export function Playground(props) {
+  return <Code lang="jsx" live {...props} />
+}

src/components/index.js

@@ -1,6 +1,7 @@
 export * from './Article'
 export * from './BaseLayout'
 export * from './DocLayout'
+export * from './Code'
 export * from './GlobalStyle'
 export * from './Head'
 export * from './HomeHero'

src/pages/docs/getting-started.mdx

@@ -5,7 +5,10 @@ order: 1
 ---
 
 import styled from 'styled-components'
-import Button, { Foo } from './Button'
+import Button from './Button'
+import { LiveScope } from '../../components/Code'
+
+<LiveScope scope={{ styled }} />
 
 # Getting Started
 
@@ -32,7 +35,7 @@ Etiam elementum, odio sed maximus fringilla, massa dui efficitur ante, sed dictu
 ## Code example
 
 ```jsx live
-<Button>Good</Button>
+<Button>Hello</Button>
 ```
 
 ```jsx