mirror of
https://github.com/c8r/x0.git
synced 2024-08-17 01:10:32 +03:00
Merge pull request #82 from c8r/fix-scope
Allow scope from ScopeProvider
This commit is contained in:
commit
c51935e3b3
@ -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,
|
**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).
|
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
|
### 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
|
[rr-link]: https://reacttraining.com/react-router/web/api/Link
|
||||||
[site]: https://compositor.io/x0/markdown
|
[site]: https://compositor.io/x0/markdown
|
||||||
[fm]: https://github.com/jonschlinkert/gray-matter
|
[fm]: https://github.com/jonschlinkert/gray-matter
|
||||||
|
[MDX]: https://github.com/mdx-js/mdx
|
||||||
|
@ -10,7 +10,6 @@ import { Box } from 'rebass'
|
|||||||
import { color, borderColor } from 'styled-system'
|
import { color, borderColor } from 'styled-system'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
import mdx from '@mdx-js/mdx'
|
import mdx from '@mdx-js/mdx'
|
||||||
import { MDXTag } from '@mdx-js/tag'
|
|
||||||
|
|
||||||
const transformCode = src => `<React.Fragment>${src}</React.Fragment>`
|
const transformCode = src => `<React.Fragment>${src}</React.Fragment>`
|
||||||
const transformMdx = src => {
|
const transformMdx = src => {
|
||||||
@ -55,30 +54,26 @@ export default ({
|
|||||||
scope = {},
|
scope = {},
|
||||||
render,
|
render,
|
||||||
mdx
|
mdx
|
||||||
}) => {
|
}) => (
|
||||||
const fullScope = { MDXTag, components: {}, ...scope }
|
<Box mb={4}>
|
||||||
|
<ScopeConsumer defaultScope={scope}>
|
||||||
return (
|
{scope => (
|
||||||
<Box mb={4}>
|
<LiveProvider
|
||||||
<ScopeConsumer defaultScope={fullScope}>
|
code={code}
|
||||||
{scope => (
|
scope={scope}
|
||||||
<LiveProvider
|
mountStylesheet={false}
|
||||||
code={code}
|
transformCode={mdx ? transformMdx : transformCode}>
|
||||||
scope={fullScope}
|
{typeof render === 'function' ? (
|
||||||
mountStylesheet={false}
|
render({ code, scope })
|
||||||
transformCode={mdx ? transformMdx : transformCode}>
|
) : (
|
||||||
{typeof render === 'function' ? (
|
<React.Fragment>
|
||||||
render({ code, fullScope })
|
<Preview />
|
||||||
) : (
|
<Editor />
|
||||||
<React.Fragment>
|
<Err />
|
||||||
<Preview />
|
</React.Fragment>
|
||||||
<Editor />
|
)}
|
||||||
<Err />
|
</LiveProvider>
|
||||||
</React.Fragment>
|
)}
|
||||||
)}
|
</ScopeConsumer>
|
||||||
</LiveProvider>
|
</Box>
|
||||||
)}
|
)
|
||||||
</ScopeConsumer>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
27
src/scope.js
27
src/scope.js
@ -2,6 +2,7 @@ import React from 'react'
|
|||||||
import { withRouter, Link } from 'react-router-dom'
|
import { withRouter, Link } from 'react-router-dom'
|
||||||
import rebassMarkdown from '@rebass/markdown'
|
import rebassMarkdown from '@rebass/markdown'
|
||||||
import { Pre } from 'rebass'
|
import { Pre } from 'rebass'
|
||||||
|
import { MDXTag } from '@mdx-js/tag'
|
||||||
|
|
||||||
import LiveEditor from './LiveEditor'
|
import LiveEditor from './LiveEditor'
|
||||||
import LivePreview from './LivePreview'
|
import LivePreview from './LivePreview'
|
||||||
@ -67,16 +68,20 @@ export const code = ({
|
|||||||
|
|
||||||
const pre = props => props.children
|
const pre = props => props.children
|
||||||
|
|
||||||
const scope = rebassMarkdown({
|
const scope = {
|
||||||
a: {
|
MDXTag,
|
||||||
is: link
|
components: {}, // does mdx need this?
|
||||||
},
|
...rebassMarkdown({
|
||||||
code: {
|
a: {
|
||||||
is: code
|
is: link
|
||||||
},
|
},
|
||||||
pre: {
|
code: {
|
||||||
is: pre,
|
is: code
|
||||||
}
|
},
|
||||||
})
|
pre: {
|
||||||
|
is: pre,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export default scope
|
export default scope
|
||||||
|
@ -222,8 +222,11 @@ test('SidebarLayout renders', t => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
const blacklist = {
|
const blacklist = {
|
||||||
pre: true
|
pre: true,
|
||||||
|
MDXTag: true,
|
||||||
|
components: true
|
||||||
}
|
}
|
||||||
|
|
||||||
Object.keys(scope)
|
Object.keys(scope)
|
||||||
.filter(key => !blacklist[key])
|
.filter(key => !blacklist[key])
|
||||||
.forEach(key => {
|
.forEach(key => {
|
||||||
|
@ -37,7 +37,7 @@ Generated by [AVA](https://ava.li).
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
active={true}
|
active={true}
|
||||||
className="sc-jAaTju esAkYv sc-bdVaJa iHZvIS"
|
className="sc-jAaTju esAkYv sc-bdVaJa jTkvro sc-bdVaJa iHZvIS"
|
||||||
>
|
>
|
||||||
Hello
|
Hello
|
||||||
</div>
|
</div>
|
||||||
@ -120,10 +120,10 @@ Generated by [AVA](https://ava.li).
|
|||||||
className="sc-hEsumM dahmKO"
|
className="sc-hEsumM dahmKO"
|
||||||
>
|
>
|
||||||
<div
|
<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
|
<button
|
||||||
className="sc-gzVnrw ghjHJc sc-ifAKCX fFPXoq"
|
className="sc-gzVnrw ghjHJc sc-ifAKCX cwpXPb sc-ifAKCX fFPXoq"
|
||||||
onClick={Function onClick {}}
|
onClick={Function onClick {}}
|
||||||
title="Toggle Menu"
|
title="Toggle Menu"
|
||||||
>
|
>
|
||||||
@ -152,7 +152,7 @@ Generated by [AVA](https://ava.li).
|
|||||||
/>
|
/>
|
||||||
</div>,
|
</div>,
|
||||||
<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
|
<div
|
||||||
className="sc-fYxtnH VTytv"
|
className="sc-fYxtnH VTytv"
|
||||||
@ -160,7 +160,7 @@ Generated by [AVA](https://ava.li).
|
|||||||
open={false}
|
open={false}
|
||||||
>
|
>
|
||||||
<div
|
<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
|
<h2
|
||||||
className="sc-VigVT gPiNJC"
|
className="sc-VigVT gPiNJC"
|
||||||
@ -210,7 +210,7 @@ Generated by [AVA](https://ava.li).
|
|||||||
tabIndex={undefined}
|
tabIndex={undefined}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-jAaTju jHRdEk sc-bdVaJa iHZvIS"
|
className="sc-jAaTju jHRdEk sc-bdVaJa bAyxfd sc-bdVaJa iHZvIS"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-ktHwxA dvWgCn sc-bdVaJa iHZvIS"
|
className="sc-ktHwxA dvWgCn sc-bdVaJa iHZvIS"
|
||||||
@ -218,7 +218,7 @@ Generated by [AVA](https://ava.li).
|
|||||||
Content
|
Content
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="sc-bwzfXH liBCIH sc-bdVaJa gkOtLU"
|
className="sc-bwzfXH liBCIH sc-bdVaJa gkOtLU sc-bdVaJa gkOtLU"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="sc-bdVaJa LbkC"
|
className="sc-bdVaJa LbkC"
|
||||||
@ -271,7 +271,8 @@ Generated by [AVA](https://ava.li).
|
|||||||
> Snapshot 1
|
> Snapshot 1
|
||||||
|
|
||||||
<blockquote
|
<blockquote
|
||||||
className="sc-chPdSV gReYnD sc-gqjmRU cbBDfA"
|
className="sc-chPdSV gReYnD sc-gqjmRU NYUxz"
|
||||||
|
fontWeight="bold"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
## scope.code renders
|
## scope.code renders
|
||||||
|
Binary file not shown.
Loading…
Reference in New Issue
Block a user