Add latest changes from gitlab-org/gitlab@14-0-stable-eev14.0.0-rc42

3 files changed, 93 insertions, 5 deletions

diff --git a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
index ce8bd57c7e3..50d72f4089a 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -1,12 +1,20 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
+import * as lowlight from 'lowlight';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-const extractLanguage = (element) => element.firstElementChild?.getAttribute('lang');
+const extractLanguage = (element) => element.getAttribute('lang');
 
 const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
   addAttributes() {
     return {
-      ...this.parent(),
+      language: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            language: extractLanguage(element),
+          };
+        },
+      },
       /* `params` is the name of the attribute that
         prosemirror-markdown uses to extract the language
         of a codeblock.
@@ -19,8 +27,16 @@ const ExtendedCodeBlockLowlight = CodeBlockLowlight.extend({
           };
         },
       },
+      class: {
+        default: 'code highlight js-syntax-highlight',
+      },
     };
   },
+  renderHTML({ HTMLAttributes }) {
+    return ['pre', HTMLAttributes, ['code', {}, 0]];
+  },
+}).configure({
+  lowlight,
 });
 
 export const tiptapExtension = ExtendedCodeBlockLowlight;
diff --git a/app/assets/javascripts/content_editor/extensions/image.js b/app/assets/javascripts/content_editor/extensions/image.js
index 4f0109fd751..287216e68d5 100644
--- a/app/assets/javascripts/content_editor/extensions/image.js
+++ b/app/assets/javascripts/content_editor/extensions/image.js
@@ -2,8 +2,49 @@ import { Image } from '@tiptap/extension-image';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
 const ExtendedImage = Image.extend({
-  defaultOptions: { inline: true },
-});
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      src: {
+        default: null,
+        /*
+         * GitLab Flavored Markdown provides lazy loading for rendering images. As
+         * as result, the src attribute of the image may contain an embedded resource
+         * instead of the actual image URL. The image URL is moved to the data-src
+         * attribute.
+         */
+        parseHTML: (element) => {
+          const img = element.querySelector('img');
+
+          return {
+            src: img.dataset.src || img.getAttribute('src'),
+          };
+        },
+      },
+      alt: {
+        default: null,
+        parseHTML: (element) => {
+          const img = element.querySelector('img');
+
+          return {
+            alt: img.getAttribute('alt'),
+          };
+        },
+      },
+    };
+  },
+  parseHTML() {
+    return [
+      {
+        priority: 100,
+        tag: 'a.no-attachment-icon',
+      },
+      {
+        tag: 'img[src]',
+      },
+    ];
+  },
+}).configure({ inline: true });
 
 export const tiptapExtension = ExtendedImage;
 export const serializer = defaultMarkdownSerializer.nodes.image;
diff --git a/app/assets/javascripts/content_editor/extensions/link.js b/app/assets/javascripts/content_editor/extensions/link.js
index 9a2fa7a5c98..6f5f81cbf93 100644
--- a/app/assets/javascripts/content_editor/extensions/link.js
+++ b/app/assets/javascripts/content_editor/extensions/link.js
@@ -1,5 +1,36 @@
+import { markInputRule } from '@tiptap/core';
 import { Link } from '@tiptap/extension-link';
 import { defaultMarkdownSerializer } from 'prosemirror-markdown/src/to_markdown';
 
-export const tiptapExtension = Link;
+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;