Link target attribute missing after updating version

[jmsansan]

Description

Coming from Plate Version 10, we were passing target: '_blank' to link the plugin in nodeProps. After updating to Plate version 19.5, we found the existing link nodes attributes don't have the target="_blank" anymore, therefore opening the link on the same page. We don't see this change reported on the CHANGELOGS of the link plugin.

[WillTaylor22]

Could I bump this too :)

We're a messaging app, so users share links a lot. Any help appreciated.

[12joan]

I'm trying to find which PR caused this change; none of the changes in Plate 19.5.0 seem to be responsible. Can you confirm which version this first started happening in?

The quickest way of solving this in your own app would be to make your own Link component. You can reuse as much or as little of Plate UI's component as you want; just import and extend any one of LinkElement, LinkRoot, useLink or getLinkAttributes.

The best way of solving this in Plate would be to make the default target customizable in the plugin options. If anyone wants to submit a PR for this, I would recommend adding a defaultLinkAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement> plugin option which is consumed in getLinkAttributes. Probably best to keep the default as it is now to prevent more breaking changes, even if the original breaking change was unintentional.

[WillTaylor22]

Thanks Joan

The files amongst the Link item are very interrelated so we've had to make a local copy of the entire link package here:
https://github.com/udecode/plate/tree/main/packages/nodes/link

However, we can't find any place to make a change that changes the link to _target=blank. We've tried to change the component, and any other places that already mention "target" - but with no luck.

Notably, getLinkAttributes seems to be ignored wherever it is used (including in createLinkPlugin)? You can have it return an empty object, or any values at all, and the result is the same.

Also in createLinkPlugin, in the then attribute, in deserializeHtml, getNode is never called?
this means the line target: el.getAttribute("target") || "_blank" is never read.

Honestly, it's been quite a frustrating experience. But any help appreciated - particularly as it seems like a few people besides me have this bug.

[12joan]

I'm sorry to hear that setting target in the component didn't work. I think the reason for that is this line in getLinkAttributes.ts, which returns target as undefined rather than simply omitting it from the returned object. This would override any target prop set earlier in the React props, which seems to be what you're seeing.

One workaround would be to set target after any props returned from Plate. See this sandbox for an example.

I've created a PR #2405 to fix this issue in Plate and also add the defaultLinkAttributes option I described in my earlier post.

Also in createLinkPlugin, in the then attribute, in deserializeHtml, getNode is never called?
this means the line target: el.getAttribute("target") || "_blank" is never read.

Deserializing HTML seems to be working correctly for links. I pasted in a link with target="_self" and it deserialized it correctly.

[WillTaylor22]

This is working now! Thanks so much

For anyone else trying to get this to work, I'm using this set up:

plate/examples/src/link/linkPlugin.tsx

Line 11 in 563a3b5

defaultLinkAttributes: {