Ghost/ghost/admin/lib/koenig-editor/addon/components/koenig-card-callout.js

175 lines
4.8 KiB
JavaScript
Raw Normal View History

import Browser from 'mobiledoc-kit/utils/browser';
import Component from '@glimmer/component';
import {EmojiButton} from '@joeattardi/emoji-button';
import {action} from '@ember/object';
import {isBlank} from '@ember/utils';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {set} from '@ember/object';
export default class KoenigCardCalloutComponent extends Component {
@service config;
@service feature;
@service store;
@service membersUtils;
@service ui;
Removed duplication of "delete if empty" card logic 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
2021-11-10 17:45:54 +03:00
get isEmpty() {
return isBlank(this.args.payload.calloutText);
}
backgroundColors = [
{name: 'Grey', color: 'grey'},
{name: 'White', color: 'white'},
{name: 'Blue', color: 'blue'},
{name: 'Green', color: 'green'},
{name: 'Yellow', color: 'yellow'},
{name: 'Red', color: 'red'},
{name: 'Pink', color: 'pink'},
{name: 'Purple', color: 'purple'},
{name: 'Brand color', color: 'accent'}
];
get selectedBackgroundColor() {
return this.backgroundColors.find(option => option.color === this.args.payload.backgroundColor);
}
get toolbar() {
if (this.args.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.args.editCard)
}]
};
}
constructor() {
super(...arguments);
this.args.registerComponent(this);
const payloadDefaults = {
calloutEmoji: '💡',
calloutText: '',
backgroundColor: 'grey'
};
Object.entries(payloadDefaults).forEach(([key, value]) => {
if (this.args.payload[key] === undefined) {
this._updatePayloadAttr(key, value);
}
});
2021-11-16 15:34:36 +03:00
this.picker = new EmojiButton({
position: 'bottom',
recentsCount: 24,
showPreview: false,
initialCategory: 'recents'
});
this.picker.on('emoji', (selection) => {
this.setCalloutEmoji(selection.emoji);
});
}
// required for snippet rects to be calculated - editor reaches in to component,
// expecting a non-Glimmer component with a .element property
@action
registerElement(element) {
this.element = element;
}
@action
setCalloutText(text) {
this._updatePayloadAttr('calloutText', text);
}
@action
setCalloutEmoji(emoji) {
this._updatePayloadAttr('calloutEmoji', emoji);
}
@action
setBackgroundColor(option) {
this._updatePayloadAttr('backgroundColor', option.color);
}
@action
leaveEditMode() {
Removed duplication of "delete if empty" card logic 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
2021-11-10 17:45:54 +03:00
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.args.deleteCard);
}
}
@action
focusElement(selector, event) {
event.preventDefault();
document.querySelector(selector)?.focus();
}
@action
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);
}
@action
changeEmoji(event) {
this.picker.togglePicker(event.target);
}
@action
toggleEmoji() {
this._updatePayloadAttr('calloutEmoji', this.args.payload.calloutEmoji ? '' : '💡');
}
_enter(modifier) {
if (this.args.isEditing && (modifier === 'meta' || (modifier === 'crtl' && Browser.isWin()))) {
this.args.editCard();
}
}
_placeCursorAtEnd() {
if (!this._textReplacementEditor) {
return;
}
let tailPosition = this._textReplacementEditor.post.tailPosition();
let rangeToSelect = tailPosition.toRange();
this._textReplacementEditor.selectRange(rangeToSelect);
}
_updatePayloadAttr(attr, value) {
let payload = this.args.payload;
set(payload, attr, value);
// update the mobiledoc and stay in edit mode
this.args.saveCard?.(payload, false);
}
}