From 8fa6d0045dff3c9bee99300d4454de311586670b Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 7 Aug 2021 19:33:01 +0200
Subject: [PATCH] Show title on mathjax image

---
 ts/editable/Mathjax.svelte |  3 ++-
 ts/editable/mathjax.ts     | 11 +++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/ts/editable/Mathjax.svelte b/ts/editable/Mathjax.svelte
index 513f81c67..d3ced6ee2 100644
--- a/ts/editable/Mathjax.svelte
+++ b/ts/editable/Mathjax.svelte
@@ -8,7 +8,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     export let mathjax: string;
     export let block: boolean;
 
-    $: converted = convertMathjax(mathjax);
+    $: [converted, title] = convertMathjax(mathjax);
     $: encoded = encodeURIComponent(converted);
 </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}"
     class:block
     alt="Mathjax"
+    {title}
     data-anki="mathjax"
     on:dragstart|preventDefault
 />
diff --git a/ts/editable/mathjax.ts b/ts/editable/mathjax.ts
index 623602704..b516f55c3 100644
--- a/ts/editable/mathjax.ts
+++ b/ts/editable/mathjax.ts
@@ -13,17 +13,17 @@ function getStyle(): HTMLStyleElement {
     return style;
 }
 
-function getEmptyIcon(): string {
+function getEmptyIcon(): [string, string] {
     const style = getStyle();
 
     const icon = parser.parseFromString(mathIcon, "image/svg+xml");
     const svg = icon.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) {
         return getEmptyIcon();
     }
@@ -35,13 +35,16 @@ export function convertMathjax(input: string): string {
         return getEmptyIcon();
     }
 
+    let title = "";
+
     if (svg.innerHTML.includes("data-mjx-error")) {
         svg.querySelector("rect").setAttribute("fill", "yellow");
         svg.querySelector("text").setAttribute("color", "red");
+        title = svg.querySelector("title").innerHTML;
     } else {
         const style = getStyle();
         svg.insertBefore(style, svg.children[0]);
     }
 
-    return svg.outerHTML;
+    return [svg.outerHTML, title];
 }