feat: use "press key" block when recording workflow

src/background/index.js

@@ -187,19 +187,13 @@ browser.commands.onCommand.addListener((name) => {
 });
 browser.webNavigation.onCommitted.addListener(
   ({ frameId, tabId, url, transitionType }) => {
-    const allowedType = ['link', 'typed', 'form_submit'];
+    const allowedType = ['link', 'typed'];
     if (frameId !== 0 || !allowedType.includes(transitionType)) return;
 
     updateRecording((recording) => {
       if (tabId !== recording.activeTab.id) return;
 
       const lastFlow = recording.flows.at(-1) ?? {};
-      const isClickSubmit =
-        lastFlow.id === 'event-click' &&
-        (transitionType === 'form_submit' || lastFlow.isClickLink);
-
-      if (isClickSubmit) return;
-
       const isInvalidNewtabFlow =
         lastFlow &&
         lastFlow.id === 'new-tab' &&

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

@@ -52,8 +52,8 @@
 <script setup>
 import { ref, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { toCamelCase } from '@/utils/helper';
 import { keyDefinitions } from '@/utils/USKeyboardLayout';
+import { recordPressedKey } from '@/utils/recordKeys';
 import EditAutocomplete from './EditAutocomplete.vue';
 
 const props = defineProps({
@@ -69,7 +69,6 @@ const filteredDefinitions = Object.keys(keyDefinitions).filter(
   (key) => key.trim().length <= 1 || key.startsWith('Arrow')
 );
 const keysList = filteredDefinitions.concat(includedKeys);
-const modifierKeys = ['Control', 'Alt', 'Shift', 'Meta'];
 
 const { t } = useI18n();
 
@@ -84,25 +83,12 @@ function updateKeys(value) {
   updateData({ keys: value });
 }
 function onKeydown(event) {
-  if (event.repeat || modifierKeys.includes(event.key)) return;
-
   event.preventDefault();
   event.stopPropagation();
 
-  const { shiftKey, metaKey, altKey, ctrlKey, key } = event;
-  let pressedKey = key.length > 1 || shiftKey ? toCamelCase(key, true) : key;
-
-  if (pressedKey === ' ') pressedKey = 'Space';
-  else if (pressedKey === '+') pressedKey = 'NumpadAdd';
-
-  const keys = [pressedKey];
-
-  if (shiftKey) keys.unshift('Shift');
-  if (metaKey) keys.unshift('Meta');
-  if (altKey) keys.unshift('Alt');
-  if (ctrlKey) keys.unshift('Control');
-
-  updateKeys(keys.join('+'));
+  recordPressedKey(event, (keys) => {
+    updateKeys(keys.join('+'));
+  });
 }
 function onKeyup() {
   isRecordingKey.value = false;

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

@@ -213,7 +213,7 @@ import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import dayjs from 'dayjs';
 import { isObject } from '@/utils/helper';
-import recordShortcut from '@/utils/recordShortcut';
+import { recordShortcut } from '@/utils/recordKeys';
 
 const props = defineProps({
   data: {

src/components/popup/home/HomeStartRecording.vue

@@ -16,6 +16,7 @@
           v-model="state.workflowName"
           :label="t('home.record.name')"
           :placeholder="t('common.name')"
+          autofocus
           class="w-full"
         />
         <ui-button class="w-full mt-6" variant="accent" type="submit">

src/content/services/recordWorkflow/recordEvents.js

@@ -2,6 +2,7 @@ import { finder } from '@medv/finder';
 import { nanoid } from 'nanoid';
 import browser from 'webextension-polyfill';
 import { debounce } from '@/utils/helper';
+import { recordPressedKey } from '@/utils/recordKeys';
 import addBlock from './addBlock';
 
 const isAutomaInstance = (target) =>
@@ -73,81 +74,81 @@ function changeListener({ target }) {
     if (block.id === 'upload-file' && lastFlow.id === 'event-click') {
       recording.flows.pop();
     }
+    console.log(
+      block.data.type === 'text-field' &&
+        block.data.selector === lastFlow?.data?.selector,
+      lastFlow,
+      block.data
+    );
 
     if (
       block.data.type === 'text-field' &&
-      block.data.type === lastFlow?.data?.type
+      block.data.selector === lastFlow?.data?.selector
     )
       return;
 
     recording.flows.push(block);
   });
 }
-function keyEventListener(event) {
-  const {
-    target,
-    code,
-    key,
-    keyCode,
-    altKey,
-    ctrlKey,
-    metaKey,
-    shiftKey,
-    type,
-    repeat,
-  } = event;
-  if (isAutomaInstance(target)) return;
+async function keyEventListener(event) {
+  if (isAutomaInstance(event.target) || event.repeat) return;
+
+  const isTextField = textFieldEl(event.target);
+  const enterKey = event.key === 'Enter';
+  let isSubmitting = false;
 
-  const isTextField = textFieldEl(target);
   if (isTextField) {
-    const enterKey = type === 'keydown' && key === 'Enter';
-    const inputEl = target.form && target.tagName === 'INPUT';
+    const inputInForm = event.target.form && event.target.tagName === 'INPUT';
 
-    if (enterKey && inputEl) {
+    if (enterKey && inputInForm) {
       event.preventDefault();
-      target.dispatchEvent(new Event('change', { bubbles: true }));
 
-      setTimeout(() => {
-        target.form.submit();
-      }, 500);
-    }
+      await addBlock({
+        id: 'forms',
+        data: {
+          delay: 100,
+          clearValue: true,
+          type: 'text-field',
+          waitForSelector: true,
+          value: event.target.value,
+          selector: finder(event.target),
+        },
+      });
 
-    return;
+      isSubmitting = true;
+    } else {
+      return;
+    }
   }
 
-  const selector = finder(target);
+  recordPressedKey(event, (keysArr) => {
+    const selector = isTextField && enterKey ? finder(event.target) : '';
+    const keys = keysArr.join('+');
 
-  addBlock((recording) => {
-    const lastFlow = recording.flows.at(-1);
-    const block = {
-      id: 'trigger-event',
-      data: {
-        selector,
-        eventName: type,
-        eventType: 'keyboard-event',
-        eventParams: {
-          key,
-          code,
-          repeat,
-          altKey,
-          ctrlKey,
-          metaKey,
-          keyCode,
-          shiftKey,
+    addBlock((recording) => {
+      const block = {
+        id: 'press-key',
+        description: `Press: ${keys}`,
+        data: {
+          keys,
+          selector,
         },
-        description: `${type}: ${key === ' ' ? 'Space' : key}`,
-      },
-    };
+      };
 
-    if (lastFlow.id === 'trigger-event') {
-      if (!lastFlow.groupId) lastFlow.groupId = nanoid();
+      const lastFlow = recording.flows.at(-1);
+      if (lastFlow.id === 'press-key') {
+        if (!lastFlow.groupId) lastFlow.groupId = nanoid();
+        block.groupId = lastFlow.groupId;
+      }
 
-      block.groupId = lastFlow.groupId;
-    }
+      recording.flows.push(block);
 
-    recording.flows.push(block);
-
-    return recording;
+      if (isSubmitting) {
+        setTimeout(() => {
+          event.target.form.submit();
+        }, 500);
+      }
+    });
   });
 }
 function clickListener(event) {
@@ -242,7 +243,6 @@ export function cleanUp() {
   document.removeEventListener('click', clickListener, true);
   document.removeEventListener('change', changeListener, true);
   document.removeEventListener('scroll', scrollListener, true);
-  document.removeEventListener('keyup', keyEventListener, true);
   document.removeEventListener('keydown', keyEventListener, true);
 }
 
@@ -253,7 +253,6 @@ export default async function () {
     document.addEventListener('click', clickListener, true);
     document.addEventListener('scroll', scrollListener, true);
     document.addEventListener('change', changeListener, true);
-    document.addEventListener('keyup', keyEventListener, true);
     document.addEventListener('keydown', keyEventListener, true);
   }
 

src/newtab/pages/settings/SettingsShortcuts.vue

@@ -56,7 +56,7 @@ import { ref, reactive, computed, onBeforeUnmount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import { mapShortcuts, getReadableShortcut } from '@/composable/shortcut';
-import recordShortcut from '@/utils/recordShortcut';
+import { recordShortcut } from '@/utils/recordKeys';
 
 const { t } = useI18n();
 const toast = useToast();

src/utils/recordKeys.js

@@ -0,0 +1,56 @@
+import { toCamelCase } from './helper';
+
+const modifierKeys = ['Control', 'Alt', 'Shift', 'Meta'];
+export function recordPressedKey(
+  { repeat, shiftKey, metaKey, altKey, ctrlKey, key },
+  callback
+) {
+  if (repeat || modifierKeys.includes(key)) return;
+
+  let pressedKey = key.length > 1 || shiftKey ? toCamelCase(key, true) : key;
+
+  if (pressedKey === ' ') pressedKey = 'Space';
+  else if (pressedKey === '+') pressedKey = 'NumpadAdd';
+
+  const keys = [pressedKey];
+
+  if (shiftKey) keys.unshift('Shift');
+  if (metaKey) keys.unshift('Meta');
+  if (altKey) keys.unshift('Alt');
+  if (ctrlKey) keys.unshift('Control');
+
+  if (callback) callback(keys);
+}
+
+const allowedKeys = {
+  '+': 'plus',
+  Delete: 'del',
+  Insert: 'ins',
+  ArrowDown: 'down',
+  ArrowLeft: 'left',
+  ArrowUp: 'up',
+  ArrowRight: 'right',
+  Escape: 'escape',
+  Enter: 'enter',
+};
+export function recordShortcut(event, callback) {
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (event.repeat) return;
+
+  const keys = [];
+  const { ctrlKey, altKey, metaKey, shiftKey, key } = event;
+
+  if (ctrlKey || metaKey) keys.push('mod');
+  if (altKey) keys.push('option');
+  if (shiftKey) keys.push('shift');
+
+  const isValidKey = !!allowedKeys[key] || /^[a-z0-9,./;'[\]\-=`]$/i.test(key);
+
+  if (isValidKey) {
+    keys.push(allowedKeys[key] || key.toLowerCase());
+
+    callback(keys);
+  }
+}

src/utils/recordShortcut.js

@@ -1,33 +0,0 @@
-const allowedKeys = {
-  '+': 'plus',
-  Delete: 'del',
-  Insert: 'ins',
-  ArrowDown: 'down',
-  ArrowLeft: 'left',
-  ArrowUp: 'up',
-  ArrowRight: 'right',
-  Escape: 'escape',
-  Enter: 'enter',
-};
-
-export default function (event, callback) {
-  event.preventDefault();
-  event.stopPropagation();
-
-  if (event.repeat) return;
-
-  const keys = [];
-  const { ctrlKey, altKey, metaKey, shiftKey, key } = event;
-
-  if (ctrlKey || metaKey) keys.push('mod');
-  if (altKey) keys.push('option');
-  if (shiftKey) keys.push('shift');
-
-  const isValidKey = !!allowedKeys[key] || /^[a-z0-9,./;'[\]\-=`]$/i.test(key);
-
-  if (isValidKey) {
-    keys.push(allowedKeys[key] || key.toLowerCase());
-
-    callback(keys);
-  }
-}