feat: added target attribute to links

Author: lordelogos

CHANGELOG.md

@@ -3,7 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [3.0.0](https://github.com/codeskills-dev/md-to-react-email/compare/v2.0.2...v3.0.0) (2023-06-20)
+### [3.0.1](https://github.com/codeskills-dev/md-to-react-email/compare/v3.0.0...v3.0.1) (2023-07-04)
+
+### Features
+
+- Added `target="_blank"` attribute to link tags
+
+### [3.0.0](https://github.com/codeskills-dev/md-to-react-email/compare/v2.0.2...v3.0.0) (2023-07-04)
 
 ### Features
 

__tests__/parseMarkdownToReactEmailJSX.test.ts

@@ -44,7 +44,7 @@ describe("Markdown to React Mail JSX Parser", () => {
     const markdown = "[Codeskills](https://codeskills.dev)";
     const expected = `<a href="https://codeskills.dev" style="${parseCssInJsToInlineCss(
       styles.link
-    )}">Codeskills</a>`;
+    )}" target="_blank">Codeskills</a>`;
 
     const rendered = parseMarkdownToReactEmailJSX({ markdown });
     expect(rendered).toBe(expected);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "md-to-react-email",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A simple Markdown parser for React-email written in typescript.",
   "keywords": [
     "markdown",

src/utils.ts

@@ -1,10 +1,17 @@
-import { sanitize } from "isomorphic-dompurify";
+import DOMPurify from "isomorphic-dompurify";
 import { patterns } from "./patterns";
 import { styles } from "./styles";
 import { StylesType } from "./types";
 
 import { CSSProperties } from "react";
 
+// hook to handle target="_blank" in all links
+DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+  if ("target" in node) {
+    node.setAttribute("target", "_blank");
+  }
+});
+
 export function camelToKebabCase(str: string): string {
   return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 }
@@ -349,7 +356,9 @@ export function parseMarkdownToReactEmailJSX({
     patterns.link,
     `<a${
       withDataAttr ? ' data-id="react-email-link"' : ""
-    } style="${parseCssInJsToInlineCss(finalStyles.link)}"  href="$2" >$1</a>`
+    } style="${parseCssInJsToInlineCss(
+      finalStyles.link
+    )}"  href="$2" target="_blank" >$1</a>`
   );
 
   // Handle code blocks (e.g., ```code```)
@@ -390,5 +399,7 @@ export function parseMarkdownToReactEmailJSX({
     } style="${parseCssInJsToInlineCss(finalStyles.hr)}" />`
   );
 
-  return sanitize(reactMailTemplate, { USE_PROFILES: { html: true } });
+  return DOMPurify.sanitize(reactMailTemplate, {
+    USE_PROFILES: { html: true },
+  });
 }