Show title on mathjax image

This commit is contained in:
Henrik Giesel 2021-08-07 19:33:01 +02:00
parent fca31465b4
commit 8fa6d0045d
2 changed files with 9 additions and 5 deletions

View file

@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let mathjax: string; export let mathjax: string;
export let block: boolean; export let block: boolean;
$: converted = convertMathjax(mathjax); $: [converted, title] = convertMathjax(mathjax);
$: encoded = encodeURIComponent(converted); $: encoded = encodeURIComponent(converted);
</script> </script>
@ -16,6 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
src="data:image/svg+xml,{encoded}" src="data:image/svg+xml,{encoded}"
class:block class:block
alt="Mathjax" alt="Mathjax"
{title}
data-anki="mathjax" data-anki="mathjax"
on:dragstart|preventDefault on:dragstart|preventDefault
/> />

View file

@ -13,17 +13,17 @@ function getStyle(): HTMLStyleElement {
return style; return style;
} }
function getEmptyIcon(): string { function getEmptyIcon(): [string, string] {
const style = getStyle(); const style = getStyle();
const icon = parser.parseFromString(mathIcon, "image/svg+xml"); const icon = parser.parseFromString(mathIcon, "image/svg+xml");
const svg = icon.children[0]; const svg = icon.children[0];
svg.insertBefore(style, svg.children[0]); svg.insertBefore(style, svg.children[0]);
return svg.outerHTML; return [svg.outerHTML, ""];
} }
export function convertMathjax(input: string): string { export function convertMathjax(input: string): [string, string] {
if (input.trim().length === 0) { if (input.trim().length === 0) {
return getEmptyIcon(); return getEmptyIcon();
} }
@ -35,13 +35,16 @@ export function convertMathjax(input: string): string {
return getEmptyIcon(); return getEmptyIcon();
} }
let title = "";
if (svg.innerHTML.includes("data-mjx-error")) { if (svg.innerHTML.includes("data-mjx-error")) {
svg.querySelector("rect").setAttribute("fill", "yellow"); svg.querySelector("rect").setAttribute("fill", "yellow");
svg.querySelector("text").setAttribute("color", "red"); svg.querySelector("text").setAttribute("color", "red");
title = svg.querySelector("title").innerHTML;
} else { } else {
const style = getStyle(); const style = getStyle();
svg.insertBefore(style, svg.children[0]); svg.insertBefore(style, svg.children[0]);
} }
return svg.outerHTML; return [svg.outerHTML, title];
} }