Merge pull request #2 from eea/zotero-view

Allow HTML format of footnotes
eea · Oct 5, 2020 · b8b4649 · b8b4649
2 parents fb4af44 + fa95f0b
commit b8b4649
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 36 deletions.
diff --git a/src/Blocks/Footnote/FootnotesBlockView.jsx b/src/Blocks/Footnote/FootnotesBlockView.jsx
@@ -2,10 +2,16 @@ import React from 'react';
 import { Node } from 'slate';
 import {
   getBlocksFieldname,
-  getBlocksLayoutFieldname,
+  getBlocksLayoutFieldname
 } from '@plone/volto/helpers';
-import './less/public.less';
 import { settings } from '~/config';
+import './less/public.less';
+
+const makeFootnote = (footnote) => {
+  const free = footnote ? footnote.replace('<?xml version="1.0"?>', '') : '';
+
+  return free;
+};
 
 /**
  * @param {object} properties A prop received by the View component
@@ -71,7 +77,11 @@ const FootnotesBlockView = (props) => {
             const { uid, footnote } = data;
             return (
               <li key={uid} id={`footnote-${uid}`}>
-                {footnote}
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: makeFootnote(footnote),
+                  }}
+                />
                 <a href={`#ref-${uid}`} aria-label="Back to content">
                   ↵
                 </a>

diff --git a/src/editor/render.jsx b/src/editor/render.jsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { Popup } from 'semantic-ui-react';
 
+const makeFootnote = (footnote) => {
+  const free = footnote ? footnote.replace('<?xml version="1.0"?>', '') : '';
+
+  return free;
+};
+
 export const FootnoteElement = ({
   attributes,
   children,
@@ -18,21 +24,41 @@ export const FootnoteElement = ({
           href={`#footnote-${uid}`}
           id={`ref-${uid}`}
           aria-describedby="footnote-label"
-          {...rest}
         >
-          {children}
+          <Popup
+            position="bottom left"
+            trigger={
+              <span {...attributes} className="citation-indice">
+                {children}
+              </span>
+            }
+          >
+            <Popup.Content>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: makeFootnote(data.footnote),
+                }}
+              />{' '}
+            </Popup.Content>
+          </Popup>
         </a>
       ) : (
         <Popup
-          content={data.footnote}
-          header="Footnote"
           position="bottom left"
           trigger={
-            <span {...attributes} className="footnote footnote-edit-node">
+            <span {...attributes} className="footnote zotero-edit-node">
               {children}
             </span>
           }
-        />
+        >
+          <Popup.Content>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: makeFootnote(data.footnote),
+              }}
+            />{' '}
+          </Popup.Content>
+        </Popup>
       )}
     </>
   );

diff --git a/src/editor/styles.less b/src/editor/styles.less
@@ -1,36 +1,41 @@
 /*  Based on https://www.sitepoint.com/accessible-footnotes-css/ */
 
-// TODO: use LESS variables
-
 body {
-  counter-reset: footnotes;
+	counter-reset: footnotes;
 }
-
 a[aria-describedby='footnote-label'] {
-  color: inherit;
-  counter-increment: footnotes;
-  // counter-reset: none;
-  cursor: default;
-  outline: none;
-  text-decoration: none;
-}
-
-a[aria-describedby='footnote-label']::after {
-  margin-left: 2px;
-  color: blue;
-  content: '[' counter(footnotes) ']';
-  cursor: pointer;
-  font-size: 0.8em;
-  text-decoration: underline;
-  // vertical-align: super;
+	color: inherit;
+	cursor: default;
+	outline: none;
+	text-decoration: none;
+	&:focus {
+		&::after {
+			outline: thin dotted;
+			outline-offset: 2px;
+		}
+	}
 }
-
-a[aria-describedby='footnote-label']:focus::after {
-  outline: thin dotted;
-  outline-offset: 2px;
+.citation-indice {
+	color: inherit;
+	counter-increment: footnotes;
+	cursor: default;
+	outline: none;
+	text-decoration: none;
+	&::after {
+		margin-left: 2px;
+		color: blue;
+		content: '[' counter(footnotes) ']';
+		cursor: pointer;
+		font-size: 0.8em;
+		text-decoration: underline;
+	}
+	&:focus {
+		&::after {
+			outline: thin dotted;
+			outline-offset: 2px;
+		}
+	}
 }
-
-// Editor styles
 .footnote-edit-node {
-  background-color: #e6f3ff;
+	background-color: #e6f3ff;
 }