[FEATURE] Allow overriding `target` and `rel` attributes of links

[silverlila]

Is this a unique feature?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Is your feature request related to a problem/unavailable functionality? Please describe.

Hi,

First of all, I want to congratulate on the fantastic work that has been done with this library; it has been incredibly useful for a project i'm working on.

Current Situation Currently, the library does not offer a way to dynamically update the target and rel attributes of a link within the LinkTool. This limitation affects a use case where we need these attributes to be customizable for different links. Would you be willing to allow for a change where these link attributes can be dynamic?

Proposed Solution

I propose modifying the existing link updating logic to include target and rel props. This change will allow users to dynamically set these attributes when creating or editing links.

From what I inspected in the code, this seems to be the place where we could offer the possibility to override these attributes:

DefaultToolbarRender.tsx

const linkNode = {
  type: 'link',
  children: [{ text: link.title }],
  props: {
    target: link?.target ?? '_blank', // Suggested change: Add target prop
    rel: link.rel ?? 'noreferrer',    // Suggested change: Add rel prop
    nodeType: 'inline',
    url: link.url,
    title: link.title,
  },
} as SlateElement;

Screenshots

Here is a screenshot of the custom LinkTool component I am using, which demonstrates the need for these dynamic attributes:

Do you want to work on this issue?

Yes

If "yes" to the above, please explain how you would technically implement this (issue will not be assigned if this is skipped)

I plan to implement the proposed changes by updating the onUpdateLink callback to include target and rel attributes in the link properties. This will allow these attributes to be dynamically set when creating or editing links.

Implementation Steps:

1. Identify the Code Snippet: Locate the code snippet where the link properties are defined.
2. Modify the Code: Update the code to include target and rel attributes in the link properties. Here is the relevant code snippet with the proposed changes:

Copy code

const linkNode = {
  type: 'link',
  children: [{ text: link.title }],
  props: {
    target: link?.target ?? '_blank', // Suggested change: Add target attribute
    rel: link.rel ?? 'noreferrer',    // Suggested change: Add rel attribute
    nodeType: 'inline',
    url: link.url,
    title: link.title,
  },
} as SlateElement;

[maZahaca]

@silverlila, thanks for reporting that issue! We are super excited to see your willingness to work on it.

Consider joining our Telegram Dev Community, where we can respond faster and discuss it in detail.

Please check CONTRIBUTING.md to get the steps started. If you see how we can improve the contributing guide, please let us know 🙏

[Darginec05]

Added in v4.3.1 thanks to @silverlila