From 040de7ec865bd7f615766deadde2c21467c80a94 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Fri, 10 Nov 2023 08:37:47 -0700
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=94=97=20Link=20copy=20should=20not?=
 =?UTF-8?q?=20include=20zero-width=20space?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The zero-width space is used for formatting.
This is now turned into a `<wbr>` tag, which doesn't copy to clipboard.
---
 .changeset/plenty-bears-applaud.md         |  5 ++++
 packages/myst-to-react/src/links/index.tsx | 30 +++++++++++++++++++---
 2 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/plenty-bears-applaud.md

diff --git a/.changeset/plenty-bears-applaud.md b/.changeset/plenty-bears-applaud.md
new file mode 100644
index 000000000..b6c2fa35b
--- /dev/null
+++ b/.changeset/plenty-bears-applaud.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Improve link URL copying
diff --git a/packages/myst-to-react/src/links/index.tsx b/packages/myst-to-react/src/links/index.tsx
index 5c1aec3ad..cb44db1db 100644
--- a/packages/myst-to-react/src/links/index.tsx
+++ b/packages/myst-to-react/src/links/index.tsx
@@ -54,6 +54,28 @@ function InternalLink({ url, children }: { url: string; children: React.ReactNod
   );
 }
 
+/** This changes zero-width space into `<wbr>` which is better for copying */
+const FormattedLinkText: NodeRenderer<TransformedLink> = ({ node }) => {
+  if (
+    node.children?.length !== 1 ||
+    node.children[0].type !== 'text' ||
+    !node.children[0].value.includes('​')
+  ) {
+    return <MyST ast={node.children} />;
+  }
+  const text = node.children[0].value.split('​');
+  return (
+    <>
+      {text.map((v, i) => (
+        <>
+          {v}
+          {i < text.length - 1 && <wbr />}
+        </>
+      ))}
+    </>
+  );
+};
+
 export const link: NodeRenderer<TransformedLink> = ({ node }) => {
   const internal = node.internal ?? false;
   const protocol = node.protocol;
@@ -62,7 +84,7 @@ export const link: NodeRenderer<TransformedLink> = ({ node }) => {
     case 'wiki':
       return (
         <WikiLink url={node.url} page={node.data?.page as string} wiki={node.data?.wiki as string}>
-          <MyST ast={node.children} />
+          <FormattedLinkText node={node} />
         </WikiLink>
       );
     case 'github':
@@ -78,7 +100,7 @@ export const link: NodeRenderer<TransformedLink> = ({ node }) => {
           to={node.data?.to as number | undefined}
           issue_number={node.data?.issue_number as number | undefined}
         >
-          <MyST ast={node.children} />
+          <FormattedLinkText node={node} />
         </GithubLink>
       );
     case 'rrid':
@@ -87,13 +109,13 @@ export const link: NodeRenderer<TransformedLink> = ({ node }) => {
       if (internal) {
         return (
           <InternalLink url={node.url}>
-            <MyST ast={node.children} />
+            <FormattedLinkText node={node} />
           </InternalLink>
         );
       }
       return (
         <a target="_blank" href={node.url} rel="noreferrer">
-          <MyST ast={node.children} />
+          <FormattedLinkText node={node} />
         </a>
       );
   }

From 304da23f70a417ef3cdebe205a54b9c5594de446 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Fri, 10 Nov 2023 08:44:59 -0700
Subject: [PATCH 2/2] Move to use across any text node

---
 packages/myst-to-react/src/basic.tsx       | 17 +++++++++++-
 packages/myst-to-react/src/links/index.tsx | 30 +++-------------------
 2 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index 60140b585..500f25ed9 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/packages/myst-to-react/src/basic.tsx
@@ -81,7 +81,22 @@ type BasicNodeRenderers = {
 
 const BASIC_RENDERERS: BasicNodeRenderers = {
   text({ node }) {
-    return <>{node.value}</>;
+    // Change zero-width space into `<wbr>` which is better for copying
+    // These are used in links, and potentially other long words
+    if (!node.value?.includes('​')) {
+      return <>{node.value}</>;
+    }
+    const text = node.value.split('​');
+    return (
+      <>
+        {text.map((v, i) => (
+          <>
+            {v}
+            {i < text.length - 1 && <wbr />}
+          </>
+        ))}
+      </>
+    );
   },
   span({ node }) {
     // style={node.style}
diff --git a/packages/myst-to-react/src/links/index.tsx b/packages/myst-to-react/src/links/index.tsx
index cb44db1db..5c1aec3ad 100644
--- a/packages/myst-to-react/src/links/index.tsx
+++ b/packages/myst-to-react/src/links/index.tsx
@@ -54,28 +54,6 @@ function InternalLink({ url, children }: { url: string; children: React.ReactNod
   );
 }
 
-/** This changes zero-width space into `<wbr>` which is better for copying */
-const FormattedLinkText: NodeRenderer<TransformedLink> = ({ node }) => {
-  if (
-    node.children?.length !== 1 ||
-    node.children[0].type !== 'text' ||
-    !node.children[0].value.includes('​')
-  ) {
-    return <MyST ast={node.children} />;
-  }
-  const text = node.children[0].value.split('​');
-  return (
-    <>
-      {text.map((v, i) => (
-        <>
-          {v}
-          {i < text.length - 1 && <wbr />}
-        </>
-      ))}
-    </>
-  );
-};
-
 export const link: NodeRenderer<TransformedLink> = ({ node }) => {
   const internal = node.internal ?? false;
   const protocol = node.protocol;
@@ -84,7 +62,7 @@ export const link: NodeRenderer<TransformedLink> = ({ node }) => {
     case 'wiki':
       return (
         <WikiLink url={node.url} page={node.data?.page as string} wiki={node.data?.wiki as string}>
-          <FormattedLinkText node={node} />
+          <MyST ast={node.children} />
         </WikiLink>
       );
     case 'github':
@@ -100,7 +78,7 @@ export const link: NodeRenderer<TransformedLink> = ({ node }) => {
           to={node.data?.to as number | undefined}
           issue_number={node.data?.issue_number as number | undefined}
         >
-          <FormattedLinkText node={node} />
+          <MyST ast={node.children} />
         </GithubLink>
       );
     case 'rrid':
@@ -109,13 +87,13 @@ export const link: NodeRenderer<TransformedLink> = ({ node }) => {
       if (internal) {
         return (
           <InternalLink url={node.url}>
-            <FormattedLinkText node={node} />
+            <MyST ast={node.children} />
           </InternalLink>
         );
       }
       return (
         <a target="_blank" href={node.url} rel="noreferrer">
-          <FormattedLinkText node={node} />
+          <MyST ast={node.children} />
         </a>
       );
   }