Merge pull request #5106 from acburdine/ghost-cm-editor

Added code editor to injection interface: the sequel (this time, with CodeMirror!)

core/client/Brocfile.js

@@ -52,5 +52,12 @@ app.import('bower_components/ember-simple-auth/simple-auth-oauth2.js');
 app.import('bower_components/google-caja/html-css-sanitizer-bundle.js');
 app.import('bower_components/nanoscroller/bin/javascripts/jquery.nanoscroller.js');
 app.import('bower_components/jqueryui-touch-punch/jquery.ui.touch-punch.js');
+app.import('bower_components/codemirror/lib/codemirror.js');
+app.import('bower_components/codemirror/lib/codemirror.css');
+app.import('bower_components/codemirror/theme/xq-light.css');
+app.import('bower_components/codemirror/mode/htmlmixed/htmlmixed.js');
+app.import('bower_components/codemirror/mode/xml/xml.js');
+app.import('bower_components/codemirror/mode/css/css.js');
+app.import('bower_components/codemirror/mode/javascript/javascript.js');
 
 module.exports = app.toTree();

core/client/app/components/gh-cm-editor.js

@@ -0,0 +1,48 @@
+/* global CodeMirror */
+import Ember from 'ember';
+
+var CodeMirrorEditor = Ember.Component.extend({
+
+    // DOM stuff
+    classNameBindings: ['isFocused:focused'],
+    isFocused: false,
+
+    value: '', // make sure a value exists
+    editor: null, // reference to CodeMirror editor
+
+    // options for the editor
+    lineNumbers: true,
+    indentUnit: 4,
+    mode: 'htmlmixed',
+    theme: 'xq-light',
+
+    didInsertElement: function () {
+        var options = this.getProperties('lineNumbers', 'indentUnit', 'mode', 'theme'),
+            self = this,
+            editor;
+        editor = new CodeMirror(this.get('element'), options);
+        editor.getDoc().setValue(this.get('value'));
+
+        // events
+        editor.on('focus', function () {
+            self.set('isFocused', true);
+        });
+        editor.on('blur', function () {
+            self.set('isFocused', false);
+        });
+        editor.on('change', function () {
+            self.set('value', editor.getDoc().getValue());
+        });
+
+        this.set('editor', editor);
+    },
+
+    willDestroyElement: function () {
+        var editor = this.get('editor').getWrapperElement();
+        editor.parentNode.removeChild(editor);
+        this.set('editor', null);
+    }
+
+});
+
+export default CodeMirrorEditor;

core/client/app/styles/layouts/settings.scss

@@ -10,6 +10,7 @@
 // * Headers
 // * Custom Permalinks
 // * Navigation
+// * Code Injection
 // ------------------------------------------------------------
 
 
@@ -510,4 +511,27 @@
             background: darken($green, 10%);
         }
     }
+}
+
+//
+// Code Injection
+// --------------------------------------------------
+
+.settings-code-editor {
+    width: 100%;
+    min-width: 250px;
+    max-width: 680px;
+    height: auto;
+    border: 1px solid #E0DFD7;
+    border-radius: $border-radius;
+    -webkit-appearance: none;
+    min-height: 300px;
+    transition: border-color 0.15s linear;
+    line-height: 22px;
+
+    &.focused {
+        border-color: $brown;
+        outline: 0;
+    }
+
 }

core/client/app/templates/settings/code-injection.hbs

@@ -18,13 +18,13 @@
             <div class="form-group">
                 <label for="ghost-head">Blog Header</label>
                 <p>Code here will be injected to the \{{ghost_head}} helper at the top of your page</p>
-                {{textarea id="ghost-head" name="codeInjection[ghost_head]" type="text" value=model.ghost_head}}
+                {{gh-cm-editor id="ghost-head" name="codeInjection[ghost_head]" class="settings-code-editor" type="text" value=model.ghost_head}}
             </div>
 
             <div class="form-group">
                 <label for="ghost-foot">Blog Footer</label>
                 <p>Code here will be injected to the \{{ghost_foot}} helper at the bottom of your page</p>
-                {{textarea id="ghost-foot" name="codeInjection[ghost_foot]" type="text" value=model.ghost_foot}}
+                {{gh-cm-editor id="ghost-foot" name="codeInjection[ghost_foot]" class="settings-code-editor" type="text" value=model.ghost_foot}}
             </div>
         </fieldset>
     </form>

core/client/bower.json

@@ -24,7 +24,8 @@
     "nprogress": "0.1.2",
     "rangyinputs": "1.2.0",
     "showdown-ghost": "0.3.6",
-    "validator-js": "3.28.0"
+    "validator-js": "3.28.0",
+    "codemirror": "~5.1.0"
   },
   "devDependencies": {
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",