🦶🎵 Can select text of footnotes

jupyter-book · Jun 17, 2024 · 950b8bd · 950b8bd
1 parent 4169f02
commit 950b8bd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/.changeset/slow-ladybugs-nail.md b/.changeset/slow-ladybugs-nail.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Can select inline text of footnotes
diff --git a/packages/myst-to-react/src/footnotes.tsx b/packages/myst-to-react/src/footnotes.tsx
@@ -12,7 +12,7 @@ function FootnoteDefinition({ identifier }: { identifier: string }) {
     select(`footnoteDefinition[identifier=${identifier}]`, references?.article);
   return (
     <XRefProvider>
-      <div className="hover-document article w-[500px] sm:max-w-[500px] px-3">
+      <div className="hover-document article w-[500px] sm:max-w-[500px] px-3 text-sm">
         <MyST ast={node.children} />
       </div>
     </XRefProvider>
@@ -27,7 +27,12 @@ export const FootnoteReference: NodeRenderer = ({ node }) => {
     >
       <span id={`fnref-${node.key}`}>
         <sup className="hover-link">
-          <HashLink id={`fn-${node.identifier}`} title="Link to Footnote" scrollBehavior="instant">
+          <HashLink
+            id={`fn-${node.identifier}`}
+            title="Link to Footnote"
+            scrollBehavior="instant"
+            canSelectText
+          >
             [{node.enumerator ?? node.number ?? node.identifier}]
           </HashLink>
         </sup>

diff --git a/packages/myst-to-react/src/hashLink.tsx b/packages/myst-to-react/src/hashLink.tsx
@@ -50,6 +50,7 @@ export function HashLink({
   kind,
   title = `Link to this ${kind}`,
   children = '¶',
+  canSelectText = false,
   hover,
   className = 'font-normal',
   hideInPopup,
@@ -62,6 +63,7 @@ export function HashLink({
   title?: string;
   hover?: boolean;
   children?: '#' | '¶' | React.ReactNode;
+  canSelectText?: boolean;
   className?: string;
   hideInPopup?: boolean;
 } & HashLinkBehavior) {
@@ -80,7 +82,8 @@ export function HashLink({
   };
   return (
     <a
-      className={classNames('select-none no-underline text-inherit hover:text-inherit', className, {
+      className={classNames('no-underline text-inherit hover:text-inherit', className, {
+        'select-none': !canSelectText,
         'transition-opacity opacity-0 focus:opacity-100 group-hover:opacity-70': hover,
         'hover:underline': !hover,
       })}