Merge pull request #82 from c8r/fix-scope

Allow scope from ScopeProvider

docs/markdown.md

@@ -65,6 +65,24 @@ Using code fences means that your example code will render in any standard markd
 **Important Note**: To include custom components in scope for the live preview code fences,
 you must use the `ScopeProvider` in a [custom App component](custom-app).
 
+#### MDX
+
+The LiveEditor also supports [MDX][] format. Use the `.mdx` language attribute to use MDX.
+
+````md
+```.mdx
+# Hello MDX
+
+<Button>Hello</Button>
+```
+````
+
+```.mdx
+# Hello MDX
+
+<Button>Hello</Button>
+```
+
 
 ### Live Preview
 
@@ -105,3 +123,4 @@ Front matter will be passed to the [HTML template](customizing) to allow control
 [rr-link]: https://reacttraining.com/react-router/web/api/Link
 [site]: https://compositor.io/x0/markdown
 [fm]: https://github.com/jonschlinkert/gray-matter
+[MDX]: https://github.com/mdx-js/mdx

src/LiveEditor.js

@@ -10,7 +10,6 @@ import { Box } from 'rebass'
 import { color, borderColor } from 'styled-system'
 import styled from 'styled-components'
 import mdx from '@mdx-js/mdx'
-import { MDXTag } from '@mdx-js/tag'
 
 const transformCode = src => `<React.Fragment>${src}</React.Fragment>`
 const transformMdx = src => {
@@ -55,30 +54,26 @@ export default ({
   scope = {},
   render,
   mdx
-}) => {
-  const fullScope = { MDXTag, components: {}, ...scope }
-
-  return (
-    <Box mb={4}>
-      <ScopeConsumer defaultScope={fullScope}>
-        {scope => (
-          <LiveProvider
-            code={code}
-            scope={fullScope}
-            mountStylesheet={false}
-            transformCode={mdx ? transformMdx : transformCode}>
-            {typeof render === 'function' ? (
-              render({ code, fullScope })
-            ) : (
-              <React.Fragment>
-                <Preview />
-                <Editor />
-                <Err />
-              </React.Fragment>
-            )}
-          </LiveProvider>
-        )}
-      </ScopeConsumer>
-    </Box>
-  )
-}
+}) => (
+  <Box mb={4}>
+    <ScopeConsumer defaultScope={scope}>
+      {scope => (
+        <LiveProvider
+          code={code}
+          scope={scope}
+          mountStylesheet={false}
+          transformCode={mdx ? transformMdx : transformCode}>
+          {typeof render === 'function' ? (
+            render({ code, scope })
+          ) : (
+            <React.Fragment>
+              <Preview />
+              <Editor />
+              <Err />
+            </React.Fragment>
+          )}
+        </LiveProvider>
+      )}
+    </ScopeConsumer>
+  </Box>
+)

src/scope.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { withRouter, Link } from 'react-router-dom'
 import rebassMarkdown from '@rebass/markdown'
 import { Pre } from 'rebass'
+import { MDXTag } from '@mdx-js/tag'
 
 import LiveEditor from './LiveEditor'
 import LivePreview from './LivePreview'
@@ -67,16 +68,20 @@ export const code = ({
 
 const pre = props => props.children
 
-const scope = rebassMarkdown({
-  a: {
-    is: link
-  },
-  code: {
-    is: code
-  },
-  pre: {
-    is: pre,
-  }
-})
+const scope = {
+  MDXTag,
+  components: {}, // does mdx need this?
+  ...rebassMarkdown({
+    a: {
+      is: link
+    },
+    code: {
+      is: code
+    },
+    pre: {
+      is: pre,
+    }
+  })
+}
 
 export default scope

test/components.js

@@ -222,8 +222,11 @@ test('SidebarLayout renders', t => {
 })
 
 const blacklist = {
-  pre: true
+  pre: true,
+  MDXTag: true,
+  components: true
 }
+
 Object.keys(scope)
   .filter(key => !blacklist[key])
   .forEach(key => {

test/snapshots/components.js.md

@@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
 
     <div
       active={true}
-      className="sc-jAaTju esAkYv sc-bdVaJa iHZvIS"
+      className="sc-jAaTju esAkYv sc-bdVaJa jTkvro sc-bdVaJa iHZvIS"
     >
       Hello
     </div>
@@ -120,10 +120,10 @@ Generated by [AVA](https://ava.li).
         className="sc-hEsumM dahmKO"
       >
         <div
-          className="sc-fMiknA jgVkvN sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS"
+          className="sc-fMiknA jgVkvN sc-bwzfXH loXcNn sc-bdVaJa dYrRxR sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
         >
           <button
-            className="sc-gzVnrw ghjHJc sc-ifAKCX fFPXoq"
+            className="sc-gzVnrw ghjHJc sc-ifAKCX cwpXPb sc-ifAKCX fFPXoq"
             onClick={Function onClick {}}
             title="Toggle Menu"
           >
@@ -152,7 +152,7 @@ Generated by [AVA](https://ava.li).
         />
       </div>,
       <div
-        className="sc-jnlKLf fQRDBU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS"
+        className="sc-jnlKLf fQRDBU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
       >
         <div
           className="sc-fYxtnH VTytv"
@@ -160,7 +160,7 @@ Generated by [AVA](https://ava.li).
           open={false}
         >
           <div
-            className="sc-fMiknA fVCXKt sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS"
+            className="sc-fMiknA fVCXKt sc-bwzfXH loXcNn sc-bdVaJa dTDQGU sc-bwzfXH hKiLMS sc-bdVaJa iHZvIS sc-bdVaJa iHZvIS"
           >
             <h2
               className="sc-VigVT gPiNJC"
@@ -210,7 +210,7 @@ Generated by [AVA](https://ava.li).
           tabIndex={undefined}
         >
           <div
-            className="sc-jAaTju jHRdEk sc-bdVaJa iHZvIS"
+            className="sc-jAaTju jHRdEk sc-bdVaJa bAyxfd sc-bdVaJa iHZvIS"
           >
             <div
               className="sc-ktHwxA dvWgCn sc-bdVaJa iHZvIS"
@@ -218,7 +218,7 @@ Generated by [AVA](https://ava.li).
               Content
             </div>
             <div
-              className="sc-bwzfXH liBCIH sc-bdVaJa gkOtLU"
+              className="sc-bwzfXH liBCIH sc-bdVaJa gkOtLU sc-bdVaJa gkOtLU"
             >
               <div
                 className="sc-bdVaJa LbkC"
@@ -271,7 +271,8 @@ Generated by [AVA](https://ava.li).
 > Snapshot 1
 
     <blockquote
-      className="sc-chPdSV gReYnD sc-gqjmRU cbBDfA"
+      className="sc-chPdSV gReYnD sc-gqjmRU NYUxz"
+      fontWeight="bold"
     />
 
 ## scope.code renders