Use mode instead of module

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) {
+      if (languageMode) {
-        this.setState({ language: languageModule.module })
+        this.setState({ language: languageMode.mime ? languageMode.mime : languageMode.mode })
       }
     } else {
       this.setState({ language: props.config.language })

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',
+    mode: 'clike',
-    mime: true
+    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
+  const required = []
-    .filter(language => language.module !== 'auto')
+
-    .forEach((language) => {
+  LANGUAGES.filter(language => language.mode !== 'auto').forEach(language => {
-    if (language.module && !language.mime) {
+    if (language.mode && required.indexOf(language.mode) === -1) {
+      required.push(language.mode)
       !language.custom
-        ? require(`codemirror/mode/${language.module}/${language.module}`)
+        ? require(`codemirror/mode/${language.mode}/${language.mode}`)
-        : require(`./customModes/${language.module}`)
+        : require(`./customModes/${language.mode}`)
     }
   })
 }

pages/editor.js

@@ -111,7 +111,8 @@ class Editor extends React.Component {
             />
             <Dropdown
               list={LANGUAGES}
-              onChange={language => this.setState({ language: language.module })}
+              onChange={language =>
+                this.setState({ language: language.mime ? language.mime : language.mode })}
             />
             <ColorPicker
               onChange={color => this.setState({ background: color })}