Add latest changes from gitlab-org/gitlab@15-0-stable-eev15.0.0-rc42

8 files changed, 79 insertions, 28 deletions

diff --git a/app/assets/javascripts/content_editor/extensions/blockquote.js b/app/assets/javascripts/content_editor/extensions/blockquote.js
index 5632bc28592..9b424ac8367 100644
--- a/app/assets/javascripts/content_editor/extensions/blockquote.js
+++ b/app/assets/javascripts/content_editor/extensions/blockquote.js
@@ -26,7 +26,7 @@ export default Blockquote.extend({
     const multilineInputRegex = /^\s*>>>\s$/gm;
 
     return [
-      ...this.parent?.(),
+      ...this.parent(),
       wrappingInputRule({
         find: multilineInputRegex,
         type: this.type,
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 61f379fc0a2..cc4ba84a29d 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -1,6 +1,8 @@
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
 import { textblockTypeInputRule } from '@tiptap/core';
-import codeBlockLanguageLoader from '../services/code_block_language_loader';
+import { VueNodeViewRenderer } from '@tiptap/vue-2';
+import languageLoader from '../services/code_block_language_loader';
+import CodeBlockWrapper from '../components/wrappers/code_block.vue';
 
 const extractLanguage = (element) => element.getAttribute('lang');
 export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
@@ -9,14 +11,6 @@ export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
 export default CodeBlockLowlight.extend({
   isolating: true,
   exitOnArrowDown: false,
-
-  addOptions() {
-    return {
-      ...this.parent?.(),
-      languageLoader: codeBlockLanguageLoader,
-    };
-  },
-
   addAttributes() {
     return {
       language: {
@@ -30,7 +24,6 @@ export default CodeBlockLowlight.extend({
     };
   },
   addInputRules() {
-    const { languageLoader } = this.options;
     const getAttributes = (match) => languageLoader?.loadLanguageFromInputRule(match) || {};
 
     return [
@@ -65,4 +58,8 @@ export default CodeBlockLowlight.extend({
       ['code', {}, 0],
     ];
   },
+
+  addNodeView() {
+    return new VueNodeViewRenderer(CodeBlockWrapper);
+  },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/diagram.js b/app/assets/javascripts/content_editor/extensions/diagram.js
index d192b815092..f9dfeb92e9a 100644
--- a/app/assets/javascripts/content_editor/extensions/diagram.js
+++ b/app/assets/javascripts/content_editor/extensions/diagram.js
@@ -14,6 +14,9 @@ export default CodeBlockHighlight.extend({
           return element.dataset.diagram;
         },
       },
+      isDiagram: {
+        default: true,
+      },
     };
   },
 
diff --git a/app/assets/javascripts/content_editor/extensions/frontmatter.js b/app/assets/javascripts/content_editor/extensions/frontmatter.js
index 9842027e192..2ec22158106 100644
--- a/app/assets/javascripts/content_editor/extensions/frontmatter.js
+++ b/app/assets/javascripts/content_editor/extensions/frontmatter.js
@@ -1,10 +1,18 @@
-import { VueNodeViewRenderer } from '@tiptap/vue-2';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
-import FrontmatterWrapper from '../components/wrappers/frontmatter.vue';
 import CodeBlockHighlight from './code_block_highlight';
 
 export default CodeBlockHighlight.extend({
   name: 'frontmatter',
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      isFrontmatter: {
+        default: true,
+      },
+    };
+  },
+
   parseHTML() {
     return [
       {
@@ -24,9 +32,6 @@ export default CodeBlockHighlight.extend({
       },
     };
   },
-  addNodeView() {
-    return new VueNodeViewRenderer(FrontmatterWrapper);
-  },
 
   addInputRules() {
     return [];
diff --git a/app/assets/javascripts/content_editor/extensions/image.js b/app/assets/javascripts/content_editor/extensions/image.js
index 311db8151cb..25f976f524f 100644
--- a/app/assets/javascripts/content_editor/extensions/image.js
+++ b/app/assets/javascripts/content_editor/extensions/image.js
@@ -1,6 +1,4 @@
 import { Image } from '@tiptap/extension-image';
-import { VueNodeViewRenderer } from '@tiptap/vue-2';
-import MediaWrapper from '../components/wrappers/media.vue';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
 const resolveImageEl = (element) =>
@@ -77,7 +75,4 @@ export default Image.extend({
       },
     ];
   },
-  addNodeView() {
-    return VueNodeViewRenderer(MediaWrapper);
-  },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/paste_markdown.js b/app/assets/javascripts/content_editor/extensions/paste_markdown.js
index c349aa42a62..f87e4d8d1dd 100644
--- a/app/assets/javascripts/content_editor/extensions/paste_markdown.js
+++ b/app/assets/javascripts/content_editor/extensions/paste_markdown.js
@@ -2,7 +2,7 @@ import { Extension } from '@tiptap/core';
 import { Plugin, PluginKey } from 'prosemirror-state';
 import { __ } from '~/locale';
 import { VARIANT_DANGER } from '~/flash';
-import createMarkdownDeserializer from '../services/markdown_deserializer';
+import createMarkdownDeserializer from '../services/gl_api_markdown_deserializer';
 import {
   ALERT_EVENT,
   LOADING_CONTENT_EVENT,
@@ -10,10 +10,14 @@ import {
   LOADING_ERROR_EVENT,
   EXTENSION_PRIORITY_HIGHEST,
 } from '../constants';
+import CodeBlockHighlight from './code_block_highlight';
+import Diagram from './diagram';
+import Frontmatter from './frontmatter';
 
 const TEXT_FORMAT = 'text/plain';
 const HTML_FORMAT = 'text/html';
 const VS_CODE_FORMAT = 'vscode-editor-data';
+const CODE_BLOCK_NODE_TYPES = [CodeBlockHighlight.name, Diagram.name, Frontmatter.name];
 
 export default Extension.create({
   name: 'pasteMarkdown',
@@ -75,6 +79,11 @@ export default Extension.create({
               return false;
             }
 
+            // if a code block is active, paste as plain text
+            if (CODE_BLOCK_NODE_TYPES.some((type) => this.editor.isActive(type))) {
+              return false;
+            }
+
             this.editor.commands.pasteMarkdown(content);
 
             return true;
diff --git a/app/assets/javascripts/content_editor/extensions/playable.js b/app/assets/javascripts/content_editor/extensions/playable.js
index 2c5269377c5..ed343d8acf8 100644
--- a/app/assets/javascripts/content_editor/extensions/playable.js
+++ b/app/assets/javascripts/content_editor/extensions/playable.js
@@ -1,8 +1,6 @@
 /* eslint-disable @gitlab/require-i18n-strings */
 
 import { Node } from '@tiptap/core';
-import { VueNodeViewRenderer } from '@tiptap/vue-2';
-import MediaWrapper from '../components/wrappers/media.vue';
 
 const queryPlayableElement = (element, mediaType) => element.querySelector(mediaType);
 
@@ -68,8 +66,4 @@ export default Node.create({
       ['a', { href: node.attrs.src }, node.attrs.title || node.attrs.alt || ''],
     ];
   },
-
-  addNodeView() {
-    return VueNodeViewRenderer(MediaWrapper);
-  },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/sourcemap.js b/app/assets/javascripts/content_editor/extensions/sourcemap.js
new file mode 100644
index 00000000000..94236e2e70e
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/sourcemap.js
@@ -0,0 +1,48 @@
+import { Extension } from '@tiptap/core';
+import Blockquote from './blockquote';
+import Bold from './bold';
+import BulletList from './bullet_list';
+import Code from './code';
+import CodeBlockHighlight from './code_block_highlight';
+import Heading from './heading';
+import HardBreak from './hard_break';
+import HorizontalRule from './horizontal_rule';
+import Image from './image';
+import Italic from './italic';
+import Link from './link';
+import ListItem from './list_item';
+import OrderedList from './ordered_list';
+import Paragraph from './paragraph';
+
+export default Extension.create({
+  addGlobalAttributes() {
+    return [
+      {
+        types: [
+          Bold.name,
+          Blockquote.name,
+          BulletList.name,
+          Code.name,
+          CodeBlockHighlight.name,
+          HardBreak.name,
+          Heading.name,
+          HorizontalRule.name,
+          Image.name,
+          Italic.name,
+          Link.name,
+          ListItem.name,
+          OrderedList.name,
+          Paragraph.name,
+        ],
+        attributes: {
+          sourceMarkdown: {
+            default: null,
+          },
+          sourceMapKey: {
+            default: null,
+          },
+        },
+      },
+    ];
+  },
+});