From c4c59333e874be0024de7bdf93ee2735d0cfa3a3 Mon Sep 17 00:00:00 2001
From: Tiberiu Ichim <tiberiu.ichim@gmail.com>
Date: Sun, 5 Jul 2020 23:11:47 +0300
Subject: [PATCH] Added backlink to initial reference

---
 .../plugins/Footnote/FootnotesBlockView.jsx   | 22 ++++++++++++++-----
 src/editor/plugins/Footnote/render.jsx        | 11 +++++++---
 src/editor/plugins/Footnote/styles.less       |  6 +++++
 3 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/editor/plugins/Footnote/FootnotesBlockView.jsx b/src/editor/plugins/Footnote/FootnotesBlockView.jsx
index 43c7054c..691fdc62 100644
--- a/src/editor/plugins/Footnote/FootnotesBlockView.jsx
+++ b/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>
   );
 };
 
diff --git a/src/editor/plugins/Footnote/render.jsx b/src/editor/plugins/Footnote/render.jsx
index 816a6d74..f00ec42f 100644
--- a/src/editor/plugins/Footnote/render.jsx
+++ b/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>
       ) : (
diff --git a/src/editor/plugins/Footnote/styles.less b/src/editor/plugins/Footnote/styles.less
index dba97e59..2e4f0c7e 100644
--- a/src/editor/plugins/Footnote/styles.less
+++ b/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;
+  }
+}