Add format code option to JS editor

package.json

@@ -66,6 +66,7 @@
     "html2canvas": "^1.4.1",
     "idb": "^7.0.2",
     "js-base64": "^3.7.5",
+    "js-beautify": "^1.15.1",
     "json5": "^2.2.3",
     "jsonpath": "^1.1.1",
     "jspdf": "^2.5.1",

src/assets/css/tailwind.css

@@ -37,7 +37,7 @@ html.dark {
 }
 
 body, :host {
-  font-family: 'Inter var' !important;
+  font-family: 'Inter var', sans-serif !important;
   font-size: 16px !important;
   font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
   @apply bg-gray-50 dark:bg-gray-900 leading-normal;
@@ -131,4 +131,4 @@ pre {
 
 .input-label {
   @apply ml-1 text-sm text-gray-600 dark:text-gray-200;
-}
+}

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

@@ -29,11 +29,11 @@
         />
       </div>
       <edit-autocomplete v-if="!hideSelector" class="mb-1">
-        <ui-input
+        <ui-textarea
           v-if="!hideSelector"
           :model-value="data.selector"
           :placeholder="t('workflow.blocks.base.selector')"
-          autocomplete="off"
+          autoresize
           class="w-full"
           @change="updateData({ selector: $event })"
         />

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

@@ -85,11 +85,16 @@
             class="overflow-auto"
           />
           <template v-if="!data.everyNewTab">
-            <p class="mt-1 flex justify-between text-sm">
+            <p class="mt-1 flex justify-between text-sm py-3">
               <span>{{
                 t('workflow.blocks.javascript-code.availabeFuncs')
               }}</span>
               <span>
+                <span
+                  class="cursor-pointer select-none underline pr-10"
+                  @click="formatCode"
+                  >format code</span
+                >
                 <span
                   class="cursor-pointer select-none underline"
                   @click="modifyWhiteSpace"
@@ -149,14 +154,15 @@
   </div>
 </template>
 <script setup>
-import { watch, reactive, defineAsyncComponent, inject } from 'vue';
+import { defineAsyncComponent, inject, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { autocompletion } from '@codemirror/autocomplete';
 import {
-  automaFuncsSnippets,
   automaFuncsCompletion,
+  automaFuncsSnippets,
   completeFromGlobalScope,
 } from '@/utils/codeEditorAutocomplete';
+import beautify from 'js-beautify';
 import { store } from '../../settings/jsBlockWrap';
 
 function modifyWhiteSpace() {
@@ -212,6 +218,13 @@ function updateData(value) {
 function addScript() {
   state.preloadScripts.push({ src: '', removeAfterExec: true });
 }
+function formatCode() {
+  try {
+    state.code = beautify.js(state.code, { indent_size: 2 });
+  } catch (error) {
+    console.error('Error formatting code:', error);
+  }
+}
 
 const codemirrorExts = [
   autocompletion({

src/components/ui/UiExpand.vue

@@ -31,7 +31,7 @@ import { watch, ref } from 'vue';
 const props = defineProps({
   modelValue: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   panelClass: {
     type: String,

src/components/ui/UiTextarea.vue

@@ -5,7 +5,6 @@
     ref="textarea"
     :value="modelValue"
     class="ui-textarea ui-input bg-input w-full rounded-lg px-4 py-2 transition"
-    :class="{ 'overflow-hidden resize-none': autoresize }"
     @input="emitValue"
     @keyup="$emit('keyup', $event)"
     @keydown="$emit('keydown', $event)"