Fix some UI

src/components/ExpressionEditor.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import {defineEmits, onMounted, ref} from 'vue'
+import {MathStatement} from '../support/parse'
+import Katex from './Katex.vue'
+import { v4 as uuidv4 } from 'uuid'
+import {StatementID} from '../support/types'
+
+const props = defineProps<{
+  statement?: MathStatement,
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void
+}>()
+
+const expressionPreview = ref(MathStatement.temp(''))
+const expressionPreviewKey = ref(uuidv4())
+const expressionError = ref<string|undefined>(undefined)
+const expressionValue = ref<string>('')
+
+const updateExpressionPreview = () => {
+  const previewStmt = MathStatement.temp(expressionValue.value)
+  if ( previewStmt.isValid() ) {
+    expressionPreview.value = MathStatement.temp(expressionValue.value)
+    expressionPreviewKey.value = uuidv4()
+  }
+}
+
+const validateExpression = () => {
+  const stmt = MathStatement.temp(expressionValue.value)
+  if ( !stmt.isValid() ) {
+    return 'The expression is invalid'
+  }
+
+  if ( stmt.defines().length > 0 || stmt.isFunctionDeclaration() ) {
+    return 'Expressions cannot declare variables or functions'
+  }
+}
+
+const saveExpression = () => {
+  expressionError.value = validateExpression()
+  if ( expressionError.value ) {
+    return
+  }
+
+  if ( props.statement ) {
+    props.statement.raw = expressionValue.value
+    emit('save', props.statement)
+  } else {
+    emit('save', new MathStatement(
+        uuidv4() as StatementID,
+        expressionValue.value
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.statement ) {
+    expressionValue.value = props.statement.raw
+    updateExpressionPreview()
+  }
+})
+</script>
+
+<template>
+  <q-card>
+    <q-card-section v-if="expressionValue">
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="expressionPreviewKey"
+          :statement="expressionPreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="expressionError">
+      <div style="color: darkred; font-weight: bold">{{ expressionError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="expressionValue"
+        v-on:update:model-value="() => updateExpressionPreview()"
+        outlined
+        autogrow
+        type="textarea"
+        autofocus
+        label="Expression"
+      />
+    </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" @click="() => saveExpression()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>

src/components/FunctionEditor.vue

@@ -69,7 +69,7 @@ onMounted(() => {
 <template>
   <q-card>
     <q-card-section>
-      <div style="display: flex; justify-content: center">
+      <div  v-if="functionValue" style="display: flex; justify-content: center">
         <Katex
           :key="functionPreviewKey"
           :statement="functionPreview"

src/components/RichTextEditor.vue

@@ -0,0 +1,2 @@
+
+

src/components/Statement.vue

@@ -39,7 +39,7 @@ computed(() => value = getValueStatement())
 </style>
 
 <template>
-  <div class="math-statement" style="background: white">
+  <div class="math-statement" style="background: var(--q-dark)">
     <div class="content">
       <Katex :statement="statement" size="big"/>
       <div class="result" v-if="value">

src/components/VarDeclEditor.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import * as math from 'mathjs'
+import {onMounted, ref} from 'vue'
+import {MathStatement} from '../support/parse'
+import {v4 as uuidv4} from 'uuid'
+import Katex from './Katex.vue'
+import {StatementID} from '../support/types'
+
+const props = defineProps<{
+  statement?: MathStatement,
+}>()
+
+const emit = defineEmits<{
+  (eventName: 'save', statement: MathStatement): void,
+}>()
+
+const newVariablePreview = ref(MathStatement.temp('? = ?'))
+let newVariablePreviewKey = ref(uuidv4())
+const newVariableModalError = ref<string|undefined>(undefined)
+const newVariableName = ref('')
+const newVariableValue = ref('')
+
+const updateNewVariablePreview = () => {
+  const previewStmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+  if ( previewStmt.isValid() ) {
+    newVariablePreview.value = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+    newVariablePreviewKey.value = uuidv4()
+  }
+}
+
+const validateNewVariable = () => {
+  if ( !newVariableName.value ) {
+    return 'Missing variable name'
+  }
+
+  if ( !newVariableValue.value ) {
+    return 'Missing variable value'
+  }
+
+  const stmt = MathStatement.temp(`${newVariableName.value} = ${newVariableValue.value}`)
+  if ( !stmt.isValid() ) {
+    return 'Assignment is invalid'
+  }
+
+  if ( !stmt.isNotRecursive() ) {
+    return 'A variable may not reference itself'
+  }
+}
+
+const saveNewVariable = () => {
+  newVariableModalError.value = validateNewVariable()
+  if ( newVariableModalError.value ) {
+    return
+  }
+
+  if ( props.statement ) {
+    props.statement.raw = `${newVariableName.value} = ${newVariableValue.value}`
+    emit('save', props.statement)
+  } else {
+    emit('save', new MathStatement(
+        uuidv4() as StatementID,
+        `${newVariableName.value} = ${newVariableValue.value}`
+    ))
+  }
+}
+
+onMounted(() => {
+  if ( props.statement ) {
+    const [ define ] = props.statement.defines()
+    newVariableName.value = define.name
+
+    const [_, ...rest] = props.statement.raw.split('=')
+    newVariableValue.value = rest.join('=')
+    updateNewVariablePreview()
+  }
+})
+</script>
+
+<template>
+  <q-card>
+    <q-card-section>
+      <div style="display: flex; justify-content: center">
+        <Katex
+          :key="newVariablePreviewKey"
+          :statement="newVariablePreview"
+        />
+      </div>
+    </q-card-section>
+    <q-card-section v-if="newVariableModalError">
+      <div style="color: darkred; font-weight: bold">{{ newVariableModalError }}</div>
+    </q-card-section>
+    <q-card-section>
+      <q-input
+        v-model="newVariableName"
+        v-on:update:model-value="() => updateNewVariablePreview()"
+        outlined
+        autofocus
+        label="Variable name"
+      />
+      <br>
+      <q-input
+        v-model="newVariableValue"
+        v-on:update:model-value="() => updateNewVariablePreview()"
+        outlined
+        type="textarea"
+        autogrow
+        label="Value"
+      />
+    </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" @click="() => saveNewVariable()"></q-btn>
+    </q-card-actions>
+  </q-card>
+</template>