mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-26 20:34:02 +03:00
Koenig - Switch this.get for ES5 getters
no issue - Ember 3.1 adds support for ES5 getters to replace (mostly) the need for `this.get` - https://www.emberjs.com/blog/2018/04/13/ember-3-1-released.html#toc_es5-getters-for-computed-properties-2-of-4 - updating Koenig now because it's a fairly isolated part of Ghost-Admin and a good playground for new standards that we can migrate to in the main codebase
This commit is contained in:
Kevin Ansfield
parent
26e70e86ea
commit
135d550c8a
@ -21,7 +21,7 @@ export default Component.extend({
|
||||
deleteCard() {},
|
||||
|
||||
toolbar: computed('isEditing', function () {
|
||||
if (!this.get('isEditing')) {
|
||||
if (!this.isEditing) {
|
||||
return {
|
||||
items: [{
|
||||
buttonClass: 'fw4 flex items-center white',
|
||||
@ -29,7 +29,7 @@ export default Component.extend({
|
||||
iconClass: 'stroke-white',
|
||||
title: 'Edit',
|
||||
text: '',
|
||||
action: run.bind(this, this.get('editCard'))
|
||||
action: run.bind(this, this.editCard)
|
||||
}]
|
||||
};
|
||||
}
|
||||
@ -37,10 +37,13 @@ export default Component.extend({
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
let payload = this.payload || {};
|
||||
|
||||
if (!this.get('payload.html')) {
|
||||
this.set('payload.html', '');
|
||||
if (!payload.html) {
|
||||
payload.set('html', '');
|
||||
}
|
||||
|
||||
this.set('payload', payload);
|
||||
},
|
||||
|
||||
actions: {
|
||||
@ -49,7 +52,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
leaveEditMode() {
|
||||
if (isBlank(this.get('payload.html'))) {
|
||||
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, function () {
|
||||
@ -60,8 +63,8 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_updatePayloadAttr(attr, value) {
|
||||
let payload = this.get('payload');
|
||||
let save = this.get('saveCard');
|
||||
let payload = this.payload;
|
||||
let save = this.saveCard;
|
||||
|
||||
set(payload, attr, value);
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ export default Component.extend({
|
||||
addParagraphAfterCard() {},
|
||||
|
||||
kgImgStyle: computed('payload.imageStyle', function () {
|
||||
let imageStyle = this.get('payload.imageStyle');
|
||||
let imageStyle = this.payload.imageStyle;
|
||||
|
||||
if (imageStyle === 'wide') {
|
||||
return 'image-wide';
|
||||
@ -43,7 +43,7 @@ export default Component.extend({
|
||||
}),
|
||||
|
||||
toolbar: computed('payload.{imageStyle,src}', function () {
|
||||
let imageStyle = this.get('payload.imageStyle');
|
||||
let imageStyle = this.payload.imageStyle;
|
||||
let items = [];
|
||||
|
||||
items.push({
|
||||
@ -67,7 +67,7 @@ export default Component.extend({
|
||||
action: run.bind(this, this._changeImageStyle, 'full')
|
||||
});
|
||||
|
||||
if (this.get('payload.src')) {
|
||||
if (this.payload.src) {
|
||||
items.push({divider: true});
|
||||
|
||||
items.push({
|
||||
@ -81,6 +81,14 @@ export default Component.extend({
|
||||
return {items};
|
||||
}),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (!this.payload) {
|
||||
this.set('payload', {});
|
||||
}
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
this._detachHandlers();
|
||||
@ -138,8 +146,8 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_updatePayloadAttr(attr, value) {
|
||||
let payload = this.get('payload');
|
||||
let save = this.get('saveCard');
|
||||
let payload = this.payload;
|
||||
let save = this.saveCard;
|
||||
|
||||
set(payload, attr, value);
|
||||
|
||||
|
||||
@ -28,11 +28,11 @@ export default Component.extend({
|
||||
deleteCard() {},
|
||||
|
||||
renderedMarkdown: computed('payload.markdown', function () {
|
||||
return htmlSafe(formatMarkdown(this.get('payload.markdown')));
|
||||
return htmlSafe(formatMarkdown(this.payload.markdown));
|
||||
}),
|
||||
|
||||
toolbar: computed('isEditing', function () {
|
||||
if (!this.get('isEditing')) {
|
||||
if (!this.isEditing) {
|
||||
return {
|
||||
items: [{
|
||||
buttonClass: 'fw4 flex items-center white',
|
||||
@ -40,7 +40,7 @@ export default Component.extend({
|
||||
iconClass: 'stroke-white',
|
||||
title: 'Edit',
|
||||
text: '',
|
||||
action: run.bind(this, this.get('editCard'))
|
||||
action: run.bind(this, this.editCard)
|
||||
}]
|
||||
};
|
||||
}
|
||||
@ -48,6 +48,11 @@ export default Component.extend({
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
if (!this.payload) {
|
||||
this.set('payload', {});
|
||||
}
|
||||
|
||||
// subtract toolbar height from MIN_HEIGHT so the trigger happens at
|
||||
// the expected position without forcing the min height to be too small
|
||||
this.set('bottomOffset', -MIN_HEIGHT - 49);
|
||||
@ -64,7 +69,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
leaveEditMode() {
|
||||
if (isBlank(this.get('payload.markdown'))) {
|
||||
if (isBlank(this.payload.markdown)) {
|
||||
// afterRender is required to avoid double modification of `isSelected`
|
||||
// TODO: see if there's a way to avoid afterRender
|
||||
run.scheduleOnce('afterRender', this, function () {
|
||||
@ -74,8 +79,8 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
updateMarkdown(markdown) {
|
||||
let payload = this.get('payload');
|
||||
let save = this.get('saveCard');
|
||||
let payload = this.payload;
|
||||
let save = this.saveCard;
|
||||
|
||||
set(payload, 'markdown', markdown);
|
||||
|
||||
|
||||
@ -45,9 +45,9 @@ export default Component.extend({
|
||||
}),
|
||||
|
||||
toolbarStyle: computed('showToolbar', 'toolbarWidth', 'toolbarHeight', function () {
|
||||
let showToolbar = this.get('showToolbar');
|
||||
let width = this.get('toolbarWidth');
|
||||
let height = this.get('toolbarHeight');
|
||||
let showToolbar = this.showToolbar;
|
||||
let width = this.toolbarWidth;
|
||||
let height = this.toolbarHeight;
|
||||
let styles = [];
|
||||
|
||||
styles.push(`top: -${height}px`);
|
||||
@ -67,9 +67,9 @@ export default Component.extend({
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
let isSelected = this.get('isSelected');
|
||||
let isEditing = this.get('isEditing');
|
||||
let hasEditMode = this.get('hasEditMode');
|
||||
let isSelected = this.isSelected;
|
||||
let isEditing = this.isEditing;
|
||||
let hasEditMode = this.hasEditMode;
|
||||
|
||||
if (isSelected !== this._lastIsSelected) {
|
||||
if (isSelected) {
|
||||
@ -105,9 +105,9 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
mouseDown(event) {
|
||||
let isSelected = this.get('isSelected');
|
||||
let isEditing = this.get('isEditing');
|
||||
let hasEditMode = this.get('hasEditMode');
|
||||
let isSelected = this.isSelected;
|
||||
let isEditing = this.isEditing;
|
||||
let hasEditMode = this.hasEditMode;
|
||||
|
||||
// if we perform an action we want to prevent the mousedown from
|
||||
// triggering a cursor position change which can result in multiple
|
||||
@ -134,7 +134,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
doubleClick() {
|
||||
if (this.get('hasEditMode') && !this.get('isEditing')) {
|
||||
if (this.hasEditMode && !this.isEditing) {
|
||||
this.editCard();
|
||||
this.set('showToolbar', true);
|
||||
}
|
||||
@ -163,7 +163,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_setToolbarProperties() {
|
||||
if (this.get('toolbar')) {
|
||||
if (this.toolbar) {
|
||||
let toolbar = this.element.querySelector('[data-toolbar="true"]');
|
||||
let {width, height} = toolbar.getBoundingClientRect();
|
||||
|
||||
@ -176,10 +176,10 @@ export default Component.extend({
|
||||
|
||||
_showToolbar() {
|
||||
// only show a toolbar if we have one
|
||||
if (this.get('toolbar')) {
|
||||
if (this.toolbar) {
|
||||
this._setToolbarProperties();
|
||||
|
||||
if (!this.get('showToolbar') && !this._onMousemoveHandler) {
|
||||
if (!this.showToolbar && !this._onMousemoveHandler) {
|
||||
this._onMousemoveHandler = run.bind(this, this._handleMousemove);
|
||||
window.addEventListener('mousemove', this._onMousemoveHandler);
|
||||
}
|
||||
@ -192,7 +192,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_handleKeydown(event) {
|
||||
if (event.code === 'Escape' && this.get('isEditing')) {
|
||||
if (event.code === 'Escape' && this.isEditing) {
|
||||
// run the select card routine with isEditing=false to exit edit mode
|
||||
this.selectCard(false);
|
||||
event.preventDefault();
|
||||
@ -200,7 +200,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_handleMousemove() {
|
||||
if (!this.get('showToolbar')) {
|
||||
if (!this.showToolbar) {
|
||||
this.set('showToolbar', true);
|
||||
this._removeMousemoveHandler();
|
||||
}
|
||||
|
||||
@ -118,9 +118,9 @@ export default Component.extend({
|
||||
// merge in named options with the `options` property data-bag
|
||||
// TODO: what is the `options` property data-bag and when/where does it get set?
|
||||
editorOptions: computed(function () {
|
||||
let options = this.get('options') || {};
|
||||
let atoms = this.get('atoms') || [];
|
||||
let cards = this.get('cards') || [];
|
||||
let options = this.options || {};
|
||||
let atoms = this.atoms || [];
|
||||
let cards = this.cards || [];
|
||||
|
||||
// add our default atoms and cards, we want the defaults to be first so
|
||||
// that they can be overridden by any passed-in atoms or cards.
|
||||
@ -129,9 +129,9 @@ export default Component.extend({
|
||||
cards = Array.concat(defaultCards, cards);
|
||||
|
||||
return assign({
|
||||
placeholder: this.get('placeholder'),
|
||||
spellcheck: this.get('spellcheck'),
|
||||
autofocus: this.get('autofocus'),
|
||||
placeholder: this.placeholder,
|
||||
spellcheck: this.spellcheck,
|
||||
autofocus: this.autofocus,
|
||||
atoms,
|
||||
cards
|
||||
}, options);
|
||||
@ -143,7 +143,7 @@ export default Component.extend({
|
||||
this._super(...arguments);
|
||||
|
||||
// set a blank mobiledoc if we didn't receive anything
|
||||
let mobiledoc = this.get('mobiledoc');
|
||||
let mobiledoc = this.mobiledoc;
|
||||
if (!mobiledoc) {
|
||||
mobiledoc = BLANK_DOC;
|
||||
this.set('mobiledoc', mobiledoc);
|
||||
@ -158,12 +158,12 @@ export default Component.extend({
|
||||
|
||||
willRender() {
|
||||
// use a default mobiledoc. If there are no changes then return early
|
||||
let mobiledoc = this.get('mobiledoc') || BLANK_DOC;
|
||||
let mobiledoc = this.mobiledoc || BLANK_DOC;
|
||||
let mobiledocIsSame =
|
||||
(this._localMobiledoc && this._localMobiledoc === mobiledoc) ||
|
||||
(this._upstreamMobiledoc && this._upstreamMobiledoc === mobiledoc);
|
||||
let isEditingDisabledIsSame =
|
||||
this._lastIsEditingDisabled === this.get('isEditingDisabled');
|
||||
this._lastIsEditingDisabled === this.isEditingDisabled;
|
||||
|
||||
// no change to mobiledoc, no need to recreate the editor
|
||||
if (mobiledocIsSame && isEditingDisabledIsSame) {
|
||||
@ -171,7 +171,7 @@ export default Component.extend({
|
||||
}
|
||||
|
||||
// update our internal references
|
||||
this._lastIsEditingDisabled = this.get('isEditingDisabled');
|
||||
this._lastIsEditingDisabled = this.isEditingDisabled;
|
||||
this._upstreamMobiledoc = mobiledoc;
|
||||
this._localMobiledoc = null;
|
||||
|
||||
@ -179,13 +179,13 @@ export default Component.extend({
|
||||
this.willCreateEditor();
|
||||
|
||||
// teardown any old editor that might be around
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
if (editor) {
|
||||
editor.destroy();
|
||||
}
|
||||
|
||||
// create a new editor
|
||||
let editorOptions = this.get('editorOptions');
|
||||
let editorOptions = this.editorOptions;
|
||||
editorOptions.mobiledoc = mobiledoc;
|
||||
editorOptions.showLinkTooltips = false;
|
||||
editorOptions.undoDepth = UNDO_DEPTH;
|
||||
@ -226,7 +226,7 @@ export default Component.extend({
|
||||
|
||||
// after render we render the full ember card via {{-in-element}}
|
||||
run.schedule('afterRender', () => {
|
||||
this.get('componentCards').pushObject(card);
|
||||
this.componentCards.pushObject(card);
|
||||
});
|
||||
|
||||
// render the destination element inside the editor
|
||||
@ -234,7 +234,7 @@ export default Component.extend({
|
||||
},
|
||||
// triggered when a card section is removed from the mobiledoc
|
||||
[REMOVE_CARD_HOOK]: (card) => {
|
||||
this.get('componentCards').removeObject(card);
|
||||
this.componentCards.removeObject(card);
|
||||
}
|
||||
};
|
||||
editorOptions.cardOptions = componentHooks;
|
||||
@ -327,7 +327,7 @@ export default Component.extend({
|
||||
});
|
||||
});
|
||||
|
||||
if (this.get('isEditingDisabled')) {
|
||||
if (this.isEditingDisabled) {
|
||||
editor.disableEditing();
|
||||
}
|
||||
|
||||
@ -347,7 +347,7 @@ export default Component.extend({
|
||||
// editor itself if necessary
|
||||
didRender() {
|
||||
this._super(...arguments);
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
if (!editor.hasRendered) {
|
||||
let editorElement = this.element.querySelector('.koenig-editor__editor');
|
||||
this._isRenderingEditor = true;
|
||||
@ -357,7 +357,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let editorElement = this.element.querySelector('.koenig-editor__editor');
|
||||
|
||||
editorElement.removeEventListener('paste', this._pasteHandler);
|
||||
@ -367,17 +367,17 @@ export default Component.extend({
|
||||
|
||||
actions: {
|
||||
toggleMarkup(markupTagName) {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
editor.toggleMarkup(markupTagName);
|
||||
},
|
||||
|
||||
toggleSection(sectionTagName) {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
editor.toggleSection(sectionTagName);
|
||||
},
|
||||
|
||||
replaceWithCardSection(cardName, range) {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let {head: {section}} = range;
|
||||
|
||||
editor.run((postEditor) => {
|
||||
@ -403,10 +403,10 @@ export default Component.extend({
|
||||
// select. Needs to be scheduled afterRender so that the new card
|
||||
// is actually present
|
||||
run.schedule('afterRender', this, function () {
|
||||
let card = this.get('componentCards.lastObject');
|
||||
if (card.get('koenigOptions.hasEditMode')) {
|
||||
let card = this.componentCards.lastObject;
|
||||
if (card.koenigOptions.hasEditMode) {
|
||||
this.editCard(card);
|
||||
} else if (card.get('koenigOptions.selectAfterInsert')) {
|
||||
} else if (card.koenigOptions.selectAfterInsert) {
|
||||
this.selectCard(card);
|
||||
}
|
||||
});
|
||||
@ -464,7 +464,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
addParagraphAfterCard(card) {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let section = this._getSectionFromCard(card);
|
||||
let collection = section.parent.sections;
|
||||
let nextSection = section.next;
|
||||
@ -489,7 +489,7 @@ export default Component.extend({
|
||||
/* public methods ------------------------------------------------------- */
|
||||
|
||||
postDidChange(editor) {
|
||||
let serializeVersion = this.get('serializeVersion');
|
||||
let serializeVersion = this.serializeVersion;
|
||||
let updatedMobiledoc = editor.serialize(serializeVersion);
|
||||
this._localMobiledoc = updatedMobiledoc;
|
||||
|
||||
@ -780,7 +780,7 @@ export default Component.extend({
|
||||
|
||||
// if a URL is pasted and we have a selection, make that selection a link
|
||||
handlePaste(event) {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let range = editor.range;
|
||||
|
||||
// only attempt link if we have a text selection in a single section
|
||||
@ -860,7 +860,7 @@ export default Component.extend({
|
||||
}
|
||||
|
||||
let cardId = section.renderNode.element.querySelector('.__mobiledoc-card').firstChild.id;
|
||||
let cards = this.get('componentCards');
|
||||
let cards = this.componentCards;
|
||||
|
||||
return cards.findBy('destinationElementId', cardId);
|
||||
},
|
||||
|
||||
@ -71,14 +71,14 @@ export default Component.extend({
|
||||
|
||||
// record the range now because the property is bound and will update
|
||||
// as we make changes whilst calculating the link position
|
||||
this._selectedRange = this.get('selectedRange');
|
||||
this._linkRange = this.get('linkRange');
|
||||
this._selectedRange = this.selectedRange;
|
||||
this._linkRange = this.linkRange;
|
||||
|
||||
// grab a window range so that we can use getBoundingClientRect. Using
|
||||
// document.createRange is more efficient than doing editor.setRange
|
||||
// because it doesn't trigger all of the selection changing side-effects
|
||||
// TODO: extract MobiledocRange->NativeRange into a util
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let cursor = editor.cursor;
|
||||
let {head, tail} = this._linkRange;
|
||||
let {node: headNode, offset: headOffset} = cursor._findNodeForPosition(head);
|
||||
@ -120,11 +120,11 @@ export default Component.extend({
|
||||
// prevent Enter from triggering in the editor and removing text
|
||||
event.preventDefault();
|
||||
|
||||
let href = this.get('href');
|
||||
let href = this.href;
|
||||
|
||||
// create a single editor runloop here so that we don't get
|
||||
// separate remove and replace ops pushed onto the undo stack
|
||||
this.get('editor').run((postEditor) => {
|
||||
this.editor.run((postEditor) => {
|
||||
if (href) {
|
||||
this._replaceLink(href, postEditor);
|
||||
} else {
|
||||
@ -161,7 +161,7 @@ export default Component.extend({
|
||||
// loop over all markers that are touched by linkRange, removing any 'a'
|
||||
// markups on them to clear all links
|
||||
_removeLinks(postEditor) {
|
||||
let {headMarker, tailMarker} = this.get('linkRange');
|
||||
let {headMarker, tailMarker} = this.linkRange;
|
||||
let curMarker = headMarker;
|
||||
|
||||
while (curMarker && curMarker !== tailMarker.next) {
|
||||
@ -176,7 +176,7 @@ export default Component.extend({
|
||||
_cancelAndReselect() {
|
||||
this.cancel();
|
||||
if (this._selectedRange) {
|
||||
this.get('editor').selectRange(this._selectedRange);
|
||||
this.editor.selectRange(this._selectedRange);
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ export default Component.extend({
|
||||
});
|
||||
|
||||
// ensure hidden toolbar is non-interactive
|
||||
if (this.get('showToolbar')) {
|
||||
if (this.showToolbar) {
|
||||
styles.push('pointer-events: auto !important');
|
||||
// add margin-bottom so that there's no gap between the link and
|
||||
// the toolbar to avoid closing when mouse moves between elements
|
||||
@ -77,7 +77,7 @@ export default Component.extend({
|
||||
|
||||
// don't show popups if link edit or formatting toolbar is shown
|
||||
// TODO: have a service for managing UI state?
|
||||
if (this.get('linkRange') || (this.get('selectedRange') && !this.get('selectedRange').isCollapsed)) {
|
||||
if (this.linkRange || (this.selectedRange && !this.selectedRange.isCollapsed)) {
|
||||
this._cancelTimeouts();
|
||||
this.set('showToolbar', false);
|
||||
this._canShowToolbar = false;
|
||||
@ -89,7 +89,7 @@ export default Component.extend({
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
|
||||
let container = this.get('container');
|
||||
let container = this.container;
|
||||
this._addEventListener(container, 'mouseover', this._handleMouseover);
|
||||
this._addEventListener(container, 'mouseout', this._handleMouseout);
|
||||
},
|
||||
@ -109,7 +109,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
remove() {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let linkRange = this._getLinkRange();
|
||||
let editorRange = editor.range;
|
||||
editor.run((postEditor) => {
|
||||
@ -127,7 +127,7 @@ export default Component.extend({
|
||||
return;
|
||||
}
|
||||
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
let rect = this._target.getBoundingClientRect();
|
||||
let x = rect.x + rect.width / 2;
|
||||
let y = rect.y + rect.height / 2;
|
||||
@ -141,7 +141,7 @@ export default Component.extend({
|
||||
|
||||
_handleMouseover(event) {
|
||||
if (this._canShowToolbar) {
|
||||
let target = getEventTargetMatchingTag('a', event.target, this.get('container'));
|
||||
let target = getEventTargetMatchingTag('a', event.target, this.container);
|
||||
if (target && target.isContentEditable) {
|
||||
this._timeout = run.later(this, function () {
|
||||
this._showToolbar(target);
|
||||
@ -153,7 +153,7 @@ export default Component.extend({
|
||||
_handleMouseout(event) {
|
||||
this._cancelTimeouts();
|
||||
|
||||
if (this.get('showToolbar')) {
|
||||
if (this.showToolbar) {
|
||||
let toElement = event.toElement || event.relatedTarget;
|
||||
if (toElement && !(toElement === this.element || toElement === this._target || toElement.closest(`#${this.elementId}`))) {
|
||||
this.set('showToolbar', false);
|
||||
|
||||
@ -30,7 +30,7 @@ export default Component.extend({
|
||||
replaceWithCardSection() {},
|
||||
|
||||
style: computed('top', function () {
|
||||
return htmlSafe(`top: ${this.get('top')}px`);
|
||||
return htmlSafe(`top: ${this.top}px`);
|
||||
}),
|
||||
|
||||
init() {
|
||||
@ -46,17 +46,17 @@ export default Component.extend({
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
|
||||
let editorRange = this.get('editorRange');
|
||||
let editorRange = this.editorRange;
|
||||
|
||||
// show the (+) button when the cursor is on a blank P tag
|
||||
if (!this.get('showMenu') && editorRange !== this._lastEditorRange) {
|
||||
if (!this.showMenu && editorRange !== this._lastEditorRange) {
|
||||
this._showOrHideButton(editorRange);
|
||||
this._hasCursorButton = this.get('showButton');
|
||||
this._hasCursorButton = this.showButton;
|
||||
}
|
||||
|
||||
// re-position again on next runloop, prevents incorrect position after
|
||||
// adding a card at the bottom of the doc
|
||||
if (this.get('showButton')) {
|
||||
if (this.showButton) {
|
||||
run.next(this, this._positionMenu);
|
||||
}
|
||||
|
||||
@ -126,7 +126,7 @@ export default Component.extend({
|
||||
_positionMenu() {
|
||||
// use the cached range if available because `editorRange` may have been
|
||||
// lost due to clicks on the open menu
|
||||
let {head: {section}} = this._editorRange || this.get('editorRange');
|
||||
let {head: {section}} = this._editorRange || this.editorRange;
|
||||
|
||||
if (section) {
|
||||
let containerRect = this.element.parentNode.getBoundingClientRect();
|
||||
@ -165,7 +165,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_hideMenu() {
|
||||
if (this.get('showMenu')) {
|
||||
if (this.showMenu) {
|
||||
// reset our cached editorRange
|
||||
this._editorRange = null;
|
||||
|
||||
@ -200,9 +200,9 @@ export default Component.extend({
|
||||
|
||||
// show the (+) button when the mouse is over a blank P tag
|
||||
_handleMousemove(event) {
|
||||
if (!this.get('showMenu')) {
|
||||
if (!this.showMenu) {
|
||||
let {pageX, pageY} = event;
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
|
||||
// add a horizontal buffer to the pointer position so that the
|
||||
// (+) button doesn't disappear when the mouse hovers over it due
|
||||
@ -223,8 +223,8 @@ export default Component.extend({
|
||||
// if the button is hidden due to the pointer not being over a blank
|
||||
// P but we have a valid cursor position then fall back to the cursor
|
||||
// positioning
|
||||
if (!this.get('showButton') && this._hasCursorButton) {
|
||||
this._showOrHideButton(this.get('editorRange'));
|
||||
if (!this.showButton && this._hasCursorButton) {
|
||||
this._showOrHideButton(this.editorRange);
|
||||
}
|
||||
}
|
||||
|
||||
@ -240,14 +240,14 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_handleResize() {
|
||||
if (this.get('showButton')) {
|
||||
if (this.showButton) {
|
||||
this._throttleResize = run.throttle(this, this._positionMenu, 100);
|
||||
}
|
||||
},
|
||||
|
||||
_moveCaretToCachedEditorRange() {
|
||||
this.set('editorRange', this._editorRange);
|
||||
this.get('editor').run((postEditor) => {
|
||||
this.editor.run((postEditor) => {
|
||||
postEditor.setRange(this._editorRange);
|
||||
});
|
||||
}
|
||||
|
||||
@ -62,12 +62,12 @@ export default Component.extend({
|
||||
replaceWithCardSection() {},
|
||||
|
||||
style: computed('top', function () {
|
||||
return htmlSafe(`top: ${this.get('top')}px`);
|
||||
return htmlSafe(`top: ${this.top}px`);
|
||||
}),
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
|
||||
// register `/` text input for positioning & showing the menu
|
||||
editor.onTextInput({
|
||||
@ -79,7 +79,7 @@ export default Component.extend({
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
let editorRange = this.get('editorRange');
|
||||
let editorRange = this.editorRange;
|
||||
|
||||
// re-position the menu and update the query if necessary when the
|
||||
// cursor position changes
|
||||
@ -111,7 +111,7 @@ export default Component.extend({
|
||||
// update menu position to match cursor position
|
||||
this._positionMenu(editorRange);
|
||||
|
||||
if (this.get('showMenu') && editorRange) {
|
||||
if (this.showMenu && editorRange) {
|
||||
let {head: {section}} = editorRange;
|
||||
|
||||
// close the menu if we're on a non-slash section (eg, when / is deleted)
|
||||
@ -155,11 +155,11 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_showMenu() {
|
||||
let editorRange = this.get('editorRange');
|
||||
let editorRange = this.editorRange;
|
||||
let {head: {section}} = editorRange;
|
||||
|
||||
// only show the menu if the slash is on an otherwise empty paragraph
|
||||
if (!this.get('showMenu') && editorRange.isCollapsed && section && !section.isListItem && section.text === '/') {
|
||||
if (!this.showMenu && editorRange.isCollapsed && section && !section.isListItem && section.text === '/') {
|
||||
this.set('showMenu', true);
|
||||
|
||||
// ensure all items are shown before we have a query filter
|
||||
@ -167,7 +167,7 @@ export default Component.extend({
|
||||
|
||||
// store a ref to the range when the menu was triggered so that we
|
||||
// can query text after the slash
|
||||
this._openRange = this.get('editorRange');
|
||||
this._openRange = this.editorRange;
|
||||
|
||||
// set up key handlers for selection & closing
|
||||
this._registerKeyboardNavHandlers();
|
||||
@ -184,7 +184,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_hideMenu() {
|
||||
if (this.get('showMenu')) {
|
||||
if (this.showMenu) {
|
||||
this.set('showMenu', false);
|
||||
this._unregisterKeyboardNavHandlers();
|
||||
window.removeEventListener('mousedown', this._onWindowMousedownHandler);
|
||||
@ -223,7 +223,7 @@ export default Component.extend({
|
||||
_registerKeyboardNavHandlers() {
|
||||
// ESC = close menu
|
||||
// ARROWS = selection
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
|
||||
editor.registerKeyCommand({
|
||||
str: 'ESC',
|
||||
@ -271,7 +271,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_getSelectedItem() {
|
||||
let items = this.get('items');
|
||||
let items = this.items;
|
||||
|
||||
if (items.length <= 0) {
|
||||
return;
|
||||
@ -281,7 +281,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_moveSelection(direction) {
|
||||
let items = this.get('items');
|
||||
let items = this.items;
|
||||
let selectedItem = this._getSelectedItem();
|
||||
let selectedIndex = items.indexOf(selectedItem);
|
||||
let lastIndex = items.length - 1;
|
||||
@ -318,7 +318,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_unregisterKeyboardNavHandlers() {
|
||||
let editor = this.get('editor');
|
||||
let editor = this.editor;
|
||||
editor.unregisterKeyCommands('slash-menu');
|
||||
}
|
||||
});
|
||||
|
||||
@ -60,7 +60,7 @@ export default Component.extend({
|
||||
});
|
||||
|
||||
// ensure hidden toolbar is non-interactive
|
||||
if (this.get('showToolbar')) {
|
||||
if (this.showToolbar) {
|
||||
styles.push('pointer-events: auto !important');
|
||||
} else {
|
||||
styles.push('pointer-events: none !important');
|
||||
@ -87,7 +87,7 @@ export default Component.extend({
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
let range = this.get('editorRange');
|
||||
let range = this.editorRange;
|
||||
|
||||
if (range && !range.isCollapsed) {
|
||||
this._hasSelectedRange = true;
|
||||
@ -95,7 +95,7 @@ export default Component.extend({
|
||||
this._hasSelectedRange = false;
|
||||
}
|
||||
|
||||
this.get('_toggleVisibility').perform();
|
||||
this._toggleVisibility.perform();
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
@ -110,7 +110,7 @@ export default Component.extend({
|
||||
|
||||
actions: {
|
||||
toggleMarkup(markupName) {
|
||||
if (markupName === 'em' && this.get('activeMarkupTagNames.isI')) {
|
||||
if (markupName === 'em' && this.activeMarkupTagNames.isI) {
|
||||
markupName = 'i';
|
||||
}
|
||||
|
||||
@ -122,7 +122,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
editLink() {
|
||||
this.editLink(this.get('editorRange'));
|
||||
this.editLink(this.editorRange);
|
||||
}
|
||||
},
|
||||
|
||||
@ -137,7 +137,7 @@ export default Component.extend({
|
||||
// re-rendering unnecessarily which can cause minor position jumps when
|
||||
// styles are toggled because getBoundingClientRect on getSelection
|
||||
// changes slightly depending on the style of selected text
|
||||
if (this.get('editorRange') === this._lastRange) {
|
||||
if (this.editorRange === this._lastRange) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -157,7 +157,7 @@ export default Component.extend({
|
||||
},
|
||||
|
||||
_handleMousemove() {
|
||||
if (!this.get('showToolbar')) {
|
||||
if (!this.showToolbar) {
|
||||
this.set('showToolbar', true);
|
||||
}
|
||||
|
||||
@ -175,12 +175,12 @@ export default Component.extend({
|
||||
// we want to skip the mousemove handler here because we know the
|
||||
// selection (if there was one) was via the mouse and we don't want
|
||||
// to wait for another mousemove before showing the toolbar
|
||||
this.get('_toggleVisibility').perform(true);
|
||||
this._toggleVisibility.perform(true);
|
||||
}
|
||||
},
|
||||
|
||||
_handleResize() {
|
||||
if (this.get('showToolbar')) {
|
||||
if (this.showToolbar) {
|
||||
this._throttleResize = run.throttle(this, this._positionToolbar, 100);
|
||||
}
|
||||
},
|
||||
@ -192,13 +192,13 @@ export default Component.extend({
|
||||
this.set('showToolbar', true);
|
||||
}
|
||||
|
||||
if (!this.get('showToolbar') && !this._onMousemoveHandler) {
|
||||
if (!this.showToolbar && !this._onMousemoveHandler) {
|
||||
this._onMousemoveHandler = run.bind(this, this._handleMousemove);
|
||||
window.addEventListener('mousemove', this._onMousemoveHandler);
|
||||
}
|
||||
|
||||
// track displayed range so that we don't re-position unnecessarily
|
||||
this._lastRange = this.get('editorRange');
|
||||
this._lastRange = this.editorRange;
|
||||
},
|
||||
|
||||
_hideToolbar() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user