diff --git a/README.md b/README.md new file mode 100644 index 0000000..e50a87e --- /dev/null +++ b/README.md @@ -0,0 +1,6 @@ +# Code + +### Usage +- Drag a file onto the editor +- Append a GitHub Gist id to the url +- Paste your code directly! diff --git a/components/CodeImage.js b/components/CodeImage.js index 6fb8dcc..13359c1 100644 --- a/components/CodeImage.js +++ b/components/CodeImage.js @@ -3,6 +3,7 @@ import React from 'react' import domtoimage from 'dom-to-image' import CodeMirror from 'react-codemirror' import WindowControls from '../components/svg/Controls' +import Spinner from 'react-spinner' // hack to only call modes on browser if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { @@ -19,41 +20,76 @@ const DEFAULT_SETTINGS = { language: 'javascript' } -const CodeImage = (props) => { - const config = Object.assign(DEFAULT_SETTINGS, props.config) + class CodeImage extends React.Component { - const options = { - lineNumbers: false, - mode: config.language, - theme: config.theme, - scrollBarStyle: null, - viewportMargin: Infinity, - lineWrapping: true + constructor (props) { + super(props) + + this.state = { + loading: true + } } - // create styles - const containerStyle = { - background: config.background, - padding: `${config.paddingVertical} ${config.paddingHorizontal}`, - paddingTop: `calc(${config.paddingVertical} - 19px)` // TODO fix hack: accomodates for space taken up by window controls + componentDidMount() { + this.setState({ + loading: false + }) } - return ( -