Merge pull request #225 from paviliondev/fix-composer-hyperlink

FIX: Use discourse hyperlink modal in composer instead of custom

assets/javascripts/discourse/components/custom-wizard-composer-editor.js.es6

@@ -12,6 +12,7 @@ import { alias } from "@ember/object/computed";
 import Site from "discourse/models/site";
 import { uploadIcon } from "discourse/lib/uploads";
 import { dasherize } from "@ember/string";
+import showModal from "discourse/lib/show-modal";
 
 const IMAGE_MARKDOWN_REGEX = /!\[(.*?)\|(\d{1,4}x\d{1,4})(,\s*\d{1,3}%)?(.*?)\]\((upload:\/\/.*?)\)(?!(.*`))/g;
 
@@ -19,7 +20,6 @@ export default ComposerEditor.extend({
   classNameBindings: ["fieldClass"],
   allowUpload: true,
   showLink: false,
-  showHyperlinkBox: false,
   topic: null,
   showToolbar: true,
   focusTarget: "reply",
@@ -116,12 +116,6 @@ export default ComposerEditor.extend({
     return uploadIcon(false, this.siteSettings);
   },
 
-  click(e) {
-    if ($(e.target).hasClass("wizard-composer-hyperlink")) {
-      this.set("showHyperlinkBox", false);
-    }
-  },
-
   @bind
   _handleImageDeleteButtonClick(event) {
     if (!event.target.classList.contains("delete-image-button")) {
@@ -165,7 +159,7 @@ export default ComposerEditor.extend({
         shortcut: "K",
         trimLeading: true,
         unshift: true,
-        sendAction: () => component.set("showHyperlinkBox", true),
+        sendAction: (event) => component.send("showLinkModal", event),
       });
 
       if (this.siteSettings.mentionables_enabled) {
@@ -206,17 +200,18 @@ export default ComposerEditor.extend({
       this._super(...arguments);
     },
 
-    addLink(linkName, linkUrl) {
+    showLinkModal(toolbarEvent) {
-      let link = `[${linkName}](${linkUrl})`;
+      let linkText = "";
-      this.appEvents.trigger("wizard-editor:insert-text", {
+      this._lastSel = toolbarEvent.selected;
-        fieldId: this.field.id,
-        text: link,
-      });
-      this.set("showHyperlinkBox", false);
-    },
 
-    hideBox() {
+      if (this._lastSel) {
-      this.set("showHyperlinkBox", false);
+        linkText = this._lastSel.value;
+      }
+
+      showModal("insert-hyperlink").setProperties({
+        linkText,
+        toolbarEvent,
+      });
     },
 
     showUploadModal() {

assets/javascripts/discourse/components/custom-wizard-composer-hyperlink.js.es6

@@ -1,15 +0,0 @@
-import Component from "@ember/component";
-
-export default Component.extend({
-  classNames: ["wizard-composer-hyperlink"],
-
-  actions: {
-    addLink() {
-      this.addLink(this.linkName, this.linkUrl);
-    },
-
-    hideBox() {
-      this.hideBox();
-    },
-  },
-});

assets/javascripts/discourse/templates/components/custom-wizard-composer-hyperlink.hbs

@@ -1,21 +0,0 @@
-<div class="wizard-composer-hyperlink-contents">
-  <h3>{{i18n "composer.link_dialog_title"}}</h3>
-  {{input
-    class="composer-link-name"
-    placeholder=(i18n "composer.link_optional_text")
-    type="text"
-    value=linkName}}
-  {{input
-    class="composer-link-url"
-    placeholder=(i18n "composer.link_url_placeholder")
-    type="text"
-    value=linkUrl}}
-  {{d-button
-    label="wizard_composer.modal_ok"
-    class="add-link btn-primary"
-    click=(action "addLink")}}
-  {{d-button
-    label="wizard_composer.modal_cancel"
-    class="hide-hyperlink-box btn-danger"
-    click=(action "hideBox")}}
-</div>

test/javascripts/acceptance/field-test.js

@@ -54,6 +54,70 @@ acceptance("Field | Fields", function (needs) {
       "Input in composer"
     );
   });
+  test("Composer - Hyperlink", async function (assert) {
+    await visit("/w/wizard");
+    assert.ok(
+      visible(".wizard-field.composer-field .wizard-field-composer textarea")
+    );
+    assert.ok(
+      exists(".wizard-field.composer-field .d-editor-button-bar button")
+    );
+    assert.ok(visible(".wizard-btn.toggle-preview"));
+    await fillIn(
+      ".wizard-field.composer-field .wizard-field-composer textarea",
+      "This is a link to "
+    );
+    assert.ok(
+      !exists(".insert-link.modal-body"),
+      "no hyperlink modal by default"
+    );
+    await click(
+      ".wizard-field.composer-field .wizard-field-composer  .d-editor button.link"
+    );
+    assert.ok(exists(".insert-link.modal-body"), "hyperlink modal visible");
+
+    await fillIn(".modal-body .link-url", "google.com");
+    await fillIn(".modal-body .link-text", "Google");
+    await click(".modal-footer button.btn-primary");
+
+    assert.strictEqual(
+      query(".wizard-field.composer-field .wizard-field-composer textarea")
+        .value,
+      "This is a link to [Google](https://google.com)",
+      "adds link with url and text, prepends 'https://'"
+    );
+
+    assert.ok(
+      !exists(
+        ".wizard-field.composer-field .wizard-field-composer .insert-link.modal-body"
+      ),
+      "modal dismissed after submitting link"
+    );
+
+    await fillIn(
+      ".wizard-field.composer-field .wizard-field-composer textarea",
+      "Reset textarea contents."
+    );
+
+    await click(
+      ".wizard-field.composer-field .wizard-field-composer .d-editor button.link"
+    );
+    await fillIn(".modal-body .link-url", "google.com");
+    await fillIn(".modal-body .link-text", "Google");
+    await click(".modal-footer button.btn-danger");
+
+    assert.strictEqual(
+      query(".wizard-field.composer-field .wizard-field-composer textarea")
+        .value,
+      "Reset textarea contents.",
+      "does not insert anything after cancelling"
+    );
+
+    assert.ok(
+      !exists(".insert-link.modal-body"),
+      "modal dismissed after cancelling"
+    );
+  });
 
   test("Text Only", async function (assert) {
     await visit("/w/wizard");