diff --git a/components/Carbon.js b/components/Carbon.js index 5feb023..17f356b 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -4,8 +4,11 @@ import React from 'react' import domtoimage from 'dom-to-image' import CodeMirror from 'react-codemirror' import Spinner from 'react-spinner' +import toHash from 'tohash' import WindowControls from '../components/WindowControls' -import { COLORS, DEFAULT_LANGUAGE, LANGUAGE_HASH } from '../lib/constants' +import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants' + +const LANGUAGE_HASH = toHash(LANGUAGES, 'module') const DEFAULT_SETTINGS = { paddingVertical: '50px', @@ -23,10 +26,11 @@ class Carbon extends React.Component { this.state = { loading: true, - language: props.config.language + language: props.config.language, } this.handleLanguageChange = this.handleLanguageChange.bind(this) + this.codeUpdated = this.codeUpdated.bind(this) } componentDidMount() { @@ -41,16 +45,21 @@ class Carbon extends React.Component { this.handleLanguageChange(newProps.children, { customProps: newProps }) } + codeUpdated (newCode) { + this.handleLanguageChange(newCode) + this.props.updateCode(newCode) + } + handleLanguageChange(newCode, config) { const props = (config && config.customProps) || this.props - if (props.config.language.name === 'Auto') { + if (props.config.language === 'auto') { // try to set the language const detectedLanguage = hljs.highlightAuto(newCode).language const languageModule = LANGUAGE_HASH[detectedLanguage] if (languageModule) { - this.setState({ language: languageModule }) + this.setState({ language: languageModule.module }) } } else { this.setState({ language: props.config.language }) @@ -62,7 +71,7 @@ class Carbon extends React.Component { const options = { lineNumbers: false, - mode: this.state.language ? this.state.language.module : 'plaintext', + mode: this.state.language || 'plaintext', theme: config.theme, scrollBarStyle: null, viewportMargin: Infinity, @@ -93,7 +102,7 @@ class Carbon extends React.Component { { config.windowControls ? : null } diff --git a/lib/constants.js b/lib/constants.js index 9056fbc..5ddf2bc 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -233,9 +233,7 @@ export const LANGUAGES = [ } ] -export const LANGUAGE_HASH = toHash(LANGUAGES) - -export const DEFAULT_LANGUAGE = { name: 'Auto' } +export const DEFAULT_LANGUAGE = 'auto' export const COLORS = { BLACK: '#121212', @@ -263,13 +261,3 @@ if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { } }) } - -function toHash (list) { - return list.reduce((accum, item) => { - if (item.module) { - accum[item.module] = item - } - - return accum - }, {}) -} \ No newline at end of file diff --git a/package.json b/package.json index f7ea640..b0fc64f 100644 --- a/package.json +++ b/package.json @@ -28,12 +28,13 @@ "react-spinkit": "^3.0.0", "react-spinner": "^0.2.7", "react-syntax-highlight": "^0.0.6", + "tohash": "^1.0.0", "twitter": "^1.7.1" }, "now": { "env": { "TWITTER_CONSUMER_KEY": "@twitter-consumer-key", - "TWITTER_CONSUMER_SECRET":"@twitter-consumer-secret", + "TWITTER_CONSUMER_SECRET": "@twitter-consumer-secret", "TWITTER_ACCESS_TOKEN_KEY": "@twitter-access-token-key", "TWITTER_ACCESS_TOKEN_SECRET": "@twitter-access-token-secret" } diff --git a/pages/editor.js b/pages/editor.js index 8925812..4d2d0af 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -8,7 +8,7 @@ import ReadFileDropContainer from '../components/ReadFileDropContainer' import Toolbar from '../components/Toolbar' import Carbon from '../components/Carbon' import api from '../lib/api' -import { THEMES, LANGUAGES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants' +import { THEMES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants' class Editor extends React.Component { /* pathname, asPath, err, req, res */ @@ -24,8 +24,8 @@ class Editor extends React.Component { return {} } - constructor() { - super() + constructor(props) { + super(props) this.state = { background: '#ABB8C3', theme: THEMES[0].id, @@ -34,11 +34,13 @@ class Editor extends React.Component { windowControls: true, paddingVertical: '48px', paddingHorizontal: '32px', - uploading: false + uploading: false, + code: props.content || DEFAULT_CODE } this.save = this.save.bind(this) this.upload = this.upload.bind(this) + this.updateCode = this.updateCode.bind(this) } getCarbonImage () { @@ -56,6 +58,10 @@ class Editor extends React.Component { return domtoimage.toPng(node, config) } + updateCode (code) { + this.setState({ code }) + } + save () { this.getCarbonImage() .then((dataUrl) => { @@ -81,7 +87,7 @@ class Editor extends React.Component { return ( this.setState({ droppedContent })} + onDrop={droppedContent => this.setState({ code: droppedContent })} >
- - {this.state.droppedContent || this.props.content || DEFAULT_CODE} + + {this.state.code}
diff --git a/yarn.lock b/yarn.lock index cb0beb6..9984772 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3526,6 +3526,10 @@ to-fast-properties@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" +tohash@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/tohash/-/tohash-1.0.0.tgz#cd740231ca16821e3744f2f18ff9727382eeb091" + touch@3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b"