v1.15.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.15.1",
+  "version": "1.15.2",
   "description": "An extension for automating your browser by connecting blocks",
   "license": "MIT",
   "repository": {

src/background/workflowEngine/blocksHandler/handlerBlocksGroup.js

@@ -11,36 +11,32 @@ function blocksGroup({ data, id }, { prevBlockData }) {
       return;
     }
 
-    if (!this.engine.extractedGroup[id]) {
-      const { blocks, connections } = data.blocks.reduce(
-        (acc, block, index) => {
-          const nextBlock = data.blocks[index + 1]?.itemId;
-
-          acc.blocks[block.itemId] = {
-            label: block.id,
-            data: block.data,
-            id: nextBlock ? block.itemId : id,
-          };
-
-          if (nextBlock) {
-            const outputId = `${block.itemId}-output-1`;
-
-            if (!acc.connections[outputId]) {
-              acc.connections[outputId] = [];
-            }
-            acc.connections[outputId].push(nextBlock);
-          }
+    const { blocks, connections } = data.blocks.reduce(
+      (acc, block, index) => {
+        const nextBlock = data.blocks[index + 1]?.itemId;
 
-          return acc;
-        },
-        { blocks: {}, connections: {} }
-      );
+        acc.blocks[block.itemId] = {
+          label: block.id,
+          data: block.data,
+          id: nextBlock ? block.itemId : id,
+        };
 
-      Object.assign(this.engine.blocks, blocks);
-      Object.assign(this.engine.connectionsMap, connections);
+        if (nextBlock) {
+          const outputId = `${block.itemId}-output-1`;
 
-      this.engine.extractedGroup[id] = true;
-    }
+          if (!acc.connections[outputId]) {
+            acc.connections[outputId] = [];
+          }
+          acc.connections[outputId].push(nextBlock);
+        }
+
+        return acc;
+      },
+      { blocks: {}, connections: {} }
+    );
+
+    Object.assign(this.engine.blocks, blocks);
+    Object.assign(this.engine.connectionsMap, connections);
 
     resolve({
       data: prevBlockData,

src/components/newtab/settings/jsBlockWrap.js

@@ -0,0 +1,6 @@
+import { reactive } from 'vue';
+
+export const store = reactive({
+  whiteSpace: 'pre',
+  statePrettier: Math.random(),
+});

src/components/newtab/shared/SharedCodemirror.vue

@@ -20,6 +20,9 @@ import { keymap } from '@codemirror/view';
 import { javascript } from '@codemirror/lang-javascript';
 import { EditorState } from '@codemirror/state';
 import { EditorView, basicSetup } from 'codemirror';
+import { format } from 'prettier';
+import { store } from '../settings/jsBlockWrap';
+import parserBabel from './parser-babel.mjs';
 
 const props = defineProps({
   lang: {
@@ -96,8 +99,35 @@ onMounted(() => {
 onBeforeUnmount(() => {
   view?.destroy();
 });
+
+let savedStatePrettier = store.statePrettier;
+watch(store, (value) => {
+  if (value.statePrettier !== savedStatePrettier) {
+    // prettier logic here
+    const code = props.modelValue;
+
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: view.state.doc.length,
+        insert: format(code, {
+          parser: 'babel',
+          plugins: [parserBabel],
+        }),
+      },
+    });
+
+    savedStatePrettier = value.statePrettier;
+  }
+});
 </script>
 <style>
+.cm-content {
+  flex-basis: fit-content;
+}
+.cm-line {
+  white-space: v-bind(store.whiteSpace);
+}
 .codemirror.hide-gutters .cm-gutters {
   display: none !important;
 }

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -41,7 +41,7 @@
       </p>
       <p
         class="leading-tight cursor-pointer"
-        :class="descriptionCollapsed ? 'line-clamp' : null"
+        :class="descriptionCollapsed ? 'line-clamp' : 'whitespace-pre-wrap'"
         @click="descriptionCollapsed = !descriptionCollapsed"
       >
         <!-- description here -->

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

@@ -56,8 +56,23 @@
             class="overflow-auto"
           />
           <template v-if="!data.everyNewTab">
-            <p class="mt-1 text-sm">
-              {{ t('workflow.blocks.javascript-code.availabeFuncs') }}
+            <p class="mt-1 text-sm flex justify-between">
+              <span>{{
+                t('workflow.blocks.javascript-code.availabeFuncs')
+              }}</span>
+              <span>
+                <span
+                  class="underline cursor-pointer select-none"
+                  @click="store.statePrettier = Math.random()"
+                  >prettier</span
+                >
+                &bull;
+                <span
+                  class="underline cursor-pointer select-none"
+                  @click="modifyWhiteSpace"
+                  >wrap line</span
+                >
+              </span>
             </p>
             <p
               class="space-x-1 whitespace-nowrap overflow-x-auto overflow-y-hidden pb-1 scroll"
@@ -113,6 +128,15 @@ import { watch, reactive, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { syntaxTree } from '@codemirror/language';
 import { autocompletion, snippet } from '@codemirror/autocomplete';
+import { store } from '../../settings/jsBlockWrap';
+
+function modifyWhiteSpace() {
+  if (store.whiteSpace === 'pre') {
+    store.whiteSpace = 'pre-wrap';
+  } else {
+    store.whiteSpace = 'pre';
+  }
+}
 
 const SharedCodemirror = defineAsyncComponent(() =>
   import('@/components/newtab/shared/SharedCodemirror.vue')

src/composable/shortcut.js

@@ -122,9 +122,9 @@ export function useShortcut(shortcuts, handler) {
     if (shortcutId) event.preventDefault();
 
     if (typeof params.data === 'function') {
-      params.data(params);
+      params.data(params, event);
     } else if (handler) {
-      handler(params);
+      handler(params, event);
     }
   };
   const addShortcutData = ({ combo, id, readable, ...rest }) => {

src/newtab/pages/workflows/[id].vue

@@ -174,6 +174,7 @@ import {
   shallowRef,
   onBeforeUnmount,
 } from 'vue';
+import cloneDeep from 'lodash.clonedeep';
 import { getNodesInside } from '@braks/vue-flow';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
@@ -809,14 +810,17 @@ function copyElements(nodes, edges, initialPos) {
       }
     }
 
-    return {
+    const copyNode = cloneDeep({
       type,
       data,
       label,
       id: newNodeId,
       selected: true,
       position: nodePos,
-    };
+    });
+    copyNode.data = reactive(copyNode.data);
+
+    return copyNode;
   });
   const newEdges = edges.reduce(
     (acc, { target, targetHandle, source, sourceHandle }) => {
@@ -825,14 +829,15 @@ function copyElements(nodes, edges, initialPos) {
 
       if (!targetId || !sourceId) return acc;
 
-      acc.push({
+      const copyEdge = cloneDeep({
         selected: true,
         target: targetId,
         source: sourceId,
         id: `edge-${nanoid()}`,
         targetHandle: targetHandle.replace(target, targetId),
         sourceHandle: sourceHandle.replace(source, sourceId),
       });
+      acc.push(copyEdge);
 
       return acc;
     },
@@ -900,12 +905,18 @@ async function fetchConnectedTable() {
 
   connectedTable.value = table;
 }
+function undoRedoCommand(type, { target }) {
+  const els = ['INPUT', 'SELECT', 'TEXTAREA'];
+  if (els.includes(target.tagName) || target.isContentEditable) return;
+
+  executeCommand(type);
+}
 
 const shortcut = useShortcut([
   getShortcut('editor:toggle-sidebar', toggleSidebar),
   getShortcut('editor:duplicate-block', duplicateElements),
-  getShortcut('action:undo', () => executeCommand('undo')),
-  getShortcut('action:redo', () => executeCommand('redo')),
+  getShortcut('action:undo', (_, event) => undoRedoCommand('undo', event)),
+  getShortcut('action:redo', (_, event) => undoRedoCommand('redo', event)),
 ]);
 
 watch(