Replace usages of action helper

bustle · Sep 18, 2023 · 7027350 · 7027350
1 parent 9766b8a
commit 7027350
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 109 deletions.
diff --git a/addon/components/mobiledoc-editor/component.js b/addon/components/mobiledoc-editor/component.js
@@ -3,11 +3,18 @@
 /* eslint-disable ember/require-tagless-components */
 /* eslint-disable ember/no-classic-classes */
 /* eslint-disable ember/no-classic-components */
-import { _getCurrentRunLoop, schedule, begin, end, join } from '@ember/runloop';
+import {
+  _getCurrentRunLoop,
+  getCurrentRunLoop,
+  schedule,
+  begin,
+  end,
+  join,
+} from '@ember/runloop';
 import { copy } from 'ember-copy';
 import { A } from '@ember/array';
 import { camelize, capitalize } from '@ember/string';
-import EmberObject, { computed } from '@ember/object';
+import EmberObject, { action, computed } from '@ember/object';
 import Component from '@ember/component';
 import Ember from 'ember';
 import layout from './template';
@@ -113,6 +120,7 @@ export default Component.extend({
     this._startedRunLoop = false;
   },
 
+  @action
   isDefaultAttributeValue(attributeName, attributeValue) {
     let defaultValue = this.sectionAttributesConfig[attributeName].defaultValue;
     if (!defaultValue) {
@@ -123,71 +131,75 @@ export default Component.extend({
     return attributeValue === defaultValue;
   },
 
-  actions: {
-    toggleMarkup(markupTagName) {
-      let editor = this.editor;
-      editor.toggleMarkup(markupTagName);
-    },
-
-    toggleSection(sectionTagName) {
-      let editor = this.editor;
-      editor.toggleSection(sectionTagName);
-    },
-
-    setAttribute(attributeName, attributeValue) {
-      let editor = this.editor;
-      if (this.isDefaultAttributeValue(attributeName, attributeValue)) {
-        editor.removeAttribute(attributeName);
-      } else {
-        editor.setAttribute(attributeName, attributeValue);
-      }
-    },
+  @action
+  toggleMarkup(markupTagName) {
+    let editor = this.editor;
+    editor.toggleMarkup(markupTagName);
+  },
 
-    removeAttribute(attributeName) {
-      let editor = this.editor;
-      editor.setAttribute(attributeName);
-    },
+  @action
+  toggleSection(sectionTagName) {
+    let editor = this.editor;
+    editor.toggleSection(sectionTagName);
+  },
 
-    addCard(cardName, payload = {}) {
-      this._addCard(cardName, payload);
-    },
+  @action
+  setAttribute(attributeName, attributeValue) {
+    let editor = this.editor;
+    if (this.isDefaultAttributeValue(attributeName, attributeValue)) {
+      editor.removeAttribute(attributeName);
+    } else {
+      editor.setAttribute(attributeName, attributeValue);
+    }
+  },
 
-    addAtom(atomName, text = '', payload = {}) {
-      this._addAtom(atomName, text, payload);
-    },
+  @action
+  removeAttribute(attributeName) {
+    let editor = this.editor;
+    editor.setAttribute(attributeName);
+  },
 
-    addCardInEditMode(cardName, payload = {}) {
-      let editMode = true;
-      this._addCard(cardName, payload, editMode);
-    },
+  @action
+  addCard(cardName, payload = {}) {
+    this._addCard(cardName, payload);
+  },
 
-    toggleLink() {
-      let editor = this.editor;
-      if (!editor.hasCursor()) {
-        return;
-      }
-      if (editor.hasActiveMarkup('a')) {
-        editor.toggleMarkup('a');
-      } else {
-        this.set('linkOffsets', editor.range);
-      }
-    },
-
-    completeLink(href) {
-      let offsets = this.linkOffsets;
-      this.set('linkOffsets', null);
-      let editor = this.editor;
-      editor.selectRange(offsets);
-      editor.toggleMarkup('a', { href });
-    },
-
-    cancelLink() {
-      this.set('linkOffsets', null);
-    },
-
-    isDefaultAttributeValue() {
-      return this.isDefaultAttributeValue(...arguments);
-    },
+  @action
+  addAtom(atomName, text = '', payload = {}) {
+    this._addAtom(atomName, text, payload);
+  },
+
+  @action
+  addCardInEditMode(cardName, payload = {}) {
+    let editMode = true;
+    this._addCard(cardName, payload, editMode);
+  },
+
+  @action
+  toggleLink() {
+    let editor = this.editor;
+    if (!editor.hasCursor()) {
+      return;
+    }
+    if (editor.hasActiveMarkup('a')) {
+      editor.toggleMarkup('a');
+    } else {
+      this.set('linkOffsets', editor.range);
+    }
+  },
+
+  @action
+  completeLink(href) {
+    let offsets = this.linkOffsets;
+    this.set('linkOffsets', null);
+    let editor = this.editor;
+    editor.selectRange(offsets);
+    editor.toggleMarkup('a', { href });
+  },
+
+  @action
+  cancelLink() {
+    this.set('linkOffsets', null);
   },
 
   editingContexts: computed(function () {
@@ -299,7 +311,11 @@ export default Component.extend({
       // When pasting text that gets turned into a card, for example,
       // the add card hook would run outside the runloop if we didn't begin a new
       // one now.
-      if (!_getCurrentRunLoop()) {
+      // Check for current run loop in two ways to avoid deprecations in different Ember versions
+      let currRunLoop = _getCurrentRunLoop
+        ? _getCurrentRunLoop()
+        : getCurrentRunLoop();
+      if (!currRunLoop) {
         this._startedRunLoop = true;
         begin();
       }

diff --git a/addon/components/mobiledoc-editor/template.hbs b/addon/components/mobiledoc-editor/template.hbs
@@ -3,14 +3,14 @@
   activeMarkupTagNames=this.activeMarkupTagNames
   activeSectionTagNames=this.activeSectionTagNames
   activeSectionAttributes=this.activeSectionAttributes
-  toggleMarkup=(action 'toggleMarkup')
-  toggleLink=(action 'toggleLink')
-  addCard=(action 'addCard')
-  addAtom=(action 'addAtom')
-  addCardInEditMode=(action 'addCardInEditMode')
-  toggleSection=(action 'toggleSection')
-  setAttribute=(action 'setAttribute')
-  isDefaultAttributeValue=(action 'isDefaultAttributeValue')
+  toggleMarkup=this.toggleMarkup
+  toggleLink=this.toggleLink
+  addCard=this.addCard
+  addAtom=this.addAtom
+  addCardInEditMode=this.addCardInEditMode
+  toggleSection=this.toggleSection
+  setAttribute=this.setAttribute
+  isDefaultAttributeValue=this.isDefaultAttributeValue
 )}}
 
 <div class="mobiledoc-editor__editor-wrapper">
@@ -20,8 +20,8 @@
 {{#if this.linkOffsets}}
   <TetherToSelection>
     <MobiledocLinkPrompt
-      @on-submit={{action "completeLink"}}
-      @on-cancel={{action "cancelLink"}}
+      @on-submit={{this.completeLink}}
+      @on-cancel={{this.cancelLink}}
     />
   </TetherToSelection>
 {{/if}}
@@ -38,10 +38,11 @@
         data=card.payload
         env=card.env
         options=card.options
-        editCard=(action card.env.edit)
-        saveCard=(action card.env.save)
-        cancelCard=(action card.env.cancel)
-        removeCard=(action card.env.remove)}}
+        editCard=card.env.edit
+        saveCard=card.env.save
+        cancelCard=card.env.cancel
+        removeCard=card.env.remove
+    }}
   </EmberWormhole>
 {{/each}}
 
@@ -54,7 +55,7 @@
         payload=atom.payload
         value=atom.value
         options=atom.options
-        saveAtom=(action atom.callbacks.save)
+        saveAtom=atom.callbacks.save
         }}
   </EmberWormhole>
 {{/each}}
diff --git a/addon/components/mobiledoc-link-prompt/template.hbs b/addon/components/mobiledoc-link-prompt/template.hbs
@@ -1,5 +1,6 @@
 <form>
-  {{input value=this.href}}
-  <button {{action attrs.on-submit this.href}} type="submit">Link</button>
-  <button type="submit" {{action attrs.on-cancel}}>Cancel</button>
+  {{!-- template-lint-disable require-input-label  --}}
+  <Input @value={{this.href}} />
+  <button {{on 'click' (fn this.on-submit this.href)}} type="submit">Link</button>
+  <button type="submit" {{on 'click' this.on-cancel}}>Cancel</button>
 </form>
diff --git a/addon/components/mobiledoc-toolbar/template.hbs b/addon/components/mobiledoc-toolbar/template.hbs
@@ -3,7 +3,7 @@
     type="button"
     title="Bold"
     class="mobiledoc-toolbar__button {{if @editor.activeMarkupTagNames.isStrong 'active'}}"
-    {{action @editor.toggleMarkup 'strong'}}>
+    {{on 'click' (fn @editor.toggleMarkup 'strong')}}>
     Bold
   </button>
 </li>
@@ -12,7 +12,7 @@
     type="button"
     title="Italic"
     class="mobiledoc-toolbar__button {{if @editor.activeMarkupTagNames.isEm 'active'}}"
-    {{action @editor.toggleMarkup 'em'}}>
+    {{on 'click' (fn @editor.toggleMarkup 'em')}}>
     Italic
   </button>
 </li>
@@ -21,7 +21,7 @@
     type="button"
     title="Link"
     class="mobiledoc-toolbar__button {{if @editor.activeMarkupTagNames.isA 'active'}}"
-    {{action @editor.toggleLink}}>
+    {{on 'click' @editor.toggleLink}}>
     Link
   </button>
 </li>
@@ -30,7 +30,7 @@
     type="button"
     title="Heading"
     class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isH1 'active'}}"
-    {{action @editor.toggleSection 'h1'}}>
+    {{on 'click' (fn @editor.toggleSection 'h1')}}>
     Headline
   </button>
 </li>
@@ -39,7 +39,7 @@
     type="button"
     title="Subheading"
     class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isH2 'active'}}"
-    {{action @editor.toggleSection 'h2'}}>
+    {{on 'click' (fn @editor.toggleSection 'h2')}}>
     Subheadline
   </button>
 </li>
@@ -48,7 +48,7 @@
     type="button"
     title="Block Quote"
     class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isBlockquote 'active'}}"
-    {{action @editor.toggleSection 'blockquote'}}>
+    {{on 'click' (fn @editor.toggleSection 'blockquote')}}>
     <i class="icon-quote-block"></i>
     Blockquote
   </button>
@@ -58,7 +58,7 @@
     type="button"
     title="Pull Quote"
     class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isPullQuote 'active'}}"
-    {{action @editor.toggleSection 'pull-quote'}}>
+    {{on 'click' (fn @editor.toggleSection 'pull-quote')}}>
     Pull-quote
   </button>
 </li>
@@ -67,7 +67,7 @@
     type="button"
     title="List"
     class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isUl 'active'}}"
-    {{action @editor.toggleSection 'ul'}}>
+    {{on 'click' (fn @editor.toggleSection 'ul')}}>
     Unordered List
   </button>
 </li>
@@ -76,7 +76,7 @@
     type="button"
     title="Numbered List"
     class="mobiledoc-toolbar__button {{if @editor.activeSectionTagNames.isOl 'active'}}"
-    {{action @editor.toggleSection 'ol'}}>
+    {{on 'click' (fn @editor.toggleSection 'ol')}}>
     Ordered List
   </button>
 </li>
@@ -85,7 +85,7 @@
     type="button"
     title="Align Left"
     class="mobiledoc-toolbar__button {{if (includes @editor.activeSectionAttributes.textAlign 'left') 'active'}}"
-    {{action @editor.setAttribute 'text-align' 'left'}}>
+    {{on 'click' (fn @editor.setAttribute 'text-align' 'left')}}>
     Align Left
   </button>
 </li>
@@ -94,7 +94,7 @@
     type="button"
     title="Align Center"
     class="mobiledoc-toolbar__button {{if (includes @editor.activeSectionAttributes.textAlign 'center') 'active'}}"
-    {{action @editor.setAttribute 'text-align' 'center'}}>
+    {{on 'click' (fn @editor.setAttribute 'text-align' 'center')}}>
     Align Center
   </button>
 </li>
@@ -103,7 +103,7 @@
     type="button"
     title="Align Right"
     class="mobiledoc-toolbar__button {{if (includes @editor.activeSectionAttributes.textAlign 'right') 'active'}}"
-    {{action @editor.setAttribute 'text-align' 'right'}}>
+    {{on 'click' (fn @editor.setAttribute 'text-align' 'right')}}>
     Align Right
   </button>
 </li>

diff --git a/addon/components/tether-to-selection/component.js b/addon/components/tether-to-selection/component.js
@@ -7,7 +7,6 @@ import { assert } from '@ember/debug';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { htmlSafe } from '@ember/string';
-import layout from './template';
 
 const DIALOG_MARGIN = 16;
 
@@ -24,7 +23,6 @@ function isOutOfBounds(rect, boundingRect) {
 }
 
 export default Component.extend({
-  layout,
   classNames: ['mobiledoc-selection-tether'],
   attributeBindings: ['style'],
   dialogAnchor: null,

diff --git a/addon/components/tether-to-selection/template.hbs b/addon/components/tether-to-selection/template.hbs
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
     "ember-copy": "^2.0.1",
     "ember-wormhole": "^0.6.0",
     "mobiledoc-dom-renderer": "^0.7.2",
-    "mobiledoc-kit": "~0.13.3"
+    "mobiledoc-kit": "~0.15.0"
   },
   "devDependencies": {
     "@ember/jquery": "^2.0.0",

diff --git a/tests/.eslintrc.js b/tests/.eslintrc.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = {
   env: {
     embertest: true,

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,3 +1,3 @@
-<MobiledocEditor @on-change={{action 'onChange'}} />
+<MobiledocEditor @on-change={{this.onChange}} />
 
 <div id="has-changed">HAS CHANGED {{this.changeCount}}</div>