From c8c9c64ea5be2012cc97327b041e580e88bcc515 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 8 Aug 2021 04:42:24 +0200
Subject: [PATCH] Vertically center inline Mathjax

---
 ts/editable/Mathjax.svelte     | 17 ++++++++++++++++-
 ts/editor/MathjaxHandle.svelte |  2 +-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ts/editable/Mathjax.svelte b/ts/editable/Mathjax.svelte
index d471c6fed..3900fe46f 100644
--- a/ts/editable/Mathjax.svelte
+++ b/ts/editable/Mathjax.svelte
@@ -18,7 +18,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     $: [converted, title] = convertMathjax(mathjax, nightMode, fontSize);
     $: empty = title === "MathJax";
-    $: encoded = encodeURIComponent(converted);
+
+    let encoded: string;
+    let imageHeight: number;
+
+    $: {
+        encoded = encodeURIComponent(converted);
+
+        setTimeout(() => {
+            imageHeight = image.getBoundingClientRect().height;
+        });
+    }
 
     let image: HTMLImageElement;
 
@@ -34,6 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     src="data:image/svg+xml,{encoded}"
     class:block
     class:empty
+    style="--vertical-center: {-imageHeight / 2 + fontSize / 4}px;"
     alt="Mathjax"
     {title}
     data-anki="mathjax"
@@ -41,6 +52,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 />
 
 <style lang="scss">
+    img {
+        vertical-align: var(--vertical-center);
+    }
+
     .block {
         display: block;
         margin: auto;
diff --git a/ts/editor/MathjaxHandle.svelte b/ts/editor/MathjaxHandle.svelte
index b98f98aaa..f9ac3be11 100644
--- a/ts/editor/MathjaxHandle.svelte
+++ b/ts/editor/MathjaxHandle.svelte
@@ -32,7 +32,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let title: string;
 
     function getComponent(image: HTMLImageElement): HTMLElement {
-        return (image.closest("anki-mathjax")! as HTMLElement);
+        return image.closest("anki-mathjax")! as HTMLElement;
     }
 
     function onUpdate(event: CustomEvent) {