From cb8f828481fee96635bb90d7b005d2a46bef09b2 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 11:10:03 -0500
Subject: [PATCH 1/2] Add edit buttom to statement

---
 src/assets/edit.svg          | 40 ++++++++++++++++++++++++++++++++++++
 src/components/Statement.vue | 26 ++++++++++++++++++-----
 2 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/edit.svg

diff --git a/src/assets/edit.svg b/src/assets/edit.svg
new file mode 100644
index 0000000..b2805a9
--- /dev/null
+++ b/src/assets/edit.svg
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 612.097 612.097" style="enable-background:new 0 0 612.097 612.097;" xml:space="preserve">
+<g>
+	<path d="M320.85,151.725l139.6,139.6l-238,237.9l-139.6-139.6L320.85,151.725z M607.65,124.125l-119.7-119.7
+		c-5.9-5.9-15.5-5.9-21.4,0l-104,104l141,141l104-104C613.55,139.525,613.55,130.025,607.65,124.125z M0.55,592.825
+		c-1.4,5.3,0.1,10.9,3.9,14.8c3.9,3.9,9.5,5.4,14.8,3.9l165.5-44.6l-139.6-139.6L0.55,592.825z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/components/Statement.vue b/src/components/Statement.vue
index d7f56b0..214275d 100644
--- a/src/components/Statement.vue
+++ b/src/components/Statement.vue
@@ -25,16 +25,32 @@ computed(() => value = getValueStatement())
     border: 1px solid #ccc;
     border-radius: 3px;
     padding: 10px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .content {
+    flex: 1;
+  }
+
+  .sidebar {
+    padding-left: 10px;
   }
 </style>
 
 <template>
   <div class="math-statement">
-
-    <Katex :statement="statement" size="big"/>
-    <div class="result" v-if="value">
-      <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
-      <Katex :statement="value" size="small" style="color: #666"/>
+    <div class="content">
+      <Katex :statement="statement" size="big"/>
+      <div class="result" v-if="value">
+        <hr v-if="value" style="border: 1px solid #ccc; border-bottom: 0">
+        <Katex :statement="value" size="small" style="color: #666"/>
+      </div>
+    </div>
+    <div class="sidebar">
+      <button>
+        <img src="../assets/edit.svg" alt="Edit" height="16">
+      </button>
     </div>
   </div>
 </template>

From 97d5ff6ea2ebbaa89c39d17980f35b37da6be553 Mon Sep 17 00:00:00 2001
From: garrettmills <shout@garrettmills.dev>
Date: Sat, 9 Apr 2022 12:00:45 -0500
Subject: [PATCH 2/2] Fix katex rendering

---
 package.json             |  6 +++---
 src/components/Katex.vue | 13 +++++++------
 src/main.ts              |  3 +++
 src/support/parse.ts     | 11 +++++++----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 4ca5c7e..5898796 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Katex.vue b/src/components/Katex.vue
index 420362c..acbc53b 100644
--- a/src/components/Katex.vue
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index 5dc89ae..0d9c2c5 100644
--- a/src/main.ts
+++ b/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)
diff --git a/src/support/parse.ts b/src/support/parse.ts
index f92b28c..6dfdae2 100644
--- a/src/support/parse.ts
+++ b/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
     }