From f1ea25cad220b25e9da5fb3f07078f5033a34f1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20B=C3=B6hmer?= <jan.h.boehmer@gmx.de>
Date: Sun, 6 Mar 2022 16:09:24 +0100
Subject: [PATCH] Lazy load the katex library if latex content is really
 present

---
 assets/controllers/common/latex_controller.js | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/assets/controllers/common/latex_controller.js b/assets/controllers/common/latex_controller.js
index 7e3948a1..4d24daa7 100644
--- a/assets/controllers/common/latex_controller.js
+++ b/assets/controllers/common/latex_controller.js
@@ -1,10 +1,10 @@
 import {Controller} from "@hotwired/stimulus";
 
-import "katex";
+//import "katex";
 import 'katex/dist/katex.css';
-import renderMathInElement from "katex/dist/contrib/auto-render";
+import {auto} from "@popperjs/core";
+//import renderMathInElement from "katex/dist/contrib/auto-render";
 
-/* stimulusFetch: 'lazy' */
 export default class extends Controller {
     connect() {
         this.applyLatex();
@@ -12,14 +12,22 @@ export default class extends Controller {
     }
 
     applyLatex() {
-        renderMathInElement(this.element, {
-            delimiters: [
-                {left: "$$", right: "$$", display: true},
-                {left: "$", right: "$", display: false},
-                {left: "\\(", right: "\\)", display: false},
-                {left: "\\[", right: "\\]", display: true}
-            ]
-        });
+        //Only import the katex library, if we have an delimiter string in our element text
+        let str = this.element.textContent;
+        if(str.match(/(\$|\\\(|\\\[).+(\$|\\\)|\\\])/)) {
+            import('katex/dist/contrib/auto-render').then((autorender) => {
+                //This calls renderMathInElement()
+                autorender.default(this.element, {
+                    delimiters: [
+                        {left: "$$", right: "$$", display: true},
+                        {left: "$", right: "$", display: false},
+                        {left: "\\(", right: "\\)", display: false},
+                        {left: "\\[", right: "\\]", display: true}
+                    ]
+                });
+            })
+        }
+
     }
 
     mutate() {