feat: Add YAML format to CodeMirror (#7326)

Refs #7274

Author: ssongliu

frontend/package.json

@@ -21,6 +21,7 @@
     },
     "dependencies": {
         "@codemirror/lang-html": "^6.4.9",
+        "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/lang-javascript": "^6.2.2",
         "@codemirror/lang-php": "^6.0.1",
         "@codemirror/language": "^6.10.2",

frontend/src/views/app-store/detail/install/index.vue

@@ -153,14 +153,14 @@ import { useRouter } from 'vue-router';
 import Params from '../params/index.vue';
 import Header from '@/components/drawer-header/index.vue';
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 import i18n from '@/lang';
 import { MsgError } from '@/utils/message';
 import { Container } from '@/api/interface/container';
 import { loadResourceLimit } from '@/api/modules/container';
 
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 const router = useRouter();
 
 interface InstallRrops {

frontend/src/views/app-store/installed/detail/index.vue

@@ -151,13 +151,13 @@ import { Rules, checkNumberRange } from '@/global/form-rules';
 import { MsgSuccess } from '@/utils/message';
 import i18n from '@/lang';
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { getLanguage } from '@/utils/util';
 import { Container } from '@/api/interface/container';
 import { loadResourceLimit } from '@/api/modules/container';
 
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 
 interface ParamProps {
     id: Number;

frontend/src/views/container/compose/create/index.vue

@@ -135,10 +135,10 @@ import DrawerHeader from '@/components/drawer-header/index.vue';
 import { listComposeTemplate, testCompose, upCompose } from '@/api/modules/container';
 import { loadBaseDir } from '@/api/modules/setting';
 import { MsgError } from '@/utils/message';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 
 const showLog = ref(false);
 const loading = ref();

frontend/src/views/container/compose/edit/index.vue

@@ -75,7 +75,7 @@
 </template>
 <script lang="ts" setup>
 import { Codemirror } from 'vue-codemirror';
-import { javascript } from '@codemirror/lang-javascript';
+import { yaml } from '@codemirror/lang-yaml';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { ref } from 'vue';
 import { composeUpdate } from '@/api/modules/container';
@@ -87,7 +87,7 @@ import { ElForm } from 'element-plus';
 const emit = defineEmits<{ (e: 'search'): void }>();
 const loading = ref(false);
 const composeVisible = ref(false);
-const extensions = [javascript(), oneDark];
+const extensions = [yaml(), oneDark];
 const path = ref();
 const content = ref();
 const name = ref();