@tmagic/editor 1.6.0-beta.2 → 1.6.0-beta.4

package/dist/tmagic-editor.js

@@ -7,7 +7,7 @@ export { default as formPlugin } from '@tmagic/form';
 import tablePlugin__default, { MagicTable } from '@tmagic/table';
 export * from '@tmagic/table';
 export { default as tablePlugin } from '@tmagic/table';
-import { defineComponent, createBlock, createElementBlock, openBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, Teleport, normalizeStyle, createCommentVNode, nextTick, computed, reactive, resolveComponent, inject, Fragment, renderList, mergeProps, mergeModels, useModel, provide, renderSlot, toDisplayString, shallowReactive, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vModelText, vShow, shallowRef, withModifiers, toHandlers, createSlots, getCurrentInstance, onUnmounted, Transition, resolveDirective, mergeDefaults } from 'vue';
+import { defineComponent, createBlock, createElementBlock, openBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, resolveDynamicComponent, toRaw, ref, useTemplateRef, watch, onMounted, onBeforeUnmount, onUnmounted, Teleport, normalizeStyle, createCommentVNode, nextTick, computed, reactive, resolveComponent, inject, Fragment, renderList, mergeProps, mergeModels, useModel, provide, renderSlot, toDisplayString, shallowReactive, createTextVNode, isRef, createStaticVNode, watchEffect, markRaw, withDirectives, vModelText, vShow, shallowRef, withModifiers, toHandlers, createSlots, getCurrentInstance, Transition, resolveDirective, mergeDefaults } from 'vue';
 import { Edit, FullScreen, View, Close, Coin, Delete, Plus, Grid, ArrowDown, ArrowLeftBold, ArrowRightBold, Files, Search, DocumentCopy, CaretBottom, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Document, Sugar, ArrowRight, CopyDocument, Hide, EditPen, List, Goods, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
 import { throttle, isEmpty, isObject, cloneDeep, mergeWith, uniq, get, map, has, pick, keys } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -119,7 +119,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
     const props = __props;
     const emit = __emit;
     const toString = (v, language) => {
-      let value = "";
+      let value;
       if (typeof v !== "string") {
         if (language === "json") {
           value = JSON.stringify(v, null, 2);
@@ -162,14 +162,35 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
       if (props.type === "diff") {
         const originalModel = monaco.editor.createModel(values.value, "text/javascript");
         const modifiedModel = monaco.editor.createModel(toString(m, props.language), "text/javascript");
-        return vsDiffEditor?.setModel({
+        const position2 = vsDiffEditor?.getPosition();
+        const result2 = vsDiffEditor?.setModel({
           original: originalModel,
           modified: modifiedModel
         });
+        if (position2) {
+          vsDiffEditor?.setPosition(position2);
+          vsDiffEditor?.focus();
+        }
+        return result2;
       }
-      return vsEditor?.setValue(values.value);
+      const position = vsEditor?.getPosition();
+      const result = vsEditor?.setValue(values.value);
+      if (position) {
+        vsEditor?.setPosition(position);
+        vsEditor?.focus();
+      }
+      return result;
     };
     const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
+    const handleKeyDown = (e) => {
+      if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+        e.preventDefault();
+        e.stopPropagation();
+        const newValue = getEditorValue();
+        values.value = newValue;
+        emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
+      }
+    };
     const init = async () => {
       if (!codeEditorEl.value) return;
       if (codeEditorEl.value.clientHeight === 0) {
@@ -188,15 +209,7 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
       }
       setEditorValue(props.initValues, props.modifiedValues);
       emit("initd", vsEditor);
-      codeEditorEl.value.addEventListener("keydown", (e) => {
-        if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
-          e.preventDefault();
-          e.stopPropagation();
-          const newValue = getEditorValue();
-          values.value = newValue;
-          emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
-        }
-      });
+      codeEditorEl.value.addEventListener("keydown", handleKeyDown);
       if (props.type !== "diff" && props.autoSave) {
         vsEditor?.onDidBlurEditorWidget(() => {
           const newValue = getEditorValue();
@@ -242,6 +255,9 @@ const _sfc_main$1q = /* @__PURE__ */ defineComponent({
       vsEditor = null;
       vsDiffEditor = null;
     });
+    onUnmounted(() => {
+      codeEditorEl.value?.removeEventListener("keydown", handleKeyDown);
+    });
     const fullScreen = ref(false);
     const fullScreenHandler = () => {
       fullScreen.value = !fullScreen.value;
@@ -1233,7 +1249,9 @@ class BaseService extends EventEmitter {
   }
   usePlugin(options) {
     for (const [methodName2, method] of Object.entries(options)) {
-      if (typeof method === "function") this.pluginOptionsList[methodName2].push(method);
+      if (typeof method === "function" && !this.pluginOptionsList[methodName2].includes(method)) {
+        this.pluginOptionsList[methodName2].push(method);
+      }
     }
   }
   removePlugin(options) {
@@ -16028,6 +16046,28 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       });
     }
   );
+  watch(
+    () => props.runtimeUrl,
+    (url) => {
+      if (!url) {
+        return;
+      }
+      const stage = editorService.get("stage");
+      if (!stage) {
+        return;
+      }
+      stage.reloadIframe(url);
+      stage.renderer?.once("runtime-ready", (runtime) => {
+        runtime.updateRootConfig?.(cloneDeep(toRaw(editorService.get("root"))));
+        const page = editorService.get("page");
+        const node = editorService.get("node");
+        page?.id && runtime?.updatePageId?.(page.id);
+        setTimeout(() => {
+          node && stage?.select(toRaw(node.id));
+        });
+      });
+    }
+  );
   const getStage = () => {
     const stage = editorService.get("stage");
     if (stage) {
@@ -16097,7 +16137,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       delete value.dataSourceDeps;
       delete value.dataSourceCondDeps;
     }
-    const handler = async () => {
+    (async () => {
       const nodeId = editorService.get("node")?.id || props.defaultSelected;
       let node;
       if (nodeId) {
@@ -16115,8 +16155,7 @@ const initServiceEvents = (props, emit, { editorService, codeBlockService, dataS
       if (toRaw(value) !== toRaw(preValue)) {
         emit("update:modelValue", value);
       }
-    };
-    handler();
+    })();
   };
   const nodeAddHandler = (nodes) => {
     collectIdle(nodes, true).then(() => {
@@ -16436,19 +16475,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabledMultiSelect: props.disabledMultiSelect
     };
     stageOverlayService.set("stageOptions", stageOptions);
-    watch(
-      () => props.runtimeUrl,
-      (url) => {
-        if (!url) {
-          return;
-        }
-        const stage = editorService.get("stage");
-        if (!stage) {
-          return;
-        }
-        stage.reloadIframe(url);
-      }
-    );
     provide("services", services);
     provide("codeOptions", props.codeOptions);
     provide("stageOptions", stageOptions);

package/dist/tmagic-editor.umd.cjs

@@ -4912,7 +4912,7 @@
       const props = __props;
       const emit = __emit;
       const toString = (v, language) => {
-        let value = "";
+        let value;
         if (typeof v !== "string") {
           if (language === "json") {
             value = JSON.stringify(v, null, 2);
@@ -4955,14 +4955,35 @@
         if (props.type === "diff") {
           const originalModel = monaco__namespace.editor.createModel(values.value, "text/javascript");
           const modifiedModel = monaco__namespace.editor.createModel(toString(m, props.language), "text/javascript");
-          return vsDiffEditor?.setModel({
+          const position2 = vsDiffEditor?.getPosition();
+          const result2 = vsDiffEditor?.setModel({
             original: originalModel,
             modified: modifiedModel
           });
+          if (position2) {
+            vsDiffEditor?.setPosition(position2);
+            vsDiffEditor?.focus();
+          }
+          return result2;
         }
-        return vsEditor?.setValue(values.value);
+        const position = vsEditor?.getPosition();
+        const result = vsEditor?.setValue(values.value);
+        if (position) {
+          vsEditor?.setPosition(position);
+          vsEditor?.focus();
+        }
+        return result;
       };
       const getEditorValue = () => (props.type === "diff" ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || "";
+      const handleKeyDown = (e) => {
+        if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+          e.preventDefault();
+          e.stopPropagation();
+          const newValue = getEditorValue();
+          values.value = newValue;
+          emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
+        }
+      };
       const init = async () => {
         if (!codeEditorEl.value) return;
         if (codeEditorEl.value.clientHeight === 0) {
@@ -4981,15 +5002,7 @@
         }
         setEditorValue(props.initValues, props.modifiedValues);
         emit("initd", vsEditor);
-        codeEditorEl.value.addEventListener("keydown", (e) => {
-          if (e.keyCode === 83 && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
-            e.preventDefault();
-            e.stopPropagation();
-            const newValue = getEditorValue();
-            values.value = newValue;
-            emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
-          }
-        });
+        codeEditorEl.value.addEventListener("keydown", handleKeyDown);
         if (props.type !== "diff" && props.autoSave) {
           vsEditor?.onDidBlurEditorWidget(() => {
             const newValue = getEditorValue();
@@ -5035,6 +5048,9 @@
         vsEditor = null;
         vsDiffEditor = null;
       });
+      vue.onUnmounted(() => {
+        codeEditorEl.value?.removeEventListener("keydown", handleKeyDown);
+      });
       const fullScreen = vue.ref(false);
       const fullScreenHandler = () => {
         fullScreen.value = !fullScreen.value;
@@ -6026,7 +6042,9 @@
     }
     usePlugin(options) {
       for (const [methodName2, method] of Object.entries(options)) {
-        if (typeof method === "function") this.pluginOptionsList[methodName2].push(method);
+        if (typeof method === "function" && !this.pluginOptionsList[methodName2].includes(method)) {
+          this.pluginOptionsList[methodName2].push(method);
+        }
       }
     }
     removePlugin(options) {
@@ -20821,6 +20839,28 @@
         });
       }
     );
+    vue.watch(
+      () => props.runtimeUrl,
+      (url) => {
+        if (!url) {
+          return;
+        }
+        const stage = editorService.get("stage");
+        if (!stage) {
+          return;
+        }
+        stage.reloadIframe(url);
+        stage.renderer?.once("runtime-ready", (runtime) => {
+          runtime.updateRootConfig?.(cloneDeep(vue.toRaw(editorService.get("root"))));
+          const page = editorService.get("page");
+          const node = editorService.get("node");
+          page?.id && runtime?.updatePageId?.(page.id);
+          setTimeout(() => {
+            node && stage?.select(vue.toRaw(node.id));
+          });
+        });
+      }
+    );
     const getStage = () => {
       const stage = editorService.get("stage");
       if (stage) {
@@ -20890,7 +20930,7 @@
         delete value.dataSourceDeps;
         delete value.dataSourceCondDeps;
       }
-      const handler = async () => {
+      (async () => {
         const nodeId = editorService.get("node")?.id || props.defaultSelected;
         let node;
         if (nodeId) {
@@ -20908,8 +20948,7 @@
         if (vue.toRaw(value) !== vue.toRaw(preValue)) {
           emit("update:modelValue", value);
         }
-      };
-      handler();
+      })();
     };
     const nodeAddHandler = (nodes) => {
       collectIdle(nodes, true).then(() => {
@@ -21229,19 +21268,6 @@
         disabledMultiSelect: props.disabledMultiSelect
       };
       stageOverlayService.set("stageOptions", stageOptions);
-      vue.watch(
-        () => props.runtimeUrl,
-        (url) => {
-          if (!url) {
-            return;
-          }
-          const stage = editorService.get("stage");
-          if (!stage) {
-            return;
-          }
-          stage.reloadIframe(url);
-        }
-      );
       vue.provide("services", services);
       vue.provide("codeOptions", props.codeOptions);
       vue.provide("stageOptions", stageOptions);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.0-beta.2",
+  "version": "1.6.0-beta.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.2",
     "sortablejs": "^1.15.6",
-    "@tmagic/form": "1.6.0-beta.2",
-    "@tmagic/design": "1.6.0-beta.2",
-    "@tmagic/stage": "1.6.0-beta.2",
-    "@tmagic/table": "1.6.0-beta.2",
-    "@tmagic/utils": "1.6.0-beta.2"
+    "@tmagic/design": "1.6.0-beta.4",
+    "@tmagic/stage": "1.6.0-beta.4",
+    "@tmagic/table": "1.6.0-beta.4",
+    "@tmagic/form": "1.6.0-beta.4",
+    "@tmagic/utils": "1.6.0-beta.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.17",
-    "@tmagic/core": "1.6.0-beta.2"
+    "@tmagic/core": "1.6.0-beta.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/Editor.vue

@@ -129,7 +129,7 @@
 <script lang="ts" setup>
 import { EventEmitter } from 'events';
 
-import { provide, watch } from 'vue';
+import { provide } from 'vue';
 
 import type { MApp } from '@tmagic/core';
 
@@ -211,22 +211,6 @@ const stageOptions: StageOptions = {
 
 stageOverlayService.set('stageOptions', stageOptions);
 
-watch(
-  () => props.runtimeUrl,
-  (url) => {
-    if (!url) {
-      return;
-    }
-
-    const stage = editorService.get('stage');
-    if (!stage) {
-      return;
-    }
-
-    stage.reloadIframe(url);
-  },
-);
-
 provide('services', services);
 
 provide('codeOptions', props.codeOptions);

package/src/initService.ts

@@ -347,6 +347,32 @@ export const initServiceEvents = (
     },
   );
 
+  watch(
+    () => props.runtimeUrl,
+    (url) => {
+      if (!url) {
+        return;
+      }
+
+      const stage = editorService.get('stage');
+      if (!stage) {
+        return;
+      }
+
+      stage.reloadIframe(url);
+
+      stage.renderer?.once('runtime-ready', (runtime) => {
+        runtime.updateRootConfig?.(cloneDeep(toRaw(editorService.get('root')))!);
+        const page = editorService.get('page');
+        const node = editorService.get('node');
+        page?.id && runtime?.updatePageId?.(page.id);
+        setTimeout(() => {
+          node && stage?.select(toRaw(node.id));
+        });
+      });
+    },
+  );
+
   const getStage = (): Promise<StageCore> => {
     const stage = editorService.get('stage');
     if (stage) {
@@ -434,7 +460,7 @@ export const initServiceEvents = (
       delete value.dataSourceCondDeps;
     }
 
-    const handler = async () => {
+    (async () => {
       const nodeId = editorService.get('node')?.id || props.defaultSelected;
       let node;
       if (nodeId) {
@@ -453,9 +479,7 @@ export const initServiceEvents = (
       if (toRaw(value) !== toRaw(preValue)) {
         emit('update:modelValue', value);
       }
-    };
-
-    handler();
+    })();
   };
 
   // 新增节点，收集依赖

package/src/layouts/CodeEditor.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -62,7 +62,7 @@ const props = withDefaults(
 const emit = defineEmits(['initd', 'save']);
 
 const toString = (v: string | any, language: string): string => {
-  let value = '';
+  let value: string;
   if (typeof v !== 'string') {
     if (language === 'json') {
       value = JSON.stringify(v, null, 2);
@@ -113,19 +113,40 @@ const setEditorValue = (v: string | any, m: string | any) => {
   if (props.type === 'diff') {
     const originalModel = monaco.editor.createModel(values.value, 'text/javascript');
     const modifiedModel = monaco.editor.createModel(toString(m, props.language), 'text/javascript');
-
-    return vsDiffEditor?.setModel({
+    const position = vsDiffEditor?.getPosition();
+    const result = vsDiffEditor?.setModel({
       original: originalModel,
       modified: modifiedModel,
     });
+    if (position) {
+      vsDiffEditor?.setPosition(position);
+      vsDiffEditor?.focus();
+    }
+    return result;
   }
-
-  return vsEditor?.setValue(values.value);
+  // 保存当前光标位置
+  const position = vsEditor?.getPosition();
+  const result = vsEditor?.setValue(values.value);
+  // 恢复光标位置
+  if (position) {
+    vsEditor?.setPosition(position);
+    vsEditor?.focus();
+  }
+  return result;
 };
 
 const getEditorValue = () =>
   (props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue()) || '';
 
+const handleKeyDown = (e: KeyboardEvent) => {
+  if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
+    e.preventDefault();
+    e.stopPropagation();
+    const newValue = getEditorValue();
+    values.value = newValue;
+    emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
+  }
+};
 const init = async () => {
   if (!codeEditorEl.value) return;
 
@@ -149,16 +170,7 @@ const init = async () => {
   setEditorValue(props.initValues, props.modifiedValues);
 
   emit('initd', vsEditor);
-
-  codeEditorEl.value.addEventListener('keydown', (e) => {
-    if (e.keyCode === 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)) {
-      e.preventDefault();
-      e.stopPropagation();
-      const newValue = getEditorValue();
-      values.value = newValue;
-      emit('save', props.parse ? parseCode(newValue, props.language) : newValue);
-    }
-  });
+  codeEditorEl.value.addEventListener('keydown', handleKeyDown);
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
@@ -214,7 +226,9 @@ onBeforeUnmount(() => {
   vsEditor = null;
   vsDiffEditor = null;
 });
-
+onUnmounted(() => {
+  codeEditorEl.value?.removeEventListener('keydown', handleKeyDown);
+});
 const fullScreen = ref(false);
 const fullScreenHandler = () => {
   fullScreen.value = !fullScreen.value;

package/src/services/BaseService.ts

@@ -206,7 +206,9 @@ export default class extends EventEmitter {
 
   public usePlugin(options: Record<string, Function>) {
     for (const [methodName, method] of Object.entries(options)) {
-      if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
+      if (typeof method === 'function' && !this.pluginOptionsList[methodName].includes(method)) {
+        this.pluginOptionsList[methodName].push(method);
+      }
     }
   }