mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
625dd9a471
no issue
- show help at bottom of email card in edit mode with text explaining that the email card will only be included in emails
- set default content of the email card that includes the `{first_name}` replacement string
- changed behaviour to place cursor at end of the card contents when entering edit mode
104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
import Browser from 'mobiledoc-kit/utils/browser';
|
|
import Component from '@ember/component';
|
|
import layout from '../templates/components/koenig-card-email';
|
|
import {computed} from '@ember/object';
|
|
import {formatTextReplacementHtml} from './koenig-text-replacement-html-input';
|
|
import {isBlank} from '@ember/utils';
|
|
import {run} from '@ember/runloop';
|
|
import {set} from '@ember/object';
|
|
|
|
export default Component.extend({
|
|
layout,
|
|
|
|
// attrs
|
|
payload: null,
|
|
isSelected: false,
|
|
isEditing: false,
|
|
|
|
// closure actions
|
|
selectCard() {},
|
|
deselectCard() {},
|
|
editCard() {},
|
|
saveCard() {},
|
|
deleteCard() {},
|
|
moveCursorToNextSection() {},
|
|
moveCursorToPrevSection() {},
|
|
addParagraphAfterCard() {},
|
|
registerComponent() {},
|
|
|
|
formattedHtml: computed('payload.html', function () {
|
|
return formatTextReplacementHtml(this.payload.html);
|
|
}),
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
this.registerComponent(this);
|
|
|
|
if (!this.payload.html) {
|
|
this._updatePayloadAttr('html', '<p>Hey {first_name, "there"},</p>');
|
|
}
|
|
},
|
|
|
|
actions: {
|
|
updateHtml(html) {
|
|
this._updatePayloadAttr('html', html);
|
|
},
|
|
|
|
registerEditor(textReplacementEditor) {
|
|
let commands = {
|
|
'META+ENTER': run.bind(this, this._enter, 'meta'),
|
|
'CTRL+ENTER': run.bind(this, this._enter, 'ctrl')
|
|
};
|
|
|
|
Object.keys(commands).forEach((str) => {
|
|
textReplacementEditor.registerKeyCommand({
|
|
str,
|
|
run() {
|
|
return commands[str](textReplacementEditor, str);
|
|
}
|
|
});
|
|
});
|
|
|
|
this._textReplacementEditor = textReplacementEditor;
|
|
|
|
run.scheduleOnce('afterRender', this, this._placeCursorAtEnd);
|
|
},
|
|
|
|
leaveEditMode() {
|
|
if (isBlank(this.payload.html)) {
|
|
// afterRender is required to avoid double modification of `isSelected`
|
|
// TODO: see if there's a way to avoid afterRender
|
|
run.scheduleOnce('afterRender', this, this.deleteCard);
|
|
}
|
|
}
|
|
},
|
|
|
|
_updatePayloadAttr(attr, value) {
|
|
let payload = this.payload;
|
|
let save = this.saveCard;
|
|
|
|
set(payload, attr, value);
|
|
|
|
// update the mobiledoc and stay in edit mode
|
|
save(payload, false);
|
|
},
|
|
|
|
/* key commands ----------------------------------------------------------*/
|
|
|
|
_enter(modifier) {
|
|
if (this.isEditing && (modifier === 'meta' || (modifier === 'crtl' && Browser.isWin()))) {
|
|
this.editCard();
|
|
}
|
|
},
|
|
|
|
_placeCursorAtEnd() {
|
|
if (!this._textReplacementEditor) {
|
|
return;
|
|
}
|
|
|
|
let tailPosition = this._textReplacementEditor.post.tailPosition();
|
|
let rangeToSelect = tailPosition.toRange();
|
|
this._textReplacementEditor.selectRange(rangeToSelect);
|
|
}
|
|
});
|