Add Ability to Customize rel and target Attributes in Link Elements, with blockComponentsMapper Support

[nublson]

Summary: Currently, all links in my Notion-rendered pages are automatically set with rel="noreferrer" and target="_blank", and I cannot customize this behavior. This affects both internal and external links, limiting control over SEO, tracking, security, and user experience. I suggest allowing customization of both the rel and target attributes, along with adding support to customize link elements using the blockComponentsMapper feature, similar to how image components are mapped.

Problem:

1. Internal Links:

• The noreferrer attribute prevents referrer information from being passed to internal pages, affecting site analytics and tracking. Additionally, the fixed target="_blank" attribute forces all internal links to open in new tabs, which negatively impacts user experience by creating unnecessary tabs.

2. External Links:

• Without the ability to add noopener, external links that open in new tabs are vulnerable to tabnabbing attacks. Also, not all external links should open in new tabs, and being locked into target="_blank" reduces flexibility.

Proposed Solution:

1. Allow Customization of rel and target Attributes:

• Users should be able to control these attributes for both internal and external links. For example:
• For internal links, allow customization of whether they open in the same tab (target="_self") or a new tab (target="_blank") and provide the option to remove noreferrer.
• For external links, allow applying noopener noreferrer for security, and also allow control over whether they open in a new tab or the same window.

2. Custom Link Mapping Using blockComponentsMapper:

• Provide a way to customize the behavior of link elements, similar to how image blocks are handled. This could be achieved by adding a mapper for links in the blockComponentsMapper.

Example Implementation:

<Render
  blocks={blocks}
  simpleTitles
  classNames
  blockComponentsMapper={{
    image: ImageBlock,
    link: LinkBlock,  // Custom link handling
  }}
/>

Desired Link Behavior:

<a href="/internal-page" target="_self" rel="">Internal Link (same tab)</a>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link (new tab)</a>

Benefits:

• Improved SEO and Analytics: Allowing referrer data to be passed for internal links will improve tracking and analytics for user journeys.
• Enhanced Security: Adding noopener to external links will prevent tabnabbing attacks, ensuring that links opening in new tabs are secure.
• Improved User Experience: Providing control over whether internal links open in the same tab will reduce tab clutter and create a smoother browsing experience for users.
• Customization: Developers can fully control how links behave by customizing them through the blockComponentsMapper, similar to how images are handled.

Steps to Reproduce:

1. Add links to Notion-rendered pages, which are currently automatically set with target="_blank" and rel="noreferrer".
2. Observe that there is no way to customize these attributes or control whether links open in a new tab.
3. Users cannot customize the link rendering behavior, unlike image blocks.

[nublson]

Okay, since you seem to be offline, I decided to "try" adding this feature because I really need it, what I did was add a new property to the Render component called linkAttributes. This property is a function that receives one argument (the link) and returns an object with the respective target and rel attributes.

Something like that:

<Render
    blocks={blocks}
    blockComponentsMapper={myMapper}
    emptyBlocks
    classNames
    useStyles
    linkAttributes={(url) => {
      console.log({ url })
      return {
        target: 'my custom target',
        rel: 'my custom rel'
      }
    }}
/>

It will be very useful for the case you need to handle the internal and external links separately.

<Render
    blocks={blocks}
    simpleTitles
    classNames
    blockComponentsMapper={{
      image: ImageBlock,
    }}
    linkAttributes={(link) => {
      const isInternalLink =
        link.startsWith(process.env.BASE_URL) || link.startsWith("/");

      if (isInternalLink) {
        return {
          target: "_self",
        };
      }

      return {
        target: "_blank",
        rel: "noopener noreferrer",
      };
    }}
/>

I will push the pull request, hope you like it and also hope it helps the other ones who love your library like me! ❤️

[nublson]

Okay, I just decided to install my pull request version on my project and move to prod! It's working fine!

Heres an example: https://nublson.com/blog/how-to-create-a-daily-routine-that-boosts-productivity-and-well-being