rich editing works

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/TextBox.vue

@@ -1,38 +1,27 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { useQuasar } from "quasar";
 
-const $q = useQuasar();
-const editor = ref("");
-const editMode = ref(false);
-
-function edit() {
-  editMode.value = !editMode.value;
-}
+const props = defineProps({
+  statement: { type: String, required: true },
+  })
 </script>
 
 <template>
-
-  <q-dialog v-if="editMode" >
-    <q-editor v-model="editor" min-height="5rem" />
-  </q-dialog>
-
-
   <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="editor" />
+            <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="edit">Edit</q-item-section>
+                      <q-item-section @click="() => $emit('edit')">Edit</q-item-section>
                     </q-item>
                     <q-item clickable>
-                      <q-item-section>Remove</q-item-section>
+                      <q-item-section @click="() => $emit('remove')">Remove</q-item-section>
                     </q-item>
                   </q-list>
                 </q-menu>

src/pages/Editor.vue

@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import WrapperBox from "../components/WrapperBox.vue";
+import TextBox from "../components/TextBox.vue";
+
+const leftDrawerOpen = ref(false);
+
+function toggleLeftDrawer() {
+  leftDrawerOpen.value = !leftDrawerOpen.value;
+}
+
+/*
+  Rich Text Stuff
+*/
+
+const richTextStatments = ref([
+  { text: "test" },
+  { text: "test2" },
+  { text: "test3" },
+]);
+
+const richEditModal = ref(false);
+const richEditExpression = ref("");
+const richEditStatement = (stmt: String) => {
+  console.log('editing statement', stmt, editModal)
+  activeStatement = stmt
+  richEditModal.value = true
+  richEditExpression.value = stmt.raw
+}
+</script>
+
 <template>
   <q-layout view="hHh Lpr fff">
     <q-header reveal bordered class="bg-primary text-white" height-hint="98">
@@ -19,9 +50,7 @@
 
     <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
@@ -31,10 +60,22 @@
       <!-- drawer content -->
     </q-drawer>
 
-    <q-page-container style="display: flex">
-
-      <TextBox/>
+    <q-page-container id="editor" style="display: flex">
+      <q-dialog ref="edit-modal" v-model="richEditModal">
+        <q-card>
+          <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>
 
+      <span v-for="(item, index) in richTextStatments">
+        <TextBox
+          :statement="item.text"
+          v-on:edit="() => (stmt ? richEditStatement(stmt) : {})"
+        ></TextBox>
+      </span>
     </q-page-container>
 
     <q-footer reveal elevated class="bg-grey-8 text-white">
@@ -47,14 +88,10 @@
   </q-layout>
 </template>
 
-<script setup lang="ts">
-import { ref } from "vue";
-import WrapperBox from "../components/WrapperBox.vue";
-import TextBox from "../components/TextBox.vue";
-
-const leftDrawerOpen = ref(false);
-
-function toggleLeftDrawer() {
-  leftDrawerOpen.value = !leftDrawerOpen.value;
+<style>
+#editor {
+  background-image: url(../assets/grid.svg);
+  background-repeat: repeat;
+  height: 100%;
 }
-</script>
+</style>