@tmagic/editor 1.2.0-beta.8 → 1.2.0-beta.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.8",
+  "version": "1.2.0-beta.9",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.8",
-    "@tmagic/design": "1.2.0-beta.8",
-    "@tmagic/form": "1.2.0-beta.8",
-    "@tmagic/schema": "1.2.0-beta.8",
-    "@tmagic/stage": "1.2.0-beta.8",
-    "@tmagic/utils": "1.2.0-beta.8",
+    "@tmagic/core": "1.2.0-beta.9",
+    "@tmagic/design": "1.2.0-beta.9",
+    "@tmagic/form": "1.2.0-beta.9",
+    "@tmagic/schema": "1.2.0-beta.9",
+    "@tmagic/stage": "1.2.0-beta.9",
+    "@tmagic/utils": "1.2.0-beta.9",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.8",
-    "@tmagic/form": "1.2.0-beta.8",
+    "@tmagic/design": "1.2.0-beta.9",
+    "@tmagic/form": "1.2.0-beta.9",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/components/ContentMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
       <ToolButton
         v-for="(item, index) in menuData"

package/src/fields/CodeSelect.vue

@@ -33,16 +33,16 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineEmits, defineProps, inject, ref, watch, watchEffect } from 'vue';
-import { cloneDeep, map, xor } from 'lodash-es';
+import { computed, defineEmits, defineProps, inject, ref, watchEffect } from 'vue';
+import { map, xor } from 'lodash-es';
 
 import { TMagicCard, tMagicMessage, TMagicTooltip } from '@tmagic/design';
-import { SelectConfig } from '@tmagic/form';
+import { FormState, SelectConfig } from '@tmagic/form';
 
 import type { Services } from '../type';
 import { CodeEditorMode, CodeSelectOp } from '../type';
 const services = inject<Services>('services');
-
+const form = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
 const props = defineProps<{
@@ -77,20 +77,10 @@ const selectConfig = computed(() => {
 });
 const fieldKey = ref('');
 const multiple = ref(true);
-let lastTagSnapshot = cloneDeep(props.model[props.name]) || [];
-let shouldWatch = true;
-
-// 管理端和editor有表现不一致的地方，管理端切换组件表单不会重新渲染，因此增加shouldWatch控制lastTagSnapshot的记录
-watch(
-  () => props.model[props.name],
-  (selectValue) => {
-    if (shouldWatch) {
-      lastTagSnapshot = cloneDeep(selectValue) || [];
-    }
-  },
-);
+const lastTagSnapshot = ref<string[]>([]);
 
 watchEffect(async () => {
+  if (!props.model[props.name]) return;
   const combineNames = await Promise.all(
     props.model[props.name].map(async (id: string) => {
       const { name = '' } = (await services?.codeBlockService.getCodeContentById(id)) || {};
@@ -101,11 +91,9 @@ watchEffect(async () => {
 });
 
 const changeHandler = async (value: any) => {
-  shouldWatch = false;
   let codeIds = value;
   if (typeof value === 'string') {
     multiple.value = false;
-    lastTagSnapshot = [lastTagSnapshot];
     codeIds = value ? [value] : [];
   }
   await setCombineRelation(codeIds);
@@ -121,14 +109,13 @@ const setCombineRelation = async (codeIds: string[]) => {
   let opFlag = CodeSelectOp.CHANGE;
   let diffValues = codeIds;
   if (multiple.value) {
-    opFlag = codeIds.length < lastTagSnapshot.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
-    diffValues = xor(codeIds, lastTagSnapshot) as string[];
+    // initValues为表单初始值，当表单内容发生变化时，initValues也会更新，可以理解为上一次表单内容的快照
+    lastTagSnapshot.value = form?.initValues[props.name] || [];
+    opFlag = codeIds.length < lastTagSnapshot.value.length ? CodeSelectOp.DELETE : CodeSelectOp.ADD;
+    diffValues = xor(codeIds, lastTagSnapshot.value) as string[];
   }
-
   // 记录绑定关系
   await services?.codeBlockService.setCombineRelation(id, diffValues, opFlag, props.prop);
-  lastTagSnapshot = codeIds;
-  shouldWatch = true;
 };
 
 const viewHandler = async () => {