Add Commonmark support to Content Editor

app/assets/javascripts/content_editor/extensions/code_block_highlight.js

+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'),
+            };
+          },
+        },
+      ],
+    };
+  }
+}

app/assets/javascripts/content_editor/services/create_editor.js

 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 });
 

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,
+      });
     },
   };
 };

spec/frontend/fixtures/api_markdown.yml

@@ -4,5 +4,47 @@
 ---
 - name: bold
   markdown: '**bold**'
-- name: code
+- name: emphasis
+  markdown: '_emphasized text_'
+- name: inline_code
   markdown: '`code`'
+- name: link
+  markdown: '[GitLab](https://gitlab.com)'
+- name: code_block
+  markdown: |-
+    ```javascript
+      console.log('hello world')
+    ```
+- name: headings
+  markdown: |-
+    # Heading 1
+
+    ## Heading 2
+
+    ### Heading 3
+
+    #### Heading 4
+
+    ##### Heading 5
+
+    ###### Heading 6
+- name: blockquote
+  markdown: |-
+    > This is a blockquote
+    >
+    > This is another one
+- name: thematic_break
+  markdown: |-
+    ---
+- name: bullet_list
+  markdown: |-
+    * list item 1
+    * list item 2
+      * embedded list item 3
+- name: ordered_list
+  markdown: |-
+    1. list item 1
+    2. list item 2
+    3. list item 3
+- name: image
+  markdown: '![alt text](https://gitlab.com/logo.png)'