Merge pull request #656 from mzaini30/dev

feat: js block

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')