diff --git a/components/Carbon.js b/components/Carbon.js index b3672f3..089bf49 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -8,7 +8,8 @@ import toHash from 'tohash' import WindowControls from '../components/WindowControls' import { COLORS, DEFAULT_LANGUAGE, LANGUAGES } from '../lib/constants' -const LANGUAGE_HASH = toHash(LANGUAGES, 'module') +const LANGUAGE_MODE_HASH = toHash(LANGUAGES, 'mode') +const LANGUAGE_NAME_HASH = toHash(LANGUAGES, 'short') const DEFAULT_SETTINGS = { paddingVertical: '50px', @@ -56,10 +57,11 @@ class Carbon extends React.Component { if (props.config.language === 'auto') { // try to set the language const detectedLanguage = hljs.highlightAuto(newCode).language - const languageModule = LANGUAGE_HASH[detectedLanguage] + const languageMode = + LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage] - if (languageModule) { - this.setState({ language: languageModule.module }) + if (languageMode) { + this.setState({ language: languageMode.mime ? languageMode.mime : languageMode.mode }) } } else { this.setState({ language: props.config.language }) diff --git a/lib/constants.js b/lib/constants.js index 2e059ab..5d1c4f3 100644 --- a/lib/constants.js +++ b/lib/constants.js @@ -72,208 +72,209 @@ export const THEMES = toHash(THEMES_ARRAY) export const LANGUAGES = [ { name: 'Auto', - module: 'auto' + mode: 'auto' }, { name: 'Plain Text' }, { name: 'C', - module: 'clike' + mode: 'clike' }, { name: 'Clojure', - module: 'clojure' + mode: 'clojure' }, { name: 'Cobol', - module: 'cobol' + mode: 'cobol' }, { name: 'CoffeeScript', - module: 'coffeescript' + mode: 'coffeescript' }, { name: 'Crystal', - module: 'crystal' + mode: 'crystal' }, { name: 'CSS', - module: 'css' + mode: 'css' }, { name: 'D', - module: 'd' + mode: 'd' }, { name: 'Dart', - module: 'dart' + mode: 'dart' }, { name: 'Django', - module: 'django' + mode: 'django' }, { name: 'Docker', - module: 'dockerfile' + mode: 'dockerfile' }, { name: 'Elm', - module: 'elm' + mode: 'elm' }, { name: 'Erlang', - module: 'erlang' + mode: 'erlang' }, { name: 'Fortran', - module: 'fortran' + mode: 'fortran' }, { name: 'F# / OCaml', - module: 'mllike' + mode: 'mllike' }, { name: 'Go', - module: 'go' + mode: 'go' }, { name: 'Groovy', - module: 'groovy' + mode: 'groovy' }, { name: 'Handlebars', - module: 'handlebars' + mode: 'handlebars' }, { name: 'Haskell', - module: 'haskell' + mode: 'haskell' }, { name: 'Haxe', - module: 'haxe' + mode: 'haxe' }, { name: 'HTML', - module: 'htmlmixed' + mode: 'htmlmixed' }, { name: 'JavaScript', - module: 'javascript' + mode: 'javascript' }, { name: 'JSX', - module: 'jsx' + mode: 'jsx' }, { name: 'Julia', - module: 'julia' + mode: 'julia' }, { name: 'Kotlin', - module: 'text/x-kotlin', - mime: true + mode: 'clike', + mime: 'text/x-kotlin', + short: 'kotlin' }, { name: 'Lisp', - module: 'commonlisp' + mode: 'commonlisp' }, { name: 'Lua', - module: 'lua' + mode: 'lua' }, { name: 'Markdown', - module: 'markdown' + mode: 'markdown' }, { name: 'Mathematica', - module: 'mathematica' + mode: 'mathematica' }, { name: 'NGINX', - module: 'nginx' + mode: 'nginx' }, { name: 'Nim', - module: 'nimrod', + mode: 'nimrod', custom: true }, { name: 'Pascal', - module: 'pascal' + mode: 'pascal' }, { name: 'Perl', - module: 'perl' + mode: 'perl' }, { name: 'PHP', - module: 'php' + mode: 'php' }, { name: 'Python', - module: 'python' + mode: 'python' }, { name: 'R', - module: 'r' + mode: 'r' }, { name: 'Ruby', - module: 'ruby' + mode: 'ruby' }, { name: 'Rust', - module: 'rust' + mode: 'rust' }, { name: 'Sass', - module: 'sass' + mode: 'sass' }, { name: 'Scala', - module: 'clike' + mode: 'clike' }, { name: 'Smalltalk', - module: 'smalltalk' + mode: 'smalltalk' }, { name: 'SQL', - module: 'sql' + mode: 'sql' }, { name: 'Swift', - module: 'swift' + mode: 'swift' }, { name: 'TCL', - module: 'tcl' + mode: 'tcl' }, { name: 'VB.NET', - module: 'vb' + mode: 'vb' }, { name: 'Verilog', - module: 'verilog' + mode: 'verilog' }, { name: 'VHDL', - module: 'vhdl' + mode: 'vhdl' }, { name: 'Vue', - module: 'vue' + mode: 'vue' }, { name: 'XML', - module: 'xml' + mode: 'xml' }, { name: 'YAML', - module: 'yaml' + mode: 'yaml' } ] @@ -299,13 +300,14 @@ const unfold = (f, seed) => { }` if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') { - LANGUAGES - .filter(language => language.module !== 'auto') - .forEach((language) => { - if (language.module && !language.mime) { + const required = [] + + LANGUAGES.filter(language => language.mode !== 'auto').forEach(language => { + if (language.mode && required.indexOf(language.mode) === -1) { + required.push(language.mode) !language.custom - ? require(`codemirror/mode/${language.module}/${language.module}`) - : require(`./customModes/${language.module}`) + ? require(`codemirror/mode/${language.mode}/${language.mode}`) + : require(`./customModes/${language.mode}`) } }) } diff --git a/pages/editor.js b/pages/editor.js index c2a9654..5e123da 100644 --- a/pages/editor.js +++ b/pages/editor.js @@ -111,7 +111,8 @@ class Editor extends React.Component { /> this.setState({ language: language.module })} + onChange={language => + this.setState({ language: language.mime ? language.mime : language.mode })} /> this.setState({ background: color })}