fix: can't edit some blocks

src/background/index.js

@@ -168,30 +168,6 @@ async function openDashboard(url) {
     console.error(error);
   }
 }
-async function checkWorkflowStates() {
-  const states = await workflow.states.get();
-  // const sessionStates = parseJSON(sessionStorage.getItem('workflowState'), {});
-
-  states.forEach((state) => {
-    /* Enable when using manifest 3 */
-    // const resumeWorkflow =
-    //   !state.isDestroyed && objectHasKey(sessionStates, state.id);
-
-    if (false) {
-      workflow.get(state.workflowId).then((workflowData) => {
-        workflow.execute(workflowData, {
-          state,
-          resume: true,
-        });
-      });
-    } else {
-      workflow.states.states.delete(state.id);
-    }
-  });
-
-  await browserStorage.set('workflowState', states);
-}
-checkWorkflowStates();
 async function checkVisitWebTriggers(tabId, tabUrl) {
   const workflowState = await workflow.states.get(({ state }) =>
     state.tabIds.includes(tabId)

src/background/workflowEngine/blocksHandler/handlerExecuteWorkflow.js

@@ -43,7 +43,10 @@ async function executeWorkflow({ outputs, data }) {
     if (data.workflowId === '') throw new Error('empty-workflow');
 
     const { workflows } = await browser.storage.local.get('workflows');
-    const workflow = workflows.find(({ id }) => id === data.workflowId);
+    const workflowsArr = Array.isArray(workflows)
+      ? workflows
+      : Object.values(workflows);
+    const workflow = workflowsArr.find(({ id }) => id === data.workflowId);
 
     if (!workflow) {
       const errorInstance = new Error('no-workflow');

src/components/block/BlockWebhook.vue

@@ -1,51 +0,0 @@
-<template>
-  <block-basic v-bind="props" class="block-with-fallback">
-    <div class="fallback flex items-center pb-2 justify-end">
-      <v-remixicon
-        v-if="block"
-        :title="t(`workflow.blocks.${block.details.id}.fallback`)"
-        name="riInformationLine"
-        size="18"
-      />
-      <span class="ml-1">
-        {{ t('common.fallback') }}
-      </span>
-    </div>
-  </block-basic>
-</template>
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useEditorBlock } from '@/composable/editorBlock';
-import BlockBasic from './BlockBasic.vue';
-
-const props = defineProps({
-  id: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  data: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-const block = useEditorBlock(props.label);
-</script>
-<style>
-.block-with-fallback .block-base__content {
-  padding-bottom: 0;
-}
-.drawflow-node.webhook .outputs,
-.drawflow-node.while-loop .outputs {
-  top: 64%;
-}
-.drawflow-node.webhook .outputs .output_1,
-.drawflow-node.while-loop .outputs .output_1 {
-  margin-bottom: 14px;
-}
-</style>

src/components/newtab/workflow/WorkflowEditor.vue

@@ -70,11 +70,24 @@ const props = defineProps({
 });
 const emit = defineEmits(['edit', 'init', 'update:node', 'delete:node']);
 
+const fallbackBlocks = {
+  BlockBasic: ['BlockExportData'],
+  BlockBasicWithFallback: ['BlockWebhook'],
+};
+
 const isMac = navigator.appVersion.indexOf('Mac') !== -1;
 const blockComponents = require.context('@/components/block', false, /\.vue$/);
 const nodeTypes = blockComponents.keys().reduce((acc, key) => {
   const name = key.replace(/(.\/)|\.vue$/g, '');
-  acc[`node-${name}`] = blockComponents(key).default;
+  const component = blockComponents(key).default;
+
+  if (fallbackBlocks[name]) {
+    fallbackBlocks[name].forEach((fallbackBlock) => {
+      acc[`node-${fallbackBlock}`] = component;
+    });
+  }
+
+  acc[`node-${name}`] = component;
 
   return acc;
 }, {});

src/components/newtab/workflow/edit/EditGetText.vue

@@ -83,7 +83,10 @@ const emit = defineEmits(['update:data']);
 
 const { t } = useI18n();
 
-const regexExp = ref([...new Set(props.data.regexExp)]);
+const regexData = Array.isArray(props.data.regexExp)
+  ? props.data.regexExp
+  : Object.values(props.data.regexExp);
+const regexExp = ref([...new Set(regexData)]);
 
 const exps = [
   { id: 'g', name: 'global' },

src/content/services/shortcutListener.js

@@ -32,6 +32,7 @@ function workflowShortcutsListener(findWorkflow, shortcutsObj) {
 
   const keyboardShortcuts = shortcuts.reduce((acc, [id, value]) => {
     const workflow = findWorkflow(id);
+    if (!workflow) return acc;
 
     (acc[value] = acc[value] || []).push({
       id,
@@ -65,8 +66,11 @@ export default async function () {
         'workflows',
         'workflowHosts',
       ]);
+    const workflowsArr = Array.isArray(workflows)
+      ? workflows
+      : Object.values(workflows);
     const findWorkflow = (id, publicId = false) => {
-      let workflow = workflows.find((item) => {
+      let workflow = workflowsArr.find((item) => {
         if (publicId) {
           return item.settings.publicId === id;
         }

src/content/services/webService.js

@@ -55,11 +55,21 @@ function initWebListener() {
         copyWorkflow.table = copyWorkflow.table || copyWorkflow.dataColumns;
         copyWorkflow.dataColumns = [];
 
-        workflowsStorage.push({
-          ...workflow,
-          id: nanoid(),
-          createdAt: Date.now(),
-        });
+        const workflowId = nanoid();
+
+        if (Array.isArray(workflowsStorage)) {
+          workflowsStorage.push({
+            ...copyWorkflow,
+            id: workflowId,
+            createdAt: Date.now(),
+          });
+        } else {
+          workflowsStorage[workflowId] = {
+            ...copyWorkflow,
+            id: workflowId,
+            createdAt: Date.now(),
+          };
+        }
 
         await browser.storage.local.set({ workflows: workflowsStorage });
       } catch (error) {

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

@@ -135,6 +135,7 @@ import {
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 import { customAlphabet } from 'nanoid';
+import defu from 'defu';
 import { useStore } from '@/stores/main';
 import { useUserStore } from '@/stores/user';
 import { useWorkflowStore } from '@/stores/workflow';
@@ -255,15 +256,17 @@ provide('workflow', {
 
 const updateBlockData = debounce((data) => {
   const node = editor.value.getNode.value(editState.blockData.blockId);
+  const dataCopy = JSON.parse(JSON.stringify(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;
+    node.data.blocks[itemIndex].data = dataCopy;
   } else {
-    node.data = data;
+    node.data = dataCopy;
   }
 
   editState.blockData.data = data;
@@ -345,10 +348,11 @@ function toggleSidebar() {
   localStorage.setItem('workflow:sidebar', state.showSidebar);
 }
 function initEditBlock(data) {
-  const { editComponent } = tasks[data.id];
+  const { editComponent, data: blockDefData } = tasks[data.id];
+  const blockData = defu(data.data, blockDefData);
 
   editState.editing = true;
-  editState.blockData = { ...data, editComponent };
+  editState.blockData = { ...data, editComponent, data: blockData };
 }
 function updateWorkflow(data) {
   workflowStore.update({

src/popup/App.vue

@@ -9,10 +9,14 @@ import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import browser from 'webextension-polyfill';
 import { useStore } from '@/stores/main';
+import { useWorkflowStore } from '@/stores/workflow';
+import { useHostedWorkflowStore } from '@/stores/hostedWorkflow';
 import { loadLocaleMessages, setI18nLanguage } from '@/lib/vueI18n';
 
 const store = useStore();
 const router = useRouter();
+const workflowStore = useWorkflowStore();
+const hostedWorkflowStore = useHostedWorkflowStore();
 
 const retrieved = ref(false);
 
@@ -26,6 +30,9 @@ onMounted(async () => {
     await loadLocaleMessages(store.settings.locale, 'popup');
     await setI18nLanguage(store.settings.locale);
 
+    await workflowStore.loadData();
+    await hostedWorkflowStore.loadData();
+
     retrieved.value = true;
   } catch (error) {
     console.error(error);

src/popup/pages/Home.vue

@@ -148,9 +148,11 @@ const hostedWorkflows = computed(() => {
 const localWorkflows = computed(() => {
   if (state.activeTab !== 'local') return [];
 
-  return workflowStore.getWorkflows.filter(({ name }) =>
-    name.toLocaleLowerCase().includes(state.query.toLocaleLowerCase())
-  );
+  return workflowStore.getWorkflows
+    .filter(({ name }) =>
+      name.toLocaleLowerCase().includes(state.query.toLocaleLowerCase())
+    )
+    .sort((a, b) => (a.createdAt > b.createdAt ? -1 : 1));
 });
 const workflows = computed(() =>
   state.activeTab === 'local' ? localWorkflows.value : hostedWorkflows.value
@@ -270,9 +272,6 @@ function openWorkflowPage({ id, hostId }) {
 onMounted(async () => {
   const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
   state.haveAccess = /^(https?)/.test(tab.url);
-
-  await workflowStore.loadData();
-  await hostedWorkflowStore.loadData();
 });
 </script>
 <style>

src/utils/shared.js

@@ -1010,24 +1010,29 @@ export const tasks = {
 export const categories = {
   interaction: {
     name: 'Web interaction',
+    border: 'border-green-200 dark:border-green-300',
     color: 'bg-green-200 dark:bg-green-300 fill-green-200 dark:fill-green-300',
   },
   browser: {
     name: 'Browser',
+    border: 'border-orange-200 dark:border-orange-300',
     color:
       'bg-orange-200 dark:bg-orange-300 fill-orange-200 dark:fill-orange-300',
   },
   general: {
     name: 'General',
+    border: 'border-yellow-200 dark:border-yellow-300',
     color:
       'bg-yellow-200 dark:bg-yellow-300 fill-yellow-200 dark:fill-yellow-300',
   },
   onlineServices: {
     name: 'Online services',
+    border: 'border-red-200 dark:border-red-300',
     color: 'bg-red-200 dark:bg-red-300 fill-red-200 dark:fill-red-300',
   },
   conditions: {
     name: 'Conditions',
+    border: 'border-blue-200 dark:border-blue-300',
     color: 'bg-blue-200 dark:bg-blue-300 fill-blue-200 dark:fill-blue-300',
   },
 };