Add markdown support to node description — radicle-explorer

rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5

Radicle web interface

Add markdown support to node description

Open did:key:z6MkfWmq...UvNm opened 1 year ago

1 file changed +16 -2 b21b2bae → 2075c320

modified src/views/nodes/View.svelte

@@ -1,10 +1,13 @@

 <script lang="ts">
   import type { BaseUrl, Node, NodeStats } from "@http-client";
   import dompurify from "dompurify";
   import * as router from "@app/lib/router";
   import { baseUrlToString } from "@app/lib/utils";
   import { fetchRepoInfos } from "@app/components/RepoCard";
   import { handleError } from "@app/views/nodes/error";
   import { Renderer, markdownWithExtensions } from "@app/lib/markdown";
   import { activeUnloadedRouteStore } from "@app/lib/router";
   import Settings from "@app/App/Settings.svelte";

@@ -29,6 +32,8 @@

   export let baseUrl: BaseUrl;
   export let stats: NodeStats;
   export let node: Node;
   // If true, add <br> on a single line break
   export let breaks: boolean = false;
   let scrollY: number;
   let top: number;

@@ -42,6 +47,15 @@

   $: background = node.bannerUrl
     ? `url("${node.bannerUrl}")`
     : `url("/images/default-seed-header.png")`;
   function render(content: string): string {
     return dompurify.sanitize(
       markdownWithExtensions.parse(content, {
         renderer: new Renderer($activeUnloadedRouteStore),
         breaks,
       }) as string,
     );
   }
 </script>
 <style>

@@ -274,7 +288,7 @@

         </div>
         {#if node.description}
           <div class="description txt-small">
             {node.description}
             {@html render(node.description)}
           </div>
         {:else}
           <div

@@ -398,7 +412,7 @@

               style:gap="0.25rem">
               {#if node.description}
                 <div class="description txt-small">
                   {node.description}
                   {@html render(node.description)}
                 </div>
               {/if}
             </div>