Render references in content editor

Changelog: added

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

+import { Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'reference',
+
+  inline: true,
+
+  group: 'inline',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      className: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            className: element.className,
+          };
+        },
+      },
+      referenceType: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            referenceType: element.dataset.referenceType,
+          };
+        },
+      },
+      originalText: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            originalText: element.dataset.original,
+          };
+        },
+      },
+      href: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            href: element.getAttribute('href'),
+          };
+        },
+      },
+      text: {
+        default: null,
+        parseHTML: (element) => {
+          return {
+            text: element.textContent,
+          };
+        },
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'a.gfm:not([data-link=true])',
+        priority: 51,
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return [
+      'a',
+      {
+        class: node.attrs.className,
+        href: node.attrs.href,
+        'data-reference-type': node.attrs.referenceType,
+        'data-original': node.attrs.originalText,
+      },
+      node.attrs.text,
+    ];
+  },
+});

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

@@ -22,6 +22,7 @@ import ListItem from '../extensions/list_item';
 import Loading from '../extensions/loading';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
+import Reference from '../extensions/reference';
 import Strike from '../extensions/strike';
 import Subscript from '../extensions/subscript';
 import Superscript from '../extensions/superscript';
@@ -78,6 +79,7 @@ export const createContentEditor = ({
     Loading,
     OrderedList,
     Paragraph,
+    Reference,
     Strike,
     Subscript,
     Superscript,

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

@@ -18,6 +18,7 @@ import Link from '../extensions/link';
 import ListItem from '../extensions/list_item';
 import OrderedList from '../extensions/ordered_list';
 import Paragraph from '../extensions/paragraph';
+import Reference from '../extensions/reference';
 import Strike from '../extensions/strike';
 import Subscript from '../extensions/subscript';
 import Superscript from '../extensions/superscript';
@@ -79,6 +80,9 @@ const defaultSerializerConfig = {
     [ListItem.name]: defaultMarkdownSerializer.nodes.list_item,
     [OrderedList.name]: defaultMarkdownSerializer.nodes.ordered_list,
     [Paragraph.name]: defaultMarkdownSerializer.nodes.paragraph,
+    [Reference.name]: (state, node) => {
+      state.write(node.attrs.originalText || node.attrs.text);
+    },
     [Table.name]: (state, node) => {
       state.renderContent(node);
     },

spec/frontend/fixtures/api_markdown.rb

@@ -7,12 +7,17 @@ RSpec.describe API::MergeRequests, '(JavaScript fixtures)', type: :request do
   include WikiHelpers
   include JavaScriptFixturesHelpers
 
-  let_it_be(:user) { create(:user) }
+  let_it_be(:user) { create(:user, username: 'gitlab') }
 
   let_it_be(:group) { create(:group, :public) }
   let_it_be(:project) { create(:project, :public, :repository, group: group) }
 
-  let_it_be(:project_wiki) { create(:project_wiki, user: user) }
+  let_it_be(:label) { create(:label, project: project, title: 'bug') }
+  let_it_be(:milestone) { create(:milestone, project: project, title: '1.1') }
+  let_it_be(:issue) { create(:issue, project: project) }
+  let_it_be(:merge_request) { create(:merge_request, source_project: project) }
+
+  let_it_be(:project_wiki) { create(:project_wiki, project: project, user: user) }
 
   let(:project_wiki_page) { create(:wiki_page, wiki: project_wiki) }
 

spec/frontend/fixtures/api_markdown.yml

@@ -92,3 +92,7 @@
     | cell | cell | cell |
 - name: emoji
   markdown: ':sparkles: :heart: :100:'
+- name: reference
+  context: project_wiki
+  markdown: |-
+    Hi @gitlab - thank you for reporting this ~bug (#1) we hope to fix it in %1.1 as part of !1