Merge branch 'katex'

src/components/Katex.vue

@@ -7,19 +7,26 @@ const props = defineProps<{
   size?: 'big' | 'small',
 }>()
 
-const getRenderedHTML = () => props.statement.toHTMLString()
+const getRenderedHTML = () => {
+  console.log('getRenderedHTML', props.statement)
+  try {
+    return props.statement.toHTMLString()
+  } catch (_) {
+    return ''
+  }
+}
 
-const renderedHtml = getRenderedHTML()
-computed(getRenderedHTML)
+let renderedHtml = getRenderedHTML()
+computed(() => renderedHtml = getRenderedHTML())
 </script>
 
 <style>
   .big {
-    transform: scale(1.3);
+    font-size: 1.3em;
   }
 
   .small {
-    transform: scale(0.9);
+    font-size: 0.9em;
   }
 </style>
 

src/components/Statement.vue

@@ -7,6 +7,7 @@ import Katex from './Katex.vue'
 const props = defineProps<{
   statement: MathStatement,
   evaluation: EvaluationResult,
+  renderVersion: number,
 }>()
 
 const getValueStatement = (): Maybe<MathStatement> => {
@@ -36,6 +37,14 @@ computed(() => value = getValueStatement())
   .sidebar {
     padding-left: 10px;
   }
+
+  .edit-button {
+    border: none;
+  }
+
+  .edit-button:hover {
+    cursor: pointer;
+  }
 </style>
 
 <template>
@@ -48,7 +57,7 @@ computed(() => value = getValueStatement())
       </div>
     </div>
     <div class="sidebar">
-      <button>
+      <button class="edit-button" @click="() => $emit('edit')" title="Edit this expression">
         <img src="../assets/edit.svg" alt="Edit" height="16">
       </button>
     </div>