Render latex using stimulus controller.

assets/controllers/common/latex_controller.js

@@ -0,0 +1,28 @@
+import {Controller} from "@hotwired/stimulus";
+
+import "katex";
+import 'katex/dist/katex.css';
+import renderMathInElement from "katex/dist/contrib/auto-render";
+
+/* stimulusFetch: 'lazy' */
+export default class extends Controller {
+    connect() {
+        this.applyLatex();
+        this.element.addEventListener('markdown:finished', () => this.applyLatex());
+    }
+
+    applyLatex() {
+        renderMathInElement(this.element, {
+            delimiters: [
+                {left: "$$", right: "$$", display: true},
+                {left: "$", right: "$", display: false},
+                {left: "\\(", right: "\\)", display: false},
+                {left: "\\[", right: "\\]", display: true}
+            ]
+        });
+    }
+
+    mutate() {
+        this.applyLatex();
+    }
+}

assets/controllers/common/markdown_controller.js

@@ -10,6 +10,12 @@ export default class extends Controller {
     {
         this.configureMarked();
         this.render();
+
+        //Dispatch an event that we are now finished
+        const event = new CustomEvent('markdown:finished', {
+           bubbles: true
+        });
+        this.element.dispatchEvent(event);
     }
 
     render() {

package.json

@@ -56,6 +56,7 @@
         "marked": "^3.0.1",
         "patternfly-bootstrap-treeview": "^2.1.8",
         "pdfmake": "^0.2.2",
+        "stimulus-use": "^0.41.0",
         "ts-loader": "^9.2.6",
         "typescript": "^4.0.2",
         "u2f-api": "^1.1.1"

templates/Parts/info/show_part_info.html.twig

@@ -108,7 +108,7 @@
             <div class="tab-content" id="myTabContent">
                 {% if part.comment is not empty %}
                     <div class="tab-pane fade show" id="comment" role="tabpanel" aria-labelledby="home-tab">
-                        <div class="container-fluid mt-2 latex">
+                        <div class="container-fluid mt-2 latex" data-controller="common--latex">
                             {{ part.comment|markdown }}
                         </div>
                     </div>

templates/Parts/lists/_info_card.html.twig

@@ -118,7 +118,7 @@
 
                         {% if entity.comment is not empty %}
                             <div class="tab-pane fade" id="v-pills-comment" role="tabpanel" aria-labelledby="home-tab">
-                                <div class="container-fluid mt-2 latex">
+                                <div class="container-fluid mt-2 latex" data-controller="common--latex">
                                     {{ entity.comment|markdown }}
                                 </div>
                             </div>

templates/helper.twig

@@ -129,7 +129,7 @@
     <tbody>
     {% for param in parameters %}
         <tr>
-            <td>{{ param.name }} {% if param.symbol is not empty %}<span class="latex">${{ param.symbol }}$</span>{% endif %}</td>
+            <td>{{ param.name }} {% if param.symbol is not empty %}<span class="latex" data-controller="common--latex">${{ param.symbol }}$</span>{% endif %}</td>
             <td>{{ param.formattedValue }}</td>
         </tr>
     {% endfor %}

templates/homepage.html.twig

@@ -11,7 +11,7 @@
         </h4>
         {% if banner is not empty %}
             <hr>
-            <div class="latex">
+            <div class="latex" data-controller="common--latex">
                 <h5>{{ banner | markdown }}</h5>
             </div>
         {% endif %}

yarn.lock

@@ -3266,6 +3266,11 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
+hotkeys-js@>=3:
+  version "3.8.7"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
+  integrity sha512-ckAx3EkUr5XjDwjEHDorHxRO2Kb7z6Z2Sxul4MbBkN8Nho7XDslQsgMJT+CiJ5Z4TgRxxvKHEpuLE3imzqy4Lg==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -5145,6 +5150,13 @@ static-module@^3.0.2:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
+stimulus-use@^0.41.0:
+  version "0.41.0"
+  resolved "https://registry.yarnpkg.com/stimulus-use/-/stimulus-use-0.41.0.tgz#afe2559281ebe0504b1d35eb0e8e77df9ebd6fb6"
+  integrity sha512-d+XWb5YN2L9I+4zQDtE1sJVy1DBO+1qgNcjV0XpMw7KXPJ8m8JA5lcJk3qgbxV86ePHko0CP9F3dzVsapQwzmA==
+  dependencies:
+    hotkeys-js ">=3"
+
 string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"