FEATURE: Insert hyperlink on wizard composer

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

@@ -13,6 +13,7 @@ export default ComposerEditor.extend({
   classNameBindings: ["fieldClass"],
   allowUpload: true,
   showLink: false,
+  showHyperlinkBox: false,
   topic: null,
   showToolbar: true,
   focusTarget: "reply",
@@ -127,10 +128,27 @@ export default ComposerEditor.extend({
           sendAction: this.showUploadModal,
         });
       }
+
+      const component = this;
+      toolbar.addButton({
+        id: "link",
+        group: "insertions",
+        shortcut: "K",
+        trimLeading: true,
+        sendAction: (event) => component.set("showHyperlinkBox", true),
+      });
     },
     previewUpdated($preview) {
       highlightSyntax($preview[0], this.siteSettings, this.session);
       this._super(...arguments);
     },
+    addLink(linkName, linkUrl) {
+      let link = `[${linkName}](${linkUrl})`;
+      this.appEvents.trigger("composer:insert-text", link);
+      this.set("showHyperlinkBox", false);
+    },
+    hideBox() {
+      this.set("showHyperlinkBox", false);
+    },
   },
 });

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

@@ -0,0 +1,12 @@
+import Component from "@ember/component";
+
+export default Component.extend({
+  actions: {
+    addLink() {
+      this.addLink(this.linkName, this.linkUrl);
+    },
+    hideBox() {
+      this.hideBox();
+    },
+  },
+});

assets/javascripts/wizard/templates/components/wizard-composer-editor.hbs

@@ -16,3 +16,9 @@
   outletArgs=(hash composer=composer editorType="composer")}}
 
   {{input class="wizard-composer-upload hidden-upload-field" disabled=uploading type="file" multiple=true }}
+
+  {{#if showHyperlinkBox}}
+    {{wizard-composer-hyperlink
+      addLink=(action 'addLink')
+      hideBox=(action 'hideBox')}}
+  {{/if}}

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

@@ -0,0 +1,9 @@
+<h3>{{i18n "wizard_composer.insert_hyperlink.heading"}}</h3>
+{{input class="composer-link-name" placeholder=(i18n 'wizard_composer.insert_hyperlink.placeholder.link_name') type="text" value=linkName}}
+{{input class="composer-link-url" placeholder=(i18n 'wizard_composer.insert_hyperlink.placeholder.link_url') type="text" value=linkUrl}}
+{{d-button label="wizard_composer.insert_hyperlink.ok"
+           class="add-link"
+           click=(action 'addLink')}}
+{{d-button label="wizard_composer.insert_hyperlink.cancel"
+           class="hide-hyperlink-box"
+           click=(action 'hideBox')}}

assets/stylesheets/wizard/custom/composer.scss

@@ -187,3 +187,11 @@
 .wizard-composer-upload {
   display: none;
 }
+
+.composer-link-url, .composer-link-name {
+  display: block;
+}
+
+.hide-hyperlink-box, .add-link {
+  display: inline;
+}

config/locales/client.en.yml

@@ -455,3 +455,10 @@ en:
       yourself_confirm:
         title: "Did you forget to add recipients?"
         body: "Right now this message is only being sent to yourself!"
+      insert_hyperlink:
+        heading: "Insert Hyperlink"
+        ok: "Ok"
+        cancel: "Cancel"
+        placeholder:
+          link_name: "Link Text"
+          link_url: "Link Url"