chore(deps): Replace showdown dependency with marked (#366)

Author: wise-king-sullyman

packages/dev/package.json

@@ -20,7 +20,7 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^11.7.3",
     "react-router-dom": "^6.11.2",
-    "showdown": "2.1.0",
+    "marked": "^15.0.6",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {

packages/module/package.json

@@ -48,7 +48,7 @@
     "@patternfly/react-core": "^6.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "showdown": ">=2.1.0"
+    "marked": "^15.0.6"
   },
   "dependencies": {
     "dompurify": "^3.1.3",

packages/module/src/ConsoleInternal/components/markdown-view.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import { Converter } from 'showdown';
+import { marked } from 'marked';
 import { useForceRender } from '@console/shared';
 import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
 
@@ -15,18 +15,7 @@ interface ShowdownExtension {
   replace?: (...args: any[]) => string;
 }
 
-export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
-  const converter = new Converter({
-    tables: true,
-    openLinksInNewWindow: true,
-    strikethrough: true,
-    emoji: false,
-  });
-
-  if (extensions) {
-    converter.addExtension(extensions);
-  }
-
+export const markdownConvert = async (markdown: string, extensions?: ShowdownExtension[]) => {
   DOMPurify.addHook('beforeSanitizeElements', function (node) {
     // nodeType 1 = element type
 
@@ -82,12 +71,26 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
     }
   });
 
-  return DOMPurify.sanitize(converter.makeHtml(markdown), {
-    USE_PROFILES: {
-      html: true,
-      svg: true,
-    },
-  });
+  // Replace code fences with non markdown formatting relates tokens so that marked doesn't try to parse them as code spans
+  const markdownWithSubstitutedCodeFences = markdown.replace(/```/g, '@@@');
+  const parsedMarkdown = await marked.parse(markdownWithSubstitutedCodeFences);
+  // Swap the temporary tokens back to code fences before we run the extensions
+  let md = parsedMarkdown.replace(/@@@/g, '```');
+
+  if (extensions) {
+    // Convert code spans back to md format before we run the custom extension regexes
+    md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
+
+    extensions.forEach(({ regex, replace }) => {
+      if (regex) {
+        md = md.replace(regex, replace);
+      }
+    });
+
+    // Convert any remaining backticks back into code spans
+    md = md.replace(/`(.*)`/g, '<code>$1</code>');
+  }
+  return DOMPurify.sanitize(md);
 };
 
 interface SyncMarkdownProps {
@@ -116,10 +119,18 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   className,
 }) => {
   const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const markup = React.useMemo(
-    () => markdownConvert(content || emptyMsg || getResource('Not available'), extensions),
-    [content, emptyMsg, extensions, getResource],
-  );
+  const [markup, setMarkup] = React.useState<string>('');
+
+  React.useEffect(() => {
+    async function getMd() {
+      const md = await markdownConvert(
+        content || emptyMsg || getResource('Not available'),
+        extensions,
+      );
+      setMarkup(md);
+    }
+    getMd();
+  }, [content, emptyMsg, getResource, extensions]);
   const innerProps: InnerSyncMarkdownProps = {
     renderExtension: extensions?.length > 0 ? renderExtension : undefined,
     exactHeight,

yarn.lock

@@ -4494,7 +4494,7 @@ commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
-commander@^9.0.0, commander@^9.4.1:
+commander@^9.4.1:
   version "9.5.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
   integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
@@ -10360,6 +10360,11 @@ markdown-table@^2.0.0:
   dependencies:
     repeat-string "^1.0.0"
 
+marked@^15.0.6:
+  version "15.0.6"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-15.0.6.tgz#8165f16afb6f4b30a35bdcee657c3b8415820a8f"
+  integrity sha512-Y07CUOE+HQXbVDCGl3LXggqJDbXDP2pArc2C1N1RRMN0ONiShoSsIInMd5Gsxupe7fKLpgimTV+HOJ9r7bA+pg==
+
 marked@^4.0.16:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
@@ -13581,13 +13586,6 @@ shortid@^2.2.8:
   dependencies:
     nanoid "^2.1.0"
 
-[email protected]:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/showdown/-/showdown-2.1.0.tgz#1251f5ed8f773f0c0c7bfc8e6fd23581f9e545c5"
-  integrity sha512-/6NVYu4U819R2pUIk79n67SYgJHWCce0a5xTP979WbNp0FL9MN1I1QK662IDU1b6JzKTvmhgI7T7JYIxBi3kMQ==
-  dependencies:
-    commander "^9.0.0"
-
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"