@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/package.json

@@ -1,19 +1,20 @@
 {
-  "version": "1.7.6",
+  "version": "1.7.8-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
     "dist/style.css",
+    "dist/es/style.css",
     "src/theme/*"
   ],
   "main": "dist/tmagic-editor.umd.cjs",
-  "module": "dist/tmagic-editor.js",
+  "module": "dist/es/index.js",
   "style": "dist/style.css",
   "types": "types/index.d.ts",
   "exports": {
     ".": {
       "types": "./types/index.d.ts",
-      "import": "./dist/tmagic-editor.js",
+      "import": "./dist/es/index.js",
       "require": "./dist/tmagic-editor.umd.cjs"
     },
     "./dist/style.css": {
@@ -49,7 +50,7 @@
     "@element-plus/icons-vue": "^2.3.2",
     "buffer": "^6.0.3",
     "deep-object-diff": "^1.1.9",
-    "emmet-monaco-es": "^5.6.1",
+    "emmet-monaco-es": "^5.7.0",
     "events": "^3.3.0",
     "gesto": "^1.19.4",
     "keycon": "^1.4.0",
@@ -57,29 +58,32 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.7.6",
-    "@tmagic/form": "1.7.6",
-    "@tmagic/utils": "1.7.6",
-    "@tmagic/stage": "1.7.6",
-    "@tmagic/table": "1.7.6"
+    "@tmagic/design": "1.7.8-beta.1",
+    "@tmagic/form": "1.7.8-beta.1",
+    "@tmagic/utils": "1.7.8-beta.1",
+    "@tmagic/table": "1.7.8-beta.1",
+    "@tmagic/stage": "1.7.8-beta.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
     "@types/lodash-es": "^4.17.4",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.9",
-    "@vue/test-utils": "^2.4.6",
-    "type-fest": "^5.2.0"
+    "@vue/test-utils": "^2.4.6"
   },
   "peerDependencies": {
-    "monaco-editor": "^0.48.0",
+    "monaco-editor": "^0.55.1 ",
+    "type-fest": "^5.2.0",
     "typescript": "^5.9.3",
     "vue": "^3.5.24",
-    "@tmagic/core": "1.7.6"
+    "@tmagic/core": "1.7.8-beta.1"
   },
   "peerDependenciesMeta": {
     "typescript": {
       "optional": true
+    },
+    "type-fest": {
+      "optional": true
     }
   }
 }

package/src/fields/CodeLink.vue

@@ -1,12 +1,12 @@
 <template>
-  <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
+  <MLink :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></MLink>
 </template>
 
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
-import type { CodeLinkConfig, FieldProps } from '@tmagic/form';
+import type { CodeLinkConfig, FieldProps, MLink } from '@tmagic/form';
 
 import { getEditorConfig } from '@editor/utils/config';
 

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -47,7 +47,13 @@ import { Coin } from '@element-plus/icons-vue';
 
 import { DataSchema } from '@tmagic/core';
 import { TMagicButton, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import type { ContainerChangeEventData, DataSourceFieldSelectConfig, FieldProps, FormState } from '@tmagic/form';
+import {
+  type ContainerChangeEventData,
+  type DataSourceFieldSelectConfig,
+  type FieldProps,
+  type FormState,
+  getFormField,
+} from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, removeDataSourceFieldPrefix } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
@@ -104,7 +110,9 @@ const type = computed((): string => {
 });
 
 const tagName = computed(() => {
-  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+  const component =
+    getFormField(type.value || 'container') ||
+    resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
   if (typeof component !== 'string') return component;
   return 'm-fields-text';
 });

package/src/fields/EventSelect.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="m-fields-event-select">
-    <m-form-table
+    <MTable
       v-if="isOldVersion"
       name="events"
       :size="size"
@@ -8,7 +8,7 @@
       :model="model"
       :config="tableConfig"
       @change="onChangeHandler"
-    ></m-form-table>
+    ></MTable>
 
     <div v-else class="fullWidth">
       <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
@@ -41,7 +41,7 @@
             :icon="Delete"
             :disabled="disabled"
             :size="size"
-            @click="removeEvent(index)"
+            @click="removeEvent(Number(index))"
           ></TMagicButton>
         </template>
       </MPanel>
@@ -68,8 +68,9 @@ import type {
   FormState,
   OnChangeHandlerData,
   PanelConfig,
+  TableConfig,
 } from '@tmagic/form';
-import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
+import { MContainer as MFormContainer, MPanel, MTable } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
 import { useServices } from '@editor/hooks/use-services';
@@ -304,7 +305,7 @@ const dataSourceActionConfig = computed(() => {
 });
 
 // 兼容旧的数据格式
-const tableConfig = computed(() => ({
+const tableConfig = computed<TableConfig>(() => ({
   type: 'table',
   name: 'events',
   items: [

package/src/index.ts

@@ -15,38 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { App } from 'vue';
-
-import type { DesignPluginOptions } from '@tmagic/design';
-import designPlugin from '@tmagic/design';
-import type { FormInstallOptions } from '@tmagic/form';
-import formPlugin from '@tmagic/form';
-import tablePlugin from '@tmagic/table';
-
-import Code from './fields/Code.vue';
-import CodeLink from './fields/CodeLink.vue';
-import CodeSelect from './fields/CodeSelect.vue';
-import CodeSelectCol from './fields/CodeSelectCol.vue';
-import CondOpSelect from './fields/CondOpSelect.vue';
-import DataSourceFields from './fields/DataSourceFields.vue';
-import DataSourceFieldSelect from './fields/DataSourceFieldSelect/Index.vue';
-import DataSourceInput from './fields/DataSourceInput.vue';
-import DataSourceMethods from './fields/DataSourceMethods.vue';
-import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
-import DataSourceMocks from './fields/DataSourceMocks.vue';
-import DataSourceSelect from './fields/DataSourceSelect.vue';
-import DisplayConds from './fields/DisplayConds.vue';
-import EventSelect from './fields/EventSelect.vue';
-import KeyValue from './fields/KeyValue.vue';
-import PageFragmentSelect from './fields/PageFragmentSelect.vue';
-import StyleSetter from './fields/StyleSetter/Index.vue';
-import uiSelect from './fields/UISelect.vue';
-import CodeEditor from './layouts/CodeEditor.vue';
-import { setEditorConfig } from './utils/config';
-import Editor from './Editor.vue';
-import type { EditorInstallOptions } from './type';
-
-import './theme/index.scss';
 
 export * from '@tmagic/form';
 export { default as formPlugin } from '@tmagic/form';
@@ -110,44 +78,4 @@ export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 
-const defaultInstallOpt: EditorInstallOptions = {
-  // eslint-disable-next-line no-eval
-  parseDSL: (dsl: string) => eval(dsl),
-  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
-  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
-    monaco.editor.createDiffEditor(codeEditorEl, options),
-};
-
-export default {
-  install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>): void => {
-    const option = Object.assign(defaultInstallOpt, opt || {});
-
-    app.use(designPlugin, opt || {});
-    app.use(formPlugin, opt || {});
-    app.use(tablePlugin);
-
-    app.config.globalProperties.$TMAGIC_EDITOR = option;
-    setEditorConfig(option);
-
-    app.component(`${Editor.name || 'MEditor'}`, Editor);
-    app.component('magic-code-editor', CodeEditor);
-    app.component('m-fields-ui-select', uiSelect);
-    app.component('m-fields-code-link', CodeLink);
-    app.component('m-fields-vs-code', Code);
-    app.component('m-fields-code-select', CodeSelect);
-    app.component('m-fields-code-select-col', CodeSelectCol);
-    app.component('m-fields-event-select', EventSelect);
-    app.component('m-fields-data-source-fields', DataSourceFields);
-    app.component('m-fields-data-source-mocks', DataSourceMocks);
-    app.component('m-fields-key-value', KeyValue);
-    app.component('m-fields-data-source-input', DataSourceInput);
-    app.component('m-fields-data-source-select', DataSourceSelect);
-    app.component('m-fields-data-source-methods', DataSourceMethods);
-    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
-    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
-    app.component('m-fields-page-fragment-select', PageFragmentSelect);
-    app.component('m-fields-display-conds', DisplayConds);
-    app.component('m-fields-cond-op-select', CondOpSelect);
-    app.component('m-form-style-setter', StyleSetter);
-  },
-};
+export { default } from './plugin';

package/src/layouts/CodeEditor.vue

@@ -20,13 +20,14 @@
 import { computed, nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
+import type * as Monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
 import { getEditorConfig } from '@editor/utils/config';
-import monaco from '@editor/utils/monaco-editor';
+import loadMonaco from '@editor/utils/monaco-editor';
 
 defineOptions({
   name: 'MEditorCodeEditor',
@@ -38,7 +39,7 @@ const props = withDefaults(
     modifiedValues?: any;
     type?: 'diff';
     language?: string;
-    options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    options?: Monaco.editor.IStandaloneEditorConstructionOptions;
     height?: string;
     autoSave?: boolean;
     parse?: boolean;
@@ -99,7 +100,7 @@ const calculateExtraHeight = (): number => {
         extraHeight = Math.max(editorRect.height - scrollableRect.height, 0);
 
         // 如果无法获取到有效的差值，使用编辑器配置中的相关选项
-        if (extraHeight === 0) {
+        if (extraHeight === 0 && monaco) {
           const editorOptions = vsEditor.getOptions();
           const scrollBeyondLastLine = editorOptions.get(monaco.editor.EditorOption.scrollBeyondLastLine);
           const padding = editorOptions.get(monaco.editor.EditorOption.padding);
@@ -127,7 +128,7 @@ const setAutoHeight = (v = '') => {
 
   // 获取编辑器实际行高，如果编辑器还未初始化则使用默认值
   let lineHeight = 20;
-  if (vsEditor) {
+  if (vsEditor && monaco) {
     const editorOptions = vsEditor.getOptions();
     lineHeight = editorOptions.get(monaco.editor.EditorOption.lineHeight) || 20;
   }
@@ -188,8 +189,9 @@ const parseCode = (v: string | any, language: string): any => {
   return getEditorConfig('parseDSL')(v);
 };
 
-let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
-let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+let monaco: typeof import('monaco-editor') | null = null;
+let vsEditor: Monaco.editor.IStandaloneCodeEditor | null = null;
+let vsDiffEditor: Monaco.editor.IStandaloneDiffEditor | null = null;
 
 const values = ref('');
 const loading = ref(false);
@@ -207,6 +209,8 @@ const setEditorValue = (v: string | any, m: string | any) => {
 
   setAutoHeight(values.value);
 
+  if (!monaco) return;
+
   if (props.type === 'diff') {
     const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
     const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
@@ -255,6 +259,8 @@ const init = async () => {
   // 重置缓存的额外高度，因为编辑器重新初始化
   cachedExtraHeight = null;
 
+  monaco = await loadMonaco();
+
   const options = {
     value: values.value,
     language: props.language,
@@ -264,7 +270,7 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
+    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, codeEditorEl.value, options);
 
     // 监听diff编辑器内容变化
     vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
@@ -274,7 +280,7 @@ const init = async () => {
       }
     });
   } else {
-    vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
+    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, codeEditorEl.value, options);
 
     // 监听编辑器内容变化
     vsEditor.onDidChangeModelContent(() => {
@@ -343,6 +349,7 @@ onBeforeUnmount(() => {
 
   vsEditor = null;
   vsDiffEditor = null;
+  monaco = null;
 
   // 重置缓存
   cachedExtraHeight = null;

package/src/layouts/Framework.vue

@@ -17,7 +17,7 @@
     </slot>
 
     <SplitView
-      v-else
+      v-show="!showSrc"
       ref="splitView"
       class="m-editor-content"
       left-class="m-editor-framework-left"

package/src/plugin.ts

@@ -0,0 +1,92 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { App } from 'vue';
+
+import type { DesignPluginOptions } from '@tmagic/design';
+import designPlugin from '@tmagic/design';
+import type { FormInstallOptions } from '@tmagic/form';
+import formPlugin from '@tmagic/form';
+import tablePlugin from '@tmagic/table';
+
+import Code from './fields/Code.vue';
+import CodeLink from './fields/CodeLink.vue';
+import CodeSelect from './fields/CodeSelect.vue';
+import CodeSelectCol from './fields/CodeSelectCol.vue';
+import CondOpSelect from './fields/CondOpSelect.vue';
+import DataSourceFields from './fields/DataSourceFields.vue';
+import DataSourceFieldSelect from './fields/DataSourceFieldSelect/Index.vue';
+import DataSourceInput from './fields/DataSourceInput.vue';
+import DataSourceMethods from './fields/DataSourceMethods.vue';
+import DataSourceMethodSelect from './fields/DataSourceMethodSelect.vue';
+import DataSourceMocks from './fields/DataSourceMocks.vue';
+import DataSourceSelect from './fields/DataSourceSelect.vue';
+import DisplayConds from './fields/DisplayConds.vue';
+import EventSelect from './fields/EventSelect.vue';
+import KeyValue from './fields/KeyValue.vue';
+import PageFragmentSelect from './fields/PageFragmentSelect.vue';
+import StyleSetter from './fields/StyleSetter/Index.vue';
+import uiSelect from './fields/UISelect.vue';
+import CodeEditor from './layouts/CodeEditor.vue';
+import { setEditorConfig } from './utils/config';
+import Editor from './Editor.vue';
+import type { EditorInstallOptions } from './type';
+
+import './theme/index.scss';
+
+const defaultInstallOpt: EditorInstallOptions = {
+  // eslint-disable-next-line no-eval
+  parseDSL: (dsl: string) => eval(dsl),
+  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
+    monaco.editor.createDiffEditor(codeEditorEl, options),
+};
+
+export default {
+  install: (app: App, opt?: Partial<EditorInstallOptions | DesignPluginOptions | FormInstallOptions>): void => {
+    const option = Object.assign(defaultInstallOpt, opt || {});
+
+    app.use(designPlugin, opt || {});
+    app.use(formPlugin, opt || {});
+    app.use(tablePlugin);
+
+    app.config.globalProperties.$TMAGIC_EDITOR = option;
+    setEditorConfig(option);
+
+    app.component(`${Editor.name || 'MEditor'}`, Editor);
+    app.component('magic-code-editor', CodeEditor);
+    app.component('m-fields-ui-select', uiSelect);
+    app.component('m-fields-code-link', CodeLink);
+    app.component('m-fields-vs-code', Code);
+    app.component('m-fields-code-select', CodeSelect);
+    app.component('m-fields-code-select-col', CodeSelectCol);
+    app.component('m-fields-event-select', EventSelect);
+    app.component('m-fields-data-source-fields', DataSourceFields);
+    app.component('m-fields-data-source-mocks', DataSourceMocks);
+    app.component('m-fields-key-value', KeyValue);
+    app.component('m-fields-data-source-input', DataSourceInput);
+    app.component('m-fields-data-source-select', DataSourceSelect);
+    app.component('m-fields-data-source-methods', DataSourceMethods);
+    app.component('m-fields-data-source-method-select', DataSourceMethodSelect);
+    app.component('m-fields-data-source-field-select', DataSourceFieldSelect);
+    app.component('m-fields-page-fragment-select', PageFragmentSelect);
+    app.component('m-fields-display-conds', DisplayConds);
+    app.component('m-fields-cond-op-select', CondOpSelect);
+    app.component('m-form-style-setter', StyleSetter);
+  },
+};

package/src/type.ts

@@ -18,7 +18,8 @@
 
 import type { Component } from 'vue';
 import type EventEmitter from 'events';
-import Sortable, { type Options, type SortableEvent } from 'sortablejs';
+import type * as Monaco from 'monaco-editor';
+import type { default as Sortable, Options, SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties } from 'type-fest';
 
 import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
@@ -32,8 +33,6 @@ import type {
   UpdateDragEl,
 } from '@tmagic/stage';
 
-import Monaco from '@editor/utils/monaco-editor';
-
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { DataSourceService } from './services/dataSource';
@@ -121,15 +120,15 @@ export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig
 export interface EditorInstallOptions {
   parseDSL: <T = any>(dsl: string) => T;
   customCreateMonacoEditor: (
-    monaco: typeof Monaco,
+    monaco: typeof import('monaco-editor'),
     codeEditorEl: HTMLElement,
     options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
-  ) => Monaco.editor.IStandaloneCodeEditor;
+  ) => Promise<Monaco.editor.IStandaloneCodeEditor> | Monaco.editor.IStandaloneCodeEditor;
   customCreateMonacoDiffEditor: (
-    monaco: typeof Monaco,
+    monaco: typeof import('monaco-editor'),
     codeEditorEl: HTMLElement,
     options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
-  ) => Monaco.editor.IStandaloneDiffEditor;
+  ) => Promise<Monaco.editor.IStandaloneDiffEditor> | Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }
 

package/src/utils/index.ts

@@ -27,3 +27,4 @@ export * from './scroll-viewer';
 export * from './tree';
 export * from './undo-redo';
 export * from './const';
+export { default as loadMonaco } from './monaco-editor';

package/src/utils/monaco-editor.ts

@@ -1,8 +1,15 @@
-import { emmetCSS, emmetHTML } from 'emmet-monaco-es';
-import * as monaco from 'monaco-editor';
+let cached: Promise<typeof import('monaco-editor')> | undefined;
 
-// 注册emmet插件
-emmetHTML(monaco);
-emmetCSS(monaco, ['css', 'scss']);
+export default () => {
+  if (!cached) {
+    cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
+      const { emmetHTML, emmetCSS } = emmet;
+      emmetHTML(monaco);
+      emmetCSS(monaco, ['css', 'scss']);
 
-export default monaco;
+      return monaco;
+    });
+  }
+
+  return cached;
+};

package/src/utils/props.ts

@@ -47,6 +47,7 @@ export const numberOptions = [
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
+  lazy: true,
   display: ({ services }: any) => !(services.uiService.get('showStylePanel') ?? true),
   items: [
     {
@@ -114,6 +115,7 @@ export const styleTabConfig: TabPaneConfig = {
 
 export const eventTabConfig: TabPaneConfig = {
   title: '事件',
+  lazy: true,
   items: [
     {
       name: 'events',