From 9e34d1273e088719c318d821c717a1fdcf293472 Mon Sep 17 00:00:00 2001
From: Shane Loeffler <Shane98c@users.noreply.github.com>
Date: Fri, 21 Mar 2025 12:03:46 -0500
Subject: [PATCH] use figure/table caption numbers for anchoring

---
 src/figure-caption.js |  2 ++
 src/figure.js         | 17 +++++++++++++++++
 src/table-caption.js  |  2 ++
 3 files changed, 21 insertions(+)

diff --git a/src/figure-caption.js b/src/figure-caption.js
index b06e436..0f10668 100644
--- a/src/figure-caption.js
+++ b/src/figure-caption.js
@@ -9,4 +9,6 @@ const FigureCaption = ({ as = 'figcaption', number, children }) => {
   )
 }
 
+FigureCaption.displayName = 'FigureCaption'
+
 export default FigureCaption
diff --git a/src/figure.js b/src/figure.js
index 874d6df..f078b1b 100644
--- a/src/figure.js
+++ b/src/figure.js
@@ -4,11 +4,28 @@ import { Box } from 'theme-ui'
 import Group from './group'
 
 const Figure = ({ as = 'figure', children, sx }) => {
+  // try to use figure/table number as id for anchoring
+  const childrenArray = React.Children.toArray(children)
+  const captionElement = childrenArray.find(
+    (child) =>
+      React.isValidElement(child) &&
+      child.type?.displayName &&
+      (child.type.displayName === 'FigureCaption' ||
+        child.type.displayName === 'TableCaption')
+  )
+
+  const elementNumber = captionElement?.props?.number
+  const elementType =
+    captionElement?.type?.displayName === 'TableCaption' ? 'table' : 'figure'
+  const id = elementNumber ? `${elementType}-${elementNumber}` : undefined
+
   return (
     <Box
       as={as}
+      id={id}
       sx={{
         my: [6, 6, 6, 7],
+        scrollMarginTop: '60px', // account for header height
         '@media print': {
           breakInside: 'avoid',
         },
diff --git a/src/table-caption.js b/src/table-caption.js
index b9df501..2ebba54 100644
--- a/src/table-caption.js
+++ b/src/table-caption.js
@@ -9,4 +9,6 @@ const TableCaption = ({ as = 'figcaption', number, children }) => {
   )
 }
 
+TableCaption.displayName = 'TableCaption'
+
 export default TableCaption