From 135d550c8a3378a60ae693800146e98f02135ab4 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 1 May 2018 17:13:53 +0100 Subject: [PATCH] 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 --- .../addon/components/koenig-card-html.js | 17 +++--- .../addon/components/koenig-card-image.js | 18 +++++-- .../addon/components/koenig-card-markdown.js | 17 +++--- .../addon/components/koenig-card.js | 30 +++++------ .../addon/components/koenig-editor.js | 54 +++++++++---------- .../addon/components/koenig-link-input.js | 14 ++--- .../addon/components/koenig-link-toolbar.js | 14 ++--- .../addon/components/koenig-plus-menu.js | 26 ++++----- .../addon/components/koenig-slash-menu.js | 24 ++++----- .../addon/components/koenig-toolbar.js | 22 ++++---- 10 files changed, 126 insertions(+), 110 deletions(-) diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js index 8c021cc12b..70863aa276 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-html.js @@ -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); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js index 42af804038..9b5c1bd99a 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js @@ -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); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js index 4b83d95bf6..78fdf7ccc9 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-markdown.js @@ -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); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js index c3db48adf6..73f0271602 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js @@ -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(); } diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js index b3533dcd1f..6c1fb6e5aa 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js @@ -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); }, diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-link-input.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-link-input.js index de6bcb334d..aebcc73109 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-link-input.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-link-input.js @@ -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); } }, diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-link-toolbar.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-link-toolbar.js index e6d8a92eac..445ff38a32 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-link-toolbar.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-link-toolbar.js @@ -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); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js index f7464321bd..98bd4edb3d 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js @@ -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); }); } diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js index c41d1f2655..d14da5ec9c 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js @@ -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'); } }); diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js index 55bc2f7d48..bd90841b62 100644 --- a/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js +++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-toolbar.js @@ -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() {