1 files changed, 23 insertions, 4 deletions
diff --git a/app/assets/javascripts/content_editor/extensions/footnote_definition.js b/app/assets/javascripts/content_editor/extensions/footnote_definition.js
index dbab0de3421..bf752918934 100644
--- a/app/assets/javascripts/content_editor/extensions/footnote_definition.js
+++ b/app/assets/javascripts/content_editor/extensions/footnote_definition.js
@@ -1,12 +1,27 @@
 import { mergeAttributes, Node } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-2';
+import FootnoteDefinitionWrapper from '../components/wrappers/footnote_definition.vue';
 import { PARSE_HTML_PRIORITY_HIGHEST } from '../constants';
 
+const extractFootnoteIdentifier = (idAttribute) => /^fn-(\w+)-\d+$/.exec(idAttribute)?.[1];
+
 export default Node.create({
   name: 'footnoteDefinition',
-
   content: 'paragraph',
-
   group: 'block',
+  isolating: true,
+  addAttributes() {
+    return {
+      identifier: {
+        default: null,
+        parseHTML: (element) => extractFootnoteIdentifier(element.getAttribute('id')),
+      },
+      label: {
+        default: null,
+        parseHTML: (element) => extractFootnoteIdentifier(element.getAttribute('id')),
+      },
+    };
+  },
 
   parseHTML() {
     return [
@@ -15,7 +30,11 @@ export default Node.create({
     ];
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ['li', mergeAttributes(HTMLAttributes), 0];
+  renderHTML({ label, ...HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addNodeView() {
+    return new VueNodeViewRenderer(FootnoteDefinitionWrapper);
   },
 });