FIX: Fast-edit shortcuts got lost in bdd97ff (#22762)

app/assets/javascripts/discourse/app/components/fast-edit.hbs

@@ -1,4 +1,6 @@
-<div class="fast-edit-container">
+{{! template-lint-disable no-pointer-down-event-binding }}
+{{! template-lint-disable no-invalid-interactive }}
+<div class="fast-edit-container" {{on "keydown" this.onKeydown}}>
   <textarea
     {{auto-focus}}
     {{on "input" this.updateValue}}

app/assets/javascripts/discourse/app/components/fast-edit.js

@@ -15,6 +15,15 @@ export default class FastEdit extends Component {
     modifier: translateModKey("Meta+"),
   });
 
+  @action
+  onKeydown(event) {
+    if (event.key === "Escape") {
+      this.args.close();
+    } else if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+      this.save();
+    }
+  }
+
   @action
   updateValue(event) {
     this.value = event.target.value;
@@ -36,7 +45,7 @@ export default class FastEdit extends Component {
       popupAjaxError(error);
     } finally {
       this.isSaving = false;
-      this.args.afterSave?.();
+      this.args.close();
     }
   }
 }

app/assets/javascripts/discourse/app/components/modal/fast-edit.hbs

@@ -2,6 +2,6 @@
   <FastEdit
     @initialValue={{@model.initialValue}}
     @post={{@model.post}}
-    @afterSave={{@closeModal}}
+    @close={{@closeModal}}
   />
 </DModal>

app/assets/javascripts/discourse/app/components/quote-button.hbs

@@ -54,7 +54,7 @@
     <FastEdit
       @initialValue={{this._fastEditInitialSelection}}
       @post={{this.post}}
-      @afterSave={{this._hideButton}}
+      @close={{this._hideButton}}
     />
   {{/if}}
 

app/assets/javascripts/discourse/app/components/quote-button.js

@@ -8,7 +8,6 @@ import {
 } from "discourse/lib/utilities";
 import Component from "@ember/component";
 import { INPUT_DELAY } from "discourse-common/config/environment";
-import KeyEnterEscape from "discourse/mixins/key-enter-escape";
 import Sharing from "discourse/lib/sharing";
 import { action, computed } from "@ember/object";
 import { alias } from "@ember/object/computed";
@@ -43,7 +42,7 @@ export function fixQuotes(str) {
   return str.replace(/[\u201C\u201D]/g, '"').replace(/[\u2018\u2019]/g, "'");
 }
 
-export default Component.extend(KeyEnterEscape, {
+export default Component.extend({
   modal: service(),
 
   classNames: ["quote-button"],

app/assets/javascripts/discourse/tests/acceptance/composer-test.js

@@ -7,7 +7,6 @@ import {
   triggerKeyEvent,
   visit,
 } from "@ember/test-helpers";
-import { PLATFORM_KEY_MODIFIER } from "discourse/lib/keyboard-shortcuts";
 import { toggleCheckDraftPopup } from "discourse/services/composer";
 import { cloneJSON } from "discourse-common/lib/object";
 import TopicFixtures from "discourse/tests/fixtures/topic";
@@ -23,6 +22,7 @@ import {
   count,
   exists,
   invisible,
+  metaModifier,
   query,
   updateCurrentUser,
   visible,
@@ -217,15 +217,7 @@ acceptance("Composer", function (needs) {
     textarea.selectionStart = textarea.value.length;
     textarea.selectionEnd = textarea.value.length;
 
-    // Testing keyboard events is tough!
-    const event = document.createEvent("Event");
-    event.initEvent("keydown", true, true);
-    event[`${PLATFORM_KEY_MODIFIER}Key`] = true;
-    event.key = "B";
-    event.keyCode = 66;
-
-    textarea.dispatchEvent(event);
-    await settled();
+    await triggerKeyEvent(textarea, "keydown", "B", metaModifier);
 
     const example = I18n.t(`composer.bold_text`);
     assert.strictEqual(
@@ -1373,12 +1365,10 @@ acceptance("Composer - current time", function (needs) {
 
     const date = moment().format("YYYY-MM-DD");
 
-    const eventOptions = {
+    await triggerKeyEvent(".d-editor-input", "keydown", ".", {
+      ...metaModifier,
       shiftKey: true,
-    };
-    eventOptions[`${PLATFORM_KEY_MODIFIER}Key`] = true;
-
-    await triggerKeyEvent(".d-editor-input", "keydown", ".", eventOptions);
+    });
 
     const inputValue = query("#reply-control .d-editor-input").value.trim();
 

app/assets/javascripts/discourse/tests/acceptance/fast-edit-test.js

@@ -1,5 +1,6 @@
 import {
   acceptance,
+  metaModifier,
   query,
   selectText,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -28,11 +29,9 @@ acceptance("Fast Edit", function (needs) {
     await click(".quote-button .quote-edit-label");
 
     assert.dom("#fast-edit-input").exists();
-    assert.strictEqual(
-      query("#fast-edit-input").value,
-      "Any plans",
-      "contains selected text"
-    );
+    assert
+      .dom("#fast-edit-input")
+      .hasValue("Any plans", "contains selected text");
 
     await fillIn("#fast-edit-input", "My edit");
     await click(".save-fast-edit");
@@ -49,16 +48,23 @@ acceptance("Fast Edit", function (needs) {
     await triggerKeyEvent(document, "keypress", "E");
 
     assert.dom("#fast-edit-input").exists();
-    assert.strictEqual(
-      query("#fast-edit-input").value,
-      "Any plans",
-      "contains selected text"
-    );
+    assert
+      .dom("#fast-edit-input")
+      .hasValue("Any plans", "contains selected text");
 
+    // Saving
     await fillIn("#fast-edit-input", "My edit");
-    await click(".save-fast-edit");
+    await triggerKeyEvent("#fast-edit-input", "keydown", "Enter", metaModifier);
 
     assert.dom("#fast-edit-input").doesNotExist();
+
+    // Closing
+    await selectText(textNode, 9);
+    await triggerKeyEvent(document, "keypress", "E");
+    assert.dom("#fast-edit-input").exists();
+
+    await triggerKeyEvent("#fast-edit-input", "keydown", "Escape");
+    assert.dom("#fast-edit-input").doesNotExist();
   });
 
   test("Opens full composer for multi-line selection", async function (assert) {

app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js

@@ -52,7 +52,10 @@ import {
 } from "discourse/lib/topic-list-tracker";
 import sinon from "sinon";
 import siteFixtures from "discourse/tests/fixtures/site-fixtures";
-import { clearExtraKeyboardShortcutHelp } from "discourse/lib/keyboard-shortcuts";
+import {
+  PLATFORM_KEY_MODIFIER,
+  clearExtraKeyboardShortcutHelp,
+} from "discourse/lib/keyboard-shortcuts";
 import { clearResolverOptions } from "discourse-common/resolver";
 import { clearNavItems } from "discourse/models/nav-item";
 import {
@@ -607,3 +610,5 @@ export function normalizeHtml(html) {
   resultElement.innerHTML = html;
   return resultElement.innerHTML;
 }
+
+export const metaModifier = { [`${PLATFORM_KEY_MODIFIER}Key`]: true };