Add latest changes from gitlab-org/gitlab@master

5 files changed, 95 insertions, 0 deletions

diff --git a/app/assets/javascripts/content_editor/extensions/footnote_definition.js b/app/assets/javascripts/content_editor/extensions/footnote_definition.js
new file mode 100644
index 00000000000..dbab0de3421
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/footnote_definition.js
@@ -0,0 +1,21 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
+
+export default Node.create({
+  name: 'footnoteDefinition',
+
+  content: 'paragraph',
+
+  group: 'block',
+
+  parseHTML() {
+    return [
+      { tag: 'section.footnotes li' },
+      { tag: '.footnote-backref', priority: PARSE_HTML_PRIORITY_HIGHEST, ignore: true },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['li', mergeAttributes(HTMLAttributes), 0];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/footnote_reference.js b/app/assets/javascripts/content_editor/extensions/footnote_reference.js
new file mode 100644
index 00000000000..1ac8016f774
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/footnote_reference.js
@@ -0,0 +1,37 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
+
+export default Node.create({
+  name: 'footnoteReference',
+
+  inline: true,
+
+  group: 'inline',
+
+  atom: true,
+
+  draggable: true,
+
+  selectable: true,
+
+  addAttributes() {
+    return {
+      footnoteId: {
+        default: null,
+        parseHTML: (element) => element.querySelector('a').getAttribute('id'),
+      },
+      footnoteNumber: {
+        default: null,
+        parseHTML: (element) => element.textContent,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'sup.footnote-ref', priority: PARSE_HTML_PRIORITY_HIGHEST }];
+  },
+
+  renderHTML({ HTMLAttributes: { footnoteNumber, footnoteId, ...HTMLAttributes } }) {
+    return ['sup', mergeAttributes(HTMLAttributes), footnoteNumber];
+  },
+});
diff --git a/app/assets/javascripts/content_editor/extensions/footnotes_section.js b/app/assets/javascripts/content_editor/extensions/footnotes_section.js
new file mode 100644
index 00000000000..914a8934734
--- /dev/null
+++ b/app/assets/javascripts/content_editor/extensions/footnotes_section.js
@@ -0,0 +1,19 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+
+export default Node.create({
+  name: 'footnotesSection',
+
+  content: 'footnoteDefinition+',
+
+  group: 'block',
+
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: 'section.footnotes > ol' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['ol', mergeAttributes(HTMLAttributes, { class: 'footnotes gl-font-sm' }), 0];
+  },
+});
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 385f1c63801..f451357e211 100644
--- a/app/assets/javascripts/content_editor/services/create_content_editor.js
+++ b/app/assets/javascripts/content_editor/services/create_content_editor.js
@@ -19,6 +19,9 @@ import Dropcursor from '../extensions/dropcursor';
 import Emoji from '../extensions/emoji';
 import Figure from '../extensions/figure';
 import FigureCaption from '../extensions/figure_caption';
+import FootnoteDefinition from '../extensions/footnote_definition';
+import FootnoteReference from '../extensions/footnote_reference';
+import FootnotesSection from '../extensions/footnotes_section';
 import Frontmatter from '../extensions/frontmatter';
 import Gapcursor from '../extensions/gapcursor';
 import HardBreak from '../extensions/hard_break';
@@ -94,6 +97,9 @@ export const createContentEditor = ({
     Emoji,
     Figure,
     FigureCaption,
+    FootnoteDefinition,
+    FootnoteReference,
+    FootnotesSection,
     Frontmatter,
     Gapcursor,
     HardBreak,
diff --git a/app/assets/javascripts/content_editor/services/markdown_serializer.js b/app/assets/javascripts/content_editor/services/markdown_serializer.js
index 0dd3cb5b73f..38b0438fa3a 100644
--- a/app/assets/javascripts/content_editor/services/markdown_serializer.js
+++ b/app/assets/javascripts/content_editor/services/markdown_serializer.js
@@ -17,6 +17,9 @@ import Division from '../extensions/division';
 import Emoji from '../extensions/emoji';
 import Figure from '../extensions/figure';
 import FigureCaption from '../extensions/figure_caption';
+import FootnotesSection from '../extensions/footnotes_section';
+import FootnoteDefinition from '../extensions/footnote_definition';
+import FootnoteReference from '../extensions/footnote_reference';
 import Frontmatter from '../extensions/frontmatter';
 import HardBreak from '../extensions/hard_break';
 import Heading from '../extensions/heading';
@@ -156,6 +159,15 @@ const defaultSerializerConfig = {
 
       state.write(`:${name}:`);
     },
+    [FootnoteDefinition.name]: (state, node) => {
+      state.renderInline(node);
+    },
+    [FootnoteReference.name]: (state, node) => {
+      state.write(`[^${node.attrs.footnoteNumber}]`);
+    },
+    [FootnotesSection.name]: (state, node) => {
+      state.renderList(node, '', (index) => `[^${index + 1}]: `);
+    },
     [Frontmatter.name]: (state, node) => {
       const { language } = node.attrs;
       const syntax = {