78b988a Replace custom extension with `marked-katex-extension` — radicle-explorer

Radicle web interface

Replace custom extension with `marked-katex-extension`

Sebastian Martinez committed 2 years ago

commit 78b988af95b659e27798ceaacbec3db75fc436d4
parent fabd98fb575f2f2147b4f0d93898b11596f9ee4d

5 files changed +44 -37

modified package-lock.json

@@ -17,9 +17,9 @@

         "dompurify": "^3.0.4",
         "hast-util-to-dom": "^3.1.1",
         "hast-util-to-html": "^8.0.4",
         "katex": "^0.16.8",
         "lodash": "^4.17.21",
         "marked": "^5.1.0",
         "marked-katex-extension": "^3.0.0",
         "md5": "^2.3.0",
         "plausible-tracker": "^0.3.8",
         "sinon": "^15.2.0",

@@ -826,8 +826,7 @@

     "node_modules/@types/katex": {
       "version": "0.16.0",
       "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz",
       "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==",
       "dev": true
       "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw=="
     },
     "node_modules/@types/lodash": {
       "version": "4.14.195",

@@ -3079,6 +3078,18 @@

         "node": ">= 18"
       }
     },
     "node_modules/marked-katex-extension": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/marked-katex-extension/-/marked-katex-extension-3.0.0.tgz",
       "integrity": "sha512-zaSO2LGwq8xI2QgGfLqHSiMFFj3l+7vq520DZ+mnD5jeq6iF8w/JtUfIUPVxi3gmpkcJVOBSpaN0b2Wosn2dzA==",
       "dependencies": {
         "@types/katex": "^0.16.0",
         "katex": "^0.16.8"
       },
       "peerDependencies": {
         "marked": "^4 || ^5"
       }
     },
     "node_modules/md5": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/md5/-/md5-2.3.0.tgz",

modified package.json

@@ -60,9 +60,9 @@

     "dompurify": "^3.0.4",
     "hast-util-to-dom": "^3.1.1",
     "hast-util-to-html": "^8.0.4",
     "katex": "^0.16.8",
     "lodash": "^4.17.21",
     "marked": "^5.1.0",
     "marked-katex-extension": "^3.0.0",
     "md5": "^2.3.0",
     "plausible-tracker": "^0.3.8",
     "sinon": "^15.2.0",

modified src/lib/markdown.ts

@@ -1,10 +1,11 @@

 import type { marked } from "marked";
 import dompurify from "dompurify";
 import emojis from "@app/lib/emojis";
 import katex from "katex";
 import katexMarkedExtension from "marked-katex-extension";
 import { Marked, Renderer as BaseRenderer } from "marked";
 import emojis from "@app/lib/emojis";
 dompurify.setConfig({
   // eslint-disable-next-line @typescript-eslint/naming-convention
   SANITIZE_DOM: false,

@@ -30,25 +31,6 @@ const emojisMarkedExtension = {

     `<span>${token.text in emojis ? emojis[token.text] : token.text}</span>`,
 };
 const katexMarkedExtension = {
   name: "katex",
   level: "inline",
   start: (src: string) => src.indexOf("$"),
   tokenizer(src: string) {
     const match = src.match(/^\$+([^$\n]+?)\$+/);
     if (match) {
       return {
         type: "katex",
         raw: match[0],
         text: match[1].trim(),
       };
     }
   },
   renderer: (token: marked.Tokens.Generic): string =>
     katex.renderToString(token.text, {
       throwOnError: false,
     }),
 };
 const footnotePrefix = "marked-fn";
 const referencePrefix = "marked-fnref";
 const referenceMatch = /^\[\^([^\]]+)\](?!\()/;

@@ -158,17 +140,19 @@ export class Renderer extends BaseRenderer {

   }
 }
 const markedInstance = new Marked({
   extensions: [
     emojisMarkedExtension,
     katexMarkedExtension,
     footnoteMarkedExtension,
     footnoteReferenceMarkedExtension,
     anchorMarkedExtension,
   ],
   // TODO: Disables deprecated options, remove once removed from marked
   mangle: false,
   headerIds: false,
 });
 const markedInstance = new Marked(
   katexMarkedExtension({ throwOnError: false }),
   {
     extensions: [
       emojisMarkedExtension,
       footnoteMarkedExtension,
       footnoteReferenceMarkedExtension,
       anchorMarkedExtension,
     ],
     // TODO: Disables deprecated options, remove once removed from marked
     mangle: false,
     headerIds: false,
   },
 );
 export default markedInstance;

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

modified tests/visual/markdown.spec.ts

@@ -118,6 +118,18 @@ test.describe("markdown rendering", async () => {

   });
   test.describe(async () => {
     test("math", async ({ page }) => {
       await page.goto(`${markdownUrl}/tree/main/math.md`, {
         waitUntil: "networkidle",
       });
       await expect(
         page.getByText("The Cauchy-Schwarz Inequality"),
       ).toBeVisible();
       await expect(page).toHaveScreenshot({ fullPage: true });
     });
   });
   test.describe(async () => {
     test.use({ viewport: { width: viewportWidth, height: 1100 } });
     test("tables", async ({ page }) => {
       await goToSection("#tables", page);