Merge branch '54015-Markdown-Editor-improve-Cursor-placement' into 'master'

Refine cursor positioning in Markdown Editor for wrap tags.

Closes #54015

See merge request gitlab-org/gitlab-ce!23085

3 files changed, 38 insertions, 9 deletions

diff --git a/app/assets/javascripts/lib/utils/text_markdown.js b/app/assets/javascripts/lib/utils/text_markdown.js
index c52cfb806a2..3618c6af7e2 100644
--- a/app/assets/javascripts/lib/utils/text_markdown.js
+++ b/app/assets/javascripts/lib/utils/text_markdown.js
@@ -39,7 +39,7 @@ function blockTagText(text, textArea, blockTag, selected) {
   }
 }
 
-function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
+function moveCursor({ textArea, tag, positionBetweenTags, removedLastNewLine, select }) {
   var pos;
   if (!textArea.setSelectionRange) {
     return;
@@ -51,7 +51,7 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
     return textArea.setSelectionRange(startPosition, endPosition);
   }
   if (textArea.selectionStart === textArea.selectionEnd) {
-    if (wrapped) {
+    if (positionBetweenTags) {
       pos = textArea.selectionStart - tag.length;
     } else {
       pos = textArea.selectionStart;
@@ -67,7 +67,6 @@ function moveCursor({ textArea, tag, wrapped, removedLastNewLine, select }) {
 
 export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select }) {
   var textToInsert,
-    inserted,
     selectedSplit,
     startChar,
     removedLastNewLine,
@@ -155,7 +154,7 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
   return moveCursor({
     textArea,
     tag: tag.replace(textPlaceholder, selected),
-    wrap,
+    positionBetweenTags: wrap && selected.length === 0,
     removedLastNewLine,
     select,
   });
@@ -171,10 +170,6 @@ function updateText({ textArea, tag, blockTag, wrap, select }) {
   return insertMarkdownText({ textArea, text, tag, blockTag, selected, wrap, select });
 }
 
-function replaceRange(s, start, end, substitute) {
-  return s.substring(0, start) + substitute + s.substring(end);
-}
-
 export function addMarkdownListeners(form) {
   return $('.js-md', form)
     .off('click')
diff --git a/changelogs/unreleased/54015-Markdown-Editor-improve-Cursor-placement.yml b/changelogs/unreleased/54015-Markdown-Editor-improve-Cursor-placement.yml
new file mode 100644
index 00000000000..28e3fae01a9
--- /dev/null
+++ b/changelogs/unreleased/54015-Markdown-Editor-improve-Cursor-placement.yml
@@ -0,0 +1,5 @@
+---
+title: Refine cursor positioning in Markdown Editor for wrap tags
+merge_request: 23085
+author: Johann Hubert Sonntagbauer
+type: changed
diff --git a/spec/javascripts/lib/utils/text_markdown_spec.js b/spec/javascripts/lib/utils/text_markdown_spec.js
index b9e805628f8..f71d27eb4e4 100644
--- a/spec/javascripts/lib/utils/text_markdown_spec.js
+++ b/spec/javascripts/lib/utils/text_markdown_spec.js
@@ -86,6 +86,29 @@ describe('init markdown', () => {
 
       expect(textArea.value).toEqual(`${initialValue}* `);
     });
+
+    it('places the cursor inside the tags', () => {
+      const start = 'lorem ';
+      const end = ' ipsum';
+      const tag = '*';
+
+      textArea.value = `${start}${end}`;
+      textArea.setSelectionRange(start.length, start.length);
+
+      insertMarkdownText({
+        textArea,
+        text: textArea.value,
+        tag,
+        blockTag: null,
+        selected: '',
+        wrap: true,
+      });
+
+      expect(textArea.value).toEqual(`${start}**${end}`);
+
+      // cursor placement should be between tags
+      expect(textArea.selectionStart).toBe(start.length + tag.length);
+    });
   });
 
   describe('with selection', () => {
@@ -98,16 +121,22 @@ describe('init markdown', () => {
     });
 
     it('applies the tag to the selected value', () => {
+      const selectedIndex = text.indexOf(selected);
+      const tag = '*';
+
       insertMarkdownText({
         textArea,
         text: textArea.value,
-        tag: '*',
+        tag,
         blockTag: null,
         selected,
         wrap: true,
       });
 
       expect(textArea.value).toEqual(text.replace(selected, `*${selected}*`));
+
+      // cursor placement should be after selection + 2 tag lengths
+      expect(textArea.selectionStart).toBe(selectedIndex + selected.length + 2 * tag.length);
     });
 
     it('replaces the placeholder in the tag', () => {