Skip to content

Bundle Prism and use react-live's Editor instead #389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 1, 2017
Merged

Bundle Prism and use react-live's Editor instead #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
afe81a7
Replace prism CDN bundle with package
kitten Oct 31, 2017
518a213
Replace CodePane with react-live Editor based implementation
kitten Oct 31, 2017
94d18b2
Update CodePane and ComponentPlayground snapshots
kitten Oct 31, 2017
9df3d63
Rename utils/prismImport.js to utils/prism-import.js
kitten Oct 31, 2017
1072901
Clarify Prism import names in docs/tag-api.md
kitten Oct 31, 2017
c190c00
Add v4 versioning to spectacle unpkg links in one-page.html
kitten Nov 1, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,11 @@ We can start with this project's sample at [`one-page.html`](./one-page.html). I
<title>Spectacle</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we update the spectacle unpkg link to include a major semver range? Here we'll proactively get ahead of things with our anticipated major bump to 4:

    <link href="https://unpkg.com/spectacle@^4/lib/themes/default/index.css" rel="stylesheet" type="text/css">
...
    <script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
    <script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done :) c190c00

The links will obviously not work until we release v4

</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/prismjs@1/prism.js"></script>
<script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
Expand Down Expand Up @@ -486,8 +483,6 @@ This tag displays a styled, highlighted code preview. I prefer putting my code s
|lang|PropTypes.string| Prism compatible language name. i.e: 'javascript' |
|source| PropTypes.string| String of code to be shown |

You can change your syntax highlighting theme by swapping the prism.js CSS file in `index.html`

<a name="code-base"></a>
#### Code (Base)

Expand Down
2 changes: 1 addition & 1 deletion docs/tag-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ This tag displays a styled, highlighted code preview. I prefer putting my code s
|lang|PropTypes.string| Prism compatible language name. i.e: 'javascript' |
|source| PropTypes.string| String of code to be shown |

You can change your syntax highlighting theme by swapping the prism.js CSS file in `index.html`. Prism.js supports `Markup`, `CSS`, `C-like`and `Javascript` languages out of the box. To add more [supported languages](http://prismjs.com/#languages-list), you have to load the respective language's prism.js plugin in your index.html.
Prism.js supports `Markup`, `CSS`, `C-like`and `Javascript` languages out of the box. To add more [supported languages](http://prismjs.com/#languages-list), you have to import the respective language's prism.js component/plugin from `prismjs/components/prism-LANG`, where `LANG` is the language/component you'd like to add.

<a name="code-base"></a>
### Code (Base)
Expand Down
3 changes: 0 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,9 @@
<title>Spectacle</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/prismjs@1.8.1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/prismjs@1.8.1/prism.js"></script>
<script src="https://unpkg.com/prismjs@1.8.1/components/prism-jsx.min.js"></script>
<script src="./dist/bundle.js"></script>
</body>
</html>
9 changes: 3 additions & 6 deletions one-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,17 @@
<title>Spectacle</title>
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/normalize.css@7/normalize.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/spectacle/lib/themes/default/index.css" rel="stylesheet" type="text/css">
<link href="https://unpkg.com/spectacle@^4/lib/themes/default/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/prismjs@1/prism.js"></script>
<script src="https://unpkg.com/prismjs@1/components/prism-jsx.min.js"></script>
<script src="https://unpkg.com/prop-types@15/prop-types.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script src="https://unpkg.com/spectacle/dist/spectacle.js"></script>
<script src="https://unpkg.com/spectacle/lib/one-page.js"></script>
<script src="https://unpkg.com/spectacle@^4/dist/spectacle.js"></script>
<script src="https://unpkg.com/spectacle@^4/lib/one-page.js"></script>
<script type="text/spectacle">
() => {
// --------------------------------------------------------------------
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,9 @@
"lodash": "^4.17.4",
"marksy": "^0.4.2",
"normalize.css": "^7.0.0",
"prismjs": "^1.6.0",
"react-emotion": "^8.0.8",
"react-live": "^1.7.1",
"react-live": "^1.8.0-1",
"react-redux": "^5.0.5",
"react-transition-group": "^1.1.3",
"react-typography": "^0.16.5",
Expand Down
105 changes: 65 additions & 40 deletions src/components/__snapshots__/code-pane.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

exports[`<CodePane /> should render correctly. 1`] = `
<CodePane
className=""
contentEditable={false}
lang="jsx"
source="
const myButton = (
Expand All @@ -13,57 +15,80 @@ exports[`<CodePane /> should render correctly. 1`] = `
</CustomButton>
);
"
theme="dark"
>
<Styled(pre)
className={undefined}
<Styled(div)
className="react-live react-live-dark "
styles={
Array [
Object {},
undefined,
Object {},
undefined,
]
}
>
<pre
className="css-0"
<div
className="react-live react-live-dark css-0"
>
<Styled(code)
className="language-jsx"
dangerouslySetInnerHTML={
Object {
"__html": "
const myButton = (
&lt;CustomButton
style={{ background: '#f00' }}
onClick={this.action}
&gt;
Click Me
&lt;/CustomButton&gt;
);
",
}
}
<Styled(Editor)
code="
const myButton = (
<CustomButton
style={{ background: '#f00' }}
onClick={this.action}
>
Click Me
</CustomButton>
);
"
contentEditable={false}
language="jsx"
styles={undefined}
>
<code
className="language-jsx css-0"
dangerouslySetInnerHTML={
Object {
"__html": "
const myButton = (
&lt;CustomButton
style={{ background: '#f00' }}
onClick={this.action}
&gt;
Click Me
&lt;/CustomButton&gt;
);
",
<Editor
className="css-0"
code="
const myButton = (
<CustomButton
style={{ background: '#f00' }}
onClick={this.action}
>
Click Me
</CustomButton>
);
"
contentEditable={false}
language="jsx"
styles={undefined}
>
<pre
className="prism-code css-0"
contentEditable={false}
dangerouslySetInnerHTML={
Object {
"__html": "
<span class=\\"token keyword\\">const</span> myButton <span class=\\"token operator\\">=</span> <span class=\\"token punctuation\\">(</span>
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;</span>CustomButton</span>
<span class=\\"token attr-name\\">style</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token punctuation\\">{</span> background<span class=\\"token punctuation\\">:</span> <span class=\\"token string\\">'#f00'</span> <span class=\\"token punctuation\\">}</span><span class=\\"token punctuation\\">}</span></span>
<span class=\\"token attr-name\\">onClick</span><span class=\\"token script language-javascript\\"><span class=\\"token punctuation\\">=</span><span class=\\"token punctuation\\">{</span><span class=\\"token keyword\\">this</span><span class=\\"token punctuation\\">.</span>action<span class=\\"token punctuation\\">}</span></span>
<span class=\\"token punctuation\\">></span></span>
Click Me
<span class=\\"token tag\\"><span class=\\"token tag\\"><span class=\\"token punctuation\\">&lt;/</span>CustomButton</span><span class=\\"token punctuation\\">></span></span>
<span class=\\"token punctuation\\">)</span><span class=\\"token punctuation\\">;</span>
",
}
}
}
/>
</Styled(code)>
</pre>
</Styled(pre)>
language="jsx"
onClick={undefined}
onKeyDown={undefined}
onKeyUp={undefined}
spellCheck="false"
style={undefined}
styles={undefined}
/>
</Editor>
</Styled(Editor)>
</div>
</Styled(div)>
</CodePane>
`;
Loading