Merge branch 'content-editor-links-input-rule' into 'master'

Add input rules for creating links in the Content Editor

See merge request gitlab-org/gitlab!63664

app/assets/javascripts/content_editor/extensions/link.js

+import { markInputRule } from '@tiptap/core';
 import { Link } from '@tiptap/extension-link';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-export const tiptapExtension = Link.configure({
+export const markdownLinkSyntaxInputRuleRegExp = /(?:^|\s)\[([\w|\s|-]+)\]\((?<href>.+?)\)$/gm;
+
+export const urlSyntaxRegExp = /(?:^|\s)(?<href>(?:https?:\/\/|www\.)[\S]+)(?:\s|\n)$/gim;
+
+const extractHrefFromMatch = (match) => {
+  return { href: match.groups.href };
+};
+
+export const extractHrefFromMarkdownLink = (match) => {
+  /**
+   * Removes the last capture group from the match to satisfy
+   * tiptap markInputRule expectation of having the content as
+   * the last capture group in the match.
+   *
+   * https://github.com/ueberdosis/tiptap/blob/%40tiptap/core%402.0.0-beta.75/packages/core/src/inputRules/markInputRule.ts#L11
+   */
+  match.pop();
+  return extractHrefFromMatch(match);
+};
+
+export const tiptapExtension = Link.extend({
+  addInputRules() {
+    return [
+      markInputRule(markdownLinkSyntaxInputRuleRegExp, this.type, extractHrefFromMarkdownLink),
+      markInputRule(urlSyntaxRegExp, this.type, extractHrefFromMatch),
+    ];
+  },
+}).configure({
   openOnClick: false,
 });
+
 export const serializer = defaultMarkdownSerializer.marks.link;

spec/frontend/content_editor/extensions/link_spec.js

+import {
+  markdownLinkSyntaxInputRuleRegExp,
+  urlSyntaxRegExp,
+  extractHrefFromMarkdownLink,
+} from '~/content_editor/extensions/link';
+
+describe('content_editor/extensions/link', () => {
+  describe.each`
+    input                             | matches
+    ${'[gitlab](https://gitlab.com)'} | ${true}
+    ${'[documentation](readme.md)'}   | ${true}
+    ${'[link 123](readme.md)'}        | ${true}
+    ${'[link 123](read me.md)'}       | ${true}
+    ${'text'}                         | ${false}
+    ${'documentation](readme.md'}     | ${false}
+    ${'https://www.google.com'}       | ${false}
+  `('markdownLinkSyntaxInputRuleRegExp', ({ input, matches }) => {
+    it(`${matches ? 'matches' : 'does not match'} ${input}`, () => {
+      const match = new RegExp(markdownLinkSyntaxInputRuleRegExp).exec(input);
+
+      expect(Boolean(match?.groups.href)).toBe(matches);
+    });
+  });
+
+  describe.each`
+    input                        | matches
+    ${'http://example.com '}     | ${true}
+    ${'https://example.com '}    | ${true}
+    ${'www.example.com '}        | ${true}
+    ${'example.com/ab.html '}    | ${false}
+    ${'text'}                    | ${false}
+    ${' http://example.com '}    | ${true}
+    ${'https://www.google.com '} | ${true}
+  `('urlSyntaxRegExp', ({ input, matches }) => {
+    it(`${matches ? 'matches' : 'does not match'} ${input}`, () => {
+      const match = new RegExp(urlSyntaxRegExp).exec(input);
+
+      expect(Boolean(match?.groups.href)).toBe(matches);
+    });
+  });
+
+  describe('extractHrefFromMarkdownLink', () => {
+    const input = '[gitlab](https://gitlab.com)';
+    const href = 'https://gitlab.com';
+    let match;
+    let result;
+
+    beforeEach(() => {
+      match = new RegExp(markdownLinkSyntaxInputRuleRegExp).exec(input);
+      result = extractHrefFromMarkdownLink(match);
+    });
+
+    it('extracts the url from a markdown link captured by markdownLinkSyntaxInputRuleRegExp', () => {
+      expect(result).toEqual({ href });
+    });
+
+    it('makes sure that url text is the last capture group', () => {
+      expect(match[match.length - 1]).toEqual('gitlab');
+    });
+  });
+});