feat(pat-markdown): Switch to marked as markdown library to support better syntax highlight libraries.

Author: thet

package.json

@@ -14,12 +14,14 @@
         "@fullcalendar/timegrid": "^5.11.3",
         "@juggle/resize-observer": "^3.4.0",
         "@stomp/stompjs": "^6.1.2",
+        "dompurify": "^2.4.0",
         "google-code-prettify": "^1.0.5",
         "imagesloaded": "^4.1.4",
         "intersection-observer": "^0.12.2",
         "jquery": "^3.6.1",
         "jquery-jcrop": "^0.9.13",
         "luxon": "2.4.0",
+        "marked": "^4.1.0",
         "masonry-layout": "^4.2.2",
         "moment": "^2.29.4",
         "moment-timezone": "^0.5.37",

src/pat/markdown/markdown.js

@@ -27,33 +27,13 @@ const Markdown = Base.extend({
     },
 
     async render(text) {
-        const Showdown = (await import("showdown")).default;
-
-        // Add support for syntax highlighting via pat-syntax-highlight
-        Showdown.extensions.prettify = function () {
-            return [
-                {
-                    type: "output",
-                    filter: function (source) {
-                        return source.replace(/(<pre>)?<code>/gi, function (match, pre) {
-                            if (pre) {
-                                return '<pre class="pat-syntax-highlight" tabIndex="0"><code data-inner="1">';
-                            } else {
-                                return '<code class="pat-syntax-highlight">';
-                            }
-                        });
-                    },
-                },
-            ];
-        };
+        const marked = (await import("marked")).marked;
+        const DOMPurify = (await import("dompurify")).default;
+        await import("../syntax-highlight/syntax-highlight").default;
 
         const wrapper = document.createElement("div");
-        const converter = new Showdown.Converter({
-            tables: true,
-            extensions: ["prettify"],
-        });
-        const html = converter.makeHtml(text);
-        wrapper.innerHTML = html;
+        const parsed = DOMPurify.sanitize(marked.parse(text));
+        wrapper.innerHTML = parsed;
         return $(wrapper);
     },
 

src/pat/markdown/markdown.test.js

@@ -16,18 +16,18 @@ describe("pat-markdown", function () {
         afterEach(() => {
             jest.restoreAllMocks();
         });
-        it("replaces the DOM element with the rendered Markdown content.", async function () {
+        it("It renders content for elements with the pattern trigger.", async function () {
             var $el = $('<p class="pat-markdown"></p>');
             $el.appendTo("#lab");
             jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
                 return $("<p>Rendering</p>");
             });
             pattern.init($el);
             await utils.timeout(1); // wait a tick for async to settle.
-            expect($("#lab").html()).toBe("<p>Rendering</p>");
+            expect($("#lab").html()).toBe('<p class="pat-markdown">Rendering</p>');
         });
 
-        it("does not replace the DOM element if it doesn't have the pattern trigger", function () {
+        it("It does not render when the DOM element doesn't have the pattern trigger", function () {
             var $el = $("<p></p>");
             $el.appendTo("#lab");
             jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
@@ -70,7 +70,7 @@ describe("pat-markdown", function () {
 
         it("converts markdown into HTML", async function () {
             const $rendering = await pattern.prototype.render("*This is markdown*");
-            expect($rendering.html()).toBe("<p><em>This is markdown</em></p>");
+            expect($rendering.html()).toBe(`<p><em>This is markdown</em></p>\n`);
         });
     });