Merge branch 'fix-md-footnote-preview' into 'main'

Fix footnote rendering in MD preview See merge request reportcreator/reportcreator!377
Syslifters · Dec 19, 2023 · 7bb3cc0 · 7bb3cc0
2 parents 68a9754 + 6aa96a4
commit 7bb3cc0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 9 deletions.
diff --git a/frontend/src/components/Markdown/Preview.vue b/frontend/src/components/Markdown/Preview.vue
@@ -116,14 +116,13 @@ onBeforeUnmount(() => {
   @import "@/assets/rendering/base-text.scss";
 
   .footnotes {
-    border-top: 1px solid black;
+    border-top: 1px solid currentColor;
     margin-top: 2em;
+    padding-top: 0.3em;
 
     h4 {
       font-size: 1em;
-    }
-    .data-footnote-backref {
-      display: none;
+      margin-top: 0;
     }
   }
 

diff --git a/packages/markdown/index.js b/packages/markdown/index.js
@@ -10,7 +10,7 @@ import { merge } from 'lodash';
 import mermaid from 'mermaid';
 import 'highlight.js/styles/default.css';
 
-import { remarkFootnotes, remarkToRehypeHandlersFootnotes, rehypeFootnoteSeparator, rehypeFootnoteSeparatorPreview } from './mdext/footnotes.js';
+import { remarkFootnotes, remarkToRehypeHandlersFootnotes, remarkToRehypeHandersFootnotesPreview, rehypeFootnoteSeparator, rehypeFootnoteSeparatorPreview } from './mdext/footnotes.js';
 import { remarkStrikethrough, remarkTaskListItem } from './mdext/gfm.js';
 import { rehypeConvertAttrsToStyle, rehypeLinkTargetBlank, rehypeRewriteImageSources, rehypeRewriteFileLinks, rehypeTemplates, rehypeRawFixSelfClosingTags } from './mdext/rehypePlugins.js';
 import { remarkAttrs, remarkToRehypeAttrs } from './mdext/attrs.js';
@@ -86,7 +86,7 @@ export function renderMarkdownToHtml(text, {preview = false, rewriteFileSource =
         allowDangerousHtml: true, 
         footnoteLabelTagName: 'h4',
         handlers: {
-          ...(preview ? {} : remarkToRehypeHandlersFootnotes),
+          ...(preview ? remarkToRehypeHandersFootnotesPreview : remarkToRehypeHandlersFootnotes),
           ...remarkToRehypeHandlersFigure,
           ...remarkToRehypeHandlersTableCaptions,
           ...remarkToRehypeAttrs,

diff --git a/packages/markdown/mdext/footnotes.js b/packages/markdown/mdext/footnotes.js
@@ -259,6 +259,30 @@ export const remarkToRehypeHandlersFootnotes = {
   },
 };
 
+export const remarkToRehypeHandersFootnotesPreview = {
+  footnote(state, node) {
+    const footnoteId = String(state.footnoteOrder.length + 1);
+    node.identifier = footnoteId;
+    state.footnoteOrder.push(footnoteId);
+    state.footnoteById.set(footnoteId, node);
+
+    return state.applyData(node, {
+      type: 'element',
+      tagName: 'sup',
+      properties: {
+        dataFootnoteRef: true,
+      },
+      children: [{type: 'text', value: footnoteId}],
+    })
+  },
+  footnoteDefinition(state, node) {
+    return null;
+  },
+  footnoteReference(state, node) {
+    return null;
+  },
+};
+
 
 export function rehypeFootnoteSeparator() {
   // add a footnote call separator tag between consecutive <footnote> tags
@@ -279,14 +303,13 @@ export function rehypeFootnoteSeparator() {
 export function rehypeFootnoteSeparatorPreview() {
   return tree => visit(tree, 'element', (node, index, parent) => {
     // Remove link from footnote call
-    if (node.tagName !== 'sup' || node.children.length !== 1 || !node.children[0]?.properties?.dataFootnoteRef) {
+    if (node.tagName !== 'sup' || node.properties?.dataFootnoteRef === undefined) {
       return;
     }
-    node.children = node.children[0].children;
 
     // Add footnote call separator
     const nextSibling = parent.children[index + 1];
-    if (nextSibling?.tagName !== 'sup' || nextSibling.children.length !== 1 || !nextSibling.children[0]?.properties?.dataFootnoteRef) {
+    if (nextSibling?.tagName !== 'sup' || nextSibling.properties?.dataFootnoteRef === undefined) {
       return;
     }
     parent.children.splice(index + 1, 0, {