c04d399 Revert HTML tag escaping — radicle-explorer

Radicle web interface

Revert HTML tag escaping

Sebastian Martinez committed 2 years ago

commit c04d399cf3e210ba7fe50f5d041e0b22f5e00ce6
parent 8ef8ce5b81fab80ecc701338921d07377a071037

6 files changed +12 -33

modified src/components/InlineMarkdown.svelte

@@ -2,14 +2,13 @@

   import dompurify from "dompurify";
   import { marked } from "marked";
   import { renderer, walkTokens } from "@app/lib/markdown";
   import { renderer } from "@app/lib/markdown";
   import { twemoji } from "@app/lib/utils";
   export let content: string;
   export let fontSize: "tiny" | "small" | "medium" = "small";
   marked.use({
     walkTokens,
     renderer,
     // TODO: Disables deprecated options, remove once removed from marked
     mangle: false,

@@ -17,8 +16,7 @@

   });
   const render = (content: string): string =>
     // eslint-disable-next-line @typescript-eslint/naming-convention
     dompurify.sanitize(marked.parseInline(content), { SANITIZE_DOM: false });
     dompurify.sanitize(marked.parseInline(content));
 </script>
 <style>

modified src/components/Markdown.svelte

@@ -12,7 +12,6 @@

   import {
     markdownExtensions as extensions,
     renderer,
     walkTokens,
   } from "@app/lib/markdown";
   import { updateProjectRoute } from "@app/views/projects/router";

@@ -27,7 +26,6 @@

   );
   marked.use({
     extensions,
     walkTokens,
     renderer,
     // TODO: Disables deprecated options, remove once removed from marked
     mangle: false,

@@ -37,8 +35,7 @@

   let container: HTMLElement;
   const render = (content: string): string =>
     // eslint-disable-next-line @typescript-eslint/naming-convention
     dompurify.sanitize(marked.parse(content), { SANITIZE_DOM: false });
     dompurify.sanitize(marked.parse(content));
   function navigateToMarkdownLink(event: any) {
     if (event.target.matches(".file-link")) {

modified src/lib/markdown.ts

@@ -1,9 +1,15 @@

 import dompurify from "dompurify";
 import emojis from "@app/lib/emojis";
 import katex from "katex";
 import { marked } from "marked";
 import { isUrl } from "@app/lib/utils";
 const trustedHtmlTags = ["small", "dl", "dt", "dd", "code"];
 dompurify.setConfig({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   SANITIZE_DOM: false,
   // eslint-disable-next-line @typescript-eslint/naming-convention
   FORBID_TAGS: ["textarea", "style"],
 });
 // TODO: Disables deprecated options, remove once removed from marked
 marked.use({ mangle: false, headerIds: false });

@@ -120,18 +126,6 @@ const anchorMarkedExtension = {

   },
 };
 export const walkTokens = (token: marked.Tokens.Generic) => {
   if (token.type !== "code" && token.type !== "codespan" && "text" in token) {
     if (trustedHtmlTags.some(tag => token.text.includes(tag))) {
       return;
     }
     token.text = token.text.replace(
       /<([^>]+)>/g,
       (_match: RegExpMatchArray, tagContent: string) => `&lt;${tagContent}&gt;`,
     );
   }
 };
 export const renderer = {
   // Overwrites the rendering of heading tokens.
   // Since there are possible non ASCII characters in headings,

modified src/views/projects/ProjectMeta.svelte

@@ -1,6 +1,6 @@

 <script lang="ts">
   import Clipboard from "@app/components/Clipboard.svelte";
   import DOMPurify from "dompurify";
   import dompurify from "dompurify";
   import ProjectLink from "@app/components/ProjectLink.svelte";
   import { formatNodeId, twemoji } from "@app/lib/utils";

@@ -110,6 +110,6 @@

     <Clipboard small text={projectId} />
   </div>
   <div class="description" use:twemoji>
     {@html DOMPurify.sanitize(linkifyDescription(projectDescription))}
     {@html dompurify.sanitize(linkifyDescription(projectDescription))}
   </div>
 </header>

modified tests/fixtures/repos/markdown.tar.bz2

modified tests/visual/markdown.spec.ts

@@ -182,13 +182,3 @@ test("relative image not able to being loaded", async ({ page }) => {

   });
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
 test("rendering of html tags", async ({ page }) => {
   await page.goto(`${markdownUrl}/tree/main/tag-rendering.md#html-tags`, {
     waitUntil: "networkidle",
   });
   await expect(
     page.locator("text=Rendering of html tags").first(),
   ).toBeVisible();
   await expect(page).toHaveScreenshot({ fullPage: true });
 });