Skip to content

Commit c2e272f

Browse files
kittenkitten
committed
Add common "syntax" theme
- Add theme.components.syntax for all Editor components, like the one in ComponentPlayground and CodePane - Removed prism.base.js since those are now inside the syntax styles - Added specificity override to Editor components to allow for external prism CSS theme - Use tertiary font-family in all syntax components
1 parent 68562a9 commit c2e272f

File tree

9 files changed

+92
-108
lines changed

9 files changed

+92
-108
lines changed

‎src/components/__snapshots__/code-pane.test.js.snap‎

Lines changed: 12 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,20 @@ exports[`<CodePane /> should render correctly. 1`] = `
1818
theme="dark"
1919
>
2020
<Styled(div)
21-
className=" language-prism"
21+
className=""
2222
styles={
2323
Array [
24-
undefined,
24+
Object {},
2525
Object {},
2626
undefined,
2727
]
2828
}
2929
>
3030
<div
31-
className=" language-prism css-0"
31+
className="css-0"
3232
>
3333
<Styled(Editor)
34+
className="language-prism"
3435
code="
3536
const myButton = (
3637
<CustomButton
@@ -46,16 +47,11 @@ exports[`<CodePane /> should render correctly. 1`] = `
4647
onClick={[Function]}
4748
onKeyDown={[Function]}
4849
onKeyUp={[Function]}
49-
styles={
50-
Array [
51-
undefined,
52-
"base;",
53-
"dark;",
54-
]
55-
}
50+
prismTheme="dark;"
51+
syntaxStyles={Object {}}
5652
>
5753
<Editor
58-
className="css-sz0c5i"
54+
className="language-prism css-1i53um3"
5955
code="
6056
const myButton = (
6157
<CustomButton
@@ -71,16 +67,11 @@ exports[`<CodePane /> should render correctly. 1`] = `
7167
onClick={[Function]}
7268
onKeyDown={[Function]}
7369
onKeyUp={[Function]}
74-
styles={
75-
Array [
76-
undefined,
77-
"base;",
78-
"dark;",
79-
]
80-
}
70+
prismTheme="dark;"
71+
syntaxStyles={Object {}}
8172
>
8273
<pre
83-
className="prism-code css-sz0c5i"
74+
className="prism-code language-prism css-1i53um3"
8475
contentEditable={false}
8576
dangerouslySetInnerHTML={
8677
Object {
@@ -99,15 +90,10 @@ exports[`<CodePane /> should render correctly. 1`] = `
9990
onClick={undefined}
10091
onKeyDown={undefined}
10192
onKeyUp={undefined}
93+
prismTheme="dark;"
10294
spellCheck="false"
10395
style={undefined}
104-
styles={
105-
Array [
106-
undefined,
107-
"base;",
108-
"dark;",
109-
]
110-
}
96+
syntaxStyles={Object {}}
11197
/>
11298
</Editor>
11399
</Styled(Editor)>

‎src/components/__snapshots__/component-playground.test.js.snap‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -66,10 +66,11 @@ exports[`<ComponentPlayground /> Should render the dark theme correctly 1`] = `
6666
class="css-1fc71w4"
6767
>
6868
<pre
69-
class="prism-code language-prism css-sz0c5i"
69+
class="prism-code language-prism css-1y25kh4"
7070
contenteditable="true"
71+
prismtheme="dark;"
7172
spellcheck="false"
72-
styles="base;,dark;"
73+
syntaxstyles="[object Object]"
7374
>
7475
<span
7576
class="token comment"
@@ -608,10 +609,11 @@ exports[`<ComponentPlayground /> Should render the light theme correctly 1`] = `
608609
class="css-1fc71w4"
609610
>
610611
<pre
611-
class="prism-code language-prism css-92xbs1"
612+
class="prism-code language-prism css-x6ttwb"
612613
contenteditable="true"
614+
prismtheme="light;"
613615
spellcheck="false"
614-
styles="base;,light;"
616+
syntaxstyles="[object Object]"
615617
>
616618
<span
617619
class="token comment"
@@ -1150,10 +1152,11 @@ exports[`<ComponentPlayground /> Should render with a custom background color 1`
11501152
class="css-1fc71w4"
11511153
>
11521154
<pre
1153-
class="prism-code language-prism css-92xbs1"
1155+
class="prism-code language-prism css-x6ttwb"
11541156
contenteditable="true"
1157+
prismtheme="light;"
11551158
spellcheck="false"
1156-
styles="base;,light;"
1159+
syntaxstyles="[object Object]"
11571160
>
11581161
<span
11591162
class="token comment"
@@ -1686,10 +1689,11 @@ exports[`<ComponentPlayground /> Should render with a custom code block 1`] = `
16861689
class="css-1fc71w4"
16871690
>
16881691
<pre
1689-
class="prism-code language-prism css-92xbs1"
1692+
class="prism-code language-prism css-x6ttwb"
16901693
contenteditable="true"
1694+
prismtheme="light;"
16911695
spellcheck="false"
1692-
styles="base;,light;"
1696+
syntaxstyles="[object Object]"
16931697
>
16941698
<span
16951699
class="token keyword"

‎src/components/code-pane.js‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@ import '../utils/prism-import';
77
import { Editor } from 'react-live';
88

99
const StyledWrapper = styled.div(props => props.styles);
10-
const StyledEditor = styled(Editor)(props => props.styles);
10+
const StyledEditor = styled(Editor)`
11+
&& {
12+
${props => props.syntaxStyles}
13+
}
14+
15+
${props => props.prismTheme}
16+
`;
1117

1218
export default class CodePane extends Component {
1319
handleEditorEvent(evt) {
@@ -18,25 +24,23 @@ export default class CodePane extends Component {
1824
const useDarkTheme = this.props.theme === 'dark';
1925

2026
const wrapperStyles = [
21-
this.context.styles.components.codePane.wrapper,
27+
this.context.styles.components.codePane,
2228
getStyles.call(this),
2329
this.props.style
2430
];
2531

2632
return (
2733
<StyledWrapper
28-
className={`${this.props.className} language-prism`}
34+
className={this.props.className}
2935
styles={wrapperStyles}
3036
>
3137
<StyledEditor
38+
className="language-prism"
3239
code={this.props.source}
3340
language={this.props.lang}
3441
contentEditable={this.props.contentEditable}
35-
styles={[
36-
this.context.styles.components.codePane.editor,
37-
this.context.styles.prism.base,
38-
this.context.styles.prism[useDarkTheme ? 'dark' : 'light']
39-
]}
42+
syntaxStyles={this.context.styles.components.syntax}
43+
prismTheme={this.context.styles.prism[useDarkTheme ? 'dark' : 'light']}
4044
onKeyDown={this.handleEditorEvent}
4145
onKeyUp={this.handleEditorEvent}
4246
onClick={this.handleEditorEvent}

‎src/components/code-pane.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import CodePane from './code-pane';
55
describe('<CodePane />', () => {
66
test('should render correctly.', () => {
77
const context = { styles: {
8-
components: { codePane: { pre: {} } },
9-
prism: { base: 'base;', light: 'light;', dark: 'dark;' }
8+
components: { codePane: {}, syntax: {} },
9+
prism: { light: 'light;', dark: 'dark;' }
1010
} };
1111
const source = `
1212
const myButton = (

‎src/components/component-playground.js‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,15 @@ const PlaygroundPreview = styled(({ className }) => (
3535
background: ${p => p.previewBackgroundColor || '#fff'};
3636
`;
3737

38-
const PlaygroundEditor = styled(LiveEditor)(p => p.styles);
38+
const PlaygroundEditor = styled(LiveEditor)`
39+
&& {
40+
${props => props.syntaxStyles}
41+
min-height: 100%;
42+
font-size: 1.25vw;
43+
}
44+
45+
${props => props.prismTheme}
46+
`;
3947

4048
const PlaygroundRow = styled.div`
4149
display: flex;
@@ -177,10 +185,9 @@ class ComponentPlayground extends Component {
177185
<PlaygroundColumn>
178186
<PlaygroundEditor
179187
className="language-prism"
180-
styles={[
181-
this.context.styles.prism.base,
182-
this.context.styles.prism[useDarkTheme ? 'dark' : 'light']
183-
]}
188+
syntaxStyles={this.context.styles.components.syntax}
189+
baseTheme={this.context.styles.prism.base}
190+
prismTheme={this.context.styles.prism[useDarkTheme ? 'dark' : 'light']}
184191
/>
185192
</PlaygroundColumn>
186193
</PlaygroundRow>

‎src/components/component-playground.test.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import ComponentPlayground, { PlaygroundProvider } from './component-playground'
44

55
describe('<ComponentPlayground />', () => {
66
const context = { styles: {
7-
prism: { base: 'base;', light: 'light;', dark: 'dark;' }
7+
components: { syntax: {} },
8+
prism: { light: 'light;', dark: 'dark;' }
89
} };
910

1011
test('Should render the dark theme correctly', () => {

‎src/themes/default/print.js‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/*eslint-disable object-shorthand*/
22

3-
import prismBase from './prism.base';
43
import prismLight from './prism.light';
54
import prismDark from './prism.dark';
65

@@ -78,7 +77,6 @@ const print = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
7877
},
7978
},
8079
prism: {
81-
base: prismBase,
8280
light: prismLight,
8381
dark: prismDark,
8482
},
@@ -183,18 +181,26 @@ const print = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
183181
textAlign: 'center',
184182
},
185183
codePane: {
186-
wrapper: {
187-
maxWidth: 800,
188-
margin: 'auto',
189-
fontSize: '0.8rem',
190-
fontWeight: 'normal',
191-
fontFamily: fonts.tertiary,
192-
},
193-
editor: {
194-
textAlign: 'left',
195-
padding: 20,
196-
fontWeight: 'normal',
197-
}
184+
margin: 'auto',
185+
fontSize: '0.8rem',
186+
fontWeight: 'normal',
187+
minWidth: '100%',
188+
maxWidth: 800,
189+
},
190+
syntax: {
191+
fontFamily: fonts.tertiary,
192+
fontSize: 'inherit',
193+
lineHeight: 1.5,
194+
direction: 'ltr',
195+
textAlign: 'left',
196+
wordSpacing: 'normal',
197+
wordBreak: 'normal',
198+
tabSize: 2,
199+
hyphens: 'none',
200+
whiteSpace: 'pre-wrap',
201+
202+
padding: '0.5rem',
203+
margin: 0,
198204
},
199205
code: {
200206
color: 'black',

‎src/themes/default/prism.base.js‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/themes/default/screen.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
/*eslint-disable object-shorthand*/
22

3-
import prismBase from './prism.base';
43
import prismLight from './prism.light';
54
import prismDark from './prism.dark';
65

@@ -119,7 +118,6 @@ const screen = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
119118
},
120119
},
121120
prism: {
122-
base: prismBase,
123121
light: prismLight,
124122
dark: prismDark,
125123
},
@@ -225,19 +223,26 @@ const screen = (colorArgs = defaultColors, fontArgs = defaultFonts) => {
225223
textAlign: 'center',
226224
},
227225
codePane: {
228-
wrapper: {
229-
margin: 'auto',
230-
fontSize: '0.8rem',
231-
fontWeight: 'normal',
232-
fontFamily: fonts.tertiary,
233-
minWidth: '100%',
234-
maxWidth: 800,
235-
},
236-
editor: {
237-
textAlign: 'left',
238-
padding: 20,
239-
fontWeight: 'normal',
240-
},
226+
margin: 'auto',
227+
fontSize: '0.8rem',
228+
fontWeight: 'normal',
229+
minWidth: '100%',
230+
maxWidth: 800,
231+
},
232+
syntax: {
233+
fontFamily: fonts.tertiary,
234+
fontSize: 'inherit',
235+
lineHeight: 1.5,
236+
direction: 'ltr',
237+
textAlign: 'left',
238+
wordSpacing: 'normal',
239+
wordBreak: 'normal',
240+
tabSize: 2,
241+
hyphens: 'none',
242+
whiteSpace: 'pre-wrap',
243+
244+
padding: '0.5rem',
245+
margin: 0,
241246
},
242247
code: {
243248
color: 'black',

0 commit comments

Comments
 (0)