From 9a85871e2817541a80776145ba13c17b8473ed34 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Sat, 7 Jul 2018 10:40:24 -0400 Subject: [PATCH 1/2] Allow scope from ScopeProvider --- docs/markdown.md | 19 +++++++++++++++++ src/LiveEditor.js | 51 +++++++++++++++++++++------------------------- src/scope.js | 27 ++++++++++++++---------- test/components.js | 5 ++++- 4 files changed, 62 insertions(+), 40 deletions(-) diff --git a/docs/markdown.md b/docs/markdown.md index 50048da..6d36506 100644 --- a/docs/markdown.md +++ b/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 + + +``` +```` + +```.mdx +# Hello MDX + + +``` + ### 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 diff --git a/src/LiveEditor.js b/src/LiveEditor.js index 69bf5bc..8d262b7 100644 --- a/src/LiveEditor.js +++ b/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 => `${src}` const transformMdx = src => { @@ -55,30 +54,26 @@ export default ({ scope = {}, render, mdx -}) => { - const fullScope = { MDXTag, components: {}, ...scope } - - return ( - - - {scope => ( - - {typeof render === 'function' ? ( - render({ code, fullScope }) - ) : ( - - - - - - )} - - )} - - - ) -} +}) => ( + + + {scope => ( + + {typeof render === 'function' ? ( + render({ code, scope }) + ) : ( + + + + + + )} + + )} + + +) diff --git a/src/scope.js b/src/scope.js index ce079b1..ca35429 100644 --- a/src/scope.js +++ b/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 diff --git a/test/components.js b/test/components.js index adffd77..370653f 100644 --- a/test/components.js +++ b/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 => { From 637d68d4293d564010ade102667858e0a472c534 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Sat, 7 Jul 2018 10:43:44 -0400 Subject: [PATCH 2/2] Update snapshots --- test/snapshots/components.js.md | 17 +++++++++-------- test/snapshots/components.js.snap | Bin 3181 -> 3260 bytes 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/test/snapshots/components.js.md b/test/snapshots/components.js.md index 71f1a79..01247bd 100644 --- a/test/snapshots/components.js.md +++ b/test/snapshots/components.js.md @@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
Hello
@@ -120,10 +120,10 @@ Generated by [AVA](https://ava.li). className="sc-hEsumM dahmKO" >
,

Snapshot 1
## scope.code renders diff --git a/test/snapshots/components.js.snap b/test/snapshots/components.js.snap index 32ff63a8d75d04f7a252998176ee700c096bd77c..bb21bfa622d0fc1b66905183b2f68c7984867034 100644 GIT binary patch literal 3260 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 Te=xqz!Fm4=kS(&cy(s_y7i