Support syntax highlighting

Also maps the API preferences to proper codemirror properties... See
https://github.com/GerritCodeReview/gerrit/blob/6c1a52b8698d1ad392c590e7b515f2b5668e73f4/gerrit-gwtui/src/main/java/com/google/gerrit/client/editor/EditScreen.java#L555

Change-Id: Icc222cde89eff7a0992fbcaaf8e7bac560347c18

gr-editor/gr-editor.html

diff --git a/gr-editor/gr-editor.html b/gr-editor/gr-editor.html
index 739fa5b..68b6d3f 100644
--- a/gr-editor/gr-editor.html
+++ b/gr-editor/gr-editor.html
@@ -14,7 +14,7 @@
 limitations under the License.
 -->
 
-<link rel="import" href="./gr-editor-styles.html">
+<link rel="import" href="gr-editor-styles.html">
 
 <dom-module id="gr-editor">
   <template>
@@ -30,21 +30,21 @@
     <div id="wrapper"></div>
   </template>
   <script src="../bower_components/codemirror-minified/lib/codemirror.js"></script>
-  <script src="../bower_components/codemirror-minified/mode/python/python.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/ruby/ruby.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/php/php.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/sql/sql.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/meta.js"></script>
   <script src="../bower_components/codemirror-minified/mode/clike/clike.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/xml/xml.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/javascript/javascript.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/css/css.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/htmlmixed/htmlmixed.js" ></script>
-  <script src="../bower_components/codemirror-minified/mode/markdown/markdown.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/clojure/clojure.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/css/css.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/dart/dart.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/haskell/haskell.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/htmlmixed/htmlmixed.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/javascript/javascript.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/markdown/markdown.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/php/php.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/python/python.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/ruby/ruby.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/sass/sass.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/shell/shell.js" ></script>
+  <script src="../bower_components/codemirror-minified/mode/sql/sql.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/xml/xml.js" ></script>
   <script src="../bower_components/codemirror-minified/mode/yaml/yaml.js" ></script>
   <script src="../bower_components/codemirror-minified/addon/fold/foldcode.js" ></script>
@@ -52,5 +52,5 @@
   <script src="../bower_components/codemirror-minified/addon/fold/brace-fold.js" ></script>
   <script src="../bower_components/codemirror-minified/addon/fold/xml-fold.js" ></script>
   <script src="../bower_components/codemirror-minified/addon/fold/markdown-fold.js" ></script>
-  <script src="./gr-editor.js"></script>
+  <script src="gr-editor.js"></script>
 </dom-module>

gr-editor/gr-editor.js

diff --git a/gr-editor/gr-editor.js b/gr-editor/gr-editor.js
index cf76865..58826c5 100644
--- a/gr-editor/gr-editor.js
+++ b/gr-editor/gr-editor.js
@@ -14,6 +14,12 @@
 (function() {
   'use strict';
 
+  // we need to be on codemirror 5.33.0+ to get the support for
+  // text/x-php in CodeMirror.findModeByMIME
+  const LANGUAGE_MAP = {
+    'text/x-php': 'php',
+  };
+
   Polymer({
     is: 'gr-editor',
     /**
@@ -24,15 +30,16 @@
 
     properties: {
       fileContent: String,
+      fileType: String,
       mirror: Object,
       prefs: Object,
     },
 
     attached() {
       this.scopeSubtree(this.$.wrapper, true);
-      this.mirror = CodeMirror(this.$.wrapper, Object.assign({} , {
-        value: this.fileContent,
-      }, this.prefs));
+      const params =
+          this.getCodeMirrorParams(this.fileType, this.fileContent, this.prefs);
+      this.mirror = CodeMirror(this.$.wrapper, params);
       this.async(() => { this.mirror.refresh(); }, 1);
       this.addEventListeners();
     },
@@ -43,5 +50,46 @@
             {detail: {value: e.getValue()}, bubbles: true}));
       });
     },
+
+    getCodeMirrorParams(type, value, prefs) {
+      const params = {value};
+
+      if (prefs) {
+        // TODO: Add gerrit's customizations from java codemirror to javascript
+        // gerrit-gwtui/src/main/java/net/codemirror/lib/Extras.java
+        params.autoCloseBrackets = prefs.auto_close_brackets;
+        params.cursorBlinkRate = prefs.cursor_blink_rate;
+        params.cursorHeight = 0.85;
+        params.hideTopMenu = prefs.hide_top_menu;
+        params.indentUnit = prefs.indent_unit;
+        params.indentWithTabs = prefs.indent_with_tabs;
+        params.keyMap = prefs.key_map_type.toLowerCase();
+        params.lineLength = prefs.line_length;
+        params.lineNumbers = prefs.hide_line_numbers;
+        params.lineWrapping = prefs.line_wrapping;
+        params.indentWithTabs = prefs.indent_with_tabs;
+        params.matchBrackets = prefs.match_brackets;
+        // TODO: Add support for a new commit msg MIME type
+        // Support for this is somewhere in gerrit's codebase
+        // needs backporting to javascript
+        params.mode = prefs.syntax_highlighting ? this._mapFileType(type) : '';
+        params.origLeft = value;
+        params.showTabs = prefs.show_tabs;
+        params.showTrailingSpace = prefs.show_whitespace_errors;
+        params.styleSelectedText = true;
+        params.tabSize = prefs.tab_size;
+        params.theme = prefs.theme.toLowerCase();
+
+        if (value && value.includes('\r\n')) {
+          params.lineSeparator = '\r\n';
+        }
+      }
+
+      return params;
+    },
+
+    _mapFileType(type) {
+      return LANGUAGE_MAP[type] || type || '';
+    },
   });
-})();
\ No newline at end of file
+})();