Merge pull request #146 from suyuan32/dev

fix: optimize code editor

package.json

@@ -69,9 +69,12 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@axolo/tree-array": "^0.1.0",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/language": "^6.3.1",
+    "@codemirror/legacy-modes": "^6.3.1",
     "@iconify/iconify": "^3.1.1",
     "@logicflow/core": "^1.2.18",
     "@logicflow/extension": "^1.2.19",
+    "@uiw/codemirror-theme-github": "^4.21.21",
     "@uponu/vuedraggable": "^4.1.3",
     "@vben/hooks": "workspace:*",
     "@vue/shared": "^3.3.8",
@@ -102,7 +105,7 @@
     "vditor": "^3.9.6",
     "vue": "^3.3.8",
     "vue-clipboard3": "^2.0.0",
-    "vue-codemirror6": "^1.1.30",
+    "vue-codemirror": "^6.1.1",
     "vue-i18n": "^9.7.0",
     "vue-json-pretty": "^2.2.4",
     "vue-router": "^4.2.5",

src/components/CodeEditor/index.ts

@@ -1,8 +1,6 @@
 import { withInstall } from '/@/utils';
 import codeEditor from './src/CodeEditor.vue';
-import jsonPreview from './src/json-preview/JsonPreview.vue';
+import { MODE } from './src/typing';
 
 export const CodeEditor = withInstall(codeEditor);
-export const JsonPreview = withInstall(jsonPreview);
-
-export * from './src/typing';
+export const LangMode = MODE;

src/components/CodeEditor/src/CodeEditor.vue

@@ -1,19 +1,25 @@
 <template>
   <div class="h-full">
-    <CodeMirrorEditor
-      :value="getValue"
+    <Codemirror
+      v-model:model-value="inputValue"
       @change="handleValueChange"
-      :mode="mode"
-      :readonly="readonly"
-      :bordered="bordered"
+      :extensions="extensions"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
     />
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import CodeMirrorEditor from './codemirror/CodeMirror.vue';
-  import { isString } from '/@/utils/is';
+  import { PropType, ref } from 'vue';
+  import { Codemirror } from 'vue-codemirror';
   import { MODE } from './typing';
+  // import isString from 'lodash-es/isString';
+  import { useAppStore } from '/@/store/modules/app';
+  import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+  import { StreamLanguage } from '@codemirror/language';
+  import { yaml } from '@codemirror/legacy-modes/mode/yaml';
+  import { json } from '@codemirror/lang-json';
 
   const props = defineProps({
     value: { type: [Object, String] as PropType<Record<string, any> | string> },
@@ -25,31 +31,39 @@
         return Object.values(MODE).includes(value);
       },
     },
-    readonly: { type: Boolean },
     autoFormat: { type: Boolean, default: true },
-    bordered: { type: Boolean, default: false },
   });
 
+  const inputValue = ref<string>('');
+  inputValue.value = props.value as string;
+
   const emit = defineEmits(['change', 'update:value', 'format-error']);
 
-  const getValue = computed(() => {
-    const { value, mode, autoFormat } = props;
-    if (!autoFormat || mode !== MODE.JSON) {
-      return value as string;
+  const appStore = useAppStore();
+
+  const darkMode = appStore.getDarkMode;
+  let extensions: any = [];
+
+  if (darkMode === 'dark') {
+    extensions.push(githubDark);
+  } else {
+    extensions.push(githubLight);
+  }
+
+  switch (props.mode) {
+    case MODE.YAML: {
+      extensions.push(StreamLanguage.define(yaml));
+      break;
     }
-    let result = value;
-    if (isString(value)) {
-      try {
-        result = JSON.parse(value);
-      } catch (e) {
-        emit('format-error', value);
-        return value as string;
-      }
+    case MODE.JSON: {
+      extensions.push(json());
     }
-    return JSON.stringify(result, null, 2);
-  });
+  }
 
-  function handleValueChange(v) {
+  function handleValueChange(v: string) {
+    if (props.mode == MODE.JSON) {
+      v = v.replace(/(\r\n|\n|\r)/gm, '');
+    }
     emit('update:value', v);
     emit('change', v);
   }