fix: iframeable link

Author: desoindx

eslint.config.mjs

@@ -47,6 +47,7 @@ const eslintConfig = [
       'playwright.config.js',
       'public/**',
       'integrabook/**',
+      'prisma/generated/**',
     ],
   },
 ]

src/components/Notion/DynamicNotion.tsx

@@ -3,7 +3,7 @@ import { ExtendedRecordMap } from 'notion-types'
 import { ReactNode, useEffect, useRef } from 'react'
 import { NotionRenderer } from 'react-notion-x'
 import { Collection } from 'react-notion-x/build/third-party/collection'
-import IframeableLink from 'components/base/IframeableLink'
+import Link from '../base/buttons/Link'
 import NotionErrorBoundary from './NotionErrorBoundary'
 import { improveAccessibility } from './utils'
 import 'react-notion-x/src/styles.css'
@@ -26,9 +26,9 @@ const DynamicNotion = ({ recordMap }: DynamicNotionProps) => {
             Link: ({ href, children, ...props }: LinkProps & { children: ReactNode }) => {
               return (
                 // @ts-expect-error: notion type error
-                <IframeableLink href={href} {...props} target='_blank' rel='noopener noreferrer'>
+                <Link href={href} {...props} target='_blank' rel='noopener noreferrer'>
                   {children}
-                </IframeableLink>
+                </Link>
               )
             },
           }}

src/components/Notion/Notion.tsx

@@ -7,7 +7,7 @@ import { ReactNode, useEffect, useRef } from 'react'
 import { Collection } from 'react-notion-x/build/third-party/collection'
 import Breadcrumbs from 'components/breadcrumbs/Breadcrumbs'
 import Block from 'components/layout/Block'
-import IframeableLink from '../base/IframeableLink'
+import Link from '../base/buttons/Link'
 import NotionErrorBoundary from './NotionErrorBoundary'
 import { improveAccessibility } from './utils'
 import styles from './Notion.module.css'
@@ -67,9 +67,9 @@ const Notion = ({
                     }
                     return (
                       // @ts-expect-error: notion type error
-                      <IframeableLink href={href} {...props} target='_blank' rel='noopener noreferrer'>
+                      <Link href={href} {...props} target='_blank' rel='noopener noreferrer'>
                         {children}
-                      </IframeableLink>
+                      </Link>
                     )
                   },
                   Collection,

src/components/base/Logo/Logos.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames'
 import { buildCurrentUrlFor } from 'utils/urls'
-import IframeableLink from '../IframeableLink'
+import Link from '../buttons/Link'
 import Ademe from './Ademe'
 import Logo from './ImpactCO2'
 import Marianne from './Marianne'
@@ -11,13 +11,13 @@ const Logos = ({ small }: { small?: boolean }) => {
     <div className={classNames(styles.logos, { [styles.small]: small })}>
       <Marianne small={small} />
       <Ademe small={small} />
-      <IframeableLink
+      <Link
         href={buildCurrentUrlFor('/')}
         className={styles.link}
         data-testid='impactco2-logos'
         title="Voir la page d'accueil du site Impact CO2">
         <Logo small={small} />
-      </IframeableLink>
+      </Link>
     </div>
   )
 }

src/components/base/Markdown.jsx

@@ -0,0 +1,30 @@
+'use client'
+
+import MarkdownToJsx, { MarkdownToJSX } from 'markdown-to-jsx'
+import { ReactNode } from 'react'
+import Link from './buttons/Link'
+
+export default function Markdown({
+  children,
+  components = {},
+  ...otherProps
+}: {
+  children: string | null | undefined
+  components?: Record<string, ReactNode>
+  options?: MarkdownToJSX.Options
+}) {
+  return (
+    <MarkdownToJsx
+      {...otherProps}
+      options={{
+        ...otherProps.options,
+        forceBlock: true,
+        overrides: {
+          a: Link,
+          ...components,
+        },
+      }}>
+      {children}
+    </MarkdownToJsx>
+  )
+}

src/components/base/Markdown.tsx

@@ -3,8 +3,8 @@
 import { useTranslations } from 'next-intl'
 import Image from 'next/image'
 import { track } from 'utils/matomo'
-import IframeableLink from './IframeableLink'
 import NewTabIcon from './NewTabIcon'
+import Link from './buttons/Link'
 import styles from './Resource.module.css'
 
 const Resource = ({
@@ -24,7 +24,7 @@ const Resource = ({
 }) => {
   const t = useTranslations('ressources')
   return (
-    <IframeableLink
+    <Link
       className={styles.linkContainer}
       href={href}
       target='_blank'
@@ -50,7 +50,7 @@ const Resource = ({
           </p>
         )}
       </div>
-    </IframeableLink>
+    </Link>
   )
 }
 

src/components/base/Resource.tsx

@@ -2,7 +2,7 @@
 
 import classNames from 'classnames'
 import { track } from 'utils/matomo'
-import IframeableLink from './IframeableLink'
+import Link from './buttons/Link'
 import styles from './Sources.module.css'
 
 const Sources = ({
@@ -19,9 +19,9 @@ const Sources = ({
       Source{sources.length > 1 ? 's' : ''} :{' '}
       {sources
         .flatMap((source) => [
-          <IframeableLink key={source.label} href={source.href} onClick={() => track(tracking, 'Source', source.href)}>
+          <Link key={source.label} href={source.href} onClick={() => track(tracking, 'Source', source.href)}>
             {source.label}
-          </IframeableLink>,
+          </Link>,
           <span key={`${source.label}-separator`}> • </span>,
         ])
         .slice(0, sources.length * 2 - 1)}

src/components/base/Sources.tsx

@@ -1,32 +1,36 @@
 import classNames from 'classnames'
 import { LinkProps } from 'next/link'
-import { AnchorHTMLAttributes } from 'react'
+import { AnchorHTMLAttributes, ForwardedRef, forwardRef } from 'react'
 import IframeableLink from '../IframeableLink'
 import NewTabIcon from '../NewTabIcon'
 import buttonStyles from './Button.module.css'
 import linkStyles from './Link.module.css'
 
-const Link = ({
-  asButton,
-  internal,
-  noIcon,
-  children,
-  className,
-  ...rest
-}: {
-  asButton?: boolean
-  size?: 'sm' | 'lg'
-  internal?: boolean
-  noIcon?: boolean
-} & LinkProps &
-  AnchorHTMLAttributes<HTMLAnchorElement>) => {
+const Link = (
+  {
+    asButton,
+    internal,
+    noIcon,
+    children,
+    className,
+    ...rest
+  }: {
+    asButton?: boolean
+    size?: 'sm' | 'lg'
+    internal?: boolean
+    noIcon?: boolean
+  } & LinkProps &
+    AnchorHTMLAttributes<HTMLAnchorElement>,
+  ref: ForwardedRef<HTMLAnchorElement>
+) => {
   const external = !internal && (rest.href.includes(':') || rest.href.includes('.') || rest.href.includes('#'))
   return (
     <IframeableLink
+      ref={ref}
       className={classNames(asButton ? buttonStyles.button : linkStyles.link, className, {
         [buttonStyles.small]: rest.size === 'sm',
       })}
-      target={external ? '_blank' : '_self'}
+      target={external ? '_blank' : undefined}
       rel={external ? 'noreferrer noopener' : undefined}
       {...rest}>
       {children}
@@ -35,4 +39,4 @@ const Link = ({
   )
 }
 
-export default Link
+export default forwardRef(Link)

src/components/base/buttons/Link.tsx

@@ -1,8 +1,8 @@
 import { RulePage } from '@publicodes/react-ui'
 import { Children, ReactNode } from 'react'
 import useUsageNumeriqueContext from 'src/providers/UsageNumeriqueProvider'
-import IframeableLink from '../IframeableLink'
 import Markdown from '../Markdown'
+import Link from '../buttons/Link'
 import styles from './Documentation.module.css'
 
 export default function DocumentationUsageNumerique({ slug }: { slug: string }) {
@@ -27,9 +27,9 @@ export default function DocumentationUsageNumerique({ slug }: { slug: string })
             return null
           },
           Link: ({ to, children }) => (
-            <IframeableLink href={to || '/'} prefetch={false}>
+            <Link href={to || '/'} prefetch={false}>
               {children}
-            </IframeableLink>
+            </Link>
           ),
           Text: ({ children }) => <Markdown>{children}</Markdown>,
         }}