Cache rendered mathjax to avoid stalling when editing plaintext (#3828)

* add lru-cache

* cache mathjax rendering

package.json

@@ -75,6 +75,7 @@
         "jquery": "^3.5.1",
         "jquery-ui-dist": "^1.12.1",
         "lodash-es": "^4.17.21",
+        "lru-cache": "^10.2.0",
         "marked": "^5.1.0",
         "mathjax": "^3.1.2"
     },

ts/editable/Mathjax.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
     import type { Writable } from "svelte/store";
+    import { LRUCache } from "lru-cache";
 
     const imageToHeightMap = new Map<string, Writable<number>>();
     const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
@@ -15,6 +16,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             setTimeout(() => entry.target.dispatchEvent(new Event("resize")));
         }
     });
+
+    type Cache = LRUCache<string, [string, string]>;
+
+    const caches: { [key: string]: Cache } = {};
+
+    function getCache(...keyParts: any) {
+        const key = keyParts.toString(); // primitive parts or arrays only
+        if (!(key in caches)) {
+            caches[key] = new LRUCache({ max: 10 });
+        }
+        return caches[key];
+    }
 </script>
 
 <script lang="ts">
@@ -30,11 +43,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let block: boolean;
     export let fontSize: number;
 
-    $: [converted, title] = convertMathjax(
+    let converted: string, title: string;
-        unescapeSomeEntities(mathjax),
+    $: {
-        $pageTheme.isDark,
+        const cache = getCache($pageTheme.isDark, fontSize);
-        fontSize,
+        const entry = cache.get(mathjax);
-    );
+        if (entry) {
+            [converted, title] = entry;
+        } else {
+            const entry = convertMathjax(
+                unescapeSomeEntities(mathjax),
+                $pageTheme.isDark,
+                fontSize,
+            );
+            [converted, title] = entry;
+            cache.set(mathjax, entry);
+        }
+    }
     $: empty = title === "MathJax";
     $: encoded = encodeURIComponent(converted);
 

yarn.lock

@@ -2033,6 +2033,7 @@ __metadata:
     jquery-ui-dist: "npm:^1.12.1"
     license-checker-rseidelsohn: "npm:=4.3.0"
     lodash-es: "npm:^4.17.21"
+    lru-cache: "npm:^10.2.0"
     marked: "npm:^5.1.0"
     mathjax: "npm:^3.1.2"
     prettier: "npm:^3.4.2"