From 6db9952adb61a2dcad117e965746a5b96f1d2d66 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Tue, 24 Oct 2023 13:45:52 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Fix=20citation=20link=20styles?=
 =?UTF-8?q?=20(#252)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add `<span>` as a known element type
---
 .changeset/fifty-bears-guess.md      | 5 +++++
 packages/myst-to-react/src/basic.tsx | 9 +++++++++
 packages/myst-to-react/src/cite.tsx  | 2 +-
 3 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fifty-bears-guess.md

diff --git a/.changeset/fifty-bears-guess.md b/.changeset/fifty-bears-guess.md
new file mode 100644
index 000000000..9198c6fc4
--- /dev/null
+++ b/.changeset/fifty-bears-guess.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Add span and fix citation link styles
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index 01d6e7d01..60140b585 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/packages/myst-to-react/src/basic.tsx
@@ -43,6 +43,7 @@ type CaptionNumber = {
 
 type BasicNodeRenderers = {
   text: NodeRenderer<spec.Text>;
+  span: NodeRenderer<GenericNode>;
   strong: NodeRenderer<spec.Strong>;
   emphasis: NodeRenderer<spec.Emphasis>;
   link: NodeRenderer<spec.Link>;
@@ -82,6 +83,14 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   text({ node }) {
     return <>{node.value}</>;
   },
+  span({ node }) {
+    // style={node.style}
+    return (
+      <span>
+        <MyST ast={node.children} />
+      </span>
+    );
+  },
   delete({ node }) {
     return (
       <del>
diff --git a/packages/myst-to-react/src/cite.tsx b/packages/myst-to-react/src/cite.tsx
index 4cb208f61..95677b56b 100644
--- a/packages/myst-to-react/src/cite.tsx
+++ b/packages/myst-to-react/src/cite.tsx
@@ -54,7 +54,7 @@ export const Cite = ({
             {children}
           </a>
         )}
-        {!doiUrl && children}
+        {!doiUrl && <span className="hover-link">{children}</span>}
       </cite>
     </HoverPopover>
   );