feat(editor): code组件新增options props

packages/editor/src/fields/Code.vue

@@ -3,6 +3,7 @@
     :style="`height: ${height}`"
     :init-values="model[name]"
     :language="language"
+    :options="config.options"
     @save="save"
   ></magic-code-editor>
 </template>
@@ -17,6 +18,7 @@ const props = defineProps<{
   name: string;
   config: {
     language?: string;
+    options?: Object;
   };
   prop: string;
 }>();

packages/editor/src/fields/CodeLink.vue

@@ -12,6 +12,7 @@ const props = defineProps<{
     name: string;
     text?: string;
     formTitle?: string;
+    codeOptions?: Object;
   };
   model: any;
   name: string;
@@ -20,17 +21,24 @@ const props = defineProps<{
 
 const emit = defineEmits(['change']);
 
-const formConfig = computed(() => ({
+const formConfig = computed(() => {
-  ...props.config,
+  const { codeOptions, ...config } = props.config;
+  return {
+    ...config,
     text: '',
     type: 'link',
     form: [
       {
         name: props.name,
         type: 'vs-code',
+        options: {
+          tabSize: 2,
+          ...(codeOptions || {}),
+        },
       },
     ],
-}));
+  };
+});
 
 const modelValue = reactive<{ form: Record<string, string> }>({
   form: {

packages/editor/src/index.ts

@@ -63,7 +63,7 @@ export default {
     app.component('m-fields-ui-select', uiSelect);
     app.component('m-fields-code-link', CodeLink);
     app.component('m-fields-vs-code', Code);
-    app.component(CodeEditor.name, CodeEditor);
+    app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-code-select', CodeSelect);
   },
 };

packages/editor/src/layouts/CodeEditor.vue

@@ -2,12 +2,35 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+const props = withDefaults(
+  defineProps<{
+    initValues?: string | Object;
+    modifiedValues?: string | Object;
+    type?: string;
+    language?: string;
+    options?: {
+      [key: string]: any;
+    };
+    autoSave?: boolean;
+  }>(),
+  {
+    type: '',
+    autoSave: true,
+    language: 'javascript',
+    options: () => ({
+      tabSize: 2,
+    }),
+  },
+);
+
+const emit = defineEmits(['initd', 'save']);
+
 const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
@@ -24,52 +47,21 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
-export default defineComponent({
+let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-  name: 'magic-code-editor',
+let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
-  props: {
+const values = ref('');
-    initValues: {
+const loading = ref(false);
-      type: [String, Object],
+const codeEditor = ref<HTMLDivElement>();
-    },
 
-    modifiedValues: {
+const resizeObserver = new globalThis.ResizeObserver(
-      type: [String, Object],
-    },
-
-    type: {
-      type: String,
-      default: () => '',
-    },
-
-    language: {
-      type: String,
-      default: () => 'javascript',
-    },
-
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  emits: ['initd', 'save'],
-
-  setup(props, { emit }) {
-    let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-    let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
-
-    const values = ref('');
-    const loading = ref(false);
-    const codeEditor = ref<HTMLDivElement>();
-
-    const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
     vsEditor?.layout();
     vsDiffEditor?.layout();
   }, 300),
-    );
+);
 
-    const setEditorValue = (v: string | any, m: string | any) => {
+const setEditorValue = (v: string | any, m: string | any) => {
   values.value = toString(v, props.language);
 
   if (props.type === 'diff') {
@@ -83,12 +75,12 @@ export default defineComponent({
   }
 
   return vsEditor?.setValue(values.value);
-    };
+};
 
-    const getEditorValue = () =>
+const getEditorValue = () =>
   props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
-    const init = async () => {
+const init = async () => {
   if (!codeEditor.value) return;
 
   const options = {
@@ -118,16 +110,16 @@ export default defineComponent({
     }
   });
 
-      if (props.type !== 'diff') {
+  if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
       emit('save', getEditorValue());
     });
   }
 
   resizeObserver.observe(codeEditor.value);
-    };
+};
 
-    watch(
+watch(
   () => props.initValues,
   (v, preV) => {
     if (v !== preV) {
@@ -138,23 +130,19 @@ export default defineComponent({
     deep: true,
     immediate: true,
   },
-    );
+);
 
-    onMounted(async () => {
+onMounted(async () => {
   loading.value = true;
 
   init();
-    });
+});
 
-    onUnmounted(() => {
+onUnmounted(() => {
   resizeObserver.disconnect();
-    });
+});
-
-    return {
-      values,
-      loading,
-      codeEditor,
 
+defineExpose({
   getEditor() {
     return vsEditor || vsDiffEditor;
   },
@@ -165,7 +153,5 @@ export default defineComponent({
     vsEditor?.focus();
     vsDiffEditor?.focus();
   },
-    };
-  },
 });
 </script>