UX: Use separate input fields for link and description in d-editor

app/assets/javascripts/discourse/components/d-editor-modal.js.es6

@@ -15,7 +15,7 @@ export default Ember.Component.extend({
         const offset = (w / 2) - ($modal.outerWidth() / 2);
         $modal.css(dir, offset + 'px');
         parent.$('.d-editor-overlay').removeClass('hidden').css({ width: w, height: h});
-        this.$('input').focus();
+        this.$('input:eq(0)').focus();
       });
     } else {
       parent.$('.d-editor-overlay').addClass('hidden');

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -193,7 +193,8 @@ export default Ember.Component.extend({
   ready: false,
   forcePreview: false,
   insertLinkHidden: true,
-  link: '',
+  linkUrl: '',
+  linkText: '',
   lastSel: null,
   _mouseTrap: null,
 
@@ -523,34 +524,27 @@ export default Ember.Component.extend({
     },
 
     insertLink() {
-      const link = this.get('link');
+      const origLink = this.get('linkUrl');
+      const linkUrl = (origLink.indexOf('://') === -1) ? `http://${origLink}` : origLink;
       const sel = this._lastSel;
 
-      const autoHttp = function(l){
-        if (l.indexOf("://") === -1) {
-          return "http://" + l;
-        } else {
-          return l;
-        }
-      };
 
-      if (Ember.isEmpty(link)) { return; }
+      if (Ember.isEmpty(linkUrl)) { return; }
-      const m = / "([^"]+)"/.exec(link);
+
-      if (m && m.length === 2) {
+      const linkText = this.get('linkText') || '';
-        const description = m[1];
+      if (linkText.length) {
-        const remaining = link.replace(m[0], '');
+        this._addText(sel, `[${linkText}](${linkUrl})`);
-        this._addText(sel, `[${description}](${autoHttp(remaining)})`);
       } else {
         if (sel.value) {
-          this._addText(sel, `[${sel.value}](${autoHttp(link)})`);
+          this._addText(sel, `[${sel.value}](${linkUrl})`);
         } else {
-          const desc = I18n.t('composer.link_description');
+          this._addText(sel, `[${origLink}](${linkUrl})`);
-          this._addText(sel, `[${desc}](${autoHttp(link)})`);
+          this._selectText(sel.start + 1, origLink.length);
-          this._selectText(sel.start + 1, desc.length);
         }
       }
 
-      this.set('link', '');
+      this.set('linkUrl', '');
+      this.set('linkText', '');
     },
 
     emoji() {

app/assets/javascripts/discourse/templates/components/d-editor.hbs

@@ -2,7 +2,8 @@
 <div class='d-editor-modals'>
   {{#d-editor-modal class="insert-link" hidden=insertLinkHidden okAction="insertLink"}}
     <h3>{{i18n "composer.link_dialog_title"}}</h3>
-    {{text-field value=link placeholderKey="composer.link_placeholder"}}
+    {{text-field value=linkUrl placeholderKey="composer.link_url_placeholder" class="link-url"}}
+    {{text-field value=linkText placeholderKey="composer.link_optional_text" class="link-text"}}
   {{/d-editor-modal}}
 </div>
 

app/assets/stylesheets/common/d-editor.scss

@@ -24,7 +24,7 @@
   background-color: $secondary;
   border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
   padding: 1em;
-  top: 50px;
+  top: 25px;
 
   input {
     width: 98%;

config/locales/client.en.yml

@@ -1004,7 +1004,7 @@ en:
       link_description: "enter link description here"
       link_dialog_title: "Insert Hyperlink"
       link_optional_text: "optional title"
-      link_placeholder: "http://example.com \"optional text\""
+      link_url_placeholder: "http://example.com"
       quote_title: "Blockquote"
       quote_text: "Blockquote"
       code_title: "Preformatted text"

test/javascripts/components/d-editor-test.js.es6

@@ -208,24 +208,25 @@ testCase('link modal (cancel)', function(assert) {
 
 testCase('link modal (simple link)', function(assert, textarea) {
   click('button.link');
-  fillIn('.insert-link input', 'http://eviltrout.com');
+
+  const url = 'http://eviltrout.com';
+
+  fillIn('.insert-link input.link-url', url);
   click('.insert-link button.btn-primary');
-  const desc = I18n.t('composer.link_description');
   andThen(() => {
     assert.equal(this.$('.insert-link.hidden').length, 1);
-    assert.equal(this.get('value'), `hello world.[${desc}](http://eviltrout.com)`);
+    assert.equal(this.get('value'), `hello world.[${url}](${url})`);
     assert.equal(textarea.selectionStart, 13);
-    assert.equal(textarea.selectionEnd, 13 + desc.length);
+    assert.equal(textarea.selectionEnd, 13 + url.length);
   });
 });
 
 testCase('link modal auto http addition', function(assert) {
   click('button.link');
-  fillIn('.insert-link input', 'sam.com');
+  fillIn('.insert-link input.link-url', 'sam.com');
   click('.insert-link button.btn-primary');
-  const desc = I18n.t('composer.link_description');
   andThen(() => {
-    assert.equal(this.get('value'), `hello world.[${desc}](http://sam.com)`);
+    assert.equal(this.get('value'), `hello world.[sam.com](http://sam.com)`);
   });
 });
 
@@ -234,7 +235,7 @@ testCase('link modal (simple link) with selected text', function(assert, textare
   textarea.selectionEnd = 12;
 
   click('button.link');
-  fillIn('.insert-link input', 'http://eviltrout.com');
+  fillIn('.insert-link input.link-url', 'http://eviltrout.com');
   click('.insert-link button.btn-primary');
   andThen(() => {
     assert.equal(this.$('.insert-link.hidden').length, 1);
@@ -244,7 +245,8 @@ testCase('link modal (simple link) with selected text', function(assert, textare
 
 testCase('link modal (link with description)', function(assert) {
   click('button.link');
-  fillIn('.insert-link input', 'http://eviltrout.com "evil trout"');
+  fillIn('.insert-link input.link-url', 'http://eviltrout.com');
+  fillIn('.insert-link input.link-text', 'evil trout');
   click('.insert-link button.btn-primary');
   andThen(() => {
     assert.equal(this.$('.insert-link.hidden').length, 1);