feat: add clear form value option

src/assets/css/drawflow.css

@@ -19,6 +19,7 @@
   width: 100%;
   height: 100%;
   user-select: none;
+  perspective: 0;
 }
 
 .drawflow .drawflow-node {

src/components/newtab/app/AppSidebar.vue

@@ -96,7 +96,7 @@ const tabs = [
     path: '/',
   },
   {
-    name: 'Worfklows',
+    name: 'Workflows',
     icon: 'riFlowChart',
     path: '/workflows',
   },

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

@@ -15,12 +15,12 @@
     >
       Selected
     </ui-checkbox>
-    <ui-textarea
-      v-if="state.type === 'text-field' || state.type === 'select'"
-      v-model="state.value"
-      placeholder="Value"
-      class="w-full"
-    />
+    <template v-if="state.type === 'text-field' || state.type === 'select'">
+      <ui-textarea v-model="state.value" placeholder="Value" class="w-full" />
+      <ui-checkbox v-model="state.clearValue" class="mb-1 ml-1">
+        Clear form value
+      </ui-checkbox>
+    </template>
     <ui-input
       v-if="state.type === 'text-field'"
       v-model="state.delay"

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

@@ -1,37 +1,39 @@
 <template>
-  <slot name="prepend" />
-  <ui-textarea
-    :model-value="data.description"
-    autoresize
-    placeholder="Description"
-    class="w-full mb-2"
-    @change="updateData({ description: $event })"
-  />
-  <ui-input
-    v-if="!hideSelector"
-    :model-value="data.selector"
-    placeholder="Element selector"
-    class="mb-1 w-full"
-    @change="updateData({ selector: $event })"
-  />
-  <template v-if="!hideSelector">
-    <ui-checkbox
-      v-if="!data.disableMultiple && !hideMultiple"
-      class="mr-6"
-      :model-value="data.multiple"
-      @change="updateData({ multiple: $event })"
-    >
-      Multiple
-    </ui-checkbox>
-    <ui-checkbox
-      :model-value="data.markEl"
-      title="An element will not be selected after marked"
-      @change="updateData({ markEl: $event })"
-    >
-      Mark element
-    </ui-checkbox>
-  </template>
-  <slot></slot>
+  <div>
+    <slot name="prepend" />
+    <ui-textarea
+      :model-value="data.description"
+      autoresize
+      placeholder="Description"
+      class="w-full mb-2"
+      @change="updateData({ description: $event })"
+    />
+    <ui-input
+      v-if="!hideSelector"
+      :model-value="data.selector"
+      placeholder="Element selector"
+      class="mb-1 w-full"
+      @change="updateData({ selector: $event })"
+    />
+    <template v-if="!hideSelector">
+      <ui-checkbox
+        v-if="!data.disableMultiple && !hideMultiple"
+        class="mr-6"
+        :model-value="data.multiple"
+        @change="updateData({ multiple: $event })"
+      >
+        Multiple
+      </ui-checkbox>
+      <ui-checkbox
+        :model-value="data.markEl"
+        title="An element will not be selected if have been selected before"
+        @change="updateData({ markEl: $event })"
+      >
+        Mark element
+      </ui-checkbox>
+    </template>
+    <slot></slot>
+  </div>
 </template>
 <script setup>
 const props = defineProps({

src/content/blocks-handler.js

@@ -158,11 +158,6 @@ export function forms(block) {
     const { data } = block;
     const elements = handleElement(block, true);
 
-    if (block.data.value.trim().length === 0) {
-      resolve('');
-      return;
-    }
-
     if (data.multiple) {
       const promises = Array.from(elements).map((element) => {
         return new Promise((eventResolve) => {
@@ -179,6 +174,7 @@ export function forms(block) {
       if (isElementUnique(elements, block))
         handleFormElement(elements, data, resolve);
     } else {
+      alert('else?');
       resolve('');
     }
   });

src/utils/handle-form-element.js

@@ -38,7 +38,7 @@ function inputText({ data, element, index = 0, callback }) {
   const currentChar = data.value[index];
 
   if (noDelay) {
-    element.value = data.value;
+    element.value += data.value;
   } else {
     element.value += currentChar;
   }
@@ -58,6 +58,8 @@ export default function (element, data, callback) {
   const textFields = ['INPUT', 'TEXTAREA'];
 
   if (data.type === 'text-field' && textFields.includes(element.tagName)) {
+    if (data.clearValue) element.value = '';
+
     inputText({ data, element, callback });
     return;
   }

src/utils/helper.js

@@ -1,6 +1,6 @@
 export function replaceMustache(str, replacer) {
   /* eslint-disable-next-line */
-  return str.replace(/{{\s*[\w\.@]+\s*}}/g, replacer);
+  return str.replace(/{{(.*)}}/g, replacer);
 }
 
 export function openFilePicker(acceptedFileTypes = [], attrs = {}) {

src/utils/shared.js

@@ -263,6 +263,7 @@ export const tasks = {
       markEl: false,
       multiple: false,
       selected: true,
+      clearValue: true,
       type: 'text-field',
       value: '',
       delay: 0,
@@ -397,7 +398,6 @@ export const tasks = {
     allowedInputs: true,
     maxConnection: 1,
     data: {
-      name: '',
       loopId: '',
       maxLoop: 0,
       loopData: '[]',