feat: add press time option in press key block (#1543)

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

@@ -75,6 +75,14 @@
       placeholder="keys"
       @change="updateData({ keysToPress: $event })"
     />
+    <ui-input
+      :model-value="Math.min(data.pressTime || 0, 0)"
+      :label="t('workflow.blocks.press-key.press-time')"
+      type="number"
+      class="w-full mt-2"
+      :placeholder="t('common.millisecond')"
+      @change="updateData({ pressTime: +$event })"
+    />
   </div>
 </template>
 <script setup>

src/content/blocksHandler/handlerPressKey.js

@@ -1,4 +1,4 @@
-import { isXPath, objectHasKey } from '@/utils/helper';
+import { isXPath, objectHasKey, sleep } from '@/utils/helper';
 import { sendMessage } from '@/utils/message';
 import { keyDefinitions } from '@/utils/USKeyboardLayout';
 import { queryElements } from '../handleSelector';
@@ -11,7 +11,7 @@ const modifierKeys = [
   { name: 'Control', id: 2 },
 ];
 
-function pressKeyWithJs(element, keys) {
+async function pressKeyWithJs({ element, keys, pressTime }) {
   const details = {
     key: '',
     code: '',
@@ -24,8 +24,8 @@ function pressKeyWithJs(element, keys) {
     cancelable: true,
   };
 
-  ['keydown', 'keyup'].forEach((event) => {
-    keys.forEach((key) => {
+  for (const event of ['keydown', 'keyup']) {
+    for (const key of keys) {
       const isLetter = /^[a-zA-Z]$/.test(key);
 
       const isModKey = modifierKeys.some(({ name }) => name === key);
@@ -84,10 +84,17 @@ function pressKeyWithJs(element, keys) {
           element[contentKey] += '\r\n';
         }
       }
-    });
-  });
+
+      if (event === 'keyDown' && pressTime > 0) await sleep(pressTime);
+    }
+  }
 }
-async function pressKeyWithCommand(_, keys, activeTabId, actionType) {
+async function pressKeyWithCommand({
+  keys,
+  pressTime,
+  actionType,
+  activeTabId,
+}) {
   const commands = [];
   const events =
     actionType === 'multiple-keys' ? ['keyDown'] : ['keyDown', 'keyUp'];
@@ -130,6 +137,8 @@ async function pressKeyWithCommand(_, keys, activeTabId, actionType) {
 
         commands.push(command.params, secondEvent);
       }
+
+      if (event === 'keyDown' && pressTime > 0) await sleep(pressTime);
     }
   }
 
@@ -160,7 +169,13 @@ async function pressKey({ data, debugMode, activeTabId }) {
       : data.keysToPress.split('');
   const pressKeyFunction = debugMode ? pressKeyWithCommand : pressKeyWithJs;
 
-  await pressKeyFunction(element, keys, activeTabId, data.action);
+  await pressKeyFunction({
+    keys,
+    element,
+    activeTabId,
+    actionType: data.action,
+    pressTime: Number.isNaN(+data.pressTime) ? 0 : +data.pressTime,
+  });
 
   return '';
 }

src/locales/en/blocks.json

@@ -206,7 +206,8 @@
         "actions": {
           "press-key": "Press a key",
           "multiple-keys": "Press multiple keys"
-        }
+        },
+        "press-time": "Press time (milliseconds)"
       },
       "save-assets": {
         "name": "Save assets",

src/locales/en/common.json

@@ -47,7 +47,8 @@
     "password": "Password",
     "category": "Category",
     "optional": "Optional",
-    "0disable": "0 to disable"
+    "0disable": "0 to disable",
+    "millisecond": "millisecond | milliseconds"
   },
   "message": {
     "noBlock": "No block",

src/utils/shared.js

@@ -1052,6 +1052,7 @@ export const tasks = {
       disableBlock: false,
       keys: '',
       selector: '',
+      pressTime: 0,
       description: '',
       keysToPress: '',
       action: 'press-key',