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

Author: zoobestik

.babelrc

@@ -3,7 +3,7 @@
     [
       "@babel/preset-env",
       {
-        "modules": false,
+        "modules": "commonjs",
         "useBuiltIns": "usage",
         "corejs": 2,
         "exclude": [

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,6 +33,7 @@
     "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",
     "is-empty-object": "^1.1.1",
     "markdown-it": "^8.4.2",

src/executable-code/index.js

@@ -1,4 +1,4 @@
-import 'codemirror';
+import CodeMirror from 'codemirror';
 import 'codemirror/lib/codemirror';
 import 'codemirror/addon/hint/show-hint'
 import 'codemirror/addon/hint/anyword-hint'
@@ -24,6 +24,10 @@ import TargetPlatform from '../target-platform'
 import ExecutableFragment from './executable-fragment';
 import '../styles.scss';
 
+globalThis.CodeMirror = CodeMirror;
+require('codemirror-grammar-mode');
+require('google_modes/dist/kotlin');
+
 const INITED_ATTRIBUTE_NAME = 'data-kotlin-playground-initialized';
 const DEFAULT_INDENT = 4;
 
@@ -51,7 +55,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",