Added backlink to initial reference

src/editor/plugins/Footnote/FootnotesBlockView.jsx

@@ -1,3 +1,4 @@
+import genkey from 'weak-key';
 import React from 'react';
 import { Node } from 'slate';
 import {
@@ -16,6 +17,7 @@ const getBlocks = (properties) => {
 
 const FootnotesBlockView = (props) => {
   const { data, properties } = props;
+  const { title } = data;
 
   // console.log(properties);
   const blocks = getBlocks(properties);
@@ -36,16 +38,24 @@ const FootnotesBlockView = (props) => {
     });
 
   return (
-    <>
-      <h3>{data.title}</h3>
+    <div className="footnotes-listing-block">
+      <h3>{title}</h3>
       {footnotes && (
         <ul>
-          {footnotes.map((data) => (
-            <li>{data.footnote}</li>
-          ))}
+          {footnotes.map((data) => {
+            const key = genkey(data);
+            return (
+              <li key={key} id={`footnote-${key}`}>
+                {data.footnote}
+                <a href={`#ref-${key}`} aria-label="Back to content">
+                  ↵
+                </a>
+              </li>
+            );
+          })}
         </ul>
       )}
-    </>
+    </div>
   );
 };
 

src/editor/plugins/Footnote/render.jsx

@@ -4,17 +4,22 @@ import genkey from 'weak-key';
 
 export const FootnoteElement = ({ attributes, children, element, mode }) => {
   const { data = {} } = element;
-  const { footnote } = data;
-  console.log('footnote mode', mode);
+  // const { footnote } = data;
+  // console.log('footnote mode', mode);
   // {mode === 'view' && (
   //   <span className="footnote-text" style={{ display: 'inline' }}>
   //     {footnote}
   //   </span>
   // )}
+  const key = genkey(data);
   return (
     <>
       {mode === 'view' ? (
-        <a href={`#footnote-${genkey(data)}`} aria-describedby="footnote-label">
+        <a
+          href={`#footnote-${key}`}
+          id={`ref-${key}`}
+          aria-describedby="footnote-label"
+        >
           {children}
         </a>
       ) : (

src/editor/plugins/Footnote/styles.less

@@ -22,3 +22,9 @@ a[aria-describedby='footnote-label']:focus::after {
   outline: thin dotted;
   outline-offset: 2px;
 }
+
+.footnotes-listing-block {
+  & :target {
+    background: yellow;
+  }
+}