From d8f2735437b26859741d78ff0a22f572e51c7442 Mon Sep 17 00:00:00 2001 From: briandennis Date: Sat, 16 Sep 2017 11:46:53 -0500 Subject: [PATCH 1/3] fix render bug --- components/Carbon.js | 10 ++++++++-- pages/editor.js | 12 +++++++++--- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/components/Carbon.js b/components/Carbon.js index 5feb023..1508662 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -23,10 +23,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,6 +42,11 @@ 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 @@ -93,7 +99,7 @@ class Carbon extends React.Component { { config.windowControls ? : null } diff --git a/pages/editor.js b/pages/editor.js index 8925812..d90b52b 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -34,11 +34,13 @@ class Editor extends React.Component { windowControls: true, paddingVertical: '48px', paddingHorizontal: '32px', - uploading: false + uploading: false, + code: 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) => { @@ -95,8 +101,8 @@ class Editor extends React.Component { bg={this.state.background} enabled={this.state} /> - - {this.state.droppedContent || this.props.content || DEFAULT_CODE} + + {this.state.droppedContent || this.props.content || this.state.code} From 1380bcddb6b64be20713f79f61b93af25e603cad Mon Sep 17 00:00:00 2001 From: briandennis Date: Sat, 16 Sep 2017 12:04:13 -0500 Subject: [PATCH 2/3] make dragged files, gist work again and be editable --- pages/editor.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/pages/editor.js b/pages/editor.js index d90b52b..746872c 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -24,8 +24,8 @@ class Editor extends React.Component { return {} } - constructor() { - super() + constructor(props) { + super(props) this.state = { background: '#ABB8C3', theme: THEMES[0].id, @@ -35,7 +35,7 @@ class Editor extends React.Component { paddingVertical: '48px', paddingHorizontal: '32px', uploading: false, - code: DEFAULT_CODE + code: props.content || DEFAULT_CODE } this.save = this.save.bind(this) @@ -87,7 +87,7 @@ class Editor extends React.Component { return ( this.setState({ droppedContent })} + onDrop={droppedContent => this.setState({ code: droppedContent })} >
- {this.state.droppedContent || this.props.content || this.state.code} + {this.state.code}
From 3ca3e254b24b81a6c951060651317d59028f9558 Mon Sep 17 00:00:00 2001 From: Mike Fix Date: Sat, 16 Sep 2017 11:27:51 -0700 Subject: [PATCH 3/3] Fix language inconsistancies - Depend on toHash - Move auto out of languages export --- components/Carbon.js | 11 +++++++---- lib/constants.js | 14 +------------- package.json | 3 ++- pages/editor.js | 2 +- yarn.lock | 4 ++++ 5 files changed, 15 insertions(+), 19 deletions(-) diff --git a/components/Carbon.js b/components/Carbon.js index 1508662..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', @@ -50,13 +53,13 @@ class Carbon extends React.Component { 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 }) @@ -68,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, 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 746872c..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 */ 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"