diff --git a/components/codeImage.js b/components/codeImage.js
index c4c70d4..aef04e4 100644
--- a/components/codeImage.js
+++ b/components/codeImage.js
@@ -9,16 +9,22 @@ if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
require('../lib/constants')
}
-const margin = '45px 54px'
-const padding = '50px 50px'
+const DEFAULT_SETTINGS = {
+ paddingVertical: '50px',
+ paddingHorizontal: '50px',
+ marginVertical: '45px',
+ marginHorizontal: '45px',
+ background: '#fed0ec',
+ theme: 'dracula',
+ language: 'javascript'
+}
class CodeImage extends React.Component {
constructor (props) {
super(props)
this.state = {
- code: this.props.children,
- config: this.props.config || {}
+ code: this.props.children
}
}
@@ -27,17 +33,30 @@ class CodeImage extends React.Component {
}
render () {
- const options = { lineNumbers: false, mode: 'javascript', theme: 'dracula'}
+ const config = Object.assign(DEFAULT_SETTINGS, this.props.config)
+
+ const options = {
+ lineNumbers: false,
+ mode: config.language,
+ theme: config.theme,
+ scrollBarStyle: null,
+ viewportMargin: Infinity,
+ lineWrapping: true
+ }
+
+ // create styles
+ const containerStyle = {
+ background: config.background,
+ padding: `${config.paddingVertical} ${config.paddingHorizontal}`
+ }
return (
-
+
{ true ?
: null }
-
-
-
+
)
diff --git a/components/dnd.js b/components/dnd.js
new file mode 100644
index 0000000..af2c8b8
--- /dev/null
+++ b/components/dnd.js
@@ -0,0 +1,25 @@
+const drop = (props, monitor, component) => {
+ const bundle = monitor.getItem()
+ const file = bundle.files[0]
+ const reader = new FileReader()
+ reader.onload = function(event) {
+ component.setState({
+ droppedContent: event.target.result
+ })
+ };
+ reader.readAsText(file, "UTF-8");
+}
+
+export default DropTarget(NativeTypes.FILE, { drop }, (connect, monitor) => ({
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ canDrop: monitor.canDrop(),
+ item: monitor.getItem()
+}))(CodeImage)
+
+
+let code = this.props.content
+ const split = code.split(EOL)
+ if (split.length > MAX_LINES) code = [...split.slice(0, MAX_LINES - 1), '', '...'].join(EOL)
+
+ return this.props.connectDropTarget(
\ No newline at end of file
diff --git a/components/meta.js b/components/meta.js
index 8a8948d..feb6509 100644
--- a/components/meta.js
+++ b/components/meta.js
@@ -27,6 +27,13 @@ export default () => (
#toolbar>div:last-child {
margin-right: 0px;
}
+
+ .CodeMirrorContainer .CodeMirror {
+ height: auto;
+ min-width: 680px;
+ padding: 40px 18px 24px;
+ border-radius: 3px;
+ }
`}
)
diff --git a/components/svg/controls.js b/components/svg/controls.js
index 6495e8f..6464e4b 100644
--- a/components/svg/controls.js
+++ b/components/svg/controls.js
@@ -12,8 +12,9 @@ export default () => (
diff --git a/pages/index.js b/pages/index.js
index 922bc23..7ed1226 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -26,8 +26,8 @@ class Index extends React.Component {
super()
this.state = {
bgColor: '#111111',
- theme: THEMES[0],
- language: LANGUAGES[0]
+ theme: THEMES[0].id,
+ language: 'javascript' // TODO LANGUAGES[0]
}
}
@@ -60,7 +60,7 @@ class Index extends React.Component {
save={this.save}
upload={this.upload}
onBGChange={color => this.setState({ bgColor: color })}
- onThemeChange={theme => this.setState({ theme })}
+ onThemeChange={theme => this.setState({ theme: theme.id })}
onLanguageChange={language => this.setState({ language })}
bg={this.state.bgColor}
/>