feat(editor): use google-modes for syntax highlight

Author: zoobestik

package.json

@@ -23,6 +23,7 @@
     "babel-plugin-async-to-promises": "^1.0.5",
     "ci-publish": "^1.3.1",
     "codemirror": "^5.48.4",
+    "codemirror-grammar-mode": "^0.1.9",
     "css-loader": "2.1.1",
     "debounce": "^1.2.0",
     "deepmerge": "^1.5.0",
@@ -32,7 +33,9 @@
     "fast-async": "7",
     "flatten": "^1.0.2",
     "github-markdown-css": "^3.0.1",
+    "google_modes": "git+https://github.com/codemirror/google-modes.git",
     "html-webpack-plugin": "^3.2.0",
+    "imports-loader": "^0.8.0",
     "is-empty-object": "^1.1.1",
     "markdown-it": "^8.4.2",
     "markdown-it-highlightjs": "^3.0.0",

src/executable-code/index.js

@@ -15,6 +15,7 @@ import 'codemirror/addon/comment/continuecomment'
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/shell/shell';
 import 'codemirror/mode/swift/swift';
+import 'google_modes/dist/kotlin';
 import merge from 'deepmerge';
 import Set from 'es6-set/polyfill';
 import defaultConfig, {API_URLS} from '../config';
@@ -51,7 +52,7 @@ const ATTRIBUTES = {
 
 const MODES = {
   JAVA: "text/x-java",
-  KOTLIN: "text/x-kotlin",
+  KOTLIN: "google-kotlin",
   JS: "text/javascript",
   GROOVY: "text/x-groovy",
   XML: "text/html",

webpack.config.js

@@ -38,6 +38,10 @@ module.exports = (params = {}) => {
           include: path.resolve(__dirname, 'src'),
           loader: 'babel-loader'
         },
+        {
+          test: require.resolve("codemirror-grammar-mode"),
+          use: "imports-loader?CodeMirror=codemirror"
+        },
         {
           test: /\.monk$/,
           loader: 'monkberry-loader'