Matches link behavior with notions one

[josemussa]

Fixes #10

Use target="_blank" and rel="noopener noreferrer" for a elements

---

Edit:

I'm adding the linkTarget property to define link behavior, users can provide one of these three options: _self, _blank, { host: "splitbee.io" }.

_self (default): To preserve backward compatibility we default to this option, all links internal or external will be open on the same page.

<NotionRenderer blockMap={blockMap} linkTarget="_self" />

_blank: All links will be open on a new page.

<NotionRenderer blockMap={blockMap} linkTarget="_blank" />

{ host }: By providing a host all links to the provided host will open on the same page, and all non-matching links will open on a new page –this matches notions' behavior.–

<NotionRenderer blockMap={blockMap} linkTarget={{ host: "splitbee.io" }} />

[tobiaslins]

Thanks for your PR!
I think that we don't want to match the exact behaviour of links here.
target="_blank" make sense for external links but not for links on the same page.

I would suggest to just add _blank in case it's an external link!

[josemussa]

Hey @tobiaslins, I had to go with a bit more elaborated solution.
Since we can't infer the host from window.location to allow for node environments I added it as a component property.

<NotionRenderer blockMap={blockMap} linkTarget={{ host: "splitbee.io" }} />

At the same time, I don't want to introduce a breaking change, so I'm defaulting to _self.
And lastly, I thought it'd useful to configure a standard global behavior, like all _self or all _blank.

[tobiaslins]

hey @josemussa.
Thanks again!

I just took a deeper look into the blockMap again and recognized that links are only external. (Mixed them with Notion Page Links)
sorry, haven't thought enough yesterday :(

Let's just add target="_blank" to all links.

Another topic on links:
I would like to introduce custom Link components/wrapping.
That means that Next.js & Gatsby links can be used. I'll create an issue for that.

[josemussa]

Although all links are external on the blockMap, if the intention is to use Notion as a CMS it'd be a bit weird to use target="_blank" for every link, plus this will introduce breaking changes on the current behavior :/

Nice! It'd be very useful to use custom Link components!

[tobiaslins]

@josemussa I'll discuss with @timolins

Also, I'm sure if we add this, we should do it without url-parse
Just use new URL('https://splitbee.io').host for example

[josemussa]

@josemussa I'll discuss with @timolins

Also, I'm sure if we add this, we should do it without url-parse
Just use new URL('https://splitbee.io').host for example

btw, new URL is not supported on ie11 😞 if we end up implementing this we'd need to fix this

[timolins]

We added support for custom blocks/components with the latest beta release (0.9.0).

You can get the behaviour you want by providing a custom a renderer to the

<NotionRenderer
  blockMap={blockMap}
  customDecoratorComponents={{
    a: ({ decoratorValue, children }) => (
      <a href={decoratorValue} target="_blank" rel="noopener noreferrer">
        {children}
      </a>
    )
  }}
/>