@tmagic/editor 1.2.0-beta.25 → 1.2.0-beta.26

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.25",
+  "version": "1.2.0-beta.26",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -46,12 +46,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.25",
-    "@tmagic/design": "1.2.0-beta.25",
-    "@tmagic/form": "1.2.0-beta.25",
-    "@tmagic/schema": "1.2.0-beta.25",
-    "@tmagic/stage": "1.2.0-beta.25",
-    "@tmagic/utils": "1.2.0-beta.25",
+    "@tmagic/core": "1.2.0-beta.26",
+    "@tmagic/design": "1.2.0-beta.26",
+    "@tmagic/form": "1.2.0-beta.26",
+    "@tmagic/schema": "1.2.0-beta.26",
+    "@tmagic/stage": "1.2.0-beta.26",
+    "@tmagic/utils": "1.2.0-beta.26",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.25",
-    "@tmagic/form": "1.2.0-beta.25",
+    "@tmagic/design": "1.2.0-beta.26",
+    "@tmagic/form": "1.2.0-beta.26",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },
@@ -81,6 +81,6 @@
     "typescript": "^4.7.4",
     "vite": "^3.1.3",
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue-tsc": "^1.0.10"
+    "vue-tsc": "^1.0.11"
   }
 }

package/src/Editor.vue

@@ -1,7 +1,7 @@
 <template>
   <Framework :code-options="codeOptions">
     <template #nav>
-      <slot name="nav" :editorService="editorService"><NavMenu :data="menu"></NavMenu></slot>
+      <slot name="nav" :editorService="editorService"><TMagicNavMenu :data="menu"></TMagicNavMenu></slot>
     </template>
 
     <template #sidebar>
@@ -96,7 +96,7 @@ export default defineComponent({
   name: 'm-editor',
 
   components: {
-    NavMenu,
+    TMagicNavMenu: NavMenu,
     Sidebar,
     Workspace,
     PropsPanel,
@@ -218,6 +218,10 @@ export default defineComponent({
     updateDragEl: {
       type: Function as PropType<UpdateDragEl>,
     },
+
+    disabledDragStart: {
+      type: Boolean,
+    },
   },
 
   emits: ['props-panel-mounted', 'update:modelValue'],
@@ -351,6 +355,7 @@ export default defineComponent({
         containerHighlightClassName: props.containerHighlightClassName,
         containerHighlightDuration: props.containerHighlightDuration,
         containerHighlightType: props.containerHighlightType,
+        disabledDragStart: props.disabledDragStart,
       }),
     );
 

package/src/layouts/NavMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="m-editor-nav-menu" :style="{ height: `${height}px` }">
     <div v-for="key in keys" :class="`menu-${key}`" :key="key" :style="`width: ${columnWidth?.[key]}px`">
-      <tool-button :data="item" v-for="(item, index) in buttons[key]" :key="index"></tool-button>
+      <ToolButton :data="item" v-for="(item, index) in buttons[key]" :key="index"></ToolButton>
     </div>
   </div>
 </template>

package/src/services/editor.ts

@@ -581,9 +581,20 @@ class Editor extends BaseService {
 
     if (!Array.isArray(config)) return;
 
+    const node = this.get<MNode>('node');
+
+    let parent: MContainer | undefined = undefined;
+    // 粘贴的组件为当前选中组件的副本时，则添加到当前选中组件的父组件中
+    if (config.length === 1 && config[0].id === node.id) {
+      parent = this.get<MContainer>('parent');
+      if (parent.type === NodeType.ROOT) {
+        parent = this.get<MPage>('page');
+      }
+    }
+
     const pasteConfigs = await this.doPaste(config, position);
 
-    return this.add(pasteConfigs, this.get('parent'));
+    return this.add(pasteConfigs, parent);
   }
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {

package/src/theme/code-block.scss

@@ -83,14 +83,22 @@
 }
 
 .code-editor-dialog {
-  .el-dialog__body {
+  .tmagic-design-card {
+    .t-card__header {
+      display: block;
+    }
+  }
+
+  .el-dialog__body,
+  .t-dialog__body {
     height: 90%;
     padding-top: 10px;
   }
-  .el-card {
+  .tmagic-design-card {
     height: 100%;
     background: #fff;
-    .el-card__body {
+    .el-card__body,
+    .t-card__body {
       height: 100%;
       background: #fff;
     }

package/src/theme/component-list-panel.scss

@@ -1,4 +1,4 @@
-.ui-component-panel {
+.ui-component-panel.tmagic-design-collapse {
   height: 100%;
   border-top: 0 !important;
   margin-top: 48px;
@@ -19,14 +19,15 @@
     }
   }
 
-  .el-collapse-item {
+  .tmagic-design-collapse-item {
     > div:first-of-type {
       border-bottom: 1px solid $--border-color;
       margin-bottom: 10px;
     }
   }
 
-  .el-collapse-item__header {
+  .el-collapse-item__header,
+  .t-collapse-panel__header {
     background: $--sidebar-content-background-color;
     color: $--font-color;
     height: 25px;
@@ -40,11 +41,13 @@
     }
   }
 
-  .el-collapse-item__wrap {
+  .el-collapse-item__wrap,
+  .t-collapse-panel__body {
     background: $--sidebar-content-background-color;
     border-bottom: 0;
 
-    .el-collapse-item__content {
+    .el-collapse-item__content,
+    .t-collapse-panel__content {
       padding: 10px;
       display: flex;
       flex-wrap: wrap;

package/src/type.ts

@@ -62,6 +62,7 @@ export interface StageOptions {
   containerHighlightClassName: string;
   containerHighlightDuration: number;
   containerHighlightType: ContainerHighlightType;
+  disabledDragStart?: boolean;
   render: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
   moveableOptions: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect: (el: HTMLElement) => boolean | Promise<boolean>;

package/src/utils/stage.ts

@@ -26,6 +26,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    disabledDragStart: stageOptions.disabledDragStart,
     canSelect: (el, event, stop) => {
       const elCanSelect = stageOptions.canSelect(el);
       // 在组件联动过程中不能再往下选择，返回并触发 ui-select

package/types/Editor.vue.d.ts

@@ -102,6 +102,9 @@ declare const _default: import("vue").DefineComponent<{
     updateDragEl: {
         type: PropType<UpdateDragEl>;
     };
+    disabledDragStart: {
+        type: BooleanConstructor;
+    };
 }, Services, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "props-panel-mounted")[], "update:modelValue" | "props-panel-mounted", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /** 页面初始值 */
     modelValue: {
@@ -200,6 +203,9 @@ declare const _default: import("vue").DefineComponent<{
     updateDragEl: {
         type: PropType<UpdateDragEl>;
     };
+    disabledDragStart: {
+        type: BooleanConstructor;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     "onProps-panel-mounted"?: ((...args: any[]) => any) | undefined;
@@ -222,5 +228,6 @@ declare const _default: import("vue").DefineComponent<{
     containerHighlightClassName: string;
     containerHighlightDuration: number;
     containerHighlightType: ContainerHighlightType;
+    disabledDragStart: boolean;
 }>;
 export default _default;

package/types/components/CodeDraftEditor.vue.d.ts

@@ -1,113 +1,21 @@
 import { Id } from '@tmagic/schema';
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            /** 代码id */
-            id: Id;
-            /** 代码内容 */
-            content: string;
-            /** 是否可编辑 */
-            editable?: boolean | undefined;
-            /** 是否自动保存草稿 */
-            autoSaveDraft?: boolean | undefined;
-            /** 编辑器参数 */
-            codeOptions?: Object | undefined;
-            /** 编辑器语言 */
-            language?: string | undefined;
-        }>, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }>>> & {
-            onSave?: ((...args: any[]) => any) | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
-            onSaveAndClose?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "editable" | "autoSaveDraft">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "save" | "close" | "saveAndClose", ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            /** 代码id */
-            id: Id;
-            /** 代码内容 */
-            content: string;
-            /** 是否可编辑 */
-            editable?: boolean | undefined;
-            /** 是否自动保存草稿 */
-            autoSaveDraft?: boolean | undefined;
-            /** 编辑器参数 */
-            codeOptions?: Object | undefined;
-            /** 编辑器语言 */
-            language?: string | undefined;
-        }>, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }>>> & {
-            onSave?: ((...args: any[]) => any) | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
-            onSaveAndClose?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("save" | "close" | "saveAndClose")[], string, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }> & {
-            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: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        /** 代码id */
-        id: Id;
-        /** 代码内容 */
-        content: string;
-        /** 是否可编辑 */
-        editable?: boolean | undefined;
-        /** 是否自动保存草稿 */
-        autoSaveDraft?: boolean | undefined;
-        /** 编辑器参数 */
-        codeOptions?: Object | undefined;
-        /** 编辑器语言 */
-        language?: string | undefined;
-    }>, {
-        editable: boolean;
-        autoSaveDraft: boolean;
-    }>>> & {
-        onSave?: ((...args: any[]) => any) | undefined;
-        onClose?: ((...args: any[]) => any) | undefined;
-        onSaveAndClose?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 代码id */
+    id: Id;
+    /** 代码内容 */
+    content: string;
+    /** 是否可编辑 */
+    editable?: boolean | undefined;
+    /** 是否自动保存草稿 */
+    autoSaveDraft?: boolean | undefined;
+    /** 编辑器参数 */
+    codeOptions?: Object | undefined;
+    /** 编辑器语言 */
+    language?: string | undefined;
+}>, {
+    editable: boolean;
+    autoSaveDraft: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("save" | "close" | "saveAndClose")[], "save" | "close" | "saveAndClose", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     /** 代码id */
     id: Id;
     /** 代码内容 */
@@ -127,10 +35,10 @@ declare const _default: {
     onSave?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
     onSaveAndClose?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("save" | "close" | "saveAndClose")[], "save" | "close" | "saveAndClose", {
+}, {
     editable: boolean;
     autoSaveDraft: boolean;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+}>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/ContentMenu.vue.d.ts

@@ -1,87 +1,14 @@
-import { nextTick } from 'vue';
 import { MenuButton, MenuComponent } from '../type';
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            menuData: (MenuButton | MenuComponent)[];
-            isSubMenu: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            menuData?: (MenuButton | MenuComponent)[] | undefined;
-            isSubMenu?: boolean | undefined;
-        }>, {
-            menuData: () => never[];
-            isSubMenu: boolean;
-        }>>> & {
-            onHide?: ((...args: any[]) => any) | undefined;
-            onShow?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "menuData" | "isSubMenu">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "hide" | "show", ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            menuData?: (MenuButton | MenuComponent)[] | undefined;
-            isSubMenu?: boolean | undefined;
-        }>, {
-            menuData: () => never[];
-            isSubMenu: boolean;
-        }>>> & {
-            onHide?: ((...args: any[]) => any) | undefined;
-            onShow?: ((...args: any[]) => any) | undefined;
-        }, {
-            hide: () => void;
-            show: (e: MouseEvent) => void;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], string, {
-            menuData: (MenuButton | MenuComponent)[];
-            isSubMenu: boolean;
-        }> & {
-            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: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").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?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        menuData?: (MenuButton | MenuComponent)[] | undefined;
-        isSubMenu?: boolean | undefined;
-    }>, {
-        menuData: () => never[];
-        isSubMenu: boolean;
-    }>>> & {
-        onHide?: ((...args: any[]) => any) | undefined;
-        onShow?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{
-        hide: () => void;
-        show: (e: MouseEvent) => void;
-    }> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    menuData?: (MenuButton | MenuComponent)[] | undefined;
+    isSubMenu?: boolean | undefined;
+}>, {
+    menuData: () => never[];
+    isSubMenu: boolean;
+}>, {
+    hide: () => void;
+    show: (e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
 }>, {
@@ -91,12 +18,9 @@ declare const _default: {
     onHide?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
 }, {
-    hide: () => void;
-    show: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", {
     menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+}>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {

package/types/components/FunctionEditor.vue.d.ts

@@ -1,92 +1,15 @@
 import { Id } from '@tmagic/schema';
-declare const _default: {
-    new (...args: any[]): {
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            id: Id;
-            name: string;
-            content: string;
-            editable?: boolean | undefined;
-            autoSaveDraft?: boolean | undefined;
-            codeOptions?: object | undefined;
-        }>, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }>>> & {
-            onChange?: ((...args: any[]) => any) | undefined;
-            "onField-input"?: ((...args: any[]) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "editable" | "autoSaveDraft">;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $emit: (event: "change" | "field-input", ...args: any[]) => void;
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            id: Id;
-            name: string;
-            content: string;
-            editable?: boolean | undefined;
-            autoSaveDraft?: boolean | undefined;
-            codeOptions?: object | undefined;
-        }>, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }>>> & {
-            onChange?: ((...args: any[]) => any) | undefined;
-            "onField-input"?: ((...args: any[]) => any) | undefined;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input")[], string, {
-            editable: boolean;
-            autoSaveDraft: boolean;
-        }> & {
-            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: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
-    } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        id: Id;
-        name: string;
-        content: string;
-        editable?: boolean | undefined;
-        autoSaveDraft?: boolean | undefined;
-        codeOptions?: object | undefined;
-    }>, {
-        editable: boolean;
-        autoSaveDraft: boolean;
-    }>>> & {
-        onChange?: ((...args: any[]) => any) | undefined;
-        "onField-input"?: ((...args: any[]) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
-    __isFragment?: undefined;
-    __isTeleport?: undefined;
-    __isSuspense?: undefined;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    id: Id;
+    name: string;
+    content: string;
+    editable?: boolean | undefined;
+    autoSaveDraft?: boolean | undefined;
+    codeOptions?: object | undefined;
+}>, {
+    editable: boolean;
+    autoSaveDraft: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input")[], "change" | "field-input", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     id: Id;
     name: string;
     content: string;
@@ -99,10 +22,10 @@ declare const _default: {
 }>>> & {
     onChange?: ((...args: any[]) => any) | undefined;
     "onField-input"?: ((...args: any[]) => any) | undefined;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "field-input")[], "change" | "field-input", {
+}, {
     editable: boolean;
     autoSaveDraft: boolean;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+}>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 declare type __VLS_TypePropsToRuntimeProps<T> = {