open external links in new tab

Author: mikebarkmin

.changeset/long-boats-hammer.md

@@ -0,0 +1,7 @@
+---
+"@hyperbook/markdown": minor
+"hyperbook": minor
+"hyperbook-studio": minor
+---
+
+Open external links in a new tab

packages/markdown/src/remarkLink.ts

@@ -15,6 +15,13 @@ export default (ctx: HyperbookContext) => () => {
           node.type === "definition")
       ) {
         if (node.url) {
+          // make link target blank for external links
+          if (node.type === "link" && /^https?:\/\//.test(node.url)) {
+            if (!node.data) node.data = {};
+            if (!node.data.hProperties) node.data.hProperties = {};
+            node.data.hProperties.target = "_blank";
+            node.data.hProperties.rel = "noopener noreferrer";
+          }
           node.url = ctx.makeUrl(
             node.url,
             "public",

packages/markdown/tests/__snapshots__/process.test.ts.snap

@@ -407,9 +407,9 @@ HYPERBOOK_ASSETS = "/assets/"
   </side-drawer>
   <p>
     Du kannst das Programm am schnellsten per
-    <a href="/public/https:/de.wikipedia.org/Kopieren_und_Einf%C3%BCgen">Kopieren und Einfügen</a>
+    <a href="/public/https:/de.wikipedia.org/Kopieren_und_Einf%C3%BCgen" target="_blank" rel="noopener noreferrer">Kopieren und Einfügen</a>
     in den Editor übernehmen. Du musst aber aufpassen: Wie du weißt
-    sind die Einrückungen (Leer- und <a href="/public/https:/de.wikipedia.org/Tabulatorzeichen">Tabulatorzeichen</a>
+    sind die Einrückungen (Leer- und <a href="/public/https:/de.wikipedia.org/Tabulatorzeichen" target="_blank" rel="noopener noreferrer">Tabulatorzeichen</a>
     )
     in Python Teil des Programms .
   </p>