From 1d1511241df0c118c5c18985e61a2269b1dfc51f Mon Sep 17 00:00:00 2001
From: axel7083 <42176370+axel7083@users.noreply.github.com>
Date: Tue, 16 Jan 2024 18:17:01 +0100
Subject: [PATCH] fix: markdown broken links

---
 packages/frontend/src/lib/MarkdownRenderer.svelte   |  9 ---------
 .../frontend/src/lib/markdown/LinkComponent.svelte  | 13 +++++++++++++
 .../src/lib/markdown/MarkdownRenderer.svelte        | 10 ++++++++++
 packages/frontend/src/pages/Model.svelte            |  2 +-
 packages/frontend/src/pages/Recipe.svelte           |  2 +-
 5 files changed, 25 insertions(+), 11 deletions(-)
 delete mode 100644 packages/frontend/src/lib/MarkdownRenderer.svelte
 create mode 100644 packages/frontend/src/lib/markdown/LinkComponent.svelte
 create mode 100644 packages/frontend/src/lib/markdown/MarkdownRenderer.svelte

diff --git a/packages/frontend/src/lib/MarkdownRenderer.svelte b/packages/frontend/src/lib/MarkdownRenderer.svelte
deleted file mode 100644
index 570a61d22..000000000
--- a/packages/frontend/src/lib/MarkdownRenderer.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-  import SvelteMarkdown from 'svelte-markdown'
-  export let source: string | undefined;
-</script>
-
-<article class="prose min-w-full">
-  <SvelteMarkdown {source} />
-</article>
-
diff --git a/packages/frontend/src/lib/markdown/LinkComponent.svelte b/packages/frontend/src/lib/markdown/LinkComponent.svelte
new file mode 100644
index 000000000..60811fe8c
--- /dev/null
+++ b/packages/frontend/src/lib/markdown/LinkComponent.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+import { studioClient } from '/@/utils/client.js';
+
+export let href: string = "";
+export let title: string | undefined = undefined;
+export let text: string = "";
+
+const onClick = () => {
+  studioClient.openURL(href);
+}
+</script>
+<!-- href set to void operator to avoid any redirect -->
+<a href="{'javascript:void(0);'}" role="button" title="{title}" on:click={onClick}>{text}</a>
diff --git a/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte b/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte
new file mode 100644
index 000000000..e5a1d19d1
--- /dev/null
+++ b/packages/frontend/src/lib/markdown/MarkdownRenderer.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+import SvelteMarkdown from 'svelte-markdown'
+import LinkComponent from '/@/lib/markdown/LinkComponent.svelte';
+export let source: string | undefined;
+</script>
+
+<article class="prose min-w-full">
+  <SvelteMarkdown {source} renderers="{{link: LinkComponent}}" />
+</article>
+
diff --git a/packages/frontend/src/pages/Model.svelte b/packages/frontend/src/pages/Model.svelte
index 81e49f764..31992cd42 100644
--- a/packages/frontend/src/pages/Model.svelte
+++ b/packages/frontend/src/pages/Model.svelte
@@ -2,7 +2,7 @@
 import NavPage from '/@/lib/NavPage.svelte';
 import Tab from '/@/lib/Tab.svelte';
 import Route from '/@/Route.svelte';
-import MarkdownRenderer from '/@/lib/MarkdownRenderer.svelte';
+import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
 import type { ModelInfo } from '@shared/models/IModelInfo';
 import { studioClient } from '../utils/client';
 import { onMount } from 'svelte';
diff --git a/packages/frontend/src/pages/Recipe.svelte b/packages/frontend/src/pages/Recipe.svelte
index bdca5e59b..0b0f7a8b9 100644
--- a/packages/frontend/src/pages/Recipe.svelte
+++ b/packages/frontend/src/pages/Recipe.svelte
@@ -7,7 +7,7 @@ import Tab from '/@/lib/Tab.svelte';
 import Route from '/@/Route.svelte';
 import type { Category } from '@shared/models/ICategory';
 import Card from '/@/lib/Card.svelte';
-import MarkdownRenderer from '/@/lib/MarkdownRenderer.svelte';
+import MarkdownRenderer from '/@/lib/markdown/MarkdownRenderer.svelte';
 import Fa from 'svelte-fa';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { faDownload, faRefresh } from '@fortawesome/free-solid-svg-icons';