Add event handler as prep to insert cells

client/src/components/Markdown/Editor/CellButtonAdd.vue

@@ -0,0 +1,37 @@
+<template>
+    <Popper trigger="click" placement="right" mode="light" :arrow="false">
+        <template v-slot:reference>
+            <div v-b-tooltip.right class="d-inline text-muted ml-2 cursor-pointer" title="Insert new Cell">
+                <FontAwesomeIcon :icon="faPlusSquare" />
+            </div>
+        </template>
+        <div class="cursor-pointer">
+            <CellOption
+                title="Markdown"
+                description="Markdown text element"
+                :icon="faPlusSquare"
+                @click="onClick('markdown')" />
+            <CellOption title="Vega" description="Vega Graphics" @click="onClick('vega')" />
+        </div>
+    </Popper>
+</template>
+
+<script setup lang="ts">
+import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+import CellOption from "./CellOption.vue";
+import Popper from "@/components/Popper/Popper.vue";
+
+const props = defineProps<{
+    cellIndex: number;
+}>();
+
+const emit = defineEmits<{
+    (e: "click", cellIndex: number, cellType: string): void;
+}>();
+
+function onClick(cellType: string) {
+    emit("click", props.cellIndex, cellType);
+}
+</script>

client/src/components/Markdown/Editor/CellEditor.vue

@@ -1,24 +1,21 @@
 <template>
     <div class="h-100 w-100">
         <div v-for="(cell, cellIndex) of cells" :key="cellIndex">
-            <CellButton>
-                <FontAwesomeIcon :icon="faPlusSquare" />
-            </CellButton>
+            <CellButtonAdd :cell-index="cellIndex" @click="onClick" />
             <div class="border rounded mx-2 p-2">
                 {{ cell }}
             </div>
         </div>
+        <CellButtonAdd :cell-index="cells.length" @click="onClick" />
     </div>
 </template>
 
 <script setup lang="ts">
-import { faPlusSquare } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
 import { parseMarkdown } from "@/components/Markdown/parse";
 
-import CellButton from "./CellButton.vue";
+import CellButtonAdd from "./CellButtonAdd.vue";
 
 const props = defineProps<{
     markdownText: string;
@@ -30,4 +27,8 @@ interface CellType {
 }
 
 const cells = ref<Array<CellType>>(parseMarkdown(props.markdownText));
+
+function onClick(cellIndex: number, cellType: string) {
+    console.log([cellIndex, cellType]);
+}
 </script>

client/src/components/Markdown/Editor/CellOption.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="cell-option d-flex justify-content-between rounded m-1" @click="$emit('click')">
+        <div class="m-2">
+            <div class="font-weight-bold">{{ title }}</div>
+            <small>{{ description }}</small>
+        </div>
+        <div v-if="icon" class="m-2 align-self-center">
+            <FontAwesomeIcon :icon="icon" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+defineProps<{
+    title: string;
+    description: string;
+    icon?: any;
+}>();
+
+defineEmits<{
+    (e: "click"): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.cell-option {
+    &:hover {
+        background: $brand-primary;
+        color: $white;
+        small {
+            color: $white;
+        }
+    }
+    small {
+        color: $text-muted;
+    }
+}
+</style>