feat: prettier on js block

src/components/newtab/settings/jsBlockWrap.js

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

src/components/newtab/shared/SharedCodemirror.vue

@@ -20,7 +20,9 @@ import { keymap } from '@codemirror/view';
 import { javascript } from '@codemirror/lang-javascript';
 import { EditorState } from '@codemirror/state';
 import { EditorView, basicSetup } from 'codemirror';
-import { css } from '../settings/jsBlockWrap';
+import { format } from 'prettier';
+import { store } from '../settings/jsBlockWrap';
+import parserBabel from './parser-babel.mjs';
 
 const props = defineProps({
   lang: {
@@ -97,10 +99,34 @@ 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(css.whiteSpace);
+  white-space: v-bind(store.whiteSpace);
 }
 .codemirror.hide-gutters .cm-gutters {
   display: none !important;

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

@@ -61,6 +61,12 @@
                 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"
@@ -122,13 +128,13 @@ import { watch, reactive, defineAsyncComponent } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { syntaxTree } from '@codemirror/language';
 import { autocompletion, snippet } from '@codemirror/autocomplete';
-import { css } from '../../settings/jsBlockWrap';
+import { store } from '../../settings/jsBlockWrap';
 
 function modifyWhiteSpace() {
-  if (css.whiteSpace === 'pre') {
-    css.whiteSpace = 'pre-wrap';
+  if (store.whiteSpace === 'pre') {
+    store.whiteSpace = 'pre-wrap';
   } else {
-    css.whiteSpace = 'pre';
+    store.whiteSpace = 'pre';
   }
 }