Fix editor image perf and upload bug

no issue
- ~10x speedup in processing time taken on each keypress when there are many images/image upload components in the editor
  - edit DOM in memory before changing it in the page to avoid double-render
  - keep upload components around and re-assign them on re-render, adding or removing an image will still re-generate everything
- adds a throttle to the preview rendering so that renders don't get queued up
- fixes occasional bug where uploading an image didn't update the markdown correctly due to a timing issue

ghost/admin/app/components/gh-ed-preview.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
+import {formatMarkdown} from 'ghost/helpers/gh-format-markdown';
 
 const {
-    $,
     Component,
     run,
     uuid
@@ -10,16 +10,18 @@ const {
 export default Component.extend({
     _scrollWrapper: null,
 
+    previewHTML: '',
+
     init() {
         this._super(...arguments);
         this.set('imageUploadComponents', Ember.A([]));
+        this.buildPreviewHTML();
     },
 
     didInsertElement() {
         this._super(...arguments);
         this._scrollWrapper = this.$().closest('.entry-preview-content');
         this.adjustScrollPosition(this.get('scrollPosition'));
-        run.scheduleOnce('afterRender', this, this.registerImageUploadComponents);
     },
 
     didReceiveAttrs(attrs) {
@@ -34,14 +36,7 @@ export default Component.extend({
         }
 
         if (attrs.newAttrs.markdown.value !== attrs.oldAttrs.markdown.value) {
-            // we need to clear the rendered components as we are unable to
-            // retain a reliable reference for the component's position in the
-            // document
-            // TODO: it may be possible to extract the dropzones and use the
-            // image src as a key, re-connecting any that match and
-            // dropping/re-rendering any unknown/no-source instances
-            this.set('imageUploadComponents', Ember.A([]));
-            run.scheduleOnce('afterRender', this, this.registerImageUploadComponents);
+            run.throttle(this, this.buildPreviewHTML, 30, false);
         }
     },
 
@@ -53,14 +48,36 @@ export default Component.extend({
         }
     },
 
-    registerImageUploadComponents() {
-        let dropzones = $('.js-drop-zone');
+    buildPreviewHTML() {
+        let markdown = this.get('markdown');
+        let html = formatMarkdown([markdown]).string;
+        let template = document.createElement('template');
+        template.innerHTML = html;
+        let fragment = template.content;
+        let dropzones = fragment.querySelectorAll('.js-drop-zone');
+        let components = this.get('imageUploadComponents');
 
-        dropzones.each((i, el) => {
+        if (dropzones.length !== components.length) {
+            components = Ember.A([]);
+            this.set('imageUploadComponents', components);
+        }
+
+        [...dropzones].forEach((oldEl, i) => {
+            let el = oldEl.cloneNode(true);
+            let component = components[i];
+            let uploadTarget = el.querySelector('.js-upload-target');
             let id = uuid();
             let destinationElementId = `image-uploader-${id}`;
-            let src = $(el).find('.js-upload-target').attr('src');
+            let src;
 
+            if (uploadTarget) {
+                src = uploadTarget.getAttribute('src');
+            }
+
+            if (component) {
+                component.set('destinationElementId', destinationElementId);
+                component.set('src', src);
+            } else {
                 let imageUpload = Ember.Object.create({
                     destinationElementId,
                     id,
@@ -68,14 +85,17 @@ export default Component.extend({
                     index: i
                 });
 
-            el.id = destinationElementId;
-            $(el).empty();
-            $(el).removeClass('image-uploader');
-
-            run.schedule('afterRender', () => {
                 this.get('imageUploadComponents').pushObject(imageUpload);
+            }
+
+            el.id = destinationElementId;
+            el.innerHTML = '';
+            el.classList.remove('image-uploader');
+
+            fragment.replaceChild(el, oldEl);
         });
-        });
+
+        this.set('previewHTML', fragment);
     },
 
     actions: {

ghost/admin/app/helpers/gh-format-markdown.js

@@ -6,7 +6,7 @@ const {Helper} = Ember;
 
 let showdown = new Showdown.converter({extensions: ['ghostimagepreview', 'ghostgfm', 'footnotes', 'highlight']});
 
-export default Helper.helper(function (params) {
+export function formatMarkdown(params) {
     if (!params || !params.length) {
         return;
     }
@@ -29,4 +29,6 @@ export default Helper.helper(function (params) {
     // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
 
     return Ember.String.htmlSafe(escapedhtml);
-});
+}
+
+export default Helper.helper(formatMarkdown);

ghost/admin/app/mixins/ed-editor-api.js

@@ -1,6 +1,9 @@
 import Ember from 'ember';
 
-const {Mixin} = Ember;
+const {
+    Mixin,
+    run
+} = Ember;
 
 export default Mixin.create({
     /**
@@ -11,7 +14,7 @@ export default Mixin.create({
      * @returns {String}
      */
     getValue() {
-        return this.$().val();
+        return this.readDOMAttr('value');
     },
 
     /**
@@ -111,6 +114,7 @@ export default Mixin.create({
      * by providing selectionEnd.
      */
     replaceSelection(replacement, replacementStart, replacementEnd, cursorPosition) {
+        run.schedule('afterRender', this, function () {
             let $textarea = this.$();
 
             cursorPosition = cursorPosition || 'collapseToEnd';
@@ -133,5 +137,6 @@ export default Mixin.create({
             // Tell the editor it has changed, as programmatic replacements won't trigger this automatically
             this._elementValueDidChange();
             this.sendAction('onChange');
+        });
     }
 });

ghost/admin/app/templates/components/gh-ed-preview.hbs

@@ -1,4 +1,4 @@
-{{gh-format-markdown markdown}}
+{{previewHTML}}
 
 {{#each imageUploadComponents as |uploader|}}
     {{#ember-wormhole to=uploader.destinationElementId}}

ghost/admin/app/utils/ed-image-manager.js

@@ -18,7 +18,7 @@ function getSrcRange(content, index) {
     let replacement = {};
 
     if (index > -1) {
-        // [1] matches the alt test, and 2 matches the url between the ()
+        // [1] matches the alt text, and 2 matches the url between the ()
         // if the () are missing entirely, which is valid, [2] will be undefined and we'll need to treat this case
         // a little differently
         if (images[index][2] === undefined) {