feat: support contenteditable element when using the forms block

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

@@ -8,9 +8,15 @@
       {{ item }}
     </ui-checkbox>
   </div>
-  <div class="flex items-center mt-3 space-x-2">
-    <ui-input v-model="defaultParams.code" class="flex-1" label="code" />
+  <ui-input v-model="defaultParams.code" class="w-full mt-2" label="code" />
+  <div class="flex items-center mt-1 space-x-2">
     <ui-input v-model="defaultParams.key" class="flex-1" label="key" />
+    <ui-input
+      v-model.number="defaultParams.keyCode"
+      type="number"
+      class="flex-1"
+      label="keyCode"
+    />
   </div>
   <ui-checkbox v-model="defaultParams.repeat" class="mt-4">
     Repeat
@@ -35,6 +41,7 @@ const defaultParams = shallowReactive({
   shiftKey: false,
   code: '',
   key: '',
+  keyCode: 0,
   repat: false,
 });
 

src/content/blocks-handler/handler-switch-to.js

@@ -4,7 +4,6 @@ function switchTo(block) {
   return new Promise((resolve, reject) => {
     handleElement(block, {
       onSelected(element) {
-        console.log(element, element.tagName);
         if (element.tagName !== 'IFRAME') {
           reject(new Error('not-iframe'));
           return;

src/utils/handle-form-element.js

@@ -31,21 +31,18 @@ function formEvent(element, data) {
     new Event('change', { bubbles: true, cancelable: true })
   );
 }
-function inputText({ data, element, index = 0, callback }) {
+function inputText({ data, element, isEditable, index = 0, callback }) {
   const noDelay = data.delay === 0;
   const currentChar = data.value[index] ?? '';
+  const elementKey = isEditable ? 'textContent' : 'value';
 
-  if (noDelay) {
-    element.value += data.value;
-  } else {
-    element.value += currentChar;
-  }
+  element[elementKey] += noDelay ? data.value : currentChar;
 
-  formEvent(element, { ...data, value: currentChar });
+  formEvent(element, { type: 'text-field', value: currentChar, isEditable });
 
   if (!noDelay && index + 1 !== data.value.length) {
     setTimeout(() => {
-      inputText({ data, element, callback, index: index + 1 });
+      inputText({ data, element, callback, isEditable, index: index + 1 });
     }, data.delay);
   } else {
     callback();
@@ -54,6 +51,15 @@ function inputText({ data, element, index = 0, callback }) {
 
 export default function (element, data, callback) {
   const textFields = ['INPUT', 'TEXTAREA'];
+  const isEditable =
+    element.hasAttribute('contenteditable') && element.isContentEditable;
+
+  if (isEditable) {
+    if (data.clearValue) element.innerText = '';
+
+    inputText({ data, element, callback, isEditable });
+    return;
+  }
 
   if (data.type === 'text-field' && textFields.includes(element.tagName)) {
     if (data.clearValue) element.value = '';