Merge branch 'empty-selection-reply-shortcut' into 'master'

Change the reply shortcut to focus the field even without a selection.

See merge request !8873

app/assets/javascripts/lib/utils/common_utils.js.es6

@@ -162,6 +162,7 @@
 
     w.gl.utils.getSelectedFragment = () => {
       const selection = window.getSelection();
+      if (selection.rangeCount === 0) return null;
       const documentFragment = selection.getRangeAt(0).cloneContents();
       if (documentFragment.textContent.length === 0) return null;
 

app/assets/javascripts/shortcuts_issuable.js

@@ -39,17 +39,20 @@
     }
 
     ShortcutsIssuable.prototype.replyWithSelectedText = function() {
-      var quote, replyField, documentFragment, selected, separator;
+      var quote, documentFragment, selected, separator;
+      var replyField = $('.js-main-target-form #note_note');
 
       documentFragment = window.gl.utils.getSelectedFragment();
-      if (!documentFragment) return;
+      if (!documentFragment) {
+        replyField.focus();
+        return;
+      }
 
       // If the documentFragment contains more than just Markdown, don't copy as GFM.
       if (documentFragment.querySelector('.md, .wiki')) return;
 
       selected = window.gl.CopyAsGFM.nodeToGFM(documentFragment);
 
-      replyField = $('.js-main-target-form #note_note');
       if (selected.trim() === "") {
         return;
       }

changelogs/unreleased/empty-selection-reply-shortcut.yml

+---
+title: Change the reply shortcut to focus the field even without a selection.
+merge_request: 8873
+author: Brian Hall

spec/javascripts/shortcuts_issuable_spec.js

@@ -11,9 +11,9 @@
     beforeEach(function() {
       loadFixtures(fixtureName);
       document.querySelector('.js-new-note-form').classList.add('js-main-target-form');
-      return this.shortcut = new ShortcutsIssuable();
+      this.shortcut = new ShortcutsIssuable();
     });
-    return describe('#replyWithSelectedText', function() {
+    describe('#replyWithSelectedText', function() {
       var stubSelection;
       // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML.
       stubSelection = function(html) {
@@ -24,56 +24,61 @@
         };
       };
       beforeEach(function() {
-        return this.selector = 'form.js-main-target-form textarea#note_note';
+        this.selector = 'form.js-main-target-form textarea#note_note';
       });
       describe('with empty selection', function() {
-        return it('does nothing', function() {
-          stubSelection('');
+        it('does not return an error', function() {
           this.shortcut.replyWithSelectedText();
-          return expect($(this.selector).val()).toBe('');
+          expect($(this.selector).val()).toBe('');
+        });
+        it('triggers `input`', function() {
+          var focused = false;
+          $(this.selector).on('focus', function() {
+            focused = true;
+          });
+          this.shortcut.replyWithSelectedText();
+          expect(focused).toBe(true);
         });
       });
       describe('with any selection', function() {
         beforeEach(function() {
-          return stubSelection('<p>Selected text.</p>');
+          stubSelection('<p>Selected text.</p>');
         });
         it('leaves existing input intact', function() {
           $(this.selector).val('This text was already here.');
           expect($(this.selector).val()).toBe('This text was already here.');
           this.shortcut.replyWithSelectedText();
-          return expect($(this.selector).val()).toBe("This text was already here.\n\n> Selected text.\n\n");
+          expect($(this.selector).val()).toBe("This text was already here.\n\n> Selected text.\n\n");
         });
         it('triggers `input`', function() {
-          var triggered;
-          triggered = false;
+          var triggered = false;
           $(this.selector).on('input', function() {
-            return triggered = true;
+            triggered = true;
           });
           this.shortcut.replyWithSelectedText();
-          return expect(triggered).toBe(true);
+          expect(triggered).toBe(true);
         });
-        return it('triggers `focus`', function() {
-          var focused;
-          focused = false;
+        it('triggers `focus`', function() {
+          var focused = false;
           $(this.selector).on('focus', function() {
-            return focused = true;
+            focused = true;
           });
           this.shortcut.replyWithSelectedText();
-          return expect(focused).toBe(true);
+          expect(focused).toBe(true);
         });
       });
       describe('with a one-line selection', function() {
-        return it('quotes the selection', function() {
+        it('quotes the selection', function() {
           stubSelection('<p>This text has been selected.</p>');
           this.shortcut.replyWithSelectedText();
-          return expect($(this.selector).val()).toBe("> This text has been selected.\n\n");
+          expect($(this.selector).val()).toBe("> This text has been selected.\n\n");
         });
       });
-      return describe('with a multi-line selection', function() {
-        return it('quotes the selected lines as a group', function() {
+      describe('with a multi-line selection', function() {
+        it('quotes the selected lines as a group', function() {
           stubSelection("<p>Selected line one.</p>\n\n<p>Selected line two.</p>\n\n<p>Selected line three.</p>");
           this.shortcut.replyWithSelectedText();
-          return expect($(this.selector).val()).toBe("> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n");
+          expect($(this.selector).val()).toBe("> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n");
         });
       });
     });