From 88c2da8c1ede2d7a7ecc814f5da4f0aefe92ebd8 Mon Sep 17 00:00:00 2001
From: Hendrik Schmidt <hendrik.schmidt@digitalservice.bund.de>
Date: Fri, 19 Jul 2024 21:20:30 +0200
Subject: [PATCH] Track email and phone clicks

---
 package-lock.json                       |  1 +
 packages/dito/app/root.tsx              | 32 ++++++++++++++++++++++++-
 packages/dito/package.json              |  1 +
 packages/shared/components/RichText.tsx | 10 ++++----
 4 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bf4b4e5e..54cc3b6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16417,6 +16417,7 @@
         "@remix-run/react": "^2.9.1",
         "@remix-run/serve": "^2.9.1",
         "isbot": "^5.1.4",
+        "marked": "^13.0.2",
         "mime-types": "^2.1.35",
         "pdf-lib": "^1.17.1"
       },
diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
index ddede933..5b8169a4 100644
--- a/packages/dito/app/root.tsx
+++ b/packages/dito/app/root.tsx
@@ -19,6 +19,7 @@ import {
   isRouteErrorResponse,
   useRouteError,
 } from "@remix-run/react";
+import { marked, type Tokens } from "marked";
 import { type ReactNode } from "react";
 import routes from "resources/allRoutes";
 import { header, siteMeta } from "resources/content";
@@ -61,6 +62,35 @@ export const links: LinksFunction = () => [
   },
 ];
 
+const renderer = new marked.Renderer();
+const extension = {
+  useNewRenderer: true,
+  renderer: {
+    link(token: Tokens.Link) {
+      const { href } = token;
+      const linkHtml = renderer.link.call(this, token);
+
+      if (href.startsWith("mailto")) {
+        return linkHtml.replace(
+          /^<a /,
+          `<a class="plausible-event-name=Mail+Click" `,
+        );
+      }
+
+      if (href.startsWith("tel")) {
+        return linkHtml.replace(
+          /^<a /,
+          `<a class="plausible-event-name=Phone+Click" `,
+        );
+      }
+
+      return linkHtml;
+    },
+  },
+};
+
+marked.use(extension);
+
 const footerLinks = [
   { url: ROUTE_IMPRINT.url, text: "Impressum" },
   { url: ROUTE_PRIVACY.url, text: "Datenschutzerklärung" },
@@ -84,7 +114,7 @@ const PageHeader = ({
         <PhoneOutlined className="mx-8 w-18" />
         <a
           href={`tel:${header.contact.number}`}
-          className="ds-link-01-bold text-lg underline"
+          className="ds-link-01-bold text-lg underline plausible-event-name=Phone+Click"
         >
           {header.contact.number}
         </a>
diff --git a/packages/dito/package.json b/packages/dito/package.json
index 4b65d7bd..26b48224 100644
--- a/packages/dito/package.json
+++ b/packages/dito/package.json
@@ -27,6 +27,7 @@
     "@remix-run/react": "^2.9.1",
     "@remix-run/serve": "^2.9.1",
     "isbot": "^5.1.4",
+    "marked": "^13.0.2",
     "mime-types": "^2.1.35",
     "pdf-lib": "^1.17.1"
   },
diff --git a/packages/shared/components/RichText.tsx b/packages/shared/components/RichText.tsx
index e8b5924d..2b68c08c 100644
--- a/packages/shared/components/RichText.tsx
+++ b/packages/shared/components/RichText.tsx
@@ -1,4 +1,4 @@
-import { marked, Tokens } from "marked";
+import { marked, Marked, Tokens } from "marked";
 import { A11Y_MESSAGE_NEW_WINDOW } from "./Aria";
 
 export type RichTextProps = {
@@ -7,13 +7,13 @@ export type RichTextProps = {
 };
 
 const RichText = ({ markdown, className, ...props }: RichTextProps) => {
-  const renderer = new marked.Renderer();
   const extension = {
     useNewRenderer: true,
     renderer: {
       link(token: Tokens.Link) {
         const { href } = token;
-        const linkHtml = renderer.link.call(this, token);
+        // render the link with the default renderer or a renderer that has overridden it
+        const linkHtml = marked.parseInline(token.raw) as string;
 
         // Force external links to open in a new window
         if (href.startsWith("http")) {
@@ -33,8 +33,8 @@ const RichText = ({ markdown, className, ...props }: RichTextProps) => {
     },
   };
 
-  marked.use(extension);
-  const html = marked.parse(markdown);
+  const newMarked = new Marked(extension);
+  const html = newMarked.parse(markdown);
 
   return html ? (
     <div