mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 22:43:30 +03:00
2625199fb2
no issue The logic for "delete if empty" was duplicated in two places: 1. when `createComponentCard` is used to register a card, this option method was used when cleaning up a post when first rendering (cards in empty state can be saved before the editor auto-removes them but we don't want to show them again) 2. inside of card's own delete-if-empty handling on certain actions such as deselection or leaving edit mode - added an `ifEmpty` property to each card component - used by the editor's first-render cleanup routing if the property is present - can be re-used internally for the card's own deselect/exit-edit-mode behaviour - updated the cleanup routine in `<KoenigEditor>` - added a `allComponentCardsRegistered` property that will return `true` when the `.component` property is set on every card (the property is set during card component initialisation so we're at the mercy of Ember's render process so not all card components will be immediately registered) - swapped `_cleanup` for `_cleanupTask` that will wait for `allComponentCardsRegistered` to be `true` before performing cleanup, ensuring that we always have access to the card component's `isEmpty` property even when Ember renders cards across multiple render batches - checks for `isEmpty` being a boolean and will delete the card if it's value is `true` - updated all cards that had delete-if-empty behaviour - added `isEmpty` properties - removed duplicated logic in the `createComponentCard` calls
122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
import Browser from 'mobiledoc-kit/utils/browser';
|
|
import Component from '@ember/component';
|
|
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({
|
|
// attrs
|
|
payload: null,
|
|
isSelected: false,
|
|
isEditing: false,
|
|
|
|
// closure actions
|
|
selectCard() {},
|
|
deselectCard() {},
|
|
editCard() {},
|
|
saveCard() {},
|
|
deleteCard() {},
|
|
moveCursorToNextSection() {},
|
|
moveCursorToPrevSection() {},
|
|
addParagraphAfterCard() {},
|
|
registerComponent() {},
|
|
|
|
isEmpty: computed('payload.html', function () {
|
|
return isBlank(this.payload.html);
|
|
}),
|
|
|
|
formattedHtml: computed('payload.html', function () {
|
|
return formatTextReplacementHtml(this.payload.html);
|
|
}),
|
|
|
|
toolbar: computed('isEditing', function () {
|
|
if (this.isEditing) {
|
|
return false;
|
|
}
|
|
|
|
return {
|
|
items: [{
|
|
buttonClass: 'fw4 flex items-center white',
|
|
icon: 'koenig/kg-edit',
|
|
iconClass: 'fill-white',
|
|
title: 'Edit',
|
|
text: '',
|
|
action: run.bind(this, this.editCard)
|
|
}]
|
|
};
|
|
}),
|
|
|
|
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 (this.isEmpty) {
|
|
// 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);
|
|
}
|
|
});
|