feat(editor): add delete block functionality

src/components/block/BlockBase.vue

@@ -46,7 +46,10 @@
           <v-remixicon size="20" :path="icons.riPencilLine" />
         </button>
         <hr class="border-r border-gray-600 h-5 mx-3" />
-        <button class="-mr-1">
+        <button
+          class="-mr-1"
+          @click="emitter.emit('block:delete', state.blockId)"
+        >
           <v-remixicon size="20" :path="icons.riDeleteBin7Line" />
         </button>
       </div>
@@ -56,6 +59,7 @@
 <script setup>
 import { ref, nextTick, shallowReactive } from 'vue';
 import { VRemixIcon as VRemixicon } from 'v-remixicon';
+import emitter from 'tiny-emitter/instance';
 import { icons } from '@/lib/v-remixicon';
 import { tasks, categories } from '@/utils/shared';
 

src/components/newtab/workflow/WorkflowBuilder.vue

@@ -23,6 +23,7 @@
 </template>
 <script>
 import { onMounted, onUnmounted, shallowRef } from 'vue';
+import emitter from 'tiny-emitter/instance';
 import drawflow from '@/lib/drawflow';
 
 export default {
@@ -71,10 +72,11 @@ export default {
     function saveWorkflow() {
       emit('saveWorkflow', editor.value.export());
     }
+    function deleteBlock(id) {
+      editor.value.removeNodeId(`node-${id}`);
+    }
 
     onMounted(() => {
-      window.addEventListener('beforeunload', saveWorkflow);
-      console.log(props, props.data.drawflow.Home.data);
       const element = document.querySelector('#drawflow');
 
       editor.value = drawflow(element);
@@ -95,9 +97,14 @@ export default {
           'vue'
         );
       }
+
+      emitter.on('block:delete', deleteBlock);
+
+      window.addEventListener('beforeunload', saveWorkflow);
     });
     onUnmounted(() => {
       saveWorkflow();
+      emitter.off('block:delete', deleteBlock);
       window.removeEventListener('beforeunload', saveWorkflow);
     });