Resolve merge conflicts

src/App.vue

@@ -12,7 +12,7 @@ import { ref } from "vue";
 </script>
 
 <template>
-  <q-layout view="hHh Lpr fff">
+  <q-layout view="hHr LpR fFf">
     <q-header elevated class="bg-primary text-white" height-hint="98">
       <q-toolbar>
         <q-toolbar-title>
@@ -26,6 +26,7 @@ import { ref } from "vue";
       <q-tabs align="left">
         <q-route-tab to="/Scratch" label="Scratch" />
         <q-route-tab to="/Editor" label="Editor" />
+
       </q-tabs>
     </q-header>
 

src/assets/grid.svg

@@ -0,0 +1,13 @@
+<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <pattern id="smallGrid" width="8" height="8" patternUnits="userSpaceOnUse">
+      <path d="M 8 0 L 0 0 0 8" fill="none" stroke="gray" stroke-width="0.5"/>
+    </pattern>
+    <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
+      <rect width="80" height="80" fill="url(#smallGrid)"/>
+      <path d="M 80 0 L 0 0 0 80" fill="none" stroke="gray" stroke-width="1"/>
+    </pattern>
+  </defs>
+      
+  <rect width="100%" height="100%" fill="url(#grid)" />
+</svg>

src/components/Statement.vue

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

src/components/TextBox.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const props = defineProps({
+  statement: { type: String, required: true },
+  })
+</script>
+
+<template>
+  <Draggable :grid="[25, 25]">
+    <div style="display: flex">
+      <q-card flat bordered>
+        <q-card-section>
+          <div class="row items-center no-wrap">
+            <q-card-section v-html="props.statement" />
+            <div class="col-auto">
+              <q-btn color="grey-7" round flat icon="more_vert">
+                <q-menu cover auto-close>
+                  <q-list>
+                    <q-item clickable>
+                      <q-item-section @click="() => $emit('edit')">Edit</q-item-section>
+                    </q-item>
+                    <q-item clickable>
+                      <q-item-section @click="() => $emit('remove')">Remove</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+  </Draggable>
+</template>
+
+<style lang="sass" scoped></style>

src/components/WrapperBox.vue

@@ -16,9 +16,7 @@ function increment() {
       <div>Grid with component</div>
 
         <q-btn @click="increment">Count is: {{ count }}</q-btn>
-        <q-card class="my-card">
-            hi
-        </q-card>
+
     </div>
   </Draggable>
 </template>

src/pages/Editor.vue

@@ -9,12 +9,12 @@ import {EvaluationResult, StatementID} from '../types'
 import Statement from '../components/Statement.vue'
 import VarDeclEditor from './VarDeclEditor.vue'
 import ExpressionEditor from './ExpressionEditor.vue'
+import TextBox from '../components/TextBox.vue'
 
 const math = new MathPage(uuidv4())
 const statements = ref<MathStatement[]>([])
 const evaluation = ref<EvaluationResult|undefined>()
 const statementsKey = ref<string>(uuidv4())
-
 const leftDrawerOpen = ref(false);
 
 function toggleLeftDrawer() {
@@ -53,6 +53,30 @@ const saveNewExpression = (stmt: MathStatement) => {
   updateStatements()
 }
 
+/*
+  Rich Text Stuff
+*/
+
+const richTextStatments = ref([
+  { text: "test" },
+  { text: "test2" },
+  { text: "test3" },
+]);
+
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditID = ref(0);
+
+const richEditStatement = (id: number) => {
+  console.log("editing statement", id, richEditModal);
+  richEditModal.value = true;
+  richEditID.value = id;
+  richEditExpression.value = richTextStatments.value[richEditID.value].text;
+};
+
+function richUpdateValue() {
+  richTextStatments.value[richEditID.value].text = richEditExpression.value;
+}
 </script>
 
 <template>
@@ -76,9 +100,7 @@ const saveNewExpression = (stmt: MathStatement) => {
 
     <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
       <div class="column" style="height: 100%">
-        <div class="col">
-          variables
-        </div>
+        <div class="col">variables</div>
         <div class="col">
           <q-separator />
           function
@@ -88,19 +110,20 @@ const saveNewExpression = (stmt: MathStatement) => {
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container>
+    <q-page-container id="editor" style="display: flex">
 <!--      <WrapperBox />-->
 
-      <Draggable
-        v-for="statement in statements"
-        :grid="[25, 25]"
-      >
-        <Statement
-          :key="statementsKey"
-          :statement="statement"
-          :evaluation="evaluation"
-        />
-      </Draggable>
+      <span v-for="statement in statements">
+        <Draggable
+            :grid="[25, 25]"
+        >
+          <Statement
+            :key="statementsKey"
+            :statement="statement"
+            :evaluation="evaluation"
+          />
+        </Draggable>
+      </span>
 
       <q-dialog v-model="newVariableModalOpen">
         <VarDeclEditor
@@ -132,6 +155,22 @@ const saveNewExpression = (stmt: MathStatement) => {
           />
         </q-fab>
       </q-page-sticky>
+
+      <q-dialog v-model="richEditModal">
+        <q-card>
+          <q-editor v-model="richEditExpression" min-height="5rem" />
+          <q-card-actions align="right" class="text-primary">
+            <q-btn flat label="Cancel" v-close-popup></q-btn>
+            <q-btn flat label="Save" @click="richUpdateValue" v-close-popup></q-btn>
+          </q-card-actions>
+        </q-card>
+      </q-dialog>
+      <span v-for="(item, index) in richTextStatments">
+        <TextBox
+          :statement="item.text"
+          v-on:edit="() => (item.text ? richEditStatement(index) : {})"
+        ></TextBox>
+      </span>
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -143,3 +182,11 @@ const saveNewExpression = (stmt: MathStatement) => {
     </q-footer>
   </q-layout>
 </template>
+
+<style>
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
+}
+</style>