🎨 Improved code injection loading behaviour on slow connections (#935)
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
This commit is contained in:
parent
aaff539fc0
commit
3139b23258
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue