Merge pull request #1216 from webkom/internal-links-no-new-tab

Only open links in new tab if they're targeting another host

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webkom/lego-editor",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "A React editor written in TS with slate.js for lego-webapp",
   "type": "module",
   "main": "./dist/lego-editor.umd.cjs",

src/index.tsx

@@ -19,6 +19,7 @@ import { withHistory } from 'slate-history';
 import isHotKey from 'is-hotkey';
 import Toolbar from './components/Toolbar';
 import ImageBlock from './components/ImageBlock';
+import isInternalLink from './utils/isInternalLink';
 import {
   basePlugin,
   insertTab,
@@ -179,8 +180,8 @@ const renderElement = (props: RenderElementProps): JSX.Element => {
         <a
           {...attributes}
           href={element.url}
-          rel="noopener noreferrer"
-          target="_blank"
+          rel={isInternalLink(element.url) ? undefined : 'noopener noreferrer'}
+          target={isInternalLink(element.url) ? undefined : '_blank'}
         >
           {children}
         </a>

src/serializer.tsx

@@ -1,5 +1,6 @@
 import { Node as SlateNode, Text, Element } from 'slate';
 import escape from 'escape-html';
+import isInternalLink from './utils/isInternalLink';
 import { jsx } from 'slate-hyperscript';
 import { Mark } from './custom-types';
 
@@ -114,7 +115,7 @@ export const serialize = (node: SlateNode): string => {
     case 'image_caption':
       return `<figcaption>${children}</figcaption>`;
     case 'link':
-      return `<a target="_blank" href="${node.url}">${children}</a>`;
+      return `<a ${isInternalLink(node.url) ? '' : 'target="_blank" '}href="${node.url}">${children}</a>`;
     case 'quote':
       return `<blockquote>${children}</blockquote>`;
     default:

src/utils/isInternalLink.ts

@@ -0,0 +1,19 @@
+/**
+ * Check if a link url is an internal link or an external one by comparing the host with the current host.
+ * [protocol]//[hostname]:[port]/[pathname] - [host] = [hostname]:[port]
+ *
+ * @param linkUrlString The URL of the link
+ * @returns boolean
+ */
+const isInternalLink = (linkUrlString: string): boolean => {
+  try {
+    const linkUrl = new URL(linkUrlString);
+    const currentUrl = new URL(window.location.href);
+    return linkUrl.host === currentUrl.host;
+  } catch (e) {
+    // Handle invalid URLs as if they are not internal
+    return false;
+  }
+};
+
+export default isInternalLink;