From 1c8c5a41f578ccf75dd204d850b0d858cdb8c920 Mon Sep 17 00:00:00 2001
From: llama <100429699+iamllama@users.noreply.github.com>
Date: Tue, 18 Feb 2025 15:41:37 +0800
Subject: [PATCH] Cache rendered mathjax to avoid stalling when editing
 plaintext (#3828)

* add lru-cache

* cache mathjax rendering
---
 package.json               |  1 +
 ts/editable/Mathjax.svelte | 34 +++++++++++++++++++++++++++++-----
 yarn.lock                  |  1 +
 3 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e00ee8307..dcbd24531 100644
--- a/package.json
+++ b/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"
     },
diff --git a/ts/editable/Mathjax.svelte b/ts/editable/Mathjax.svelte
index f61250559..5fe48a4db 100644
--- a/ts/editable/Mathjax.svelte
+++ b/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(
-        unescapeSomeEntities(mathjax),
-        $pageTheme.isDark,
-        fontSize,
-    );
+    let converted: string, title: string;
+    $: {
+        const cache = getCache($pageTheme.isDark, 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);
 
diff --git a/yarn.lock b/yarn.lock
index 41efa3d0e..09cf5b674 100644
--- a/yarn.lock
+++ b/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"