Fix katex rendering

package.json

@@ -16,9 +16,10 @@
     "cd": "pnpm run cd:build && pnpm run cd:push && pnpm run cd:rollout"
   },
   "dependencies": {
-    "@vuetify/vite-plugin": "1.0.0-alpha.10",
+    "@auth0/auth0-vue": "^1.0.0",
     "@types/katex": "^0.14.0",
     "@types/uuid": "^8.3.4",
+    "@vuetify/vite-plugin": "1.0.0-alpha.10",
     "dependency-graph": "^0.11.0",
     "install": "^0.13.0",
     "katex": "^0.15.3",
@@ -26,8 +27,7 @@
     "uuid": "^8.3.2",
     "vue": "^3.2.25",
     "vue-router": "^4.0.14",
-    "vuetify": "3.0.0-beta.0",
-    "@auth0/auth0-vue": "^1.0.0"
+    "vuetify": "3.0.0-beta.0"
   },
   "devDependencies": {
     "@braks/revue-draggable": "^0.4.2",

src/components/Katex.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import {HTMLString} from '../types'
 import {computed} from 'vue'
 import {MathStatement} from '../support/parse'
 
@@ -8,8 +7,10 @@ const props = defineProps<{
   size?: 'big' | 'small',
 }>()
 
-let displayHtml: HTMLString = props.statement.toHTMLString()
-computed(() => displayHtml = props.statement.toHTMLString())
+const getRenderedHTML = () => props.statement.toHTMLString()
+
+const renderedHtml = getRenderedHTML()
+computed(getRenderedHTML)
 </script>
 
 <style>
@@ -23,7 +24,7 @@ computed(() => displayHtml = props.statement.toHTMLString())
 </style>
 
 <template>
-  <div class="big" v-if="props?.size === 'big'" v-html="displayHtml"></div>
-  <div class="small" v-else-if="props?.size === 'small'" v-html="displayHtml"></div>
-  <div v-else v-html="displayHtml"></div>
+  <div ref="container" class="big" v-if="props?.size === 'big'" v-html="renderedHtml"></div>
+  <div ref="container" class="small" v-else-if="props?.size === 'small'" v-html="renderedHtml"></div>
+  <div ref="container" v-else v-html="renderedHtml"></div>
 </template>

src/main.ts

@@ -4,6 +4,9 @@ import { DraggablePlugin } from '@braks/revue-draggable'
 import { createAuth0 } from '@auth0/auth0-vue'
 import router from './router'
 
+import 'katex/dist/katex.min.css'
+import 'katex/dist/contrib/auto-render.min'
+
 
 
 const app = createApp(App)

src/support/parse.ts

@@ -284,15 +284,18 @@ export class MathStatement {
     /** Render the statement as HTML string. */
     toHTMLString(): HTMLString {
         return katex.renderToString(this.toLaTeX(), {
-            output: 'mathml',
+            output: 'html',
         }) as HTMLString
     }
 
     /** Render the statement to a DOM element. */
-    toDOM(): HTMLSpanElement {
-        const node = document.createElement('span')
+    toDOM(node?: HTMLElement): HTMLSpanElement {
+        if ( !node ) {
+            node = document.createElement('span')
+        }
+
         katex.render(this.toLaTeX(), node, {
-            output: 'mathml',
+            output: 'html',
         })
         return node
     }