extract all data attributes

packages/app/src/components/ReactMarkdownComponents/NextLink.tsx

@@ -26,12 +26,12 @@ type Props = Omit<LinkProps, 'href'> & {
   children: React.ReactNode,
   href?: string,
   className?: string,
-  'data-toggle'?: string
 };
 
-export const NextLink = ({
-  href, children, className, 'data-toggle': dataToggle, ...props
-}: Props): JSX.Element => {
+export const NextLink = (props: Props): JSX.Element => {
+  const {
+    href, children, className, ...rest
+  } = props;
 
   const { data: siteUrl } = useSiteUrl();
 
@@ -39,24 +39,29 @@ export const NextLink = ({
     return <a className={className}>{children}</a>;
   }
 
+  // extract 'data-*' props
+  const dataAttributes = Object.fromEntries(
+    Object.entries(rest).filter(([key]) => key.startsWith('data-')),
+  );
+
   // when href is an anchor link
   if (isAnchorLink(href)) {
     return (
-      <a href={href} className={className} data-toggle={dataToggle}>{children}</a>
+      <a href={href} className={className} {...dataAttributes}>{children}</a>
     );
   }
 
   if (isExternalLink(href, siteUrl)) {
     return (
-      <a href={href} className={className} target="_blank" rel="noopener noreferrer">
+      <a href={href} className={className} target="_blank" rel="noopener noreferrer" {...dataAttributes}>
         {children}&nbsp;<i className='icon-share-alt small'></i>
       </a>
     );
   }
 
   return (
-    <Link {...props} href={href} prefetch={false}>
-      <a href={href} className={className}>{children}</a>
+    <Link {...rest} href={href} prefetch={false}>
+      <a href={href} className={className} {...dataAttributes}>{children}</a>
     </Link>
   );
 };