🎨 Improved code injection loading behaviour on slow connections (#935)

closes TryGhost/Ghost#9249
- in `{{gh-cm-editor}}` display a standard textarea in place of the CodeMirror editor whilst CodeMirror assets are loading in the background, textarea will be upgraded to a CodeMirror editor when loading finishes
- update styles so that the switch from plain textarea to CodeMirror is not too jarring

app/components/gh-cm-editor.js

@@ -6,12 +6,14 @@ import {InvokeActionMixin} from 'ember-invoke-action';
 import {assign} from '@ember/polyfills';
 import {bind, once, scheduleOnce} from '@ember/runloop';
 import {inject as service} from '@ember/service';
+import {task} from 'ember-concurrency';
 
 const CmEditorComponent =  Component.extend(InvokeActionMixin, {
     classNameBindings: ['isFocused:focus'],
 
     _value: boundOneWay('value'), // make sure a value exists
     isFocused: false,
+    isInitializingCodemirror: true,
 
     // options for the editor
     lineNumbers: true,
@@ -31,23 +33,38 @@ const CmEditorComponent =  Component.extend(InvokeActionMixin, {
 
     didInsertElement() {
         this._super(...arguments);
+        this.get('initCodeMirror').perform();
+    },
+
+    actions: {
+        updateFromTextarea(value) {
+            this.invokeAction('update', value);
+        }
+    },
 
+    initCodeMirror: task(function* () {
         let loader = this.get('lazyLoader');
 
-        RSVP.all([
+        yield RSVP.all([
             loader.loadStyle('codemirror', 'assets/codemirror/codemirror.css'),
             loader.loadScript('codemirror', 'assets/codemirror/codemirror.js')
-        ]).then(() => {
-            scheduleOnce('afterRender', this, function () {
-                this._initCodeMirror();
-            });
+        ]);
+
+        scheduleOnce('afterRender', this, function () {
+            this._initCodeMirror();
         });
-    },
+    }),
 
     _initCodeMirror() {
         let options = this.getProperties('lineNumbers', 'indentUnit', 'mode', 'theme', 'autofocus');
         assign(options, {value: this.get('_value')});
 
+        let textarea = this.element.querySelector('textarea');
+        if (textarea && textarea === document.activeElement) {
+            options.autofocus = true;
+        }
+
+        this.set('isInitializingCodemirror', false);
         this._editor = new CodeMirror(this.element, options);
 
         // by default CodeMirror will place the cursor at the beginning of the

app/styles/components/settings-menu.css

@@ -143,6 +143,10 @@
     line-height: 1.3em;
 }
 
+.settings-menu-content .gh-cm-editor-textarea {
+    min-height: 170px;
+}
+
 .settings-menu-content .nav-list {
     margin-top: 3rem;
 }

app/styles/layouts/settings.css

@@ -276,6 +276,14 @@
     line-height: 22px;
 }
 
+.settings-code-editor textarea {
+    width: 100%;
+    max-width: none;
+    min-height: 300px;
+    line-height: 22px;
+    border: none;
+}
+
 .settings-code-editor .CodeMirror {
     padding: 0;
     border: none;

app/templates/components/gh-cm-editor.hbs

@@ -0,0 +1,4 @@
+{{!-- display a standard textarea whilst waiting for CodeMirror to load/initialize --}}
+{{#if isInitializingCodemirror}}
+    {{gh-textarea class="gh-cm-editor-textarea" value=_value update=(action 'updateFromTextarea')}}
+{{/if}}

app/templates/components/gh-post-settings-menu.hbs

@@ -369,7 +369,7 @@
                             <div style="width:23px;"></div>
                         </div>
 
-                        <div class="settings-menu-content">
+                        <div class="settings-menu-content settings-menu-content-codeinjection">
                             <form {{action "discardEnter" on="submit"}}>
                                 {{#gh-form-group errors=model.errors hasValidated=model.hasValidated property="codeinjectionHead"}}
                                     <label for="codeinjection-head">Post Header <code>\{{ghost_head}}</code></label>