Add latest changes from gitlab-org/gitlab@master

5 files changed, 38 insertions, 45 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 61f6a233694..edf8b3d3a0b 100644
--- a/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -42,11 +42,14 @@ export default CodeBlockLowlight.extend({
   },
   parseHTML() {
     return [
-      ...(this.parent?.() || []),
       {
         tag: 'div.markdown-code-block',
         skip: true,
       },
+      {
+        tag: 'pre.js-syntax-highlight',
+        preserveWhitespace: 'full',
+      },
     ];
   },
   renderHTML({ HTMLAttributes }) {
diff --git a/app/assets/javascripts/content_editor/extensions/division.js b/app/assets/javascripts/content_editor/extensions/division.js
deleted file mode 100644
index 566ed85acf3..00000000000
--- a/app/assets/javascripts/content_editor/extensions/division.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Node } from '@tiptap/core';
-import { PARSE_HTML_PRIORITY_LOWEST } from '../constants';
-
-const getDiv = (element) => {
-  if (element.nodeName === 'DIV') return element;
-  return element.querySelector('div');
-};
-
-export default Node.create({
-  name: 'division',
-  content: 'block*',
-  group: 'block',
-  defining: true,
-
-  addAttributes() {
-    return {
-      className: {
-        default: null,
-        parseHTML: (element) => getDiv(element).className || null,
-      },
-    };
-  },
-
-  parseHTML() {
-    return [{ tag: 'div', priority: PARSE_HTML_PRIORITY_LOWEST }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['div', HTMLAttributes, 0];
-  },
-});
diff --git a/app/assets/javascripts/content_editor/extensions/html_nodes.js b/app/assets/javascripts/content_editor/extensions/html_nodes.js
new file mode 100644
index 00000000000..23409354814
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/html_nodes.js
@@ -0,0 +1,25 @@
+import { Node } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_LOWEST } from '../constants';
+
+const tags = ['div', 'pre'];
+
+const createHtmlNodeExtension = (tagName) =>
+  Node.create({
+    name: tagName,
+    content: 'block*',
+    group: 'block',
+    defining: true,
+    addOptions() {
+      return {
+        tagName,
+      };
+    },
+    parseHTML() {
+      return [{ tag: tagName, priority: PARSE_HTML_PRIORITY_LOWEST }];
+    },
+    renderHTML({ HTMLAttributes }) {
+      return [tagName, HTMLAttributes, 0];
+    },
+  });
+
+export default tags.map(createHtmlNodeExtension);
diff --git a/app/assets/javascripts/content_editor/services/create_content_editor.js b/app/assets/javascripts/content_editor/services/create_content_editor.js
index 15aac3d86e5..c5cfa9a4285 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -16,7 +16,6 @@ import DescriptionList from '../extensions/description_list';
 import Details from '../extensions/details';
 import DetailsContent from '../extensions/details_content';
 import Diagram from '../extensions/diagram';
-import Division from '../extensions/division';
 import Document from '../extensions/document';
 import Dropcursor from '../extensions/dropcursor';
 import Emoji from '../extensions/emoji';
@@ -32,6 +31,7 @@ import Heading from '../extensions/heading';
 import History from '../extensions/history';
 import HorizontalRule from '../extensions/horizontal_rule';
 import HTMLMarks from '../extensions/html_marks';
+import HTMLNodes from '../extensions/html_nodes';
 import Image from '../extensions/image';
 import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
@@ -103,7 +103,6 @@ export const createContentEditor = ({
     DetailsContent,
     Document,
     Diagram,
-    Division,
     Dropcursor,
     Emoji,
     Figure,
@@ -118,6 +117,7 @@ export const createContentEditor = ({
     History,
     HorizontalRule,
     ...HTMLMarks,
+    ...HTMLNodes,
     Image,
     InlineDiff,
     Italic,
diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js
index 2d33a16f1a5..c7e05072927 100644
--- a/app/assets/javascripts/content_editor/services/markdown_serializer.js
+++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js
@@ -12,7 +12,6 @@ import DescriptionItem from '../extensions/description_item';
 import DescriptionList from '../extensions/description_list';
 import Details from '../extensions/details';
 import DetailsContent from '../extensions/details_content';
-import Division from '../extensions/division';
 import Diagram from '../extensions/diagram';
 import Emoji from '../extensions/emoji';
 import Figure from '../extensions/figure';
@@ -24,6 +23,7 @@ import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
 import HorizontalRule from '../extensions/horizontal_rule';
 import HTMLMarks from '../extensions/html_marks';
+import HTMLNodes from '../extensions/html_nodes';
 import Image from '../extensions/image';
 import InlineDiff from '../extensions/inline_diff';
 import Italic from '../extensions/italic';
@@ -123,16 +123,6 @@ const defaultSerializerConfig = {
     [BulletList.name]: preserveUnchanged(renderBulletList),
     [CodeBlockHighlight.name]: preserveUnchanged(renderCodeBlock),
     [Diagram.name]: renderCodeBlock,
-    [Division.name]: (state, node) => {
-      if (node.attrs.className?.includes('js-markdown-code')) {
-        state.renderInline(node);
-      } else {
-        const newNode = node;
-        delete newNode.attrs.className;
-
-        renderHTMLNode('div')(state, newNode);
-      }
-    },
     [DescriptionList.name]: renderHTMLNode('dl', true),
     [DescriptionItem.name]: (state, node, parent, index) => {
       if (index === 1) state.ensureNewLine();
@@ -180,6 +170,12 @@ const defaultSerializerConfig = {
     [HardBreak.name]: preserveUnchanged(renderHardBreak),
     [Heading.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.heading),
     [HorizontalRule.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.horizontal_rule),
+    ...HTMLNodes.reduce((serializers, htmlNode) => {
+      return {
+        ...serializers,
+        [htmlNode.name]: (state, node) => renderHTMLNode(htmlNode.options.tagName)(state, node),
+      };
+    }, {}),
     [Image.name]: preserveUnchanged(renderImage),
     [ListItem.name]: preserveUnchanged(defaultMarkdownSerializer.nodes.list_item),
     [OrderedList.name]: preserveUnchanged(renderOrderedList),