Improve translation creation form by using codemirror

app/assets/javascripts/application.js

@@ -14,4 +14,11 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require bootstrap-sprockets
+//= require codemirror
+//= require codemirror/addons/display/placeholder
+//= require codemirror/modes/xml
+//= require codemirror/modes/css
+//= require codemirror/modes/javascript
+//= require codemirror/modes/htmlmixed
+//= require translations
 //= require_tree .

app/assets/javascripts/translations.js.coffee

@@ -1,3 +1,20 @@
 # Place all the behaviors and hooks related to the matching controller here.
 # All this logic will automatically be available in application.js.
 # You can use CoffeeScript in this file: http://coffeescript.org/
+
+cm = null
+
+loadCodeMirror = ->
+  $('#translationNav li:first').addClass('active')
+  $("textarea").each ->
+    cm = CodeMirror.fromTextArea($(this).get(0), {
+      lineNumbers: false,
+      lineWrapping: true,
+      mode: "text/html"
+    })
+
+$(document).ready loadCodeMirror
+$(document).on "page:load", loadCodeMirror
+
+$(document).on "click", '#translationNav a[href="#preview"]', ->
+  $('#preview .problem-content').html(cm.getValue())

app/assets/stylesheets/application.css.scss

@@ -12,6 +12,7 @@
  *
  *= require_tree .
  *= require devise_bootstrap_views
+ *= require codemirror
  *= require_self
  */
 

app/assets/stylesheets/translations.css.scss

@@ -1,3 +1,35 @@
 // Place all the styles related to the Translations controller here.
 // They will automatically be included in application.css.scss.
 // You can use Sass (SCSS) here: http://sass-lang.com/
+
+.CodeMirror {
+  /* Bootstrap Settings */
+  box-sizing: border-box;
+  margin: 0;
+  font: inherit;
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background: #fff none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+  /* Code Mirror Settings */
+  font-family: monospace;
+  position: relative;
+  overflow: hidden;
+}
+
+.CodeMirror-focused {
+  /* Bootstrap Settings */
+  border-color: #66afe9;
+  outline: 0;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
+  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+.CodeMirror-empty pre.CodeMirror-placeholder { color: #999; }