Add latest changes from gitlab-org/gitlab@15-1-stable-eev15.1.0-rc42

6 files changed, 77 insertions, 13 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 cc4ba84a29d..61f6a233694 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -4,7 +4,8 @@ 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');
+const extractLanguage = (element) => element.dataset.canonicalLang ?? element.getAttribute('lang');
+
 export const backtickInputRegex = /^```([a-z]+)?[\s\n]$/;
 export const tildeInputRegex = /^~~~([a-z]+)?[\s\n]$/;
 
diff --git a/app/assets/javascripts/content_editor/extensions/diagram.js b/app/assets/javascripts/content_editor/extensions/diagram.js
index f9dfeb92e9a..c59ca8a28b8 100644
--- a/app/assets/javascripts/content_editor/extensions/diagram.js
+++ b/app/assets/javascripts/content_editor/extensions/diagram.js
@@ -1,6 +1,10 @@
+import { textblockTypeInputRule } from '@tiptap/core';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
+import languageLoader from '../services/code_block_language_loader';
 import CodeBlockHighlight from './code_block_highlight';
 
+const backtickInputRegex = /^```(mermaid|plantuml)[\s\n]$/;
+
 export default CodeBlockHighlight.extend({
   name: 'diagram',
 
@@ -17,6 +21,9 @@ export default CodeBlockHighlight.extend({
       isDiagram: {
         default: true,
       },
+      showPreview: {
+        default: true,
+      },
     };
   },
 
@@ -24,6 +31,11 @@ export default CodeBlockHighlight.extend({
     return [
       {
         priority: PARSE_HTML_PRIORITY_HIGHEST,
+        tag: 'pre[lang="mermaid"]',
+        getAttrs: () => ({ language: 'mermaid' }),
+      },
+      {
+        priority: PARSE_HTML_PRIORITY_HIGHEST,
         tag: '[data-diagram]',
         getContent(element, schema) {
           const source = atob(element.dataset.diagramSrc.replace('data:text/plain;base64,', ''));
@@ -54,6 +66,14 @@ export default CodeBlockHighlight.extend({
   },
 
   addInputRules() {
-    return [];
+    const getAttributes = (match) => languageLoader?.loadLanguageFromInputRule(match) || {};
+
+    return [
+      textblockTypeInputRule({
+        find: backtickInputRegex,
+        type: this.type,
+        getAttributes,
+      }),
+    ];
   },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/footnote_definition.js b/app/assets/javascripts/content_editor/extensions/footnote_definition.js
index dbab0de3421..bf752918934 100644
--- a/app/assets/javascripts/content_editor/extensions/footnote_definition.js
+++ b/app/assets/javascripts/content_editor/extensions/footnote_definition.js
@@ -1,12 +1,27 @@
 import { mergeAttributes, Node } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-2';
+import FootnoteDefinitionWrapper from '../components/wrappers/footnote_definition.vue';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
+const extractFootnoteIdentifier = (idAttribute) => /^fn-(\w+)-\d+$/.exec(idAttribute)?.[1];
+
 export default Node.create({
   name: 'footnoteDefinition',
-
   content: 'paragraph',
-
   group: 'block',
+  isolating: true,
+  addAttributes() {
+    return {
+      identifier: {
+        default: null,
+        parseHTML: (element) => extractFootnoteIdentifier(element.getAttribute('id')),
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => extractFootnoteIdentifier(element.getAttribute('id')),
+      },
+    };
+  },
 
   parseHTML() {
     return [
@@ -15,7 +30,11 @@ export default Node.create({
     ];
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ['li', mergeAttributes(HTMLAttributes), 0];
+  renderHTML({ label, ...HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addNodeView() {
+    return new VueNodeViewRenderer(FootnoteDefinitionWrapper);
   },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/footnote_reference.js b/app/assets/javascripts/content_editor/extensions/footnote_reference.js
index 1ac8016f774..ae5b8edc7af 100644
--- a/app/assets/javascripts/content_editor/extensions/footnote_reference.js
+++ b/app/assets/javascripts/content_editor/extensions/footnote_reference.js
@@ -1,6 +1,9 @@
 import { Node, mergeAttributes } from '@tiptap/core';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
+const extractFootnoteIdentifier = (element) =>
+  /^fnref-(\w+)-\d+$/.exec(element.querySelector('a')?.getAttribute('id'))?.[1];
+
 export default Node.create({
   name: 'footnoteReference',
 
@@ -16,13 +19,13 @@ export default Node.create({
 
   addAttributes() {
     return {
-      footnoteId: {
+      identifier: {
         default: null,
-        parseHTML: (element) => element.querySelector('a').getAttribute('id'),
+        parseHTML: extractFootnoteIdentifier,
       },
-      footnoteNumber: {
+      label: {
         default: null,
-        parseHTML: (element) => element.textContent,
+        parseHTML: extractFootnoteIdentifier,
       },
     };
   },
@@ -31,7 +34,7 @@ export default Node.create({
     return [{ tag: 'sup.footnote-ref', priority: PARSE_HTML_PRIORITY_HIGHEST }];
   },
 
-  renderHTML({ HTMLAttributes: { footnoteNumber, footnoteId, ...HTMLAttributes } }) {
-    return ['sup', mergeAttributes(HTMLAttributes), footnoteNumber];
+  renderHTML({ HTMLAttributes: { label, ...HTMLAttributes } }) {
+    return ['sup', mergeAttributes(HTMLAttributes), label];
   },
 });
diff --git a/app/assets/javascripts/content_editor/extensions/footnotes_section.js b/app/assets/javascripts/content_editor/extensions/footnotes_section.js
index 914a8934734..2b2c4177e1d 100644
--- a/app/assets/javascripts/content_editor/extensions/footnotes_section.js
+++ b/app/assets/javascripts/content_editor/extensions/footnotes_section.js
@@ -10,7 +10,10 @@ export default Node.create({
   isolating: true,
 
   parseHTML() {
-    return [{ tag: 'section.footnotes > ol' }];
+    return [
+      { tag: 'section.footnotes', skip: true },
+      { tag: 'section.footnotes > ol', skip: true },
+    ];
   },
 
   renderHTML({ HTMLAttributes }) {
diff --git a/app/assets/javascripts/content_editor/extensions/sourcemap.js b/app/assets/javascripts/content_editor/extensions/sourcemap.js
index 94236e2e70e..87118074462 100644
--- a/app/assets/javascripts/content_editor/extensions/sourcemap.js
+++ b/app/assets/javascripts/content_editor/extensions/sourcemap.js
@@ -4,6 +4,8 @@ import Bold from './bold';
 import BulletList from './bullet_list';
 import Code from './code';
 import CodeBlockHighlight from './code_block_highlight';
+import FootnoteReference from './footnote_reference';
+import FootnoteDefinition from './footnote_definition';
 import Heading from './heading';
 import HardBreak from './hard_break';
 import HorizontalRule from './horizontal_rule';
@@ -13,6 +15,13 @@ import Link from './link';
 import ListItem from './list_item';
 import OrderedList from './ordered_list';
 import Paragraph from './paragraph';
+import Strike from './strike';
+import TaskList from './task_list';
+import TaskItem from './task_item';
+import Table from './table';
+import TableCell from './table_cell';
+import TableHeader from './table_header';
+import TableRow from './table_row';
 
 export default Extension.create({
   addGlobalAttributes() {
@@ -24,6 +33,8 @@ export default Extension.create({
           BulletList.name,
           Code.name,
           CodeBlockHighlight.name,
+          FootnoteReference.name,
+          FootnoteDefinition.name,
           HardBreak.name,
           Heading.name,
           HorizontalRule.name,
@@ -33,6 +44,13 @@ export default Extension.create({
           ListItem.name,
           OrderedList.name,
           Paragraph.name,
+          Strike.name,
+          TaskList.name,
+          TaskItem.name,
+          Table.name,
+          TableCell.name,
+          TableHeader.name,
+          TableRow.name,
         ],
         attributes: {
           sourceMarkdown: {