Start implementing editor popup

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>

src/pages/Scratch.vue

@@ -3,19 +3,72 @@
   import {v4 as uuidv4} from 'uuid'
   import Statement from '../components/Statement.vue'
   import {MathStatement} from '../support/parse'
+  import {onMounted, ref} from 'vue'
+  import Katex from '../components/Katex.vue'
 
   const page = new MathPage(uuidv4())
   const stmt1Id = page.addRaw('x = y+3/4')
   const stmt2Id = page.addRaw('y = 9')
   const evaluation = page.evaluate()
+  let renderVersion = 0
 
   const stmt = page.getStatement(stmt1Id)
   console.log({page, stmt1Id})
 
-  const onEdit = (stmt: MathStatement) => () => console.log('edit', stmt)
+  let editModal = ref(false)
+  let editExpression = ref('')
+  let editPreview = ref(MathStatement.temp(''))
+  let activeStatement!: MathStatement
+
+  const editStatement = (stmt: MathStatement) => {
+    console.log('editing statement', stmt, editModal)
+    activeStatement = stmt
+    editPreview.value = MathStatement.temp(stmt.raw)
+    editModal.value = true
+    editExpression.value = stmt.raw
+  }
+
+  let key = ref(uuidv4())
+  const updateEditRender = () => {
+    const previewStmt = MathStatement.temp(editExpression.value)
+    if ( previewStmt.isValid() ) {
+      editPreview.value = MathStatement.temp(editExpression.value)
+      key.value = uuidv4()
+    }
+  }
 </script>
 
 <template>
   <p>Scratch page for testing!</p>
-  <Statement v-if="stmt" :statement="stmt" :evaluation="evaluation"/>
+  <q-dialog ref="edit-modal" v-model="editModal">
+    <q-card>
+      <q-card-section>
+        <div style="display: flex; justify-content: center">
+          <Katex :statement="editPreview" :key="key"/>
+        </div>
+      </q-card-section>
+      <q-card-section>
+        <q-input
+          v-model="editExpression"
+          v-on:update:model-value="() => updateEditRender()"
+          type="textarea"
+          outlined
+          label="Expression"
+          autogrow
+          autofocus
+        />
+      </q-card-section>
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="Cancel" v-close-popup></q-btn>
+        <q-btn flat label="Save" v-close-popup></q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+  <Statement
+    v-if="stmt"
+    v-on:edit="() => editStatement(stmt)"
+    :statement="stmt"
+    :evaluation="evaluation"
+    :render-version="renderVersion"
+  />
 </template>

src/support/parse.ts

@@ -300,6 +300,16 @@ export class MathStatement {
         return node
     }
 
+    /** Returns true if the expression is valid. */
+    isValid(): boolean {
+        try {
+            this.toHTMLString()
+            return true
+        } catch (_) {
+            return false
+        }
+    }
+
     /** Get all symbols referenced in this statement. */
     symbols(): math.SymbolNode[] {
         return (new SymbolWalk()).walk(this.parse())