Parse markdown using stimulus controller.

assets/controllers/common/markdown_controller.js

@@ -0,0 +1,56 @@
+'use strict';
+
+import { Controller } from '@hotwired/stimulus';
+import * as marked from "marked";
+import DOMPurify from 'dompurify';
+
+export default class extends Controller {
+
+    connect()
+    {
+        console.log('Markdown controller called');
+        this.render();
+    }
+
+    render() {
+        let raw = this.element.dataset['markdown'];
+
+        //Apply purified parsed markdown
+        this.element.innerHTML = DOMPurify.sanitize(marked(this.unescapeHTML(raw)));
+
+        for(let a of this.element.querySelectorAll('a')) {
+            //Mark all links as external
+            a.classList.add('link-external');
+            //Open links in new tag
+            a.setAttribute('target', '_blank');
+            //Dont track
+            a.setAttribute('rel', 'noopener');
+        }
+
+        //Apply bootstrap styles to
+        for(let table of this.element.querySelectorAll('table')) {
+            table.classList.add('table', 'table-hover', 'table-striped', 'table-bordered', 'table-sm');
+        }
+    }
+
+    /**
+     * Unescape the given HTML
+     * @param {string} html
+     * @returns {string}
+     */
+    unescapeHTML(html) {
+        var txt = document.createElement('textarea');
+        txt.innerHTML = html;
+        return txt.value;
+    }
+
+    /**
+     * Configure the marked parser
+     */
+    configureMarked()
+    {
+        marked.setOptions({
+            gfm: true,
+        });
+    }
+}

config/packages/doctrine.yaml

@@ -15,7 +15,8 @@ doctrine:
                 class: App\Helpers\BigDecimalType
 
         schema_filter: ~^(?!internal)~
-        profiling_collect_backtrace: true
+        # Only enable this when needed
+        profiling_collect_backtrace: false
 
     orm:
         auto_generate_proxy_classes: true

src/Services/MarkdownParser.php

@@ -68,7 +68,7 @@ class MarkdownParser
     public function markForRendering(string $markdown, bool $inline_mode = false): string
     {
         return sprintf(
-            '<div class="markdown" data-markdown="%s">%s</div>',
+            '<div class="markdown" data-markdown="%s" data-controller="common--markdown">%s</div>',
             htmlspecialchars($markdown),
             $this->translator->trans('markdown.loading')
         );

webpack.config.js

@@ -98,7 +98,7 @@ Encore
     //.enableSassLoader()
 
     // uncomment if you use TypeScript
-    .enableTypeScriptLoader()
+    //.enableTypeScriptLoader()
 
     // uncomment if you use React
     //.enableReactPreset()
@@ -124,9 +124,19 @@ Encore
 
     // uncomment if you're having problems with a jQuery plugin
     .autoProvidejQuery()
-
 ;
 
+//Copy bootstrap map if in debug mode
+if (Encore.isDev()) {
+    Encore.addPlugin(new CopyPlugin({
+        patterns: [
+            {
+                from: 'node_modules/bootstrap/dist/css/bootstrap.min.css.map',
+                to: 'themes/bootstrap.min.css.map'
+            }
+        ]}))
+}
+
 if (Encore.isProduction()) {
     Encore.addPlugin(new CompressionPlugin({
         filename: '[path][base].br',
@@ -151,7 +161,7 @@ if (Encore.isProduction()) {
 
 if (Encore.isDev()) {
     //Only uncomment if needed, as this cause problems with Github actions (job does not finish)
-    //Encore.addPlugin(new BundleAnalyzerPlugin());
+    Encore.addPlugin(new BundleAnalyzerPlugin());
 }