Link button in markdown editor recognize URLs

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

@@ -2,6 +2,8 @@
 import $ from 'jquery';
 import { insertText } from '~/lib/utils/common_utils';
 
+const LINK_TAG_PATTERN = '[{text}](url)';
+
 function selectedText(text, textarea) {
   return text.substring(textarea.selectionStart, textarea.selectionEnd);
 }
@@ -76,6 +78,21 @@ export function insertMarkdownText({ textArea, text, tag, blockTag, selected, wr
   removedFirstNewLine = false;
   currentLineEmpty = false;
 
+  // check for link pattern and selected text is an URL
+  // if so fill in the url part instead of the text part of the pattern.
+  if (tag === LINK_TAG_PATTERN) {
+    if (URL) {
+      try {
+        const ignoredUrl = new URL(selected);
+        // valid url
+        tag = '[text]({text})';
+        select = 'text';
+      } catch (e) {
+        // ignore - no valid url
+      }
+    }
+  }
+
   // Remove the first newline
   if (selected.indexOf('\n') === 0) {
     removedFirstNewLine = true;

changelogs/unreleased/52115-Link-button-in-markdown-editor-should-recognize-URLs.yml

+---
+title: Link button in markdown editor recognize URLs
+merge_request: 1983
+author: Johann Hubert Sonntagbauer
+type: changed

spec/javascripts/lib/utils/text_markdown_spec.js

@@ -166,6 +166,33 @@ describe('init markdown', () => {
         expect(textArea.selectionStart).toEqual(expectedText.lastIndexOf(select));
         expect(textArea.selectionEnd).toEqual(expectedText.lastIndexOf(select) + select.length);
       });
+
+      it('should support selected urls', () => {
+        const expectedUrl = 'http://www.gitlab.com';
+        const expectedSelectionText = 'text';
+        const expectedText = `text [${expectedSelectionText}](${expectedUrl}) text`;
+        const initialValue = `text ${expectedUrl} text`;
+
+        textArea.value = initialValue;
+        const selectedIndex = initialValue.indexOf(expectedUrl);
+        textArea.setSelectionRange(selectedIndex, selectedIndex + expectedUrl.length);
+
+        insertMarkdownText({
+          textArea,
+          text: textArea.value,
+          tag,
+          blockTag: null,
+          selected: expectedUrl,
+          wrap: false,
+          select,
+        });
+
+        expect(textArea.value).toEqual(expectedText);
+        expect(textArea.selectionStart).toEqual(expectedText.indexOf(expectedSelectionText, 1));
+        expect(textArea.selectionEnd).toEqual(
+          expectedText.indexOf(expectedSelectionText, 1) + expectedSelectionText.length,
+        );
+      });
     });
   });
 });