Allow setting of the "target" attribute for links in the editor

[kyleoliveiro]

- Do you want to request a feature or report a bug? Feature

- What is the current behavior? When adding a link in the markdown editor, the user is only prompted for the URL of the link to be added.

- If the current behavior is a bug, please provide the steps to reproduce. N.A.

- What is the expected behavior? User should be prompted for the target attribute of the link, which can be set to one of the following values: _self, _blank, _parent, _top.

Bonus points for setting rel="noreferrer noopener" on the link if the target matches _blank, _parent or _top.

- Please mention your versions where applicable.

Netlify CMS version: N.A. Browser version: N.A.

Node.JS version: N.A. Operating System: N.A.

- Please link or paste your config.yml below if applicable.

[tech4him1]

@kyleoliveiro Setting the target of a link is not part of Markdown, the links would need to be saved as HTML instead. It's possible to make your own editor component, maybe that would work for your use-case?

There may also be a way to set this in your static site generator. Hugo, for example, can automatically set all off-site links to target="_blank" (hrefTargetBlank docs).

[erquhart]

Editor component is tough because they have to be blocks, and links are generally inline. At the moment they would need to enter the HTML by hand.

I can think of a two potential fixes for this:

1. Easy: allow all links within a markdown field to abide by field configuration, maybe something like:

{
  name: body,
  label: Body,
  widget: markdown,
  options: { linkAttrs: { target: _blank, rel: noreferrer noopener }
}

2. Not as easy: parse both markdown links and HTML links in the editor. If only the url is provided, use a markdown link underneath. If other attributes are provided, use HTML underneath. This would still require configuration to at least select which fields should be enabled in the link form.

Thoughts?

[kyleoliveiro]

For my use case, it's important to be able to control the target attribute for individual links, so the first approach wouldn't work.

We build content-heavy static sites, so maybe creating a custom editor widget makes sense. Redactor seems to have many of the features that we need.

[erquhart]

What other features do you need beside the one mentioned above?

[kyleoliveiro]

No additional features; just need to be able to set target="_blank" selectively on links.

[erquhart]

Got it. Not sure what Redactor outputs, but it isn't open source and it doesn't do Markdown, so I'm not certain how it would work as a Netlify CMS widget.

Solution #2 that I mentioned above should take far less effort than creating a new editor widget. If you're interested in digging in I'd be happy to advise and answer any questions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[MildTomato]

Came to this thread looking for a similar solution.

@erquhart suggestion seems like the most straightforward, at least then you could break up your posts/pages into different sections (I do this so I can build up a contents table on the top of articles) and then have a options attribute to force links to be parsed differently for different sections.

I know it's not really fully answering the request, but it could be a good compromise for the SEO eggheads using netlify CMS

[aphiwadChhoeun]

I use @nuxtjs/markdownit to render, so my workaround is use HTML in the editor <a href="https://www.google.com/" target="_blank">Goto Google</a>, and set html: true in markdownit config:

markdownit: {
    html: true,
},

[martinjagodic]

Closing as stale