@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

package/dist/es/layouts/sidebar/layer/LayerMenu.vue_vue_type_script_setup_true_lang.js

@@ -2,11 +2,11 @@ import { useServices } from "../../../hooks/use-services.js";
 import ContentMenu_default from "../../../components/ContentMenu.js";
 import FolderMinusIcon_default from "../../../icons/FolderMinusIcon.js";
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from "../../../utils/content-menu.js";
-import { isPage, isPageFragment } from "@tmagic/utils";
+import { isPageOrFragment } from "@tmagic/utils";
 import { computed, createBlock, defineComponent, markRaw, openBlock, useTemplateRef } from "vue";
 import { Files, Plus } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerMenu.vue?vue&type=script&setup=true&lang.ts
-var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorLayerMenu",
 	__name: "LayerMenu",
 	props: {
@@ -55,7 +55,7 @@ var LayerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 				type: "button",
 				text: "全部折叠",
 				icon: FolderMinusIcon_default,
-				display: () => isPage(node.value) || isPageFragment(node.value),
+				display: () => isPageOrFragment(node.value),
 				handler: () => {
 					emit("collapse-all");
 				}

package/dist/es/layouts/sidebar/layer/LayerNodeContent.js

@@ -0,0 +1,5 @@
+import LayerNodeContent_vue_vue_type_script_setup_true_lang_default from "./LayerNodeContent.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue
+var LayerNodeContent_default = LayerNodeContent_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { LayerNodeContent_default as default };

package/dist/es/layouts/sidebar/layer/LayerNodeContent.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,46 @@
+import { useServices } from "../../../hooks/use-services.js";
+import Icon_default from "../../../components/Icon.js";
+import { TMagicTooltip, stripValidateSuggestion } from "@tmagic/design";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, toDisplayString, unref, withCtx } from "vue";
+import { WarningFilled } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "m-editor-layer-node-label" };
+var _hoisted_2 = ["innerHTML"];
+var LayerNodeContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorLayerNodeContent",
+	__name: "LayerNodeContent",
+	props: { data: {} },
+	setup(__props) {
+		const props = __props;
+		const { editorService } = useServices();
+		const label = computed(() => `${props.data.name} (${props.data.id})`);
+		/** 读取集中存储的校验错误状态，建立响应式依赖 */
+		const invalidInfo = computed(() => editorService.get("invalidNodeIds").get(props.data.id));
+		const hasError = computed(() => Boolean(invalidInfo.value?.props || invalidInfo.value?.style));
+		/**
+		* 去掉单条校验文案中的「修改建议」部分。
+		*
+		* 错误文案可能是多条错误以 `<br>` 拼接的 HTML，每条本身形如 `主文案\n\n建议`。
+		* 组件树 tooltip 仅展示错误描述，不展示修改建议（建议仅在错误汇总面板展示），
+		* 故先按 `<br>` 拆分，每段用 `stripValidateSuggestion` 截断建议后再拼回。
+		*/
+		const stripSuggestion = (text) => String(text ?? "").split(/<br\s*\/?>/i).map((segment) => stripValidateSuggestion(segment)).join("<br>");
+		/** 合并属性表单与样式表单的错误文案（去掉建议，本身可能仍是含 <br> 的 HTML） */
+		const errorMessage = computed(() => [stripSuggestion(invalidInfo.value?.props), stripSuggestion(invalidInfo.value?.style)].filter(Boolean).join("<br>"));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", { class: normalizeClass(["m-editor-layer-node-content", { "is-invalid": hasError.value }]) }, [createElementVNode("span", _hoisted_1, toDisplayString(label.value), 1), hasError.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+				key: 0,
+				placement: "top"
+			}, {
+				content: withCtx(() => [createElementVNode("span", { innerHTML: errorMessage.value }, null, 8, _hoisted_2)]),
+				default: withCtx(() => [createVNode(Icon_default, {
+					class: "m-editor-layer-node-error-icon",
+					icon: unref(WarningFilled)
+				}, null, 8, ["icon"])]),
+				_: 1
+			})) : createCommentVNode("v-if", true)], 2);
+		};
+	}
+});
+//#endregion
+export { LayerNodeContent_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/layer/LayerNodeTool.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { TMagicButton } from "@tmagic/design";
 import { createBlock, createCommentVNode, defineComponent, openBlock, unref, withModifiers } from "vue";
 import { Hide, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerNodeTool.vue?vue&type=script&setup=true&lang.ts
-var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerNodeTool_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "LayerNodeTool",
 	props: { data: {} },
 	setup(__props) {

package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js

@@ -3,6 +3,7 @@ import { useFilter } from "../../../hooks/use-filter.js";
 import SearchInput_default from "../../../components/SearchInput.js";
 import Tree_default from "../../../components/Tree.js";
 import LayerMenu_default from "./LayerMenu.js";
+import LayerNodeContent_default from "./LayerNodeContent.js";
 import LayerNodeTool_default from "./LayerNodeTool.js";
 import { useClick } from "./use-click.js";
 import { useDrag } from "./use-drag.js";
@@ -11,7 +12,7 @@ import { useNodeStatus } from "./use-node-status.js";
 import { TMagicScrollbar } from "@tmagic/design";
 import { Teleport, computed, createBlock, createCommentVNode, createVNode, defineComponent, openBlock, renderSlot, unref, useTemplateRef, withCtx } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/LayerPanel.vue?vue&type=script&setup=true&lang.ts
-var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var LayerPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorLayerPanel",
 	__name: "LayerPanel",
 	props: {
@@ -38,7 +39,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			let name = "";
 			if (data.name) name = data.name;
 			else if (data.items) name = "container";
-			return `${data.id}${name}${data.type}`.includes(v);
+			return `${data.id}${name}${data.type || ""}`.toLocaleLowerCase().includes(v.toLocaleLowerCase());
 		};
 		const { filterTextChangeHandler } = useFilter(nodeData, nodeStatusMap, filterNodeMethod);
 		const collapseAllHandler = () => {
@@ -50,7 +51,8 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			}
 		};
 		const { handleDragStart, handleDragEnd, handleDragLeave, handleDragOver } = useDrag(services, { canDropIn: (sourceIds, targetId) => props.canDropIn?.(sourceIds, targetId, "layer") });
-		const { nodeClickHandler, nodeDblclickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, useTemplateRef("menu"));
+		const menuRef = useTemplateRef("menu");
+		const { nodeClickHandler, nodeDblclickHandler, nodeContentMenuHandler, highlightHandler: mouseenterHandler } = useClick(services, isCtrlKeyDown, nodeStatusMap, menuRef);
 		const dblclickHandler = async (event, data) => {
 			if (props.beforeNodeDblclick) {
 				if (await props.beforeNodeDblclick(event, data) === false) return;
@@ -83,7 +85,7 @@ var LayerPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					}, {
 						"tree-node-content": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-content", { data: nodeData })]),
 						"tree-node-tool": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData }, () => [createVNode(LayerNodeTool_default, { data: nodeData }, null, 8, ["data"])])]),
-						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData })]),
+						"tree-node-label": withCtx(({ data: nodeData }) => [renderSlot(_ctx.$slots, "layer-node-label", { data: nodeData }, () => [createVNode(LayerNodeContent_default, { data: nodeData }, null, 8, ["data"])])]),
 						_: 3
 					}, 8, [
 						"data",

package/dist/es/layouts/sidebar/layer/use-click.js

@@ -1,6 +1,6 @@
 import { UI_SELECT_MODE_EVENT_NAME } from "../../../utils/const.js";
 import { updateStatus } from "../../../utils/tree.js";
-import { getElById, isPage, isPageFragment } from "@tmagic/utils";
+import { getElById, isPageOrFragment } from "@tmagic/utils";
 import { computed, nextTick } from "vue";
 import { throttle } from "lodash-es";
 //#region packages/editor/src/layouts/sidebar/layer/use-click.ts
@@ -16,7 +16,7 @@ var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown
 		}
 	};
 	const multiSelect = async (data) => {
-		if (isPage(data) || isPageFragment(data)) return;
+		if (isPageOrFragment(data)) return;
 		const nodes = editorService.get("nodes") || [];
 		const newNodes = [];
 		let isCancel = false;
@@ -25,7 +25,7 @@ var useClick = ({ editorService, stageOverlayService, uiService }, isCtrlKeyDown
 				isCancel = true;
 				return;
 			}
-			if (isPage(node) || isPageFragment(node)) return;
+			if (isPageOrFragment(node)) return;
 			newNodes.push(node.id);
 		});
 		if (!isCancel || newNodes.length === 0) newNodes.push(data.id);

package/dist/es/layouts/sidebar/layer/use-drag.js

@@ -109,16 +109,17 @@ var useDrag = ({ editorService }, options = {}) => {
 			let targetParent = targetInfo.parent;
 			if (!targetParent || !targetNode) return;
 			let targetIndex = -1;
-			if (Array.isArray(targetNode.items) && dragState.dropType === "inner") if (dragState.redirectedTargetId !== void 0) {
-				const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
-				if (!redirectedNode || !Array.isArray(redirectedNode.items)) return;
-				targetParent = redirectedNode;
-				targetIndex = redirectedNode.items.length;
-			} else {
-				targetIndex = targetNode.items.length;
-				targetParent = targetNode;
-			}
-			else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
+			if (Array.isArray(targetNode.items) && dragState.dropType === "inner") {
+				if (dragState.redirectedTargetId !== void 0) {
+					const redirectedNode = editorService.getNodeInfo(dragState.redirectedTargetId, false).node;
+					if (!redirectedNode || !Array.isArray(redirectedNode.items)) return;
+					targetParent = redirectedNode;
+					targetIndex = redirectedNode.items.length;
+				} else {
+					targetIndex = targetNode.items.length;
+					targetParent = targetNode;
+				}
+			} else targetIndex = getNodeIndex(dragState.dragOverNodeId, targetParent);
 			if (dragState.dropType === "after") targetIndex += 1;
 			const selectedNodes = editorService.get("nodes");
 			if (selectedNodes.find((n) => `${n.id}` === `${node.id}`)) editorService.dragTo(selectedNodes, targetParent, targetIndex);

package/dist/es/layouts/sidebar/layer/use-node-status.js

@@ -1,5 +1,5 @@
 import { updateStatus } from "../../../utils/tree.js";
-import { getNodePath, isPage, isPageFragment, traverseNode } from "@tmagic/utils";
+import { getNodePath, isPageOrFragment, traverseNode } from "@tmagic/utils";
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 //#region packages/editor/src/layouts/sidebar/layer/use-node-status.ts
 var createPageNodeStatus = (page, initialLayerNodeStatus) => {
@@ -75,7 +75,7 @@ var useNodeStatus = ({ editorService }) => {
 	}, { immediate: true });
 	const addHandler = (newNodes) => {
 		newNodes.forEach((node) => {
-			if (isPage(node) || isPageFragment(node)) return;
+			if (isPageOrFragment(node)) return;
 			traverseNode(node, (node) => {
 				nodeStatusMap.value?.set(node.id, {
 					visible: true,

package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js

@@ -12,7 +12,7 @@ var _hoisted_2 = {
 	class: "m-editor-breadcrumb-separator"
 };
 var COLLAPSE_RATIO = .8;
-var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Breadcrumb_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorBreadcrumb",
 	__name: "Breadcrumb",
 	setup(__props) {

package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import Breadcrumb_default from "./Breadcrumb.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, openBlock, renderSlot, unref, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/Workspace.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-workspace" };
-var Workspace_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Workspace_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorWorkspace",
 	__name: "Workspace",
 	props: {

package/dist/es/layouts/workspace/viewer/NodeListMenu.vue_vue_type_script_setup_true_lang.js

@@ -7,11 +7,12 @@ import { TMagicTooltip } from "@tmagic/design";
 import { getIdFromEl } from "@tmagic/utils";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, watch, withCtx } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/NodeListMenu.vue?vue&type=script&setup=true&lang.ts
-var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "NodeListMenu",
 	setup(__props) {
 		const services = useServices();
-		const { editorService } = services;
+		const { editorService, uiService } = services;
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		const visible = ref(false);
 		const buttonVisible = ref(false);
 		const buttonEl = useTemplateRef("button");
@@ -71,6 +72,7 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				visible: visible.value,
 				"onUpdate:visible": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
 				title: "当前位置下的组件",
+				"framework-width": frameworkWidth.value,
 				position: menuPosition.value
 			}, {
 				body: withCtx(() => [createVNode(Tree_default, {
@@ -80,7 +82,11 @@ var NodeListMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					onNodeClick: clickHandler
 				}, null, 8, ["data", "node-status-map"])]),
 				_: 1
-			}, 8, ["visible", "position"])) : createCommentVNode("v-if", true)], 64);
+			}, 8, [
+				"visible",
+				"framework-width",
+				"position"
+			])) : createCommentVNode("v-if", true)], 64);
 		};
 	}
 });

package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import { getOffset } from "@tmagic/stage";
 import { calcValueByFontsize, getIdFromEl } from "@tmagic/utils";
 import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, markRaw, nextTick, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderSlot, resolveDirective, useTemplateRef, watch, watchEffect, withCtx, withDirectives } from "vue";
 //#region packages/editor/src/layouts/workspace/viewer/Stage.vue?vue&type=script&setup=true&lang.ts
-var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Stage_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorStage",
 	__name: "Stage",
 	props: {
@@ -151,11 +151,44 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				height: contentRect.height
 			});
 		});
+		const parseDSL = getEditorConfig("parseDSL");
+		/**
+		* 本次拖拽是否由编辑器文档内部发起
+		*
+		* drop 的 text/json 里可能带函数（组件配置的事件、钩子等），还原只能交给 parseDSL，
+		* 而 parseDSL 的默认实现是 eval；HTML 拖放又允许其他源的页面在 DataTransfer 中投递
+		* 自定义 MIME 数据，跨源页面只要诱导用户拖拽一次，就能让 eval 执行任意脚本。
+		*
+		* 跨源页面既不会在本文档触发 dragstart，也无法往本文档创建的 DataTransfer 中写数据，
+		* 因此只有起源于本文档的拖拽才交给 parseDSL 还原。
+		* 同源拖拽源写入的 text/json 由业务保证可信。
+		*/
+		let isInternalDrag = false;
+		let internalDragSession = 0;
+		let clearInternalDragTimer;
+		const documentDragStartHandler = () => {
+			internalDragSession += 1;
+			isInternalDrag = true;
+			if (clearInternalDragTimer !== void 0) {
+				globalThis.clearTimeout(clearInternalDragTimer);
+				clearInternalDragTimer = void 0;
+			}
+		};
+		const documentDragEndHandler = () => {
+			const session = internalDragSession;
+			if (clearInternalDragTimer !== void 0) globalThis.clearTimeout(clearInternalDragTimer);
+			clearInternalDragTimer = globalThis.setTimeout(() => {
+				clearInternalDragTimer = void 0;
+				if (session === internalDragSession) isInternalDrag = false;
+			}, 0);
+		};
 		onMounted(() => {
 			if (stageWrapRef.value?.container) {
 				resizeObserver.observe(stageWrapRef.value.container);
 				keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
 			}
+			globalThis.document.addEventListener("dragstart", documentDragStartHandler, true);
+			globalThis.document.addEventListener("dragend", documentDragEndHandler, true);
 		});
 		onBeforeUnmount(() => {
 			stage?.destroy();
@@ -163,8 +196,13 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			resizeObserver.disconnect();
 			editorService.set("stage", null);
 			keybindingService.unregisterEl("stage");
+			if (clearInternalDragTimer !== void 0) {
+				globalThis.clearTimeout(clearInternalDragTimer);
+				clearInternalDragTimer = void 0;
+			}
+			globalThis.document.removeEventListener("dragstart", documentDragStartHandler, true);
+			globalThis.document.removeEventListener("dragend", documentDragEndHandler, true);
 		});
-		const parseDSL = getEditorConfig("parseDSL");
 		const contextmenuHandler = (e) => {
 			e.preventDefault();
 			menuRef.value?.show(e);
@@ -175,11 +213,19 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 			e.dataTransfer.dropEffect = "move";
 		};
 		const dropHandler = async (e) => {
+			const allowed = isInternalDrag;
+			isInternalDrag = false;
 			if (!e.dataTransfer) return;
 			const data = e.dataTransfer.getData("text/json");
-			if (!data) return;
-			const config = parseDSL(`(${data})`);
-			if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
+			if (!data || !allowed) return;
+			let config;
+			try {
+				config = parseDSL(`(${data})`);
+			} catch {
+				return;
+			}
+			if (!config || config.dragType !== DragType.COMPONENT_LIST || !config.data) return;
+			const dragData = config.data;
 			e.preventDefault();
 			const doc = stage?.renderer?.contentWindow?.document;
 			const parentEl = doc?.querySelector(`.${props.stageOptions?.containerHighlightClassName}`);
@@ -201,7 +247,7 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				const layout = await editorService.getLayout(parent);
 				const containerRect = stageContainerEl.value.getBoundingClientRect();
 				const { scrollTop, scrollLeft } = stage.mask;
-				const { style = {} } = config.data;
+				const { style = {} } = dragData;
 				let top = 0;
 				let left = 0;
 				let position = "relative";
@@ -219,14 +265,14 @@ var Stage_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 						top = top - parentTop * zoom.value;
 					}
 				}
-				config.data.style = {
+				dragData.style = {
 					...style,
 					position,
 					top: calcValueByFontsize(doc, top / zoom.value),
 					left: calcValueByFontsize(doc, left / zoom.value)
 				};
-				config.data.inputEvent = e;
-				editorService.add(config.data, parent, { historySource: "component-panel" });
+				dragData.inputEvent = e;
+				editorService.add(dragData, parent, { historySource: "component-panel" });
 			}
 		};
 		return (_ctx, _cache) => {

package/dist/es/layouts/workspace/viewer/StageOverlay.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ var _hoisted_1 = {
 	key: 0,
 	class: "m-editor-stage-overlay"
 };
-var StageOverlay_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var StageOverlay_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "StageOverlay",
 	setup(__props) {
 		const { stageOverlayService, editorService, uiService } = useServices();

package/dist/es/layouts/workspace/viewer/ViewerMenu.vue_vue_type_script_setup_true_lang.js

@@ -3,12 +3,12 @@ import { useServices } from "../../../hooks/use-services.js";
 import ContentMenu_default from "../../../components/ContentMenu.js";
 import { useCopyMenu, useDeleteMenu, useMoveToMenu, usePasteMenu } from "../../../utils/content-menu.js";
 import CenterIcon_default from "../../../icons/CenterIcon.js";
-import { isPage, isPageFragment } from "@tmagic/utils";
+import { isPageOrFragment } from "@tmagic/utils";
 import { NodeType } from "@tmagic/core";
 import { computed, createBlock, defineComponent, markRaw, openBlock, ref, useTemplateRef, watch } from "vue";
 import { Bottom, Top } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/workspace/viewer/ViewerMenu.vue?vue&type=script&setup=true&lang.ts
-var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorViewerMenu",
 	__name: "ViewerMenu",
 	props: {
@@ -46,14 +46,14 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				direction: "horizontal",
 				display: () => {
 					if (!node.value) return false;
-					return !isPage(node.value) && !isPageFragment(node.value);
+					return !isPageOrFragment(node.value);
 				}
 			},
 			{
 				type: "button",
 				text: "上移一层",
 				icon: markRaw(Top),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
 					editorService.moveLayer(1, { historySource: "stage-contextmenu" });
 				}
@@ -62,7 +62,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				type: "button",
 				text: "下移一层",
 				icon: markRaw(Bottom),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
 					editorService.moveLayer(-1, { historySource: "stage-contextmenu" });
 				}
@@ -71,7 +71,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				type: "button",
 				text: "置顶",
 				icon: markRaw(Top),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
 					editorService.moveLayer(LayerOffset.TOP, { historySource: "stage-contextmenu" });
 				}
@@ -80,7 +80,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 				type: "button",
 				text: "置底",
 				icon: markRaw(Bottom),
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect,
 				handler: () => {
 					editorService.moveLayer(LayerOffset.BOTTOM, { historySource: "stage-contextmenu" });
 				}
@@ -89,7 +89,7 @@ var ViewerMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 			{
 				type: "divider",
 				direction: "horizontal",
-				display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect
+				display: () => !isPageOrFragment(node.value) && !props.isMultiSelect
 			},
 			useDeleteMenu("stage-contextmenu"),
 			{

package/dist/es/plugin.js

@@ -16,46 +16,58 @@ import PageFragmentSelect_default from "./fields/PageFragmentSelect.js";
 import DisplayConds_default from "./fields/DisplayConds.js";
 import CondOpSelect_default from "./fields/CondOpSelect.js";
 import Index_default$1 from "./fields/StyleSetter/Index.js";
+import { editorFields } from "./fields/headless-validation.js";
 import Code_default from "./fields/Code.js";
 import CodeLink_default from "./fields/CodeLink.js";
 import UISelect_default from "./fields/UISelect.js";
 /* empty css            */
-import formPlugin from "@tmagic/form";
+import formPlugin, { mergeFieldOptions } from "@tmagic/form";
 import tablePlugin from "@tmagic/table";
 import designPlugin from "@tmagic/design";
 //#region packages/editor/src/plugin.ts
 var defaultInstallOpt = {
 	parseDSL: (dsl) => eval(dsl),
 	customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
-	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options)
+	customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options),
+	flat: false
+};
+var editorFieldVue = {
+	"vs-code": { component: Code_default },
+	"ui-select": { component: UISelect_default },
+	"cond-op-select": { component: CondOpSelect_default },
+	"page-fragment-select": { component: PageFragmentSelect_default },
+	"data-source-select": { component: DataSourceSelect_default },
+	"data-source-input": { component: DataSourceInput_default },
+	"code-link": { component: CodeLink_default },
+	"key-value": { component: KeyValue_default },
+	"code-select-col": { component: CodeSelectCol_default },
+	"data-source-fields": { component: DataSourceFields_default },
+	"data-source-mocks": { component: DataSourceMocks_default },
+	"data-source-methods": { component: DataSourceMethods_default },
+	"data-source-method-select": { component: DataSourceMethodSelect_default },
+	"data-source-field-select": { component: Index_default },
+	"code-select": { component: CodeSelect_default },
+	"display-conds": { component: DisplayConds_default },
+	"event-select": { component: EventSelect_default },
+	"style-setter": { container: Index_default$1 }
 };
 var plugin_default = { install: (app, opt) => {
-	const option = Object.assign(defaultInstallOpt, opt || {});
-	app.use(designPlugin, opt || {});
-	app.use(formPlugin, opt || {});
+	const incoming = opt || {};
+	const option = {
+		...defaultInstallOpt,
+		...incoming
+	};
+	const formOpt = incoming;
+	app.use(designPlugin, incoming);
+	app.use(formPlugin, {
+		...formOpt,
+		fields: mergeFieldOptions(editorFields, editorFieldVue, formOpt.fields)
+	});
 	app.use(tablePlugin);
 	app.config.globalProperties.$TMAGIC_EDITOR = option;
 	setEditorConfig(option);
 	app.component(`${Editor_default.name || "MEditor"}`, Editor_default);
 	app.component("magic-code-editor", CodeEditor_default);
-	app.component("m-fields-ui-select", UISelect_default);
-	app.component("m-fields-code-link", CodeLink_default);
-	app.component("m-fields-vs-code", Code_default);
-	app.component("m-fields-code-select", CodeSelect_default);
-	app.component("m-fields-code-select-col", CodeSelectCol_default);
-	app.component("m-fields-event-select", EventSelect_default);
-	app.component("m-fields-data-source-fields", DataSourceFields_default);
-	app.component("m-fields-data-source-mocks", DataSourceMocks_default);
-	app.component("m-fields-key-value", KeyValue_default);
-	app.component("m-fields-data-source-input", DataSourceInput_default);
-	app.component("m-fields-data-source-select", DataSourceSelect_default);
-	app.component("m-fields-data-source-methods", DataSourceMethods_default);
-	app.component("m-fields-data-source-method-select", DataSourceMethodSelect_default);
-	app.component("m-fields-data-source-field-select", Index_default);
-	app.component("m-fields-page-fragment-select", PageFragmentSelect_default);
-	app.component("m-fields-display-conds", DisplayConds_default);
-	app.component("m-fields-cond-op-select", CondOpSelect_default);
-	app.component("m-form-style-setter", Index_default$1);
 } };
 //#endregion
 export { plugin_default as default };

package/dist/es/services/codeBlock.js

@@ -1,6 +1,6 @@
 import { CODE_DRAFT_STORAGE_KEY } from "../type.js";
-import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
+import BaseService from "./BaseService.js";
 import { createStackStep, describeRevertStep, getLastPushedHistoryIds } from "../utils/history.js";
 import history_default from "./history.js";
 import storage_default, { Protocol } from "./storage.js";
@@ -56,6 +56,7 @@ var CodeBlock = class extends BaseService {
 	async setCodeDsl(codeDsl) {
 		this.state.codeDsl = codeDsl;
 		this.emit("code-dsl-change", this.state.codeDsl);
+		this.emit("change", this.state.codeDsl);
 	}
 	/**
 	* 获取活动的代码块dsl数据源（默认从dsl中的codeBlocks字段读取）
@@ -132,6 +133,7 @@ var CodeBlock = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("codeBlock", step, id) : null)?.uuid ?? null;
 		}
 		this.emit("addOrUpdate", id, codeDsl[id]);
+		this.emit("change", this.getCodeDsl());
 	}
 	/**
 	* 根据代码块id数组获取代码dsl
@@ -139,7 +141,8 @@ var CodeBlock = class extends BaseService {
 	* @returns {CodeBlockDSL}
 	*/
 	getCodeDslByIds(ids) {
-		return pick(this.getCodeDsl(), ids);
+		const codeDsl = this.getCodeDsl();
+		return pick(codeDsl, ids);
 	}
 	/**
 	* 获取编辑状态
@@ -229,6 +232,7 @@ var CodeBlock = class extends BaseService {
 			}
 			this.emit("remove", id);
 		});
+		this.emit("change", this.getCodeDsl());
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的写入方法行为完全一致，
@@ -368,7 +372,8 @@ var CodeBlock = class extends BaseService {
 	*/
 	async getUniqueId() {
 		const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
-		if (!keys(await this.getCodeDsl()).includes(newId)) return newId;
+		const dsl = await this.getCodeDsl();
+		if (!keys(dsl).includes(newId)) return newId;
 		return await this.getUniqueId();
 	}
 	/**

package/dist/es/services/dataSource.js

@@ -102,6 +102,7 @@ var DataSource = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("dataSource", step, newConfig.id) : null)?.uuid ?? null;
 		}
 		this.emit("add", newConfig);
+		this.emit("change", this.get("dataSources"));
 		return newConfig;
 	}
 	/**
@@ -132,6 +133,7 @@ var DataSource = class extends BaseService {
 			oldConfig,
 			changeRecords
 		});
+		this.emit("change", this.get("dataSources"));
 		return newConfig;
 	}
 	/**
@@ -156,6 +158,7 @@ var DataSource = class extends BaseService {
 			this.lastPushedHistoryId = (step ? history_default.push("dataSource", step, id) : null)?.uuid ?? null;
 		}
 		this.emit("remove", id);
+		this.emit("change", this.get("dataSources"));
 	}
 	/**
 	* 下列 *AndGetHistoryId 方法与对应的 add / update / remove 行为完全一致，