From 3139b232584c2b76ffc811c77865bac8539471dc Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 2 Jan 2018 18:29:03 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Improved=20code=20injection=20lo?=
 =?UTF-8?q?ading=20behaviour=20on=20slow=20connections=20(#935)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes https://github.com/TryGhost/Ghost/issues/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                | 29 +++++++++++++++----
 app/styles/components/settings-menu.css       |  4 +++
 app/styles/layouts/settings.css               |  8 +++++
 app/templates/components/gh-cm-editor.hbs     |  4 +++
 .../components/gh-post-settings-menu.hbs      |  2 +-
 5 files changed, 40 insertions(+), 7 deletions(-)
 create mode 100644 app/templates/components/gh-cm-editor.hbs

diff --git a/app/components/gh-cm-editor.js b/app/components/gh-cm-editor.js
index c8154039c5..b8f39a4678 100644
--- a/app/components/gh-cm-editor.js
+++ b/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
diff --git a/app/styles/components/settings-menu.css b/app/styles/components/settings-menu.css
index 5a8cef1081..26b4a06091 100644
--- a/app/styles/components/settings-menu.css
+++ b/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;
 }
diff --git a/app/styles/layouts/settings.css b/app/styles/layouts/settings.css
index 144742b78b..af59a3708d 100644
--- a/app/styles/layouts/settings.css
+++ b/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;
diff --git a/app/templates/components/gh-cm-editor.hbs b/app/templates/components/gh-cm-editor.hbs
new file mode 100644
index 0000000000..3af40aa8fe
--- /dev/null
+++ b/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}}
diff --git a/app/templates/components/gh-post-settings-menu.hbs b/app/templates/components/gh-post-settings-menu.hbs
index 8ad524546a..6bb3d969b3 100644
--- a/app/templates/components/gh-post-settings-menu.hbs
+++ b/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>