From dd9ba60d70f14f0696222bda62659d6ade0e4f91 Mon Sep 17 00:00:00 2001 From: briandennis Date: Wed, 13 Sep 2017 08:53:33 -0500 Subject: [PATCH 1/3] set languge when changed from toolbar --- components/Carbon.js | 19 ++++++++++++++++--- lib/constants.js | 6 ++++++ pages/editor.js | 4 ++-- 3 files changed, 24 insertions(+), 5 deletions(-) diff --git a/components/Carbon.js b/components/Carbon.js index d595786..e4eeb38 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -4,7 +4,7 @@ import domtoimage from 'dom-to-image' import CodeMirror from 'react-codemirror' import Spinner from 'react-spinner' import WindowControls from '../components/WindowControls' -import { COLORS } from '../lib/constants' +import { COLORS, DEFAULT_LANGUAGE } from '../lib/constants' const DEFAULT_SETTINGS = { paddingVertical: '50px', @@ -13,7 +13,7 @@ const DEFAULT_SETTINGS = { marginHorizontal: '45px', background: '#fed0ec', theme: 'dracula', - language: 'javascript' + language: DEFAULT_LANGUAGE } class Carbon extends React.Component { @@ -23,6 +23,8 @@ class Carbon extends React.Component { this.state = { loading: true } + + this.detectLanguage = this.detectLanguage.bind(this) } componentDidMount() { @@ -31,12 +33,23 @@ class Carbon extends React.Component { }) } + detectLanguage () { + return 'javascript' + } + render () { const config = Object.assign(DEFAULT_SETTINGS, this.props.config) + let language + if (config.language.name === 'Auto') { + language = this.detectLanguage(this.props.children) + } else { + language = config.language.module || 'plaintext' + } + const options = { lineNumbers: false, - mode: config.language, + mode: language, theme: config.theme, scrollBarStyle: null, viewportMargin: Infinity, diff --git a/lib/constants.js b/lib/constants.js index 4ceee7b..5deebb3 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -55,6 +55,10 @@ export const LANGUAGES = [ { name: 'Plain Text' }, + { + name: 'C', + module: 'clike' + }, { name: 'Clojure', module: 'clojure' @@ -229,6 +233,8 @@ export const LANGUAGES = [ } ] +export const DEFAULT_LANGUAGE = { name: 'Auto' } + export const COLORS = { BLACK: '#121212', PRIMARY: '#F8E81C', diff --git a/pages/editor.js b/pages/editor.js index 5935516..a3f4854 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -9,7 +9,7 @@ import ReadFileDropContainer from '../components/ReadFileDropContainer' import Toolbar from '../components/Toolbar' import Carbon from '../components/Carbon' import api from '../lib/api' -import { THEMES, LANGUAGES, COLORS, DEFAULT_CODE } from '../lib/constants' +import { THEMES, LANGUAGES, DEFAULT_LANGUAGE, COLORS, DEFAULT_CODE } from '../lib/constants' class Editor extends React.Component { /* pathname, asPath, err, req, res */ @@ -30,7 +30,7 @@ class Editor extends React.Component { this.state = { background: '#ABB8C3', theme: THEMES[0].id, - language: 'javascript', // TODO LANGUAGES[0] + language: DEFAULT_LANGUAGE, dropShadow: true, windowControls: true, paddingVertical: '48px', From 535da4296219c7f4410ae398248a7106ff119984 Mon Sep 17 00:00:00 2001 From: briandennis Date: Fri, 15 Sep 2017 14:09:44 -0500 Subject: [PATCH 2/3] add auto detection for languages --- components/Carbon.js | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/components/Carbon.js b/components/Carbon.js index e4eeb38..5feb023 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,10 +1,11 @@ import { EOL } from 'os' +import * as hljs from 'highlight.js' import React from 'react' import domtoimage from 'dom-to-image' import CodeMirror from 'react-codemirror' import Spinner from 'react-spinner' import WindowControls from '../components/WindowControls' -import { COLORS, DEFAULT_LANGUAGE } from '../lib/constants' +import { COLORS, DEFAULT_LANGUAGE, LANGUAGE_HASH } from '../lib/constants' const DEFAULT_SETTINGS = { paddingVertical: '50px', @@ -21,35 +22,47 @@ class Carbon extends React.Component { super(props) this.state = { - loading: true + loading: true, + language: props.config.language } - this.detectLanguage = this.detectLanguage.bind(this) + this.handleLanguageChange = this.handleLanguageChange.bind(this) } componentDidMount() { this.setState({ loading: false }) + + this.handleLanguageChange(this.props.children) } - detectLanguage () { - return 'javascript' + componentWillReceiveProps (newProps) { + this.handleLanguageChange(newProps.children, { customProps: newProps }) } - render () { - const config = Object.assign(DEFAULT_SETTINGS, this.props.config) + handleLanguageChange(newCode, config) { + const props = (config && config.customProps) || this.props + + if (props.config.language.name === 'Auto') { + // try to set the language + const detectedLanguage = hljs.highlightAuto(newCode).language + const languageModule = LANGUAGE_HASH[detectedLanguage] - let language - if (config.language.name === 'Auto') { - language = this.detectLanguage(this.props.children) + if (languageModule) { + this.setState({ language: languageModule }) + } } else { - language = config.language.module || 'plaintext' + this.setState({ language: props.config.language }) } + } + + render () { + const config = Object.assign(DEFAULT_SETTINGS, this.props.config) const options = { lineNumbers: false, - mode: language, + mode: this.state.language ? this.state.language.module : 'plaintext', theme: config.theme, scrollBarStyle: null, viewportMargin: Infinity, @@ -80,6 +93,7 @@ class Carbon extends React.Component { { config.windowControls ? : null } From c4296c7ee7a0ef1d0c545cf52919cc4235f3e65f Mon Sep 17 00:00:00 2001 From: briandennis Date: Sat, 16 Sep 2017 01:05:21 -0500 Subject: [PATCH 3/3] add language hash --- lib/constants.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/lib/constants.js b/lib/constants.js index 5deebb3..9056fbc 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -233,6 +233,8 @@ export const LANGUAGES = [ } ] +export const LANGUAGE_HASH = toHash(LANGUAGES) + export const DEFAULT_LANGUAGE = { name: 'Auto' } export const COLORS = { @@ -261,3 +263,13 @@ 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