Add section to live editor guide around pragma usage (mdx-js#722)

* Add section to live editor guide around pragma usage Closes mdx-js#571 * Fix lint error
Othello1111 · Aug 9, 2019 · c7e8d88 · c7e8d88
1 parent 3b0b715
commit c7e8d88
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 6 deletions.
diff --git a/docs/guides/live-code.mdx b/docs/guides/live-code.mdx
@@ -85,4 +85,86 @@ export default props => (
 )
 ```
 
+## Using the MDXProvider context for rendering
+
+With the react-live editor you can ensure that your MDX components
+in context are rendered in the preview.  In order to do this you
+can use the MDX custom pragma.
+
+To achieve this, import the pragma:
+
+```js
+import {mdx} from '@mdx-js/react'
+```
+
+Then apply a code transformation for the pragma and add it
+to scope:
+
+```js
+<LiveProvider
+  code={children.trim()}
+  transformCode={code => '/** @jsx mdx */' + code}
+  scope={{ mdx }}
+>
+```
+
+### All together
+
+```js
+/* eslint react/jsx-key: 0 */
+
+import React from 'react'
+import Highlight, {defaultProps} from 'prism-react-renderer'
+import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
+import {mdx} from '@mdx-js/react'
+
+export default ({children, className, live, render}) => {
+  const language = className.replace(/language-/, '')
+
+  if (live) {
+    return (
+      <div style={{marginTop: '40px', backgroundColor: 'black'}}>
+        <LiveProvider
+          code={children.trim()}
+          transformCode={code => '/** @jsx mdx */' + code}
+          scope={{ mdx }}
+        >
+          <LivePreview />
+          <LiveEditor />
+          <LiveError />
+        </LiveProvider>
+      </div>
+    )
+  }
+
+  if (render) {
+    return (
+      <div style={{marginTop: '40px'}}>
+        <LiveProvider code={children}>
+          <LivePreview />
+        </LiveProvider>
+      </div>
+    )
+  }
+
+  return (
+    <Highlight {...defaultProps} code={children.trim()} language={language}>
+      {({className, style, tokens, getLineProps, getTokenProps}) => (
+        <pre className={className} style={{...style, padding: '20px'}}>
+          {tokens.map((line, i) => (
+            <div key={i} {...getLineProps({line, key: i})}>
+              {line.map((token, key) => (
+                <span key={key} {...getTokenProps({token, key})} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  )
+}
+```
+
+[See the full example](https://github.com/mdx-js/mdx/tree/master/examples/syntax-highlighting)
+
 [react-live]: https://github.com/FormidableLabs/react-live
diff --git a/examples/gatsby/gatsby-config.js b/examples/gatsby/gatsby-config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
     {
-      resolve: 'gatsby-mdx',
+      resolve: 'gatsby-plugin-mdx',
       options: {
         defaultLayouts: {
           default: require.resolve('./src/components/Layout')

diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -10,7 +10,7 @@
     "@mdx-js/mdx": "^1.2.2",
     "@mdx-js/react": "^1.2.2",
     "gatsby": "^2.13.53",
-    "gatsby-mdx": "^1.0.0",
+    "gatsby-plugin-mdx": "^1.0.23",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "unified-ui": "^0.0.3"

diff --git a/examples/syntax-highlighting/gatsby-config.js b/examples/syntax-highlighting/gatsby-config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: [
     {
-      resolve: 'gatsby-mdx',
+      resolve: 'gatsby-plugin-mdx',
       options: {
         defaultLayouts: {
           default: require.resolve('./src/components/Layout')

diff --git a/examples/syntax-highlighting/package.json b/examples/syntax-highlighting/package.json
@@ -10,7 +10,7 @@
     "@mdx-js/mdx": "^1.2.2",
     "@mdx-js/react": "^1.2.2",
     "gatsby": "^2.13.53",
-    "gatsby-mdx": "^1.0.0",
+    "gatsby-plugin-mdx": "^1.0.23",
     "prism-react-renderer": "^0.1.7",
     "react-live": "^2.1.2",
     "unified-ui": "^0.0.3"

diff --git a/examples/syntax-highlighting/src/components/CodeBlock.js b/examples/syntax-highlighting/src/components/CodeBlock.js
@@ -3,14 +3,19 @@
 import React from 'react'
 import Highlight, {defaultProps} from 'prism-react-renderer'
 import {LiveProvider, LiveEditor, LiveError, LivePreview} from 'react-live'
+import {mdx} from '@mdx-js/react'
 
 export default ({children, className, live, render}) => {
   const language = className.replace(/language-/, '')
 
   if (live) {
     return (
       <div style={{marginTop: '40px', backgroundColor: 'black'}}>
-        <LiveProvider code={children.trim()}>
+        <LiveProvider
+          code={children.trim()}
+          transformCode={code => '/** @jsx mdx */' + code}
+          scope={{mdx}}
+        >
           <LivePreview />
           <LiveEditor />
           <LiveError />

diff --git a/yarn.lock b/yarn.lock
@@ -8421,7 +8421,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz#d71054f7bf207b9a8da227380369e18e6f4e0201"
   integrity sha512-p1NVkn27GUnDA5qHM+Z4cCcLCJIardzZXMon3640sT4xuL/AZJbsx3HEt2KY/5oZu0UXIkytkxzV2Da4rQeUIg==
 
-[email protected]:
+[email protected], gatsby-plugin-mdx@^1.0.23:
   version "1.0.23"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-mdx/-/gatsby-plugin-mdx-1.0.23.tgz#5d90a26a5867ef8fcf4a542e51ff4f7b12407041"
   integrity sha512-bkYmCjHcl/5LIVwZ60mvGzYQ4iPq70XA2ZTrOTEcn4vZL9NOjmpkok/6Dufysipuni9XjJh9yJCC83DJTnAaow==