Allow radicle-external-link components in commit descriptions

To allow some very basic hyperlinking in commit descriptions we can
replace fully specified urls with a valid scheme into
`radicle-external-link` components within patches and git history.

src/lib/utils.ts

@@ -290,3 +290,12 @@ export function getTagsFromRefs(
   }
   return tags;
 }
+
+// Converts plain URLs into <radicle-external-link> components
+export function convertUrlsToExternalLinks(text: string): string {
+  const urlRegex = /(https?:\/\/[^\s]+)/g;
+  return text.replace(
+    urlRegex,
+    '<radicle-external-link href="$1">$1</radicle-external-link>',
+  );
+}

src/views/repos/Cob/CobCommitTeaser.svelte

@@ -2,7 +2,7 @@
   import type { BaseUrl, CommitHeader } from "@http-client";
   import type { Snippet } from "svelte";
 
-  import { twemoji } from "@app/lib/utils";
+  import { twemoji, convertUrlsToExternalLinks } from "@app/lib/utils";
 
   import CompactCommitAuthorship from "@app/components/CompactCommitAuthorship.svelte";
   import ExpandButton from "@app/components/ExpandButton.svelte";
@@ -12,6 +12,9 @@
   import InlineTitle from "@app/views/repos/components/InlineTitle.svelte";
   import Link from "@app/components/Link.svelte";
 
+  import dompurify from "dompurify";
+  import escape from "lodash/escape";
+
   export let baseUrl: BaseUrl;
   export let commit: CommitHeader;
   export let repoId: string;
@@ -90,7 +93,9 @@
     </div>
     {#if commitMessageVisible}
       <div class="commit-message" style:margin="0.5rem 0">
-        <pre>{commit.description.trim()}</pre>
+        <pre>{@html dompurify.sanitize(
+            convertUrlsToExternalLinks(escape(commit.description.trim())),
+          )}</pre>
       </div>
     {/if}
     <div class="authorship global-hide-on-small-desktop-up">

src/views/repos/Commit.svelte

@@ -3,7 +3,11 @@
 
   import dompurify from "dompurify";
   import escape from "lodash/escape";
-  import { baseUrlToString, formatObjectId } from "@app/lib/utils";
+  import {
+    baseUrlToString,
+    formatObjectId,
+    convertUrlsToExternalLinks,
+  } from "@app/lib/utils";
 
   import Button from "@app/components/Button.svelte";
   import Changeset from "@app/views/repos/Changeset.svelte";
@@ -34,14 +38,6 @@
   });
 
   $: header = commit.commit;
-
-  function convertUrlsToExternalLinks(text: string): string {
-    const urlRegex = /(https?:\/\/[^\s]+)/g;
-    return text.replace(
-      urlRegex,
-      '<radicle-external-link href="$1">$1</radicle-external-link>',
-    );
-  }
 </script>
 
 <style>

src/views/repos/Commit/CommitTeaser.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { BaseUrl, CommitHeader } from "@http-client";
 
-  import { twemoji } from "@app/lib/utils";
+  import { convertUrlsToExternalLinks, twemoji } from "@app/lib/utils";
 
   import CommitAuthorship from "./CommitAuthorship.svelte";
   import ExpandButton from "@app/components/ExpandButton.svelte";
@@ -11,6 +11,9 @@
   import Link from "@app/components/Link.svelte";
   import Id from "@app/components/Id.svelte";
 
+  import dompurify from "dompurify";
+  import escape from "lodash/escape";
+
   export let baseUrl: BaseUrl;
   export let commit: CommitHeader;
   export let repoId: string;
@@ -100,7 +103,9 @@
     </div>
     {#if commitMessageVisible}
       <div class="commit-message">
-        <pre>{commit.description.trim()}</pre>
+        <pre>{@html dompurify.sanitize(
+            convertUrlsToExternalLinks(escape(commit.description.trim())),
+          )}</pre>
       </div>
     {/if}
     <CommitAuthorship header={commit}>