Add latest changes from gitlab-org/gitlab@master

3 files changed, 70 insertions, 3 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
new file mode 100644
index 00000000000..1d050ed208b
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/code_block_highlight.js
@@ -0,0 +1,38 @@
+import { CodeBlockHighlight as BaseCodeBlockHighlight } from 'tiptap-extensions';
+
+export default class GlCodeBlockHighlight extends BaseCodeBlockHighlight {
+  get schema() {
+    const baseSchema = super.schema;
+
+    return {
+      ...baseSchema,
+      attrs: {
+        params: {
+          default: null,
+        },
+      },
+      parseDOM: [
+        {
+          tag: 'pre',
+          preserveWhitespace: 'full',
+          getAttrs: (node) => {
+            const code = node.querySelector('code');
+
+            if (!code) {
+              return null;
+            }
+
+            return {
+              /* `params` is the name of the attribute that
+                prosemirror-markdown uses to extract the language
+                of a codeblock.
+                https://github.com/ProseMirror/prosemirror-markdown/blob/master/src/to_markdown.js#L62
+              */
+              params: code.getAttribute('lang'),
+            };
+          },
+        },
+      ],
+    };
+  }
+}
diff --git a/app/assets/javascripts/content_editor/services/create_editor.js b/app/assets/javascripts/content_editor/services/create_editor.js
index 5ff80350f5d..128d332b0a2 100644
--- a/app/assets/javascripts/content_editor/services/create_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_editor.js
@@ -1,7 +1,20 @@
 import { isFunction, isString } from 'lodash';
 import { Editor } from 'tiptap';
-import { Bold, Code } from 'tiptap-extensions';
+import {
+  Bold,
+  Italic,
+  Code,
+  Link,
+  Image,
+  Heading,
+  Blockquote,
+  HorizontalRule,
+  BulletList,
+  OrderedList,
+  ListItem,
+} from 'tiptap-extensions';
 import { PROVIDE_SERIALIZER_OR_RENDERER_ERROR } from '../constants';
+import CodeBlockHighlight from '../extensions/code_block_highlight';
 import createMarkdownSerializer from './markdown_serializer';
 
 const createEditor = async ({ content, renderMarkdown, serializer: customSerializer } = {}) => {
@@ -10,7 +23,20 @@ const createEditor = async ({ content, renderMarkdown, serializer: customSeriali
   }
 
   const editor = new Editor({
-    extensions: [new Bold(), new Code()],
+    extensions: [
+      new Bold(),
+      new Italic(),
+      new Code(),
+      new Link(),
+      new Image(),
+      new Heading({ levels: [1, 2, 3, 4, 5, 6] }),
+      new Blockquote(),
+      new HorizontalRule(),
+      new BulletList(),
+      new ListItem(),
+      new OrderedList(),
+      new CodeBlockHighlight(),
+    ],
   });
   const serializer = customSerializer || createMarkdownSerializer({ render: renderMarkdown });
 
diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js
index 632d4f92218..e3b5775e320 100644
--- a/app/assets/javascripts/content_editor/services/markdown_serializer.js
+++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js
@@ -60,9 +60,12 @@ const create = ({ render = () => null }) => {
           // creates a bold alias for the strong mark converter
           ...defaultMarkdownSerializer.marks.strong,
         },
+        italic: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
       });
 
-      return serializer.serialize(document);
+      return serializer.serialize(document, {
+        tightLists: true,
+      });
     },
   };
 };