Implements linkTarget prop to define link behavior

Author: josemussa

package.json

@@ -49,6 +49,7 @@
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
+    "@types/url-parse": "^1.4.3",
     "husky": "^4.2.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -58,6 +59,7 @@
     "typescript": "^3.8.3"
   },
   "dependencies": {
-    "prismjs": "^1.20.0"
+    "prismjs": "^1.20.0",
+    "url-parse": "^1.4.7"
   }
 }

src/block.tsx

@@ -3,7 +3,8 @@ import {
   DecorationType,
   BlockType,
   ContentValueType,
-  BlockMapType
+  BlockMapType,
+  LinkTargetType
 } from "./types";
 import Asset from "./components/asset";
 import Code from "./components/code";
@@ -12,10 +13,17 @@ import {
   classNames,
   getTextContent,
   getListNumber,
-  toNotionImageUrl
+  toNotionImageUrl,
+  getLinkTargetProps
 } from "./utils";
 
-export const renderChildText = (properties: DecorationType[]) => {
+interface createRenderChildText {
+  linkTarget?: LinkTargetType;
+}
+
+export const createRenderChildText = (options?: createRenderChildText) => (
+  properties: DecorationType[]
+) => {
   return properties?.map(([text, decorations], i) => {
     if (!decorations) {
       return <React.Fragment key={i}>{text}</React.Fragment>;
@@ -43,7 +51,13 @@ export const renderChildText = (properties: DecorationType[]) => {
           return <s key={i}>{element}</s>;
         case "a":
           return (
-            <a className="notion-link" href={decorator[1]} key={i}>
+            <a
+              className="notion-link"
+              href={decorator[1]}
+              key={i}
+              rel="noopener noreferrer"
+              {...getLinkTargetProps(decorator[1], options?.linkTarget)}
+            >
               {element}
             </a>
           );
@@ -61,14 +75,17 @@ interface Block {
   block: BlockType;
   level: number;
   blockMap: BlockMapType;
+  linkTarget?: LinkTargetType;
 
   fullPage?: boolean;
   mapPageUrl?: MapPageUrl;
 }
 
 export const Block: React.FC<Block> = props => {
-  const { block, children, level, fullPage, blockMap } = props;
+  const { block, children, level, fullPage, blockMap, linkTarget } = props;
   const blockValue = block?.value;
+  const renderChildText = createRenderChildText({ linkTarget });
+
   switch (blockValue?.type) {
     case "page":
       if (level === 0) {

src/renderer.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { BlockMapType } from "./types";
+import { BlockMapType, LinkTargetType } from "./types";
 import { Block, MapPageUrl } from "./block";
 
 export interface NotionRendererProps {
   blockMap: BlockMapType;
   mapPageUrl?: MapPageUrl;
   fullPage?: boolean;
+  linkTarget?: LinkTargetType;
 
   currentId?: string;
   level?: number;

src/types.ts

@@ -284,3 +284,10 @@ export interface LoadPageChunkData {
     stack: any[];
   };
 }
+
+export type LinkTargetType =
+  | "_self"
+  | "_blank"
+  | {
+      host: string;
+    };

src/utils.ts

@@ -1,4 +1,5 @@
-import { DecorationType, BlockMapType } from "./types";
+import parse from "url-parse";
+import { DecorationType, BlockMapType, LinkTargetType } from "./types";
 
 export const classNames = (...classes: Array<string | undefined | false>) =>
   classes.filter(a => !!a).join(" ");
@@ -48,3 +49,28 @@ export const toNotionImageUrl = (url: string) => {
     url.startsWith("/image") ? url : `/image/${encodeURIComponent(url)}`
   }`;
 };
+
+export const getLinkTargetProps = (
+  link: string,
+  linkTarget: LinkTargetType = "_self"
+) => {
+  const targetBlank = {
+    target: "_blank"
+  };
+
+  if (linkTarget === "_blank") {
+    return targetBlank;
+  }
+
+  if (linkTarget === "_self" || !linkTarget.host) {
+    return;
+  }
+
+  const parsedLink = parse(link);
+
+  if (linkTarget.host !== parsedLink.host) {
+    return targetBlank;
+  }
+
+  return;
+};

yarn.lock

@@ -1172,6 +1172,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/url-parse@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.3.tgz#fba49d90f834951cb000a674efee3d6f20968329"
+  integrity sha512-4kHAkbV/OfW2kb5BLVUuUMoumB3CP8rHqlw48aHvFy5tf9ER0AfOonBlX29l/DD68G70DmyhRlSYfQPSYpC5Vw==
+
 "@types/yargs-parser@*":
   version "15.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
@@ -4794,6 +4799,11 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
+querystringify@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
+  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
+
 react-dom@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
@@ -5013,6 +5023,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -6000,6 +6015,14 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
+url-parse@^1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
+  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"