Merge branch '27978-improve-task-list-ux' into 'master'

Only add a newline in Markdown Editor if the current line is not empty

Closes #27978

See merge request !9455

Former-commit-id: b01a78dc

app/assets/javascripts/lib/utils/text_utility.js

@@ -65,9 +65,10 @@ require('vendor/latinise');
       }
     };
     gl.text.insertText = function(textArea, text, tag, blockTag, selected, wrap) {
-      var insertText, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine;
+      var insertText, inserted, selectedSplit, startChar, removedLastNewLine, removedFirstNewLine, currentLineEmpty, lastNewLine;
       removedLastNewLine = false;
       removedFirstNewLine = false;
+      currentLineEmpty = false;
       // Remove the first newline
       if (selected.indexOf('\n') === 0) {
@@ -82,7 +83,17 @@ require('vendor/latinise');
       }
       selectedSplit = selected.split('\n');
-      startChar = !wrap && textArea.selectionStart > 0 ? '\n' : '';
+
+      if (!wrap) {
+        lastNewLine = textArea.value.substr(0, textArea.selectionStart).lastIndexOf('\n');
+
+        // Check whether the current line is empty or consists only of spaces(=handle as empty)
+        if (/^\s*$/.test(textArea.value.substring(lastNewLine, textArea.selectionStart))) {
+          currentLineEmpty = true;
+        }
+      }
+
+      startChar = !wrap && !currentLineEmpty && textArea.selectionStart > 0 ? '\n' : '';
       if (selectedSplit.length > 1 && (!wrap || (blockTag != null))) {
         if (blockTag != null) {
@@ -142,9 +153,8 @@ require('vendor/latinise');
       }
     };
     gl.text.updateText = function(textArea, tag, blockTag, wrap) {
-      var $textArea, oldVal, selected, text;
+      var $textArea, selected, text;
       $textArea = $(textArea);
-      oldVal = $textArea.val();
       textArea = $textArea.get(0);
       text = $textArea.val();
       selected = this.selectedText(text, textArea);

changelogs/unreleased/27978-improve-task-list-ux.yml

+---
+title: Only add a newline in the Markdown Editor if the current line is not empty
+merge_request: 9455
+author: Jan Christophersen

spec/javascripts/lib/utils/text_utility_spec.js.es6

@@ -46,5 +46,65 @@ require('~/lib/utils/text_utility');
         expect(gl.text.highCountTrim(45)).toBe(45);
       });
     });
+
+    describe('gl.text.insertText', () => {
+      let textArea;
+
+      beforeAll(() => {
+        textArea = document.createElement('textarea');
+        document.querySelector('body').appendChild(textArea);
+      });
+
+      afterAll(() => {
+        textArea.parentNode.removeChild(textArea);
+      });
+
+      describe('without selection', () => {
+        it('inserts the tag on an empty line', () => {
+          const initialValue = '';
+
+          textArea.value = initialValue;
+          textArea.selectionStart = 0;
+          textArea.selectionEnd = 0;
+
+          gl.text.insertText(textArea, textArea.value, '*', null, '', false);
+
+          expect(textArea.value).toEqual(`${initialValue}* `);
+        });
+
+        it('inserts the tag on a new line if the current one is not empty', () => {
+          const initialValue = 'some text';
+
+          textArea.value = initialValue;
+          textArea.setSelectionRange(initialValue.length, initialValue.length);
+
+          gl.text.insertText(textArea, textArea.value, '*', null, '', false);
+
+          expect(textArea.value).toEqual(`${initialValue}\n* `);
+        });
+
+        it('inserts the tag on the same line if the current line only contains spaces', () => {
+          const initialValue = '  ';
+
+          textArea.value = initialValue;
+          textArea.setSelectionRange(initialValue.length, initialValue.length);
+
+          gl.text.insertText(textArea, textArea.value, '*', null, '', false);
+
+          expect(textArea.value).toEqual(`${initialValue}* `);
+        });
+
+        it('inserts the tag on the same line if the current line only contains tabs', () => {
+          const initialValue = '\t\t\t';
+
+          textArea.value = initialValue;
+          textArea.setSelectionRange(initialValue.length, initialValue.length);
+
+          gl.text.insertText(textArea, textArea.value, '*', null, '', false);
+
+          expect(textArea.value).toEqual(`${initialValue}* `);
+        });
+      });
+    });
   });
 })();