@tmagic/editor 1.0.0-beta.1 → 1.0.0-beta.4

package/dist/types/src/Editor.vue.d.ts

@@ -3,7 +3,7 @@ import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, Services, SideBarData } from './type';
+import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from './type';
 declare const _default: DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -60,8 +60,8 @@ declare const _default: DefineComponent<{
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
-    stageStyle: {
-        type: PropType<Record<string, string | number>>;
+    stageRect: {
+        type: PropType<StageRect>;
     };
 }, Services, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("props-panel-mounted" | "update:modelValue")[], "props-panel-mounted" | "update:modelValue", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     /** 页面初始值 */
@@ -119,8 +119,8 @@ declare const _default: DefineComponent<{
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
-    stageStyle: {
-        type: PropType<Record<string, string | number>>;
+    stageRect: {
+        type: PropType<StageRect>;
     };
 }>> & {
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;

package/dist/types/src/components/ScrollViewer.vue.d.ts

@@ -0,0 +1,23 @@
+import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+declare const _default: DefineComponent<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    container: Ref<HTMLDivElement | undefined>;
+    el: Ref<HTMLDivElement | undefined>;
+    style: ComputedRef<string>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    width: NumberConstructor;
+    height: NumberConstructor;
+    zoom: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    zoom: number;
+}>;
+export default _default;

package/dist/types/src/layouts/CodeEditor.vue.d.ts

@@ -1,4 +1,5 @@
 import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import * as monaco from 'monaco-editor';
 declare const _default: DefineComponent<{
     initValues: {
         type: (StringConstructor | ObjectConstructor)[];
@@ -18,10 +19,10 @@ declare const _default: DefineComponent<{
     values: Ref<string>;
     loading: Ref<boolean>;
     codeEditor: Ref<HTMLDivElement | undefined>;
-    getEditor(): any;
-    setEditorValue: (v: any, m: any) => any;
+    getEditor(): monaco.editor.IStandaloneCodeEditor | monaco.editor.IStandaloneDiffEditor | null;
+    setEditorValue: (v: string | any, m: string | any) => void | undefined;
     focus(): void;
-}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("inited" | "save")[], "save" | "inited", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("initd" | "save")[], "save" | "initd", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     initValues: {
         type: (StringConstructor | ObjectConstructor)[];
     };
@@ -37,7 +38,7 @@ declare const _default: DefineComponent<{
         default: () => string;
     };
 }>> & {
-    onInited?: ((...args: any[]) => any) | undefined;
+    onInitd?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;

package/dist/types/src/layouts/workspace/Stage.vue.d.ts

@@ -1,27 +1,12 @@
-import type { DefineComponent, Ref, ComponentInternalInstance, ExtractPropTypes, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComputedRef, ComponentOptionsMixin, EmitsOptions, DebuggerEvent, nextTick, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, PropType } from 'vue';
-import type { MApp, MNode, MPage } from '@tmagic/schema';
+import type { DefineComponent, Ref, ComponentInternalInstance, ExtractPropTypes, VNodeProps, AllowedComponentProps, ComponentCustomProps, Slot, ComponentPublicInstance, ComponentOptionsBase, ComputedRef, ComponentOptionsMixin, EmitsOptions, DebuggerEvent, WatchOptions, WatchStopHandle, ShallowUnwrapRef, ComponentCustomProperties, nextTick,  PropType } from 'vue';
 import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
+import type { StageRect } from '../../type';
 declare const _default: DefineComponent<{
     render: {
         type: PropType<() => HTMLDivElement>;
     };
     runtimeUrl: StringConstructor;
-    root: {
-        type: PropType<MApp>;
-    };
-    page: {
-        type: PropType<MPage>;
-    };
-    node: {
-        type: PropType<MNode>;
-    };
-    uiSelectMode: {
-        type: BooleanConstructor;
-    };
-    zoom: {
-        type: NumberConstructor;
-    };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
@@ -33,7 +18,6 @@ declare const _default: DefineComponent<{
         };
     };
 }, {
-    stageContainer: Ref<HTMLDivElement | undefined>;
     menu: Ref<({
         $: ComponentInternalInstance;
         $data: {};
@@ -108,29 +92,85 @@ declare const _default: DefineComponent<{
         top: string;
     }>;
     contextmenuHandler(e: MouseEvent): void;
-    stageStyle: ComputedRef<{
-        transform: string;
-    }>;
+    stageWrap: Ref<({
+        $: ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            zoom: number;
+        }> & Omit<Readonly<ExtractPropTypes<{
+            width: NumberConstructor;
+            height: NumberConstructor;
+            zoom: {
+                type: NumberConstructor;
+                default: number;
+            };
+        }>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "zoom">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: Slot | undefined;
+        }>;
+        $root: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: ComponentOptionsBase<Readonly<ExtractPropTypes<{
+            width: NumberConstructor;
+            height: NumberConstructor;
+            zoom: {
+                type: NumberConstructor;
+                default: number;
+            };
+        }>>, {
+            container: Ref<HTMLDivElement | undefined>;
+            el: Ref<HTMLDivElement | undefined>;
+            style: ComputedRef<string>;
+        }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, {
+            zoom: number;
+        }> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof nextTick;
+        $watch(source: string | Function, cb: Function, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
+    } & Readonly<ExtractPropTypes<{
+        width: NumberConstructor;
+        height: NumberConstructor;
+        zoom: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>> & ShallowUnwrapRef<{
+        container: Ref<HTMLDivElement | undefined>;
+        el: Ref<HTMLDivElement | undefined>;
+        style: ComputedRef<string>;
+    }> & {} & {} & ComponentCustomProperties) | undefined>;
+    stageContainer: Ref<HTMLDivElement | undefined>;
+    stageRect: ComputedRef<StageRect | undefined>;
+    zoom: ComputedRef<number | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ("select" | "update" | "sort")[], "sort" | "select" | "update", VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     render: {
         type: PropType<() => HTMLDivElement>;
     };
     runtimeUrl: StringConstructor;
-    root: {
-        type: PropType<MApp>;
-    };
-    page: {
-        type: PropType<MPage>;
-    };
-    node: {
-        type: PropType<MNode>;
-    };
-    uiSelectMode: {
-        type: BooleanConstructor;
-    };
-    zoom: {
-        type: NumberConstructor;
-    };
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
         default: (el: HTMLElement) => boolean;
@@ -146,7 +186,6 @@ declare const _default: DefineComponent<{
     onUpdate?: ((...args: any[]) => any) | undefined;
     onSort?: ((...args: any[]) => any) | undefined;
 }, {
-    uiSelectMode: boolean;
     canSelect: (el: HTMLElement) => boolean | Promise<boolean>;
     moveableOptions: MoveableOptions | ((core?: StageCore | undefined) => MoveableOptions);
 }>;

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,5 +1,5 @@
 import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import type { MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { MComponent, MContainer, MPage } from '@tmagic/schema';
 import type { MoveableOptions, SortEventData } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 declare const _default: DefineComponent<{
@@ -14,11 +14,7 @@ declare const _default: DefineComponent<{
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
 }, {
-    uiSelectMode: ComputedRef<boolean | undefined>;
-    root: ComputedRef<MApp | undefined>;
     page: ComputedRef<MPage | undefined>;
-    zoom: ComputedRef<number | undefined>;
-    node: ComputedRef<MNode | undefined>;
     selectHandler(el: HTMLElement): void;
     updateNodeHandler(node: MComponent | MContainer | MPage): void;
     sortNodeHandler(ev: SortEventData): void;

package/dist/types/src/services/ui.d.ts

@@ -1,11 +1,16 @@
-import { UiState } from '../type';
+import type { UiState } from '../type';
 import BaseService from './BaseService';
 declare const state: {
     uiSelectMode: boolean;
     showSrc: boolean;
     zoom: number;
-    stageStyle: {
-        [x: string]: string | number;
+    stageContainerRect: {
+        width: number;
+        height: number;
+    };
+    stageRect: {
+        width: number;
+        height: number;
     };
     columnWidth: {
         left: number;
@@ -20,6 +25,8 @@ declare class Ui extends BaseService {
     set<T = any>(name: keyof UiState, value: T): void;
     get<T>(name: keyof typeof state): T;
     private setColumnWidth;
+    private setStageRect;
+    private calcZoom;
 }
 export declare type UiService = Ui;
 declare const _default: Ui;

package/dist/types/src/type.d.ts

@@ -1,7 +1,7 @@
-import { Component } from 'vue';
-import { FormConfig } from '@tmagic/form';
-import { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
-import StageCore from '@tmagic/stage';
+import type { Component } from 'vue';
+import type { FormConfig } from '@tmagic/form';
+import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type StageCore from '@tmagic/stage';
 import type { ComponentListService } from './services/componentList';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
@@ -46,6 +46,10 @@ export interface GetColumnWidth {
     center: number;
     right: number;
 }
+export interface StageRect {
+    width: number;
+    height: number;
+}
 export interface UiState {
     /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
     uiSelectMode: boolean;
@@ -53,8 +57,10 @@ export interface UiState {
     showSrc: boolean;
     /** 画布显示放大倍数，默认为 1 */
     zoom: number;
-    /** 画布顶层div的样式，可用于改变画布的大小 */
-    stageStyle: Record<string, string | number>;
+    /** 画布容器的宽高 */
+    stageContainerRect: StageRect;
+    /** 画布顶层div的宽高，可用于改变画布的大小 */
+    stageRect: StageRect;
     /** 编辑器列布局每一列的宽度，分为左中右三列 */
     columnWidth: GetColumnWidth;
     /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
@@ -181,3 +187,6 @@ export declare enum Layout {
     RELATIVE = "relative",
     ABSOLUTE = "absolute"
 }
+export declare enum Keys {
+    ESCAPE = "Space"
+}

package/dist/types/src/utils/scroll-viewer.d.ts

@@ -0,0 +1,35 @@
+interface ScrollViewerOptions {
+    container: HTMLDivElement;
+    target: HTMLDivElement;
+    zoom: number;
+}
+export declare class ScrollViewer {
+    private enter;
+    private targetEnter;
+    private keydown;
+    private container;
+    private target;
+    private zoom;
+    private scrollLeft;
+    private scrollTop;
+    private x;
+    private y;
+    private resizeObserver;
+    constructor(options: ScrollViewerOptions);
+    destroy(): void;
+    setZoom(zoom: number): void;
+    private scroll;
+    private removeHandler;
+    private wheelHandler;
+    private mouseEnterHandler;
+    private mouseLeaveHandler;
+    private targetMouseEnterHandler;
+    private targetMouseLeaveHandler;
+    private mousedownHandler;
+    private mouseupHandler;
+    private mousemoveHandler;
+    private keydownHandler;
+    private keyupHandler;
+    private setScrollOffset;
+}
+export {};

package/package.json

@@ -1,14 +1,15 @@
 {
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.4",
   "name": "@tmagic/editor",
-  "main": "dist/magic-editor.umd.js",
-  "module": "dist/magic-editor.es.js",
+  "sideEffects": false,
+  "main": "dist/tmagic-editor.umd.js",
+  "module": "dist/tmagic-editor.es.js",
   "style": "dist/style.css",
   "types": "dist/types/src/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/magic-editor.es.js",
-      "require": "./dist/magic-editor.umd.js"
+      "import": "./dist/tmagic-editor.es.js",
+      "require": "./dist/tmagic-editor.umd.js"
     },
     "./dist/style.css": {
       "import": "./dist/style.css",
@@ -27,15 +28,16 @@
   },
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.1",
-    "@tmagic/form": "^1.0.0-beta.1",
-    "@tmagic/schema": "^1.0.0-beta.1",
-    "@tmagic/stage": "^1.0.0-beta.1",
-    "@tmagic/utils": "^1.0.0-beta.1",
+    "@tmagic/core": "^1.0.0-beta.4",
+    "@tmagic/form": "^1.0.0-beta.4",
+    "@tmagic/schema": "^1.0.0-beta.4",
+    "@tmagic/stage": "^1.0.0-beta.4",
+    "@tmagic/utils": "^1.0.0-beta.4",
     "color": "^3.1.3",
     "element-plus": "^2.0.2",
     "events": "^3.3.0",
     "lodash-es": "^4.17.21",
+    "monaco-editor": "^0.32.1",
     "serialize-javascript": "^6.0.0",
     "vue": "^3.2.0"
   },

package/src/Editor.vue

@@ -55,7 +55,7 @@ import eventsService from '@editor/services/events';
 import historyService from '@editor/services/history';
 import propsService from '@editor/services/props';
 import uiService from '@editor/services/ui';
-import type { ComponentGroup, MenuBarData, Services, SideBarData } from '@editor/type';
+import type { ComponentGroup, MenuBarData, Services, SideBarData, StageRect } from '@editor/type';
 
 export default defineComponent({
   name: 'm-editor',
@@ -133,8 +133,8 @@ export default defineComponent({
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
     },
 
-    stageStyle: {
-      type: [String, Object] as PropType<Record<string, string | number>>,
+    stageRect: {
+      type: [String, Object] as PropType<StageRect>,
     },
   },
 
@@ -208,8 +208,8 @@ export default defineComponent({
     );
 
     watch(
-      () => props.stageStyle,
-      (stageStyle) => uiService.set('stageStyle', stageStyle),
+      () => props.stageRect,
+      (stageRect) => stageRect && uiService.set('stageRect', stageRect),
       {
         immediate: true,
       },

package/src/components/ScrollViewer.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="m-editor-scroll-viewer-container" ref="container">
+    <div ref="el" :style="style">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+
+import { ScrollViewer } from '@editor/utils/scroll-viewer';
+
+export default defineComponent({
+  name: 'm-editor-scroll-viewer',
+
+  props: {
+    width: Number,
+    height: Number,
+    zoom: {
+      type: Number,
+      default: 1,
+    },
+  },
+
+  setup(props) {
+    const container = ref<HTMLDivElement>();
+    const el = ref<HTMLDivElement>();
+    let scrollViewer: ScrollViewer;
+
+    onMounted(() => {
+      if (!container.value || !el.value) return;
+      scrollViewer = new ScrollViewer({
+        container: container.value,
+        target: el.value,
+        zoom: props.zoom,
+      });
+    });
+
+    onUnmounted(() => {
+      scrollViewer.destroy();
+    });
+
+    watch(
+      () => props.zoom,
+      () => {
+        scrollViewer.setZoom(props.zoom);
+      },
+    );
+
+    return {
+      container,
+      el,
+
+      style: computed(
+        () => `
+        width: ${props.width}px;
+        height: ${props.height}px;
+        position: absolute;
+      `,
+      ),
+    };
+  },
+});
+</script>

package/src/layouts/CodeEditor.vue

@@ -4,28 +4,10 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
-import { asyncLoadJs } from '@tmagic/utils';
-
-const initEditor = () => {
-  if ((globalThis as any).monaco) {
-    Promise.resolve((globalThis as any).monaco);
-  }
-
-  return asyncLoadJs(`https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs/loader.min.js`).then(() => {
-    (globalThis as any).require.config({
-      paths: { vs: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.26.1/min/vs` },
-    });
-    return new Promise((resolve) => {
-      (globalThis as any).require(['vs/editor/editor.main'], () => {
-        resolve((globalThis as any).monaco);
-      });
-    });
-  });
-};
-
-const toString = (v: any, language: string): string => {
+const toString = (v: string | any, language: string): string => {
   let value = '';
   if (typeof v !== 'string') {
     value = serialize(v, {
@@ -64,60 +46,63 @@ export default defineComponent({
     },
   },
 
-  emits: ['inited', 'save'],
+  emits: ['initd', 'save'],
 
   setup(props, { emit }) {
-    let vsEditor: any = null;
+    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 setEditorValue = (v: any, m: any) => {
+    const setEditorValue = (v: string | any, m: string | any) => {
       values.value = toString(v, props.language);
 
       if (props.type === 'diff') {
-        const originalModel = (globalThis as any).monaco.editor.createModel(values.value, 'text/javascript');
-        const modifiedModel = (globalThis as any).monaco.editor.createModel(
-          toString(m, props.language),
-          'text/javascript',
-        );
+        const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
+        const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
 
-        return vsEditor.setModel({
+        return vsDiffEditor?.setModel({
           original: originalModel,
           modified: modifiedModel,
         });
       }
 
-      return vsEditor.setValue?.(values.value);
+      return vsEditor?.setValue(values.value);
     };
 
     const resizeHandler = () => {
       vsEditor?.layout();
+      vsDiffEditor?.layout();
     };
 
-    const getEditorValue = () => vsEditor.getValue?.() || '';
+    const getEditorValue = () =>
+      props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
     const init = async () => {
       if (!codeEditor.value) return;
 
-      vsEditor = (globalThis as any).monaco.editor[props.type === 'diff' ? 'createDiffEditor' : 'create'](
-        codeEditor.value,
-        {
-          value: values.value,
-          language: props.language,
-          tabSize: 2,
-          theme: 'vs-dark',
-          fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-          fontSize: 15,
-          formatOnPaste: true,
-        },
-      );
+      const options = {
+        value: values.value,
+        language: props.language,
+        tabSize: 2,
+        theme: 'vs-dark',
+        fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
+        fontSize: 15,
+        formatOnPaste: true,
+      };
+
+      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('inited', vsEditor);
+      emit('initd', vsEditor);
 
       codeEditor.value.addEventListener('keydown', (e) => {
         if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
@@ -127,7 +112,7 @@ export default defineComponent({
       });
 
       if (props.type !== 'diff') {
-        vsEditor.onDidBlurEditorWidget(() => {
+        vsEditor?.onDidBlurEditorWidget(() => {
           emit('save', getEditorValue());
         });
       }
@@ -138,7 +123,7 @@ export default defineComponent({
     watch(
       () => props.initValues,
       (v, preV) => {
-        if (vsEditor && v !== preV) {
+        if (v !== preV) {
           setEditorValue(props.initValues, props.modifiedValues);
         }
       },
@@ -151,17 +136,7 @@ export default defineComponent({
     onMounted(async () => {
       loading.value = true;
 
-      await initEditor();
-      if (!(globalThis as any).monaco) {
-        const interval = setInterval(() => {
-          if ((globalThis as any).monaco) {
-            clearInterval(interval);
-            init();
-          }
-        }, 300);
-      } else {
-        init();
-      }
+      init();
     });
 
     onUnmounted(() => {
@@ -174,13 +149,14 @@ export default defineComponent({
       codeEditor,
 
       getEditor() {
-        return vsEditor;
+        return vsEditor || vsDiffEditor;
       },
 
       setEditorValue,
 
       focus() {
-        vsEditor.focus();
+        vsEditor?.focus();
+        vsDiffEditor?.focus();
       },
     };
   },