Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Cache rendered mathjax to avoid stalling when editing plaintext #3828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dae merged 2 commits into from
Feb 18, 2025
Merged

Cache rendered mathjax to avoid stalling when editing plaintext #3828

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0999b60
add lru-cache
iamllama Feb 18, 2025
73faaf1
cache mathjax rendering
iamllama Feb 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
cache mathjax rendering
  • Loading branch information
@iamllama
iamllama committed Feb 18, 2025
commit 73faaf18a06609aa67dc8af3f4a389583cd291d4
34 changes: 29 additions & 5 deletions ts/editable/Mathjax.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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[]) => {
Expand All @@ -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">
Expand All @@ -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);

Expand Down