From c3f56ad5cd3d13f2ea8f7039e8612ab7aa147a52 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sat, 7 Aug 2021 22:07:57 +0200
Subject: [PATCH] Refactor editable/mathjax.ts

---
 ts/editable/mathjax.ts | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/ts/editable/mathjax.ts b/ts/editable/mathjax.ts
index 9c1fe9388..f11923ebb 100644
--- a/ts/editable/mathjax.ts
+++ b/ts/editable/mathjax.ts
@@ -5,20 +5,23 @@ import { mathIcon } from "./icons";
 
 const parser = new DOMParser();
 
-function getStyle(nightMode: boolean, fontSize: number): HTMLStyleElement {
-    const style = document.createElement("style") as HTMLStyleElement;
+function getCSS(nightMode: boolean, fontSize: number): string {
     const color = nightMode ? "white" : "black";
-
     /* color is set for Maths, fill for the empty icon */
-    const css = `svg { color: ${color}; fill: ${color}; font-size: ${fontSize}px; }`;
-    style.appendChild(document.createTextNode(css));
+    return `svg { color: ${color}; fill: ${color}; font-size: ${fontSize}px; }`;
+}
 
+function getErrorCSS(fontSize: number): string {
+    return `svg { color: yellow; font-size: ${fontSize}px; }`;
+}
+
+function getStyle(css: string): HTMLStyleElement {
+    const style = document.createElement("style") as HTMLStyleElement;
+    style.appendChild(document.createTextNode(css));
     return style;
 }
 
-function getEmptyIcon(nightMode: boolean, fontSize: number): [string, string] {
-    const style = getStyle(nightMode, fontSize);
-
+function getEmptyIcon(style: HTMLStyleElement): [string, string] {
     const icon = parser.parseFromString(mathIcon, "image/svg+xml");
     const svg = icon.children[0];
     svg.insertBefore(style, svg.children[0]);
@@ -31,15 +34,17 @@ export function convertMathjax(
     nightMode: boolean,
     fontSize: number
 ): [string, string] {
+    const style = getStyle(getCSS(nightMode, fontSize));
+
     if (input.trim().length === 0) {
-        return getEmptyIcon(nightMode, fontSize);
+        return getEmptyIcon(style);
     }
 
     const output = globalThis.MathJax.tex2svg(input);
     const svg = output.children[0];
 
     if (svg.viewBox.baseVal.height === 16) {
-        return getEmptyIcon(nightMode, fontSize);
+        return getEmptyIcon(style);
     }
 
     let title = "";
@@ -49,7 +54,6 @@ export function convertMathjax(
         svg.querySelector("text").setAttribute("color", "red");
         title = svg.querySelector("title").innerHTML;
     } else {
-        const style = getStyle(nightMode, fontSize);
         svg.insertBefore(style, svg.children[0]);
     }