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>

plugin.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 # name: discourse-custom-wizard
 # about: Forms for Discourse. Better onboarding, structured posting, data enrichment, automated actions and much more.
-# version: 2.2.4
+# version: 2.2.5
 # authors: Angus McLeod, Faizaan Gagan, Robert Barrow, Keegan George, Kaitlin Maddever
 # url: https://github.com/paviliondev/discourse-custom-wizard
 # contact_emails: development@pavilion.tech