feat: Link node with target and rel

[andrewchmr]

Issue: #2671

Support target and rel for LinkNode

Ideas for the future:

• Add an option in the playground if link should be opened in the new tab

[facebook-github-bot]

Hi @andrewchmr!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	Jul 25, 2022 at 4:49PM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	Jul 25, 2022 at 4:49PM (UTC)

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[thegreatercurve]

Can we name this to be something more explicit, like setRelationship?

[thegreatercurve]

LGTM @andrewchmr! It just seems to be breaking a few tests to do with the Autolink node.

[thegreatercurve]

@andrewchmr This is weird, I can't actually seeing any tests failing in the CI, especially the unit tests. Can you try rebasing onto main and then force pushing an update to trigger another CI run? It might be some weird caching issue with Github Actions

[thegreatercurve]

The failing unit tests are due to a the coverage reports returning errors. Given that we don't use the coverage reports, we can probably just delete them: #2699

[thegreatercurve]

LGTM @andrewchmr! Thanks for making these backwards compatible and adding in the tests.

[thegreatercurve]

Closes #2671

[andrewchmr]

Last commit handles updateDOM when target or relationship is undefined

If target or relationship is undefined then we remove this attribute otherwise, we set it

[fameoflight]

Any ideas on how can I enable target="_blank" as default for any link

[giokallis]

Is there anything new with @fameoflight's proposal ? I also don't understand how to use the target in LinkNode!

[tylerklose]

Is there anything new with @fameoflight's proposal ? I also don't understand how to use the target in LinkNode!

I tried achieving this by using the following, but have had no luck:

  const URL_MATCHER =
    /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/

  const MATCHERS = [
    (text: string) => {
      const match = URL_MATCHER.exec(text)
      return (
        match && {
          index: match.index,
          length: match[0].length,
          text: match[0],
          url: match[0],
          attributes: { rel: "noopener", target: "_blank" }
        }
      )
    },
  ]
  
  ...
  
<AutoLinkPlugin matchers={MATCHERS} />

[djeriko]

Any ideas on how can I enable target="_blank" as default for any link

Try this when you pass nodes to config in LexicalComposer:

const LINK_NODES = [
  {
    replace: LinkNode,
    with: (node: LinkNode) => {
      return new LinkNode(node.__url, { target: '_blank' })
    }
  }
]