From 399384a5cb10b1e960bfb3d2ea4b8505cb837468 Mon Sep 17 00:00:00 2001
From: tarjelavik <Tarje.Lavik@ub.uib.no>
Date: Tue, 12 Oct 2021 11:19:49 +0200
Subject: [PATCH] Use numbers for footnote link
---
web/components/PT/PortableTextBlock.js | 24 +++++++++++++++---------
web/lib/utils/getFootnotesNumberArray.js | 21 +++++++++++++++++++++
web/lib/utils/index.js | 1 +
3 files changed, 37 insertions(+), 9 deletions(-)
create mode 100644 web/lib/utils/getFootnotesNumberArray.js
diff --git a/web/components/PT/PortableTextBlock.js b/web/components/PT/PortableTextBlock.js
index 80d7824..0199760 100644
--- a/web/components/PT/PortableTextBlock.js
+++ b/web/components/PT/PortableTextBlock.js
@@ -26,6 +26,7 @@ import {
} from '../Sections'
import ActorInsert from './Inserts/ActorInsert'
import PlaceInsert from './Inserts/PlaceInsert'
+import { getFootnotesNumberArray } from '../../lib/utils'
const BlockContent = require('@sanity/block-content-to-react')
@@ -45,6 +46,8 @@ export default function PortableTextBlock(props) {
...rest
} = props
+ const footnoteNumbers = getFootnotesNumberArray(props.blocks)
+
const getFontSize = (level) => {
switch (level) {
case 'h2':
@@ -115,20 +118,23 @@ export default function PortableTextBlock(props) {
<Link href={href}>{text}</Link>
)
},
- footnote: ({ children, markKey }) => (
- <span>
- {children}
- <sup>
- {/*
+ footnote: ({ children, markKey }) => {
+ console.log(markKey)
+ return (
+ <span>
+ {children}
+ <sup>
+ {/*
https://codesandbox.io/s/how-to-render-footnotes-in-portable-text-in-react-iupur?file=/src/index.js:254-650
If you want numbers here, you can reuse the reduce function from Footnotes.js
to e.g. an object with markKey as keys and the index as values.
{[markKey]: index}.
*/}
- <a href={`#${markKey}`}>*</a>
- </sup>
- </span>
- ),
+ <a href={`#${markKey}`}>{footnoteNumbers[markKey]}</a>
+ </sup>
+ </span>
+ )
+ },
},
types: {
code: (props) => (
diff --git a/web/lib/utils/getFootnotesNumberArray.js b/web/lib/utils/getFootnotesNumberArray.js
new file mode 100644
index 0000000..1ea4f0a
--- /dev/null
+++ b/web/lib/utils/getFootnotesNumberArray.js
@@ -0,0 +1,21 @@
+/**
+ * getFootnoteNumberArray
+ * return object
+ */
+export const getFootnotesNumberArray = (blocks) => {
+ return (
+ blocks
+ // filter out everything that's not a text block
+ .filter(({ _type }) => _type === 'block')
+ // make an array of the mark definitions of those blocks
+ .reduce((acc, curr) => {
+ return [...acc, ...curr.markDefs]
+ }, [])
+ // find all the footnote mark definitions
+ .filter(({ _type }) => _type === 'footnote')
+ // reduce to object with mark as key and index as value
+ .reduce(function (acc, curr, index) {
+ return { ...acc, [curr._key]: index + 1 }
+ }, {})
+ )
+}
diff --git a/web/lib/utils/index.js b/web/lib/utils/index.js
index 63bcdad..6f153fa 100644
--- a/web/lib/utils/index.js
+++ b/web/lib/utils/index.js
@@ -1,3 +1,4 @@
export * from './capitalize'
export * from './convertQuotationMarks'
+export * from './getFootnotesNumberArray'
export * from './getOpenGraphImages'
--
GitLab