Browse Source

99 fix prettier, lint and flow

main
Admir Sabanovic 7 years ago
parent
commit
6bd11c1636
  1. 36
      src/components/CodeEditor/CodeEditor.js

36
src/components/CodeEditor/CodeEditor.js

@ -14,14 +14,13 @@ import Remarkable from 'remarkable';
import {LiveEditor, LiveProvider} from '@gaearon/react-live';
import {colors, media} from 'theme';
import MetaTitle from 'templates/components/MetaTitle';
import {highlight, languages} from 'prismjs/components/prism-core'
import 'prismjs/components/prism-javascript'
import {highlight, languages} from 'prismjs/components/prism-core';
import 'prismjs/components/prism-javascript';
const compile = code =>
Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
const compileJsxToJS = code =>
Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef
const compileJsxToJS = code => Babel.transform(code, {presets: ['react']}).code; // eslint-disable-line no-undef
const prism = code => highlight(code, languages.javascript);
@ -119,13 +118,23 @@ class CodeEditor extends Component {
background: colors.darker,
color: colors.white,
}}>
<MetaTitle onDark={true}>Live JSX Editor
<MetaTitle onDark={true}>
Live JSX Editor
{!showCompiledJsx && (
<a css={{cursor: 'pointer'}} onClick={this._showCompiledJsxPreview.bind(this)}>
View Compiled JSX</a>
<a
role="button"
tabIndex="0"
css={{cursor: 'pointer'}}
onClick={this._showCompiledJsxPreview.bind(this)}>
View Compiled JSX
</a>
)}
{showCompiledJsx && (
<a css={{cursor: 'pointer'}} onClick={this._hideCompiledJsxPreview.bind(this)}>
<a
css={{cursor: 'pointer'}}
role="button"
tabIndex="0"
onClick={this._hideCompiledJsxPreview.bind(this)}>
Back to JSX Editor
</a>
)}
@ -156,12 +165,13 @@ class CodeEditor extends Component {
},
}}
className="gatsby-highlight">
{!showCompiledJsx && (
<LiveEditor onChange={this._onChange} />
)}
{!showCompiledJsx && <LiveEditor onChange={this._onChange} />}
{showCompiledJsx && (
<pre className="prism-code" spellCheck="false" dangerouslySetInnerHTML={{__html: prism(compiledJsx)}}>
</pre>
<pre
className="prism-code"
spellCheck="false"
dangerouslySetInnerHTML={{__html: prism(compiledJsx)}}
/>
)}
</div>
</div>

Loading…
Cancel
Save