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(() => ({
-  ...props.config,
-  text: '',
-  type: 'link',
-  form: [
-    {
-      name: props.name,
-      type: 'vs-code',
-    },
-  ],
-}));
+const formConfig = computed(() => {
+  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">
-import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+<script lang="ts" setup>
+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,148 +47,111 @@ const toString = (v: string | any, language: string): string => {
   return value;
 };
 
-export default defineComponent({
-  name: 'magic-code-editor',
+let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
+let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
 
-  props: {
-    initValues: {
-      type: [String, Object],
-    },
+const values = ref('');
+const loading = ref(false);
+const codeEditor = ref<HTMLDivElement>();
 
-    modifiedValues: {
-      type: [String, Object],
-    },
+const resizeObserver = new globalThis.ResizeObserver(
+  throttle((): void => {
+    vsEditor?.layout();
+    vsDiffEditor?.layout();
+  }, 300),
+);
 
-    type: {
-      type: String,
-      default: () => '',
-    },
+const setEditorValue = (v: string | any, m: string | any) => {
+  values.value = toString(v, props.language);
 
-    language: {
-      type: String,
-      default: () => 'javascript',
-    },
+  if (props.type === 'diff') {
+    const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
+    const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
 
-    options: {
-      type: Object,
-      default: () => ({}),
-    },
+    return vsDiffEditor?.setModel({
+      original: originalModel,
+      modified: modifiedModel,
+    });
+  }
+
+  return vsEditor?.setValue(values.value);
+};
+
+const getEditorValue = () =>
+  props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
+
+const init = async () => {
+  if (!codeEditor.value) return;
+
+  const options = {
+    value: values.value,
+    language: props.language,
+    theme: 'vs-dark',
+    ...props.options,
+  };
+
+  if (props.type === 'diff') {
+    vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
+  } else {
+    vsEditor = monaco.editor.create(codeEditor.value, options);
+  }
+
+  setEditorValue(props.initValues, props.modifiedValues);
+
+  loading.value = false;
+
+  emit('initd', vsEditor);
+
+  codeEditor.value.addEventListener('keydown', (e) => {
+    if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
+      e.preventDefault();
+      e.stopPropagation();
+      emit('save', getEditorValue());
+    }
+  });
+
+  if (props.type !== 'diff' && props.autoSave) {
+    vsEditor?.onDidBlurEditorWidget(() => {
+      emit('save', getEditorValue());
+    });
+  }
+
+  resizeObserver.observe(codeEditor.value);
+};
+
+watch(
+  () => props.initValues,
+  (v, preV) => {
+    if (v !== preV) {
+      setEditorValue(props.initValues, props.modifiedValues);
+    }
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+onMounted(async () => {
+  loading.value = true;
+
+  init();
+});
+
+onUnmounted(() => {
+  resizeObserver.disconnect();
+});
+
+defineExpose({
+  getEditor() {
+    return vsEditor || vsDiffEditor;
   },
 
-  emits: ['initd', 'save'],
+  setEditorValue,
 
-  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) => {
-      values.value = toString(v, props.language);
-
-      if (props.type === 'diff') {
-        const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
-        const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
-
-        return vsDiffEditor?.setModel({
-          original: originalModel,
-          modified: modifiedModel,
-        });
-      }
-
-      return vsEditor?.setValue(values.value);
-    };
-
-    const getEditorValue = () =>
-      props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
-
-    const init = async () => {
-      if (!codeEditor.value) return;
-
-      const options = {
-        value: values.value,
-        language: props.language,
-        theme: 'vs-dark',
-        ...props.options,
-      };
-
-      if (props.type === 'diff') {
-        vsDiffEditor = monaco.editor.createDiffEditor(codeEditor.value, options);
-      } else {
-        vsEditor = monaco.editor.create(codeEditor.value, options);
-      }
-
-      setEditorValue(props.initValues, props.modifiedValues);
-
-      loading.value = false;
-
-      emit('initd', vsEditor);
-
-      codeEditor.value.addEventListener('keydown', (e) => {
-        if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
-          e.preventDefault();
-          e.stopPropagation();
-          emit('save', getEditorValue());
-        }
-      });
-
-      if (props.type !== 'diff') {
-        vsEditor?.onDidBlurEditorWidget(() => {
-          emit('save', getEditorValue());
-        });
-      }
-
-      resizeObserver.observe(codeEditor.value);
-    };
-
-    watch(
-      () => props.initValues,
-      (v, preV) => {
-        if (v !== preV) {
-          setEditorValue(props.initValues, props.modifiedValues);
-        }
-      },
-      {
-        deep: true,
-        immediate: true,
-      },
-    );
-
-    onMounted(async () => {
-      loading.value = true;
-
-      init();
-    });
-
-    onUnmounted(() => {
-      resizeObserver.disconnect();
-    });
-
-    return {
-      values,
-      loading,
-      codeEditor,
-
-      getEditor() {
-        return vsEditor || vsDiffEditor;
-      },
-
-      setEditorValue,
-
-      focus() {
-        vsEditor?.focus();
-        vsDiffEditor?.focus();
-      },
-    };
+  focus() {
+    vsEditor?.focus();
+    vsDiffEditor?.focus();
   },
 });
 </script>