@tmagic/editor 1.8.0-beta.26 → 1.8.0-beta.27

package/dist/es/hooks/use-form-context.js

@@ -1,4 +1,5 @@
-import { computed } from "vue";
+import { FORM_CONTEXT_KEY, mergeFormContexts } from "@tmagic/form";
+import { computed, inject, unref } from "vue";
 //#region packages/editor/src/hooks/use-form-context.ts
 /**
 * 编辑器注入给表单的业务上下文：`services` 与当前画布 `stage`。
@@ -6,14 +7,23 @@ import { computed } from "vue";
 * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
 * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
 *
+* 宿主可能在 `<MEditor>` 外层 provide 了自己的业务字段，这里必须把那一层合并进来：
+* 否则编辑器再 provide 一次会把宿主整层遮蔽掉，属性面板、对比表单里的配置回调就
+* 读不到宿主字段了。`services` / `stage` 由编辑器兜底，优先级高于宿主同名字段。
+*
 * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
 */
-var useEditorFormContext = (getServices) => computed(() => {
-	const services = getServices();
-	return {
-		services,
-		stage: services?.editorService.get("stage")
-	};
-});
+var useEditorFormContext = (getServices) => {
+	const hostContext = inject(FORM_CONTEXT_KEY, void 0);
+	return computed(() => {
+		const services = getServices();
+		const host = unref(hostContext);
+		if (host && host.services === services) return host;
+		return mergeFormContexts(host, {
+			services,
+			stage: services?.editorService.get("stage")
+		});
+	});
+};
 //#endregion
 export { useEditorFormContext };

package/dist/es/initService.js

@@ -73,6 +73,7 @@ var initServiceState = (props, { editorService, historyService, componentListSer
 		uiService.resetState();
 		componentListService.resetState();
 		codeBlockService.resetState();
+		eventsService.resetState();
 		keybindingService.reset();
 		depService.reset();
 	});

package/dist/es/services/events.js

@@ -47,8 +47,8 @@ var Events = class extends BaseService {
 		return cloneDeep(methodMap[toLine(type)]) || [];
 	}
 	resetState() {
-		eventMap = reactive({});
-		methodMap = reactive({});
+		Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+		Object.keys(methodMap).forEach((type) => delete methodMap[type]);
 	}
 	destroy() {
 		this.resetState();

package/dist/es/utils/code-block.js

@@ -55,13 +55,20 @@ var getCodeBlockFormConfig = (options = {}) => {
 			name: "timing",
 			type: "select",
 			options: () => {
-				const list = [{
-					text: "初始化前",
-					value: "beforeInit"
-				}, {
-					text: "初始化后",
-					value: "afterInit"
-				}];
+				const list = [
+					{
+						text: "初始化前",
+						value: "beforeInit"
+					},
+					{
+						text: "初始化后",
+						value: "afterInit"
+					},
+					{
+						text: "页面渲染后",
+						value: "mounted"
+					}
+				];
 				if (dataSourceType?.() !== "base") {
 					list.push({
 						text: "请求前",

package/dist/tmagic-editor-headless.umd.cjs

@@ -9120,8 +9120,8 @@
 			return cloneDeep(methodMap[(0, _tmagic_utils.toLine)(type)]) || [];
 		}
 		resetState() {
-			eventMap = (0, vue.reactive)({});
-			methodMap = (0, vue.reactive)({});
+			Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+			Object.keys(methodMap).forEach((type) => delete methodMap[type]);
 		}
 		destroy() {
 			this.resetState();

package/dist/tmagic-editor.umd.cjs

@@ -5057,13 +5057,18 @@
 	//#region packages/editor/src/hooks/use-form-context.ts
 	var useEditorFormContext;
 	var init_use_form_context = __esmMin((() => {
-		useEditorFormContext = (getServices) => (0, vue.computed)(() => {
-			const services = getServices();
-			return {
-				services,
-				stage: services?.editorService.get("stage")
-			};
-		});
+		useEditorFormContext = (getServices) => {
+			const hostContext = (0, vue.inject)(_tmagic_form.FORM_CONTEXT_KEY, void 0);
+			return (0, vue.computed)(() => {
+				const services = getServices();
+				const host = (0, vue.unref)(hostContext);
+				if (host && host.services === services) return host;
+				return (0, _tmagic_form.mergeFormContexts)(host, {
+					services,
+					stage: services?.editorService.get("stage")
+				});
+			});
+		};
 	}));
 	//#endregion
 	//#region packages/editor/src/utils/config.ts
@@ -5130,13 +5135,20 @@
 					name: "timing",
 					type: "select",
 					options: () => {
-						const list = [{
-							text: "初始化前",
-							value: "beforeInit"
-						}, {
-							text: "初始化后",
-							value: "afterInit"
-						}];
+						const list = [
+							{
+								text: "初始化前",
+								value: "beforeInit"
+							},
+							{
+								text: "初始化后",
+								value: "afterInit"
+							},
+							{
+								text: "页面渲染后",
+								value: "mounted"
+							}
+						];
 						if (dataSourceType?.() !== "base") {
 							list.push({
 								text: "请求前",
@@ -11208,8 +11220,8 @@
 			return cloneDeep$1(methodMap[(0, _tmagic_utils.toLine)(type)]) || [];
 		}
 		resetState() {
-			eventMap = (0, vue.reactive)({});
-			methodMap = (0, vue.reactive)({});
+			Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+			Object.keys(methodMap).forEach((type) => delete methodMap[type]);
 		}
 		destroy() {
 			this.resetState();
@@ -20074,6 +20086,7 @@
 			uiService.resetState();
 			componentListService.resetState();
 			codeBlockService.resetState();
+			eventsService.resetState();
 			keybindingService.reset();
 			depService.reset();
 		});

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.26",
+  "version": "1.8.0-beta.27",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -63,11 +63,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.7",
     "sortablejs": "^1.15.7",
-    "@tmagic/design": "1.8.0-beta.26",
-    "@tmagic/form": "1.8.0-beta.26",
-    "@tmagic/stage": "1.8.0-beta.26",
-    "@tmagic/table": "1.8.0-beta.26",
-    "@tmagic/utils": "1.8.0-beta.26"
+    "@tmagic/design": "1.8.0-beta.27",
+    "@tmagic/stage": "1.8.0-beta.27",
+    "@tmagic/table": "1.8.0-beta.27",
+    "@tmagic/form": "1.8.0-beta.27",
+    "@tmagic/utils": "1.8.0-beta.27"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -81,7 +81,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.41",
-    "@tmagic/core": "1.8.0-beta.26"
+    "@tmagic/core": "1.8.0-beta.27"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/hooks/use-form-context.ts

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { computed, type ComputedRef } from 'vue';
+import { computed, type ComputedRef, inject, unref } from 'vue';
 
-import type { FormContext } from '@tmagic/form';
+import { FORM_CONTEXT_KEY, type FormContext, mergeFormContexts } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
@@ -28,13 +28,29 @@ import type { Services } from '@editor/type';
  * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
  * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
  *
+ * 宿主可能在 `<MEditor>` 外层 provide 了自己的业务字段，这里必须把那一层合并进来：
+ * 否则编辑器再 provide 一次会把宿主整层遮蔽掉，属性面板、对比表单里的配置回调就
+ * 读不到宿主字段了。`services` / `stage` 由编辑器兜底，优先级高于宿主同名字段。
+ *
  * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
  */
-export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> =>
-  computed(() => {
+export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> => {
+  // inject 只能在 setup 期取值，因此本 hook 必须在 setup 中调用（`use` 前缀即此约定）。
+  // 返回的 computed 可以随便传递，但 hook 本身不能延迟到事件回调或 onMounted 里再调。
+  const hostContext = inject(FORM_CONTEXT_KEY, undefined);
+
+  return computed(() => {
     const services = getServices();
-    return {
+    const host = unref(hostContext);
+
+    // 上层（通常是 Editor.vue）已经用同一份 services 合并过了。FormPanel / useCompareForm
+    // 都是它的后代，再合并一次只会多套一层 Proxy，让每次属性 miss 多一轮线性查找。
+    // services 相同即可判定 stage 也相同——两边都是从同一个 editorService 读的。
+    if (host && host.services === services) return host;
+
+    return mergeFormContexts(host, {
       services,
       stage: services?.editorService.get('stage'),
-    };
+    });
   });
+};

package/src/initService.ts

@@ -254,6 +254,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    eventsService.resetState();
     keybindingService.reset();
     depService.reset();
   });

package/src/services/events.ts

@@ -35,8 +35,8 @@ const canUsePluginMethods = {
 type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
-let eventMap: Record<string, EventOption[]> = reactive({});
-let methodMap: Record<string, EventOption[]> = reactive({});
+const eventMap: Record<string, EventOption[]> = reactive({});
+const methodMap: Record<string, EventOption[]> = reactive({});
 
 class Events extends BaseService {
   constructor() {
@@ -75,8 +75,9 @@ class Events extends BaseService {
   }
 
   public resetState() {
-    eventMap = reactive({});
-    methodMap = reactive({});
+    // 原地清空而不是重新赋值，保留 reactive 代理身份，已建立的 computed / 渲染副作用才能收到更新
+    Object.keys(eventMap).forEach((type) => delete eventMap[type]);
+    Object.keys(methodMap).forEach((type) => delete methodMap[type]);
   }
 
   public destroy() {

package/src/type.ts

@@ -225,6 +225,7 @@ export interface StageOptions {
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
 }
 
+// #region NodeInvalidInfo
 /**
  * 节点校验错误信息，按来源（属性表单 / 样式表单）分别保存错误文案。
  * 属性表单与样式表单是两个独立的 FormPanel，均指向同一节点，故以来源为键，
@@ -237,9 +238,12 @@ export interface NodeInvalidInfo {
   /** 样式表单校验错误文案（可能为包含 <br> 的 HTML） */
   style?: string;
 }
+// #endregion NodeInvalidInfo
 
+// #region NodeInvalidSource
 /** 节点校验错误来源 */
 export type NodeInvalidSource = keyof NodeInvalidInfo;
+// #endregion NodeInvalidSource
 
 export interface StoreState {
   root: MApp | null;
@@ -312,6 +316,7 @@ export interface StageRect {
   height: number | string;
 }
 
+// #region UiState
 export interface UiState {
   /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
   uiSelectMode: boolean;
@@ -369,6 +374,7 @@ export interface UiState {
     height: number;
   };
 }
+// #endregion UiState
 
 // #region EditorNodeInfo
 export interface EditorNodeInfo {

package/src/utils/code-block.ts

@@ -103,6 +103,7 @@ export const getCodeBlockFormConfig = (options: GetCodeBlockFormConfigOptions =
         const list = [
           { text: '初始化前', value: 'beforeInit' },
           { text: '初始化后', value: 'afterInit' },
+          { text: '页面渲染后', value: 'mounted' },
         ];
         if (dataSourceType?.() !== 'base') {
           list.push({ text: '请求前', value: 'beforeRequest' });