feat(editor): add link block

src/background/blocks-handler.js

@@ -66,8 +66,10 @@ export function interactionHandler(block) {
       name: 'tab-message',
       id: block.name,
       once: true,
+      delay: block.name === 'link' ? 5000 : 0,
       callback: (data) => {
         this.data.push(data);
+
         resolve({
           data,
           nextBlockId: getBlockConnection(block),

src/background/workflow-engine.js

@@ -8,7 +8,10 @@ function tabMessageHandler({ type, data }) {
   const listener = this.tabMessageListeners[type];
 
   if (listener) {
-    listener.callback(data);
+    console.log(listener.delay, 'delay....');
+    setTimeout(() => {
+      listener.callback(data);
+    }, listener.delay || 0);
 
     if (listener.once) delete this.tabMessageListeners[type];
   }
@@ -30,11 +33,11 @@ function tabUpdatedHandler(tabId, changeInfo) {
       delete this.tabUpdatedListeners[tabId];
     });
   } else {
-    if (changeInfo.status !== 'complete') return;
+    if (this.tabId !== tabId) return;
 
-    if (this.tabId === tabId) {
-      this.isPaused = true;
+    this.isInsidePaused = true;
 
+    if (changeInfo.status === 'complete') {
       browser.tabs
         .executeScript(tabId, {
           file: './contentScript.bundle.js',
@@ -43,11 +46,11 @@ function tabUpdatedHandler(tabId, changeInfo) {
           console.log(this.currentBlock);
           if (this._connectedTab) this._connectTab(this.tabId);
 
-          this.isPaused = false;
+          this.isInsidePaused = false;
         })
         .catch((error) => {
           console.error(error);
-          this.isPaused = false;
+          this.isInsidePaused = false;
         });
     }
   }
@@ -61,6 +64,7 @@ class WorkflowEngine {
     this.data = [];
     this.isDestroyed = false;
     this.isPaused = false;
+    this.isInsidePaused = false;
     this.logs = [];
     this.currentBlock = null;
 
@@ -105,6 +109,7 @@ class WorkflowEngine {
   }
 
   _blockHandler(block, prevBlockData) {
+    console.log(this.isInsidePaused, 'isInsidePaused');
     if (this.isDestroyed) {
       console.log(
         '%cDestroyed',
@@ -112,7 +117,7 @@ class WorkflowEngine {
       );
       return;
     }
-    if (this.isPaused) {
+    if (this.isPaused || this.isInsidePaused) {
       setTimeout(() => {
         this._blockHandler(block, prevBlockData);
       }, 1000);
@@ -166,12 +171,12 @@ class WorkflowEngine {
     return connectedTab;
   }
 
-  _listener({ id, name, callback, once = true }) {
+  _listener({ id, name, callback, once = true, ...options }) {
     const listenerNames = {
       'tab-updated': 'tabUpdatedListeners',
       'tab-message': 'tabMessageListeners',
     };
-    this[listenerNames[name]][id] = { callback, once };
+    this[listenerNames[name]][id] = { callback, once, ...options };
 
     return () => {
       delete this.tabMessageListeners[id];

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

@@ -14,6 +14,7 @@
     @change="updateData({ selector: $event })"
   />
   <ui-checkbox
+    v-if="!data.disableMultiple"
     :model-value="data.multiple"
     @change="updateData({ multiple: $event })"
   >

src/content/blocks-handler.js

@@ -107,3 +107,22 @@ export function triggerEvent({ data }) {
     resolve('');
   });
 }
+
+export function link({ data }) {
+  return new Promise((resolve) => {
+    const element = document.querySelector(data.selector);
+
+    if (!element) {
+      resolve('');
+      return;
+    }
+
+    const url = element.href;
+
+    if (url) window.location.href = url;
+
+    // setTimeout(() => {
+    resolve('');
+    // }, 2000);
+  });
+}

src/lib/v-remixicon.js

@@ -16,6 +16,7 @@ import {
   riDeleteBin7Line,
   riPencilLine,
   riExternalLinkLine,
+  riLink,
   riArrowLeftSLine,
   riArrowLeftLine,
   riEditBoxLine,
@@ -67,6 +68,7 @@ export const icons = {
   riDeleteBin7Line,
   riPencilLine,
   riExternalLinkLine,
+  riLink,
   riArrowLeftSLine,
   riArrowLeftLine,
   riEditBoxLine,

src/utils/handle-form-element.js

@@ -7,13 +7,30 @@ function formEvent(element, data) {
       ? 'Space'
       : `key${data.value.toUpperCase()}`;
 
-    simulateEvent(element, 'keydown', { code, key: data.value });
-    simulateEvent(element, 'keyup', { code, key: data.value });
+    simulateEvent(element, 'keydown', {
+      code,
+      bubbles: true,
+      cancelable: true,
+      key: data.value,
+    });
+    simulateEvent(element, 'keyup', {
+      code,
+      bubbles: true,
+      cancelable: true,
+      key: data.value,
+    });
   }
 
-  element.dispatchEvent(new Event('change'));
   element.dispatchEvent(
-    new InputEvent('input', { inputType: 'insertText', data: data.value })
+    new Event('change', { bubbles: true, cancelable: true })
+  );
+  element.dispatchEvent(
+    new InputEvent('input', {
+      inputType: 'insertText',
+      data: data.value,
+      bubbles: true,
+      cancelable: true,
+    })
   );
 }
 function inputText({ data, element, index = 0, callback }) {

src/utils/shared.js

@@ -97,6 +97,22 @@ export const tasks = {
       scrollX: 0,
     },
   },
+  link: {
+    name: 'Link',
+    icon: 'riLink',
+    component: 'BlockBasic',
+    editComponent: 'EditInteractionBase',
+    category: 'interaction',
+    inputs: 1,
+    outputs: 1,
+    allowedInputs: true,
+    maxConnection: 1,
+    data: {
+      description: '',
+      selector: '',
+      disableMultiple: true,
+    },
+  },
   'attribute-value': {
     name: 'Attribute value',
     icon: 'riBracketsLine',