fix: can't edit block group

src/components/block/BlockGroup.vue

@@ -88,7 +88,7 @@
   </ui-card>
 </template>
 <script setup>
-import { watch, reactive, onMounted } from 'vue';
+import { watch, reactive, onMounted, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { nanoid } from 'nanoid';
 import { useToast } from 'vue-toastification';
@@ -140,6 +140,8 @@ const state = reactive({
   retrieved: false,
 });
 
+const workflow = inject('workflow');
+
 function onDragStart(item, event) {
   event.dataTransfer.setData(
     'block',
@@ -164,7 +166,12 @@ function onDragEnd(itemId) {
 function editBlock(payload) {
   emit('edit', payload);
 }
-function deleteItem(index) {
+function deleteItem(index, itemId) {
+  if (workflow.editState.blockData.itemId === itemId) {
+    workflow.editState.editing = false;
+    workflow.editState.blockData = false;
+  }
+
   state.blocks.splice(index, 1);
 }
 function handleDrop(event) {

src/components/block/BlockLoopBreakpoint.vue

@@ -13,7 +13,7 @@
       <v-remixicon
         name="riDeleteBin7Line"
         class="cursor-pointer"
-        @click="editor.removeNodeId(`node-${block.id}`)"
+        @click.stop="$emit('delete', id)"
       />
     </div>
     <input
@@ -48,6 +48,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
+defineEmits(['delete']);
 
 const { t } = useI18n();
 const block = useEditorBlock(props.label);

src/components/block/BlockRepeatTask.vue

@@ -13,7 +13,7 @@
       <v-remixicon
         name="riDeleteBin7Line"
         class="cursor-pointer"
-        @click="editor.removeNodeId(`node-${block.id}`)"
+        @click="$emit('delete', id)"
       />
     </div>
     <label
@@ -65,6 +65,7 @@ const props = defineProps({
     default: () => ({}),
   },
 });
+defineEmits(['delete']);
 
 const block = useEditorBlock(props.label);
 const componentId = useComponentId('block-delay');

src/newtab/pages/workflows/[id].vue

@@ -125,6 +125,7 @@
 </template>
 <script setup>
 import {
+  provide,
   reactive,
   computed,
   onMounted,
@@ -247,31 +248,26 @@ const activeWorkflowModal = computed(
   () => workflowModals[modalState.name] || {}
 );
 
+provide('workflow', {
+  editState,
+  data: workflow,
+});
+
 const updateBlockData = debounce((data) => {
   const node = editor.value.getNode.value(editState.blockData.blockId);
-  node.data = data;
+  if (editState.blockData.itemId) {
+    const itemIndex = node.data.blocks.findIndex(
+      ({ itemId }) => itemId === editState.blockData.itemId
+    );
+    if (itemIndex === -1) return;
+
+    node.data.blocks[itemIndex].data = data;
+  } else {
+    node.data = data;
+  }
+
   editState.blockData.data = data;
   state.dataChanged = true;
-  // let payload = data;
-
-  // state.blockData.data = data;
-  // state.dataChange = true;
-  // autocomplete.dataChanged = true;
-
-  // if (state.blockData.isInGroup) {
-  //   payload = { itemId: state.blockData.itemId, data };
-  // } else {
-  //   editor.value.updateNodeDataFromId(state.blockData.blockId, data);
-  // }
-
-  // const inputEl = document.querySelector(
-  //   `#node-${state.blockData.blockId} input.trigger`
-  // );
-
-  // if (inputEl)
-  //   inputEl.dispatchEvent(
-  //     new CustomEvent('change', { detail: toRaw(payload) })
-  //   );
 }, 250);
 const updateHostedWorkflow = throttle(async () => {
   if (!userStore.user || workflowPayload.isUpdating) return;
@@ -333,6 +329,16 @@ const updateHostedWorkflow = throttle(async () => {
     workflowPayload.isUpdating = false;
   }
 }, 5000);
+const onNodesChange = debounce((changes) => {
+  changes.forEach(({ type, id }) => {
+    if (type === 'remove') {
+      if (editState.blockData.blockId === id) {
+        editState.editing = false;
+        editState.blockData = {};
+      }
+    }
+  });
+}, 250);
 
 function toggleSidebar() {
   state.showSidebar = !state.showSidebar;
@@ -359,7 +365,6 @@ function onActionUpdated({ data, changedIndicator }) {
 }
 function onEditorInit(instance) {
   editor.value = instance;
-  // listen to change event
   instance.onEdgesChange((changes) => {
     changes.forEach(({ type }) => {
       if (state.dataChanged) return;
@@ -370,6 +375,7 @@ function onEditorInit(instance) {
   instance.onEdgeDoubleClick(({ edge }) => {
     instance.removeEdges([edge]);
   });
+  instance.onNodesChange(onNodesChange);
 }
 function clearHighlightedElements() {
   const elements = document.querySelectorAll(