Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Allow `radicle-external-link` components in commit descriptions
Yumin Chen committed 15 days ago
commit 20be88e5dafa43d1bbd0203f34b6e99aed607b66
parent 613e5e18101f83bcb386b2f0523c94ee8b6b2dec
4 files changed +28 -13
modified 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>',
+ 
  );
+ 
}
modified 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">
modified 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>
modified 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}>