@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js

@@ -1,31 +1,34 @@
+import { useEditorFormContext } from "./hooks/use-form-context.js";
 import props_default from "./services/props.js";
 import history_default from "./services/history.js";
 import storage_default from "./services/storage.js";
 import editor_default from "./services/editor.js";
 import ui_default from "./services/ui.js";
+import codeBlock_default from "./services/codeBlock.js";
+import dataSource_default from "./services/dataSource.js";
+import events_default from "./services/events.js";
 import Framework_default from "./layouts/Framework.js";
 import NavMenu_default from "./layouts/NavMenu.js";
+import { ENABLE_PROPS_FORM_VALIDATE, defaultEditorProps } from "./editorProps.js";
 import PropsPanel_default from "./layouts/props-panel/PropsPanel.js";
 import keybinding_config_default from "./utils/keybinding-config.js";
 import Sidebar_default from "./layouts/sidebar/Sidebar.js";
 import Workspace_default from "./layouts/workspace/Workspace.js";
-import codeBlock_default from "./services/codeBlock.js";
 import componentList_default from "./services/componentList.js";
-import dataSource_default from "./services/dataSource.js";
 import dep_default from "./services/dep.js";
-import events_default from "./services/events.js";
 import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
-import { defaultEditorProps } from "./editorProps.js";
 import { initServiceEvents, initServiceState } from "./initService.js";
+import { FORM_CONTEXT_KEY } from "@tmagic/form";
 import { M_THEME_KEY } from "@tmagic/design";
 import { computed, createBlock, createVNode, defineComponent, mergeDefaults, openBlock, provide, renderSlot, unref, withCtx } from "vue";
 import { EventEmitter } from "events";
 //#region packages/editor/src/Editor.vue?vue&type=script&setup=true&lang.ts
-var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Editor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditor",
 	__name: "Editor",
-	props: /* @__PURE__ */ mergeDefaults({
+	props: /*@__PURE__*/ mergeDefaults({
+		isLargeStageContainer: { type: Boolean },
 		theme: {},
 		modelValue: {},
 		componentGroupList: {},
@@ -49,6 +52,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		containerHighlightClassName: {},
 		containerHighlightDuration: {},
 		containerHighlightType: {},
+		containerHighlightAddOnly: { type: Boolean },
 		stageRect: {},
 		codeOptions: {},
 		disabledDragStart: { type: Boolean },
@@ -58,6 +62,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		disabledPageFragment: { type: Boolean },
 		disabledFlashTip: { type: Boolean },
 		disabledStageOverlay: { type: Boolean },
+		enablePropsFormValidate: { type: Boolean },
 		disabledShowSrc: { type: Boolean },
 		disabledDataSource: { type: Boolean },
 		disabledCodeBlock: { type: Boolean },
@@ -72,7 +77,6 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		canDropIn: { type: Function },
 		beforeDblclick: { type: Function },
 		beforeLayerNodeDblclick: { type: Function },
-		extendFormState: { type: Function },
 		historyListExtraTabs: {},
 		pageBarSortOptions: {},
 		pageFilterFunction: { type: Function }
@@ -118,6 +122,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 			containerHighlightClassName: props.containerHighlightClassName,
 			containerHighlightDuration: props.containerHighlightDuration,
 			containerHighlightType: props.containerHighlightType,
+			containerHighlightAddOnly: props.containerHighlightAddOnly,
 			disabledDragStart: props.disabledDragStart,
 			renderType: props.renderType,
 			guidesOptions: props.guidesOptions,
@@ -130,12 +135,17 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 		provide("services", services);
 		provide("codeOptions", props.codeOptions);
 		provide("stageOptions", stageOptions);
+		/** 是否启用「属性配置表单校验」联动能力，供 PropsPanel / FormPanel 判断校验失败时是否仍更新节点并记录错误 */
+		provide(ENABLE_PROPS_FORM_VALIDATE, props.enablePropsFormValidate ?? false);
 		/**
-		* 把顶层 `extendFormState` 提供给非 PropsPanel 链路上的组件使用（例如历史差异对话框 HistoryDiffDialog
-		* 内部的 CompareForm）。这样所有依赖业务上下文的表单 filterFunction 都能拿到一致的扩展状态，
-		* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
+		* 编辑器注入给整棵表单树的业务上下文（`services` / `stage`），属性面板、对比表单、
+		* 侧边栏里的嵌套 MForm 都通过 inject 自动继承。
+		*
+		* 业务方要追加自己的字段，在 `<MEditor>` 外层再 `provide(FORM_CONTEXT_KEY, computed(...))`
+		* 即可，配置回调统一通过 `mForm.xxx` 读取。
 		*/
-		provide("extendFormState", props.extendFormState);
+		provide(FORM_CONTEXT_KEY, useEditorFormContext(() => services));
+		provide("isLargeStageContainer", computed(() => props.isLargeStageContainer));
 		/**
 		* 把历史记录面板的自定义扩展 tab 提供给深层的 HistoryListPanel（它挂在 NavMenu 中，
 		* 以 markRaw component 形式渲染，无法直接通过 props 透传）。业务方可借此在历史记录
@@ -229,7 +239,6 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 					"custom-content-menu"
 				])])]),
 				"props-panel": withCtx(() => [renderSlot(_ctx.$slots, "props-panel", {}, () => [createVNode(PropsPanel_default, {
-					"extend-state": __props.extendFormState,
 					"disabled-show-src": __props.disabledShowSrc,
 					onMounted: propsPanelMountedHandler,
 					onUnmounted: propsPanelUnmountedHandler,
@@ -238,7 +247,7 @@ var Editor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineC
 				}, {
 					"props-panel-header": withCtx(() => [renderSlot(_ctx.$slots, "props-panel-header")]),
 					_: 3
-				}, 8, ["extend-state", "disabled-show-src"])])]),
+				}, 8, ["disabled-show-src"])])]),
 				empty: withCtx(() => [renderSlot(_ctx.$slots, "empty", { editorService: unref(editor_default) })]),
 				"content-after": withCtx(() => [renderSlot(_ctx.$slots, "content-after")]),
 				footer: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),

package/dist/es/components/CodeBlockEditor.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { getEditorConfig } from "../utils/config.js";
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { useServices } from "../hooks/use-services.js";
 import { useWindowRect } from "../hooks/use-window-rect.js";
 import { useEditorContentHeight } from "../hooks/use-editor-content-height.js";
 import { useNextFloatBoxPosition } from "../hooks/use-next-float-box-position.js";
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import FloatingBox_default from "./FloatingBox.js";
 import { MFormBox } from "@tmagic/form";
@@ -17,10 +17,10 @@ var _hoisted_1 = { style: {
 var _hoisted_2 = { style: { "flex": "1" } };
 var _hoisted_3 = { style: { "flex": "1" } };
 var _hoisted_4 = { class: "dialog-footer" };
-var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeBlockEditor",
 	__name: "CodeBlockEditor",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		content: {},
 		disabled: { type: Boolean },
 		isDataSource: { type: Boolean },
@@ -34,7 +34,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		},
 		"visibleModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels([
+	emits: /*@__PURE__*/ mergeModels([
 		"submit",
 		"close",
 		"open"
@@ -119,7 +119,9 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 		const closedHandler = () => {
 			changedValue.value = void 0;
 		};
-		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		const parentFloating = inject("parentFloating", ref(null));
+		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+		const frameworkWidth = computed(() => uiService.get("frameworkRect")?.width || 0);
 		watch(boxVisible, (visible) => {
 			nextTick(() => {
 				if (!visible) emit("close");
@@ -145,7 +147,9 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"onUpdate:width": _cache[2] || (_cache[2] = ($event) => width.value = $event),
 					height: unref(codeBlockEditorHeight),
 					"onUpdate:height": _cache[3] || (_cache[3] = ($event) => isRef(codeBlockEditorHeight) ? codeBlockEditorHeight.value = $event : null),
+					"body-style": { padding: "0 16px" },
 					title: __props.content.name ? `${__props.disabled ? "查看" : "编辑"}${__props.content.name}` : "新增代码",
+					"framework-width": frameworkWidth.value,
 					position: unref(boxPosition),
 					"before-close": beforeClose
 				}, {
@@ -187,6 +191,7 @@ var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 					"width",
 					"height",
 					"title",
+					"framework-width",
 					"position"
 				]),
 				(openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(TMagicDialog), {

package/dist/es/components/CodeParams.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { error } from "../utils/logger.js";
-import { MForm } from "@tmagic/form";
+import { MForm, defineFormItem } from "@tmagic/form";
 import { computed, createBlock, defineComponent, openBlock, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/CodeParams.vue?vue&type=script&setup=true&lang.ts
-var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeParams_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCodeParams",
 	__name: "CodeParams",
 	props: {
@@ -19,13 +19,13 @@ var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const props = __props;
 		const emit = __emit;
 		const formRef = useTemplateRef("form");
-		const getFormConfig = (items = []) => [{
+		const getFormConfig = (items = []) => [defineFormItem({
 			type: "fieldset",
 			items,
 			legend: "参数",
-			labelWidth: "120px",
+			labelPosition: "top",
 			name: props.name
-		}];
+		})];
 		const codeParamsConfig = computed(() => getFormConfig(props.paramsConfig.map(({ name, text, extra, ...config }) => {
 			let { type } = config;
 			if (typeof type === "function") type = type(void 0, { model: props.model[props.name] });
@@ -48,7 +48,8 @@ var CodeParams_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		*/
 		const onParamsChangeHandler = async (v, eventData) => {
 			try {
-				emit("change", await formRef.value?.submitForm(true), eventData);
+				const value = await formRef.value?.submitForm(true);
+				emit("change", value, eventData);
 			} catch (e) {
 				error(e);
 			}

package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js

@@ -1,68 +1,37 @@
-import { useServices } from "../hooks/use-services.js";
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
+import { useCompareForm } from "../hooks/use-compare-form.js";
 import { MForm } from "@tmagic/form";
 import { HookType } from "@tmagic/core";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, provide, ref, unref, useTemplateRef, watch, watchEffect } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, unref } from "vue";
 import { isEqual } from "lodash-es";
 //#region packages/editor/src/components/CompareForm.vue?vue&type=script&setup=true&lang.ts
-var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorCompareForm",
 	__name: "CompareForm",
 	props: {
 		value: {},
-		lastValue: {},
 		type: {},
 		category: { default: "node" },
 		dataSourceType: {},
 		labelWidth: { default: "120px" },
 		height: {},
-		extendState: {},
+		size: {},
 		loadConfig: {},
-		services: { default: () => useServices() }
+		services: {},
+		lastValue: {},
+		selfDiffFieldTypes: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
-		const { propsService, dataSourceService, codeBlockService, editorService } = props.services;
-		provide("services", props.services);
-		const config = ref([]);
-		/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
-		const codeOptions = inject("codeOptions", {});
-		/** 将代码块的 content 字段统一成字符串，便于在表单/对比中展示 */
-		const normalizeCodeBlockValue = (v) => {
-			if (!v) return {};
-			const next = { ...v };
-			if (next.content && typeof next.content !== "string") try {
-				next.content = next.content.toString();
-			} catch {
-				next.content = "";
-			}
-			return next;
-		};
-		const currentValues = computed(() => {
-			if (props.category === "code-block") return normalizeCodeBlockValue(props.value);
-			return props.value || {};
-		});
+		const { config, currentValues, wrapperStyle, formContext, loadConfig, formRef, normalizeCodeBlockValue } = useCompareForm(props);
 		const lastValuesProcessed = computed(() => {
 			if (props.category === "code-block") return normalizeCodeBlockValue(props.lastValue);
 			return props.lastValue || {};
 		});
 		/**
-		* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
-		* 这样滚动条会出现在 CompareForm 内部，避免父容器（如 Dialog）自身也产生滚动。
-		*/
-		const wrapperStyle = computed(() => {
-			if (!props.height) return void 0;
-			return {
-				height: props.height,
-				overflow: "auto"
-			};
-		});
-		/**
 		* `code-select` 字段在历史数据中存在两种"语义为空"的形态：
 		* - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
-		* - `{ hookType: HookType.CODE, hookData: [] }`（CodeSelect.vue 在挂载时
-		*   写入的默认结构，参见 packages/editor/src/fields/CodeSelect.vue 中
-		*   `props.model[props.name] = { hookType: HookType.CODE, hookData: [] }`）。
+		* - `{ hookType: HookType.CODE, hookData: [] }`（`normalizeCodeSelectValue`
+		*   写入的默认结构）。
 		*
 		* 直接 `isEqual` 会把两者判为不等，从而在历史对比里对每个未配置过钩子的组件
 		* 都展示一份"差异"，体验很糟糕。这里把它们视为相等，跳过对比。
@@ -80,80 +49,6 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			}
 			return !isEqual(curValue, lastValue);
 		};
-		const removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
-			if (!("type" in item)) return item;
-			if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
-			return {
-				...item,
-				items: item.items.map((tabPane) => {
-					if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
-					return {
-						...tabPane,
-						display: true
-					};
-				})
-			};
-		});
-		/**
-		* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
-		* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
-		*/
-		const defaultLoadConfig = async () => {
-			switch (props.category) {
-				case "node":
-					if (!props.type) return [];
-					return removeStyleDisplayConfig(await propsService.getPropsConfig(props.type, { node: props.value }));
-				case "data-source": return dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
-					...item,
-					active: "fields"
-				} : item);
-				case "code-block": return getCodeBlockFormConfig({
-					paramColConfig: codeBlockService.getParamsColConfig(),
-					isDataSource: () => Boolean(props.dataSourceType),
-					dataSourceType: () => props.dataSourceType,
-					codeOptions,
-					editable: false
-				});
-				default: return [];
-			}
-		};
-		const loadConfig = async () => {
-			if (props.loadConfig) {
-				config.value = await props.loadConfig({
-					category: props.category,
-					type: props.type,
-					dataSourceType: props.dataSourceType,
-					defaultLoadConfig
-				});
-				return;
-			}
-			config.value = await defaultLoadConfig();
-		};
-		watch([
-			() => props.category,
-			() => props.type,
-			() => props.dataSourceType,
-			() => props.loadConfig
-		], () => {
-			loadConfig();
-		}, { immediate: true });
-		const formRef = useTemplateRef("form");
-		/**
-		* 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
-		* 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
-		* 在执行时拿不到 `formState.services` 而报错。
-		*
-		* 与 props-panel/FormPanel.vue 中的注入方式保持一致：
-		* - services：整个 useServices() 返回的服务集合；
-		* - stage：当前 editorService.get('stage') 的最新值。
-		*/
-		const stage = computed(() => editorService.get("stage"));
-		watchEffect(() => {
-			if (formRef.value) {
-				formRef.value.formState.stage = stage.value;
-				formRef.value.formState.services = props.services;
-			}
-		});
 		__expose({
 			form: formRef,
 			config,
@@ -162,25 +57,29 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: "m-editor-compare-form-wrapper",
-				style: normalizeStyle(wrapperStyle.value)
-			}, [config.value.length ? (openBlock(), createBlock(unref(MForm), {
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [unref(config).length ? (openBlock(), createBlock(unref(MForm), {
 				key: 0,
 				ref: "form",
 				class: "m-editor-compare-form",
-				config: config.value,
-				"init-values": currentValues.value,
+				config: unref(config),
+				"init-values": unref(currentValues),
 				"last-values": lastValuesProcessed.value,
 				"is-compare": true,
 				disabled: true,
 				"label-width": __props.labelWidth,
-				"extend-state": __props.extendState,
-				"show-diff": showDiff
+				context: unref(formContext),
+				"show-diff": showDiff,
+				"self-diff-field-types": __props.selfDiffFieldTypes,
+				size: __props.size
 			}, null, 8, [
 				"config",
 				"init-values",
 				"last-values",
 				"label-width",
-				"extend-state"
+				"context",
+				"self-diff-field-types",
+				"size"
 			])) : createCommentVNode("v-if", true)], 4);
 		};
 	}

package/dist/es/components/ContentMenu.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import ToolButton_default from "./ToolButton.js";
 import { useThemeClass, useZIndex } from "@tmagic/design";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, unref, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
 //#region packages/editor/src/components/ContentMenu.vue?vue&type=script&setup=true&lang.ts
-var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ContentMenu_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorContentMenu",
 	__name: "ContentMenu",
 	props: {
@@ -66,15 +66,29 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (contains(target)) return;
 			hide();
 		};
+		const fixPosition = () => {
+			const menu = menuEl.value;
+			if (!menu || !visible.value) return;
+			const menuHeight = menu.clientHeight;
+			const menuWidth = menu.clientWidth;
+			let { top, left } = menuPosition.value;
+			if (top + menuHeight > document.body.clientHeight) top = Math.max(0, document.body.clientHeight - menuHeight);
+			if (left + menuWidth > document.body.clientWidth) left = Math.max(0, document.body.clientWidth - menuWidth);
+			if (top !== menuPosition.value.top || left !== menuPosition.value.left) menuPosition.value = {
+				top,
+				left
+			};
+		};
 		const setPosition = (e) => {
-			const menuHeight = menuEl.value?.clientHeight || 0;
-			let top = e.clientY;
-			if (menuHeight + e.clientY > document.body.clientHeight) top = document.body.clientHeight - menuHeight;
 			menuPosition.value = {
-				top,
+				top: e.clientY,
 				left: e.clientX
 			};
+			fixPosition();
 		};
+		const resizeObserver = new ResizeObserver(() => {
+			fixPosition();
+		});
 		const show = (e) => {
 			visible.value = true;
 			nextTick(() => {
@@ -103,10 +117,12 @@ var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			emit("mouseenter");
 		};
 		onMounted(() => {
+			if (menuEl.value) resizeObserver.observe(menuEl.value);
 			if (props.isSubMenu) return;
 			globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
 		});
 		onBeforeUnmount(() => {
+			resizeObserver.disconnect();
 			if (props.isSubMenu) return;
 			globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
 		});

package/dist/es/components/FloatingBox.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,6 @@
-import { useServices } from "../hooks/use-services.js";
 import Icon_default from "./Icon.js";
 import { TMagicButton, useThemeClass, useZIndex } from "@tmagic/design";
-import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
 import { Close } from "@element-plus/icons-vue";
 import VanillaMoveable from "moveable";
 //#region packages/editor/src/components/FloatingBox.vue?vue&type=script&setup=true&lang.ts
@@ -9,14 +8,17 @@ var _hoisted_1 = {
 	ref: "title",
 	class: "m-editor-float-box-title"
 };
-var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FloatingBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FloatingBox",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		position: { default: () => ({
 			left: 0,
 			top: 0
 		}) },
 		title: { default: "" },
+		bodyStyle: {},
+		initialStyle: { default: () => ({}) },
+		frameworkWidth: { default: 0 },
 		beforeClose: {}
 	}, {
 		"width": { default: 0 },
@@ -54,19 +56,51 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			if (targetEl.value) return targetEl.value.clientHeight - titleHeight.value;
 			return "auto";
 		});
-		const { uiService } = useServices();
-		const frameworkWidth = computed(() => uiService.get("frameworkRect").width || 0);
 		const style = computed(() => {
 			let { left } = props.position;
-			if (width.value) left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+			const frameworkWidth = props.frameworkWidth || globalThis.window?.innerWidth || 0;
+			if (width.value && frameworkWidth) left = left + width.value > frameworkWidth ? frameworkWidth - width.value : left;
 			return {
 				left: `${left}px`,
 				top: `${props.position.top}px`,
 				width: width.value ? `${width.value}px` : "auto",
-				height: height.value ? `${height.value}px` : "auto"
+				height: height.value ? `${height.value}px` : "auto",
+				...props.initialStyle
 			};
 		});
 		let moveable = null;
+		let dragMask = null;
+		let dragMaskVisible = false;
+		const bindDragMaskSafety = () => {
+			globalThis.window?.addEventListener("pointerup", hideDragMask, true);
+			globalThis.window?.addEventListener("blur", hideDragMask);
+			globalThis.document?.addEventListener("visibilitychange", hideDragMask);
+		};
+		const unbindDragMaskSafety = () => {
+			globalThis.window?.removeEventListener("pointerup", hideDragMask, true);
+			globalThis.window?.removeEventListener("blur", hideDragMask);
+			globalThis.document?.removeEventListener("visibilitychange", hideDragMask);
+		};
+		const showDragMask = () => {
+			if (dragMaskVisible) return;
+			if (!dragMask) {
+				dragMask = globalThis.document.createElement("div");
+				dragMask.className = "m-editor-float-box-drag-mask";
+			}
+			globalThis.document.body.appendChild(dragMask);
+			dragMaskVisible = true;
+			bindDragMaskSafety();
+			const setMaskZIndex = () => {
+				if (dragMask) dragMask.style.zIndex = `${curZIndex.value + 1}`;
+			};
+			setMaskZIndex();
+			nextTick(setMaskZIndex);
+		};
+		const hideDragMask = () => {
+			unbindDragMaskSafety();
+			dragMask?.parentNode?.removeChild(dragMask);
+			dragMaskVisible = false;
+		};
 		const initMoveable = () => {
 			moveable = new VanillaMoveable(globalThis.document.body, {
 				className: "m-editor-floating-box-moveable",
@@ -89,6 +123,10 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					position: "css"
 				}
 			});
+			moveable.on("drag", showDragMask);
+			moveable.on("resize", showDragMask);
+			moveable.on("dragEnd", hideDragMask);
+			moveable.on("resizeEnd", hideDragMask);
 			moveable.on("drag", (e) => {
 				e.target.style.transform = e.transform;
 			});
@@ -101,6 +139,7 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			});
 		};
 		const destroyMoveable = () => {
+			hideDragMask();
 			moveable?.destroy();
 			moveable = null;
 		};
@@ -114,7 +153,10 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 					height.value = targetRect.height;
 					initMoveable();
 				}
-				if (titleEl.value) titleHeight.value = titleEl.value.getBoundingClientRect().height;
+				if (titleEl.value) {
+					const titleRect = titleEl.value.getBoundingClientRect();
+					titleHeight.value = titleRect.height;
+				}
 			} else destroyMoveable();
 		}, { immediate: true });
 		onBeforeUnmount(() => {
@@ -140,15 +182,16 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			return visible.value ? (openBlock(), createBlock(Teleport, {
 				key: 0,
 				to: "body"
-			}, [createElementVNode("div", {
+			}, [createElementVNode("div", mergeProps({
 				ref: "target",
-				class: normalizeClass(["m-editor-float-box", unref(themeClass)]),
-				style: normalizeStyle({
+				class: ["m-editor-float-box", unref(themeClass)]
+			}, _ctx.$attrs, {
+				style: {
 					...style.value,
 					zIndex: curZIndex.value
-				}),
+				},
 				onMousedown: nextZIndex
-			}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
+			}), [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
 				link: "",
 				size: "small",
 				onClick: closeHandler
@@ -157,8 +200,11 @@ var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				_: 1
 			})])], 512), createElementVNode("div", {
 				class: "m-editor-float-box-body",
-				style: normalizeStyle({ height: `${bodyHeight.value}px` })
-			}, [renderSlot(_ctx.$slots, "body")], 4)], 38)])) : createCommentVNode("v-if", true);
+				style: normalizeStyle({
+					height: `${bodyHeight.value}px`,
+					...__props.bodyStyle
+				})
+			}, [renderSlot(_ctx.$slots, "body")], 4)], 16)])) : createCommentVNode("v-if", true);
 		};
 	}
 });

package/dist/es/components/Icon.vue_vue_type_script_setup_true_lang.js

@@ -3,7 +3,7 @@ import { createBlock, createElementBlock, createElementVNode, createVNode, defin
 import { Edit } from "@element-plus/icons-vue";
 //#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["src"];
-var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorIcon",
 	__name: "Icon",
 	props: { icon: {} },

package/dist/es/components/Resizer.vue_vue_type_script_setup_true_lang.js

@@ -1,13 +1,14 @@
 import { useGetSo } from "../hooks/use-getso.js";
 import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, useTemplateRef } from "vue";
 //#region packages/editor/src/components/Resizer.vue?vue&type=script&setup=true&lang.ts
-var Resizer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Resizer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorResizer",
 	__name: "Resizer",
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const { isDragging } = useGetSo(useTemplateRef("target"), emit);
+		const targetEl = useTemplateRef("target");
+		const { isDragging } = useGetSo(targetEl, emit);
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", {
 				ref: "target",

package/dist/es/components/ScrollBar.js

@@ -1,5 +1,4 @@
 import ScrollBar_vue_vue_type_script_setup_true_lang_default from "./ScrollBar.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                          */
 //#region packages/editor/src/components/ScrollBar.vue
 var ScrollBar_default = ScrollBar_vue_vue_type_script_setup_true_lang_default;
 //#endregion