mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
49414d0843
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
110 lines
3.1 KiB
JavaScript
110 lines
3.1 KiB
JavaScript
import Ember from 'ember';
|
|
import {formatMarkdown} from 'ghost/helpers/gh-format-markdown';
|
|
|
|
const {
|
|
Component,
|
|
run,
|
|
uuid
|
|
} = Ember;
|
|
|
|
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'));
|
|
},
|
|
|
|
didReceiveAttrs(attrs) {
|
|
this._super(...arguments);
|
|
|
|
if (!attrs.oldAttrs) {
|
|
return;
|
|
}
|
|
|
|
if (attrs.newAttrs.scrollPosition && attrs.newAttrs.scrollPosition.value !== attrs.oldAttrs.scrollPosition.value) {
|
|
this.adjustScrollPosition(attrs.newAttrs.scrollPosition.value);
|
|
}
|
|
|
|
if (attrs.newAttrs.markdown.value !== attrs.oldAttrs.markdown.value) {
|
|
run.throttle(this, this.buildPreviewHTML, 30, false);
|
|
}
|
|
},
|
|
|
|
adjustScrollPosition(scrollPosition) {
|
|
let scrollWrapper = this._scrollWrapper;
|
|
|
|
if (scrollWrapper) {
|
|
scrollWrapper.scrollTop(scrollPosition);
|
|
}
|
|
},
|
|
|
|
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');
|
|
|
|
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;
|
|
|
|
if (uploadTarget) {
|
|
src = uploadTarget.getAttribute('src');
|
|
}
|
|
|
|
if (component) {
|
|
component.set('destinationElementId', destinationElementId);
|
|
component.set('src', src);
|
|
} else {
|
|
let imageUpload = Ember.Object.create({
|
|
destinationElementId,
|
|
id,
|
|
src,
|
|
index: i
|
|
});
|
|
|
|
this.get('imageUploadComponents').pushObject(imageUpload);
|
|
}
|
|
|
|
el.id = destinationElementId;
|
|
el.innerHTML = '';
|
|
el.classList.remove('image-uploader');
|
|
|
|
fragment.replaceChild(el, oldEl);
|
|
});
|
|
|
|
this.set('previewHTML', fragment);
|
|
},
|
|
|
|
actions: {
|
|
updateImageSrc(index, url) {
|
|
this.attrs.updateImageSrc(index, url);
|
|
},
|
|
|
|
updateHeight() {
|
|
this.attrs.updateHeight(this.$().height());
|
|
}
|
|
}
|
|
});
|