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

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.27",
+  "version": "1.8.0-beta.29",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -61,27 +61,27 @@
     "keycon": "^1.4.0",
     "lodash-es": "^4.18.1",
     "moveable": "^0.53.0",
-    "serialize-javascript": "^7.0.7",
+    "serialize-javascript": "^7.1.1",
     "sortablejs": "^1.15.7",
-    "@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"
+    "@tmagic/design": "1.8.0-beta.29",
+    "@tmagic/form": "1.8.0-beta.29",
+    "@tmagic/stage": "1.8.0-beta.29",
+    "@tmagic/table": "1.8.0-beta.29",
+    "@tmagic/utils": "1.8.0-beta.29"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
     "@types/lodash-es": "^4.17.12",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sortablejs": "^1.15.9",
-    "@vue/test-utils": "^2.4.11"
+    "@vue/test-utils": "^2.5.1"
   },
   "peerDependencies": {
     "monaco-editor": "^0.55.1 ",
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
-    "vue": "^3.5.41",
-    "@tmagic/core": "1.8.0-beta.27"
+    "vue": "^3.5.43",
+    "@tmagic/core": "1.8.0-beta.29"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -118,7 +118,7 @@ const emit = defineEmits<{
   change: [v: string[]];
 }>();
 
-const modelValue = defineModel<string[] | any>('modelValue', { default: [] });
+const modelValue = defineModel<string[] | any>('modelValue', { default: () => [] });
 
 const optionComponent = getDesignConfig('components')?.option;
 

package/src/fields/configs/stickyAddButton.ts

@@ -17,12 +17,13 @@
  */
 
 /**
- * 属性面板列表字段共用的吸底全宽「添加」按钮，展开到 group-list 配置上。
+ * 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
  *
- * 吸底按钮会盖住列表底部，新增的项必须同时滚进视口才看得见，两者一起给出避免漏配。
+ * 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
  */
 export const stickyAddButton = (text: string) => ({
   scrollLastItemIntoView: true as const,
+  header: { sticky: true as const },
   addButtonConfig: {
     sticky: true as const,
     text,

package/src/initService.ts

@@ -427,12 +427,26 @@ export const initServiceEvents = (
     });
   };
 
+  /**
+   * root 是否已经不是编辑器当前的 root。
+   *
+   * `editorService.set('root', v)` 是同步赋值后再派发 `root-change`，因此派发那一刻 `v` 一定
+   * 就是当前 root；但处理 `root-change` 要等 stage / runtime / 依赖收集等异步过程，期间 root
+   * 可能被新的一次整体替换（外部重设 DSL、更新 root 节点、源码保存等）顶掉，此时手上的 `v`
+   * 已是过期快照，继续用它刷画布或回写给外部都会与新 root 互相覆盖。
+   */
+  const isStaleRoot = (value: MApp | null) => toRaw(editorService.get('root')) !== toRaw(value);
+
   const updateStageDsl = async (value: MApp | null) => {
     const stage = await getStage();
 
     const runtime = await stage.renderer?.getRuntime();
     const app = await getTMagicApp();
 
+    // 等 stage / runtime 就绪期间 root 已被替换：新 root 的刷新可能已经完成，
+    // 再把旧 dsl 推给 runtime 会让画布回退到旧内容
+    if (isStaleRoot(value)) return;
+
     if (!app?.dataSourceManager) {
       runtime?.updateRootConfig?.(cloneDeep(toRaw(value))!);
     }
@@ -449,6 +463,8 @@ export const initServiceEvents = (
 
       await (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value));
 
+      if (isStaleRoot(value)) return;
+
       const dsl = cloneDeep(toRaw(value));
       if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) {
         for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) {
@@ -466,7 +482,7 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const rootChangeHandler = (value: MApp | null, preValue?: MApp | null) => {
+  const rootChangeHandler = (value: MApp | null) => {
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -509,7 +525,13 @@ export const initServiceEvents = (
         editorService.set('page', null);
       }
 
-      if (toRaw(value) !== toRaw(preValue)) {
+      // 上面的 select 是异步的，期间 root 可能已被替换，过期快照不能再回写给外部：
+      // 两次整体替换各自持有一个快照时，回写会把对方的 root 顶掉，外部 modelValue 变化又会
+      // 重新 set root，两条链路无休止地交替下去（表现为编辑器卡死）
+      if (isStaleRoot(value)) return;
+
+      // 外部已经持有这个 root（如本次变化就是 modelValue 传进来的）时无需回写
+      if (toRaw(props.modelValue) !== toRaw(value)) {
         emit('update:modelValue', value);
       }
     })();

package/src/layouts/history-list/useHistoryRevert.ts

@@ -204,10 +204,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
    * 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
    * 用户取消时返回 false，调用方据此中止回滚。
    */
-  const confirmRevert = (): Promise<boolean> =>
-    confirmHistoryAction(
-      '确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。',
-    );
+  const confirmRevert = (): Promise<boolean> => confirmHistoryAction('确定回滚该步骤吗？');
 
   /**
    * 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，

package/src/layouts/workspace/viewer/Stage.vue

@@ -56,7 +56,14 @@ import { calcValueByFontsize, getIdFromEl } from '@tmagic/utils';
 import ScrollViewer from '@editor/components/ScrollViewer.vue';
 import { useServices } from '@editor/hooks';
 import { useStage } from '@editor/hooks/use-stage';
-import type { CustomContentMenuFunction, MenuButton, MenuComponent, StageOptions, StageSlots } from '@editor/type';
+import type {
+  AddMNode,
+  CustomContentMenuFunction,
+  MenuButton,
+  MenuComponent,
+  StageOptions,
+  StageSlots,
+} from '@editor/type';
 import { DragType, Layout } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
@@ -270,11 +277,56 @@ const resizeObserver = new globalThis.ResizeObserver((entries) => {
   }
 });
 
+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: ReturnType<typeof setTimeout> | undefined;
+
+const documentDragStartHandler = () => {
+  internalDragSession += 1;
+  isInternalDrag = true;
+  if (clearInternalDragTimer !== undefined) {
+    globalThis.clearTimeout(clearInternalDragTimer);
+    clearInternalDragTimer = undefined;
+  }
+};
+
+const documentDragEndHandler = () => {
+  // WebKit 可能先 dragend 再 drop；推迟到下一个宏任务再清标志，
+  // 让同一次拖拽的 drop 仍能消费。session 防止误清掉下一次 dragstart。
+  const session = internalDragSession;
+  if (clearInternalDragTimer !== undefined) {
+    globalThis.clearTimeout(clearInternalDragTimer);
+  }
+  clearInternalDragTimer = globalThis.setTimeout(() => {
+    clearInternalDragTimer = undefined;
+    if (session === internalDragSession) {
+      isInternalDrag = false;
+    }
+  }, 0);
+};
+
 onMounted(() => {
   if (stageWrapRef.value?.container) {
     resizeObserver.observe(stageWrapRef.value.container);
     keybindingService.registerEl(KeyBindingContainerKey.STAGE, stageWrapRef.value.container);
   }
+
+  // 用捕获阶段监听，确保拖拽源自身的 dragstart 无论是否阻止冒泡都能被记录
+  globalThis.document.addEventListener('dragstart', documentDragStartHandler, true);
+  globalThis.document.addEventListener('dragend', documentDragEndHandler, true);
 });
 
 onBeforeUnmount(() => {
@@ -283,9 +335,15 @@ onBeforeUnmount(() => {
   resizeObserver.disconnect();
   editorService.set('stage', null);
   keybindingService.unregisterEl('stage');
-});
 
-const parseDSL = getEditorConfig('parseDSL');
+  if (clearInternalDragTimer !== undefined) {
+    globalThis.clearTimeout(clearInternalDragTimer);
+    clearInternalDragTimer = undefined;
+  }
+
+  globalThis.document.removeEventListener('dragstart', documentDragStartHandler, true);
+  globalThis.document.removeEventListener('dragend', documentDragEndHandler, true);
+});
 
 const contextmenuHandler = (e: MouseEvent) => {
   e.preventDefault();
@@ -299,15 +357,27 @@ const dragoverHandler = (e: DragEvent) => {
 };
 
 const dropHandler = async (e: DragEvent) => {
+  // 画布上的任意 drop 都消费本次内部拖拽标记（含空 text/json），避免残留到下一次 drop
+  const allowed = isInternalDrag;
+  isInternalDrag = false;
+
   if (!e.dataTransfer) return;
 
   const data = e.dataTransfer.getData('text/json');
 
-  if (!data) return;
+  // 外部源投递的拖拽数据不可信，不能交给 parseDSL(默认实现为 eval)
+  if (!data || !allowed) return;
+
+  let config: { dragType?: string; data?: AddMNode } | undefined;
+  try {
+    config = parseDSL(`(${data})`);
+  } catch {
+    return;
+  }
 
-  const config = parseDSL(`(${data})`);
+  if (!config || config.dragType !== DragType.COMPONENT_LIST || !config.data) return;
 
-  if (!config || config.dragType !== DragType.COMPONENT_LIST) return;
+  const dragData = config.data;
 
   e.preventDefault();
 
@@ -349,7 +419,7 @@ const dropHandler = async (e: DragEvent) => {
 
     const containerRect = stageContainerEl.value.getBoundingClientRect();
     const { scrollTop, scrollLeft } = stage.mask!;
-    const { style = {} } = config.data;
+    const { style = {} } = dragData;
 
     let top = 0;
     let left = 0;
@@ -371,16 +441,16 @@ const dropHandler = async (e: DragEvent) => {
       }
     }
 
-    config.data.style = {
+    dragData.style = {
       ...style,
       position,
       top: calcValueByFontsize(doc, top / zoom.value),
       left: calcValueByFontsize(doc, left / zoom.value),
     };
 
-    config.data.inputEvent = e;
+    dragData.inputEvent = e;
 
-    editorService.add(config.data, parent, { historySource: 'component-panel' });
+    editorService.add(dragData, parent, { historySource: 'component-panel' });
   }
 };
 </script>

package/types/headless.d.ts

@@ -13,6 +13,5 @@ import { HeadlessFieldOptions } from "@tmagic/form/headless";
  * innerConfig 返回的 config / model / prop 与组件模板里传给内部容器的那一组保持一一对应，
  * 且配置本身与组件共用同一份工厂（`fields/configs/`）。
  */
-declare const editorFields: Record<string, HeadlessFieldOptions>;
-//#endregion
-export { editorFields };
+export declare const editorFields: Record<string, HeadlessFieldOptions>;
+//#endregion