Add InlineTitle component — radicle-explorer

This new component doesn’t rely on marked.js but escapes any special characters and then replaces any backtick with a <code> HTML tag to render any inline codeblocks in all titles.

Also updates tsconfig target to es2021, this gives us support for String.replaceAll

👉 Preview 👉 Workflow runs 👉 Branch on GitHub

 <script lang="ts">
   import dompurify from "dompurify";
   import markdown from "@app/lib/markdown";
   import { twemoji } from "@app/lib/utils";
   import { activeUnloadedRouteStore } from "@app/lib/router";
   import { Renderer } from "@app/lib/markdown";
   export let content: string;
   export let stripEmphasizedStyling: boolean = false;
   export let fontSize: "tiny" | "small" | "regular" | "medium" | "large" =
     "small";
   const render = (content: string): string =>
     dompurify.sanitize(
       markdown.parseInline(content, {
         renderer: new Renderer($activeUnloadedRouteStore, {
           stripEmphasizedStyling,
         }),
       }) as string,
     );
 </script>
 <style>
   .markdown :global(code) {
     font-family: var(--font-family-monospace);
     background-color: var(--color-fill-ghost);
     border-radius: var(--border-radius-tiny);
     padding: 0.125rem 0.25rem;
   }
   .markdown :global(strong) {
     font-weight: var(--font-weight-semibold);
   }
 </style>
 <span
   class="markdown"
   use:twemoji
   class:txt-large={fontSize === "large"}
   class:txt-medium={fontSize === "medium"}
   class:txt-regular={fontSize === "regular"}
   class:txt-small={fontSize === "small"}
   class:txt-tiny={fontSize === "tiny"}>
   {@html render(content)}
 </span>

   function render(content: string): string {
     return dompurify.sanitize(
       markdownWithExtensions.parse(content, {
         renderer: new Renderer($activeUnloadedRouteStore, {
           stripEmphasizedStyling: false,
         }),
         renderer: new Renderer($activeUnloadedRouteStore),
         breaks,
       }) as string,
     );

 export class Renderer extends BaseRenderer {
   #route: Route;
   #stripEmphasizedStyling: boolean | undefined;
   /**
    * If `baseUrl` is provided, all hrefs attributes in anchor tags, except those
    * starting with `#`, are resolved with respect to `baseUrl`
    */
   constructor(
     activeUnloadedRoute: Route,
     { stripEmphasizedStyling }: { stripEmphasizedStyling: boolean },
   ) {
   constructor(activeUnloadedRoute: Route) {
     super();
     this.#route = activeUnloadedRoute;
     this.#stripEmphasizedStyling = stripEmphasizedStyling;
   }
   // Overwrites the rendering of heading tokens.
   // Since there are possible non ASCII characters in headings,

     return `<h${depth} id="${escapedText}">${text}</h${depth}>`;
   }
   strong({ tokens }: Tokens.Strong) {
     const text = this.parser.parseInline(tokens);
     return this.#stripEmphasizedStyling ? text : `<strong>${text}</strong>`;
   }
   em({ tokens }: Tokens.Em) {
     const text = this.parser.parseInline(tokens);
     return this.#stripEmphasizedStyling ? text : `<em>${text}</em>`;
   }
   link({ href, title, tokens }: Tokens.Link): string {
     const text = this.parser.parseInline(tokens);
     if (href.startsWith("#")) {

   return agent.slice(1, -1);
 }
 export function formatInlineTitle(input: string): string {
   return input.replaceAll(/`([^`]+)`/g, "<code>$1</code>");
 }
 export function parseNodeId(
   nid: string,
 ): { prefix: string; pubkey: string } | undefined {

   import IconButton from "@app/components/IconButton.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Id from "@app/components/Id.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import InlineTitle from "@app/views/projects/components/InlineTitle.svelte";
   import Link from "@app/components/Link.svelte";
   export let baseUrl: BaseUrl;

           commit: commit.id,
         }}>
         <div class="summary" use:twemoji>
           <InlineMarkdown fontSize="small" content={commit.summary} />
           <InlineTitle fontSize="small" content={commit.summary} />
         </div>
       </Link>
       {#if commit.description}

     <div class="header">
       <div style="display:flex; flex-direction: column; gap: 0.5rem;">
         <span class="title">
           <InlineMarkdown
             stripEmphasizedStyling
             fontSize="large"
             content={header.summary} />
           <InlineTitle fontSize="large" content={header.summary} />
           <div class="button-container">
             <Link
               route={{

         }}>
         <div style="position: relative;">
           <div class="summary" use:twemoji>
             <InlineMarkdown fontSize="regular" content={commit.summary} />
             <InlineTitle fontSize="regular" content={commit.summary} />
           </div>
         </div>
       </Link>

               <span class="txt-missing">No title</span>
             {:else}
               <div class="title">
                 <InlineMarkdown
                   stripEmphasizedStyling
                   fontSize="large"
                   content={newTitle} />
                 <InlineTitle fontSize="large" content={newTitle} />
               </div>
             {/if}
           </div>

           {#if !issue.title}
             <span class="txt-missing">No title</span>
           {:else}
             <InlineMarkdown fontSize="regular" content={issue.title} />
             <InlineTitle fontSize="regular" content={issue.title} />
           {/if}
         </Link>
       </span>

           node: baseUrl,
           patch: patch.id,
         }}>
         <InlineMarkdown fontSize="regular" content={patch.title} />
         <InlineTitle fontSize="regular" content={patch.title} />
       </Link>
       {#if patch.labels.length > 0}
         <span

   </div>
 </div>
 <div class="description" use:twemoji>
   <InlineMarkdown fontSize="regular" content={project.description} />
   {render(project.description)}
 </div>

 test("navigate single issue", async ({ page }) => {
   await page.goto(`${cobUrl}/issues`);
   await page.getByText("This title has markdown").click();
   await page.getByText("This title has **markdown**").click();
   await expect(page).toHaveURL(/\/issues\/[0-9a-f]{40}/);
 });

   test.each([
     {
       input: "<TR> Hello `new` world",
       expected: "<TR> Hello <code>new</code> world",
     },
     { input: "Hello `new` world", expected: "Hello <code>new</code> world" },
     {
       input: "Hello `new` world `radicle`",
       expected: "Hello <code>new</code> world <code>radicle</code>",
     },
     { input: "Hello `` world", expected: "Hello `` world" },
     { input: "Hello `", expected: "Hello `" },
     { input: "Hello", expected: "Hello" },
   ])("formatInlineTitle $input => $expected", ({ input, expected }) => {
     expect(utils.formatInlineTitle(input)).toEqual(expected);
   });
   test.each([
     {
       id: "did:key:z6MkmzRwg47UWQxczLLLFfkEwpBGitjzJ1vKPE8U9ymd6fz6",
       expected: "did:key:z6Mkmz…md6fz6",
     },

   "exclude": ["node_modules/*", "radicle-httpd/*"],
   "compilerOptions": {
     "noEmit": true,
     "target": "es2020",
     "target": "es2021",
     "module": "es2022",
     "types": ["vite/client"],
     "sourceMap": true,