@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.13

package/src/fields/StyleSetter/pro/Transform.vue

@@ -1,5 +1,6 @@
 <template>
   <MContainer
+    :prop="prop"
     :config="config"
     :model="values"
     :last-values="lastValues"
@@ -21,6 +22,7 @@ defineProps<{
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  prop?: string;
 }>();
 
 const emit = defineEmits<{
@@ -29,33 +31,29 @@ const emit = defineEmits<{
 }>();
 
 const config = defineFormItem({
+  name: 'transform',
   items: [
     {
-      name: 'transform',
-      items: [
-        {
-          name: 'rotate',
-          text: '旋转角度',
-          labelWidth: '68px',
-          type: 'data-source-field-select',
-          checkStrictly: false,
-          dataSourceFieldType: ['string', 'number'],
-          fieldConfig: {
-            type: 'text',
-          },
-        },
-        {
-          name: 'scale',
-          text: '缩放',
-          labelWidth: '68px',
-          type: 'data-source-field-select',
-          checkStrictly: false,
-          dataSourceFieldType: ['string', 'number'],
-          fieldConfig: {
-            type: 'text',
-          },
-        },
-      ],
+      name: 'rotate',
+      text: '旋转角度',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      checkStrictly: false,
+      dataSourceFieldType: ['string', 'number'],
+      fieldConfig: {
+        type: 'text',
+      },
+    },
+    {
+      name: 'scale',
+      text: '缩放',
+      labelWidth: '68px',
+      type: 'data-source-field-select',
+      checkStrictly: false,
+      dataSourceFieldType: ['string', 'number'],
+      fieldConfig: {
+        type: 'text',
+      },
     },
   ],
 });

package/src/fields/UISelect.vue

@@ -127,15 +127,3 @@ const unhighlight = () => {
   stageOverlayService.get('stage')?.clearHighlight();
 };
 </script>
-
-<style lang="scss">
-.m-fields-ui-select {
-  cursor: pointer;
-  i {
-    margin-right: 3px;
-  }
-  span {
-    color: #2882e0;
-  }
-}
-</style>

package/src/hooks/index.ts

@@ -17,6 +17,7 @@
  */
 
 export * from './use-code-block-edit';
+export * from './use-compare-form';
 export * from './use-stage';
 export * from './use-float-box';
 export * from './use-window-rect';

package/src/hooks/use-compare-form.ts

@@ -0,0 +1,187 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { computed, type ComputedRef, inject, provide, type Ref, ref, useTemplateRef, watch, watchEffect } from 'vue';
+
+import type { CodeBlockContent, MNode } from '@tmagic/core';
+import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/form';
+
+import type { CompareFormBaseProps } from '@editor/type';
+import { getCodeBlockFormConfig } from '@editor/utils/code-block';
+import { removeStyleDisplayConfig } from '@editor/utils/props';
+
+export interface UseCompareFormReturn {
+  config: Ref<FormConfig>;
+  currentValues: ComputedRef<FormValue>;
+  wrapperStyle: ComputedRef<Record<string, string> | undefined>;
+  mergedExtendState: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  loadConfig: () => Promise<void>;
+  formRef: Readonly<Ref<InstanceType<typeof MForm> | null>>;
+  normalizeCodeBlockValue: (v: Partial<CodeBlockContent> | Record<string, any> | undefined) => Record<string, any>;
+}
+
+/**
+ * CompareForm / ViewForm 共用逻辑：
+ * - 按 `category`(node / data-source / code-block) 加载 FormConfig（支持自定义 `loadConfig`）；
+ * - 代码块 `content` 归一化为字符串；
+ * - 外层容器固定高度 + 内部滚动的 `wrapperStyle`；
+ * - 将 services / stage 注入 MForm.formState，保证 filterFunction 上下文一致。
+ *
+ * 两个组件的差异仅在于是否做新旧值对比，这部分逻辑保留在各自组件中。
+ */
+export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormReturn => {
+  provide('services', props.services);
+
+  const config = ref<FormConfig>([]);
+
+  /** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
+  const codeOptions = inject<Record<string, any>>('codeOptions', {});
+
+  /** 将代码块的 content 字段统一成字符串，便于在表单 / 对比中展示 */
+  const normalizeCodeBlockValue = (
+    v: Partial<CodeBlockContent> | Record<string, any> | undefined,
+  ): Record<string, any> => {
+    if (!v) return {};
+    const next: Record<string, any> = { ...v };
+    if (next.content && typeof next.content !== 'string') {
+      try {
+        next.content = next.content.toString();
+      } catch {
+        next.content = '';
+      }
+    }
+    return next;
+  };
+
+  const currentValues = computed<FormValue>(() => {
+    if (props.category === 'code-block') {
+      return normalizeCodeBlockValue(props.value as Partial<CodeBlockContent>);
+    }
+    return (props.value || {}) as FormValue;
+  });
+
+  /**
+   * 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
+   * 这样滚动条会出现在组件内部，避免父容器（如 Dialog）自身也产生滚动。
+   */
+  const wrapperStyle = computed(() => {
+    if (!props.height) return undefined;
+    const style: Record<string, string> = {
+      height: props.height,
+      overflow: 'auto',
+    };
+    return style;
+  });
+
+  const mergedExtendState = (state: FormState) => {
+    const extendState = props.extendState ?? ((s: FormState) => s);
+    return extendState(props.baseFormState || state);
+  };
+
+  /**
+   * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
+   * 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
+   */
+  const defaultLoadConfig = async (): Promise<FormConfig> => {
+    if (!props.services) {
+      return [];
+    }
+
+    switch (props.category) {
+      case 'node': {
+        if (!props.type) {
+          return [];
+        }
+        return removeStyleDisplayConfig(
+          await props.services.propsService.getPropsConfig(props.type, { node: props.value as unknown as MNode }),
+        );
+      }
+      case 'data-source': {
+        const config = props.services.dataSourceService.getFormConfig(props.type || 'base');
+        // 数据源表单外层 tab 的「数据定义」项 status 为 'fields'，tab-pane name 随之为 'fields'。
+        // 未显式设置 active 时，Tabs 默认取 '0'，与 'fields' 不匹配会导致打开弹窗时无默认激活项，
+        // 这里与 DataSourceConfigPanel 保持一致，默认激活「数据定义」tab。
+        return config.map((item) => ('type' in item && item.type === 'tab' ? { ...item, active: 'fields' } : item));
+      }
+      case 'code-block': {
+        return getCodeBlockFormConfig({
+          paramColConfig: props.services.codeBlockService.getParamsColConfig(),
+          // 通过传入 dataSourceType 间接表达"是数据源代码块"——在对比 / 展示场景下 props.dataSourceType
+          // 由调用方按 step 上下文显式传入，未传则视为普通代码块，「执行时机」字段隐藏。
+          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 as string,
+        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<InstanceType<typeof MForm>>('form');
+
+  /**
+   * 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
+   * 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
+   * 在执行时拿不到 `formState.services` 而报错。
+   *
+   * 与 props-panel/FormPanel.vue 中的注入方式保持一致：
+   * - services：整个 useServices() 返回的服务集合；
+   * - stage：当前 editorService.get('stage') 的最新值。
+   */
+  watchEffect(() => {
+    if (formRef.value && props.services) {
+      formRef.value.formState.stage = props.services.editorService.get('stage');
+      formRef.value.formState.services = props.services;
+    }
+  });
+
+  return {
+    config,
+    currentValues,
+    wrapperStyle,
+    mergedExtendState,
+    loadConfig,
+    formRef,
+    normalizeCodeBlockValue,
+  };
+};

package/src/index.ts

@@ -48,6 +48,7 @@ export { default as componentListService } from './services/componentList';
 export { default as keybindingService } from './services/keybinding';
 export { default as ComponentListPanel } from './layouts/sidebar/ComponentListPanel.vue';
 export { default as LayerPanel } from './layouts/sidebar/layer/LayerPanel.vue';
+export { default as LayerNodeContent } from './layouts/sidebar/layer/LayerNodeContent.vue';
 export { default as CodeSelect } from './fields/CodeSelect.vue';
 export { default as CodeSelectCol } from './fields/CodeSelectCol.vue';
 export { default as DataSourceFields } from './fields/DataSourceFields.vue';
@@ -73,6 +74,7 @@ export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 export { default as CompareForm } from './components/CompareForm.vue';
+export { default as ViewForm } from './components/ViewForm.vue';
 export { default as HistoryListBucket } from './layouts/history-list/Bucket.vue';
 export { default as HistoryListBucketTab } from './layouts/history-list/BucketTab.vue';
 export { default as HistoryDiffDialog } from './layouts/history-list/HistoryDiffDialog.vue';

package/src/layouts/CodeEditor.vue

@@ -194,6 +194,9 @@ const values = ref('');
 const loading = ref(false);
 const codeEditorEl = useTemplateRef<HTMLDivElement>('codeEditor');
 
+// 组件是否已卸载，避免异步初始化过程中组件被销毁后继续创建编辑器
+let destroyed = false;
+
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
     vsEditor?.layout();
@@ -254,11 +257,18 @@ const handleKeyDown = (e: KeyboardEvent) => {
   }
 };
 
+// 判断容器是否仍然有效：组件未卸载、ref 存在且已挂载到文档树中
+// Monaco 在创建编辑器时会向上遍历 parentNode 判断是否处于 shadow DOM，
+// 若容器为 null 或已从文档树脱离，将抛出 "Cannot read properties of null (reading 'parentNode')"
+const isEditorElValid = () => !destroyed && !!codeEditorEl.value && codeEditorEl.value.isConnected;
+
 const init = async () => {
-  if (!codeEditorEl.value) return;
+  if (!isEditorElValid()) return;
 
-  if (codeEditorEl.value.clientHeight === 0) {
+  if (codeEditorEl.value!.clientHeight === 0) {
     await nextTick();
+    // await 期间组件可能已被卸载或容器被移除
+    if (!isEditorElValid()) return;
   }
 
   // 重置缓存的额外高度，因为编辑器重新初始化
@@ -266,6 +276,11 @@ const init = async () => {
 
   monaco = await loadMonaco();
 
+  // 加载 monaco 是异步过程，期间组件可能已被卸载或容器被移除
+  if (!isEditorElValid()) return;
+
+  const editorEl = codeEditorEl.value!;
+
   const options = {
     value: values.value,
     language: props.language,
@@ -275,7 +290,7 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, codeEditorEl.value, options);
+    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, editorEl, options);
 
     // 监听diff编辑器内容变化
     vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
@@ -285,7 +300,7 @@ const init = async () => {
       }
     });
   } else {
-    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, codeEditorEl.value, options);
+    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, editorEl, options);
 
     // 监听编辑器内容变化
     vsEditor.onDidChangeModelContent(() => {
@@ -296,10 +311,19 @@ const init = async () => {
     });
   }
 
+  // 编辑器创建可能是异步的，创建完成后若组件已卸载则立即销毁，避免内存泄漏
+  if (destroyed) {
+    vsEditor?.dispose();
+    vsDiffEditor?.dispose();
+    vsEditor = null;
+    vsDiffEditor = null;
+    return;
+  }
+
   setEditorValue(props.initValues, props.modifiedValues);
 
   emit('initd', vsEditor);
-  codeEditorEl.value.addEventListener('keydown', handleKeyDown);
+  editorEl.addEventListener('keydown', handleKeyDown);
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
@@ -311,7 +335,7 @@ const init = async () => {
     });
   }
 
-  resizeObserver.observe(codeEditorEl.value);
+  resizeObserver.observe(editorEl);
 };
 
 watch(
@@ -362,6 +386,8 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
+  destroyed = true;
+
   resizeObserver.disconnect();
 
   vsEditor?.dispose();

package/src/layouts/Framework.vue

@@ -25,9 +25,9 @@
       right-class="m-editor-framework-right"
       :left="hideSidebar ? undefined : columnWidth.left"
       :right="columnWidth.right"
-      :min-left="hideSidebar ? 0 : MIN_LEFT_COLUMN_WIDTH"
-      :min-right="MIN_RIGHT_COLUMN_WIDTH"
-      :min-center="MIN_CENTER_COLUMN_WIDTH"
+      :min-left="hideSidebar ? 0 : minLeftColumnWidth"
+      :min-right="minRightColumnWidth"
+      :min-center="minCenterColumnWidth"
       :width="frameworkRect.width"
       @change="columnWidthChange"
     >
@@ -78,9 +78,6 @@ import { getEditorConfig } from '@editor/utils/config';
 import {
   DEFAULT_LEFT_COLUMN_WIDTH,
   LEFT_COLUMN_WIDTH_STORAGE_KEY,
-  MIN_CENTER_COLUMN_WIDTH,
-  MIN_LEFT_COLUMN_WIDTH,
-  MIN_RIGHT_COLUMN_WIDTH,
   RIGHT_COLUMN_WIDTH_STORAGE_KEY,
 } from '@editor/utils/const';
 
@@ -116,6 +113,10 @@ const showSrc = computed(() => uiService.get('showSrc'));
 
 const columnWidth = computed(() => uiService.get('columnWidth'));
 
+const minLeftColumnWidth = computed(() => uiService.get('minLeftColumnWidth'));
+const minCenterColumnWidth = computed(() => uiService.get('minCenterColumnWidth'));
+const minRightColumnWidth = computed(() => uiService.get('minRightColumnWidth'));
+
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
 });

package/src/layouts/history-list/HistoryDiffDialog.vue

@@ -48,6 +48,7 @@
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
         :services="props.services"
+        :size="props.size"
         height="70vh"
       />
 
@@ -77,7 +78,14 @@
 import { computed, ref, watch } from 'vue';
 import { isEqual } from 'lodash-es';
 
-import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
+import {
+  type FieldSize,
+  TMagicButton,
+  TMagicDialog,
+  TMagicRadioButton,
+  TMagicRadioGroup,
+  TMagicTag,
+} from '@tmagic/design';
 import type { FormState } from '@tmagic/form';
 
 import CompareForm from '@editor/components/CompareForm.vue';
@@ -104,6 +112,8 @@ const props = withDefaults(
      */
     loadConfig?: CompareFormLoadConfig;
     width?: string;
+    /** 差异对比表单内组件的尺寸（透传给 CompareForm 的 `size`），可选 'large' | 'default' | 'small'。 */
+    size?: FieldSize;
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];

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

@@ -95,6 +95,7 @@ const mountHistoryDiffDialog = async (
     selfDiffFieldTypes: options.selfDiffFieldTypes,
     compareFormState: options.compareFormState,
     width: options.width,
+    size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
     onClose: options.onClose,
   });
   if (options.appContext) {
@@ -223,6 +224,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,
+        size: extra?.size,
       });
     }
     return confirmRevert();
@@ -382,6 +384,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
       loadConfig: revertOptions.loadConfig,
       selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
       width: revertOptions.width,
+      size: revertOptions.size,
     });
     if (!confirmed) return null;
     return await revertOptions.revert();
@@ -399,6 +402,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,
+        size: extra?.size,
       });
   };
 

package/src/layouts/props-panel/FormPanel.vue

@@ -12,6 +12,7 @@
         :size="propsPanelSize"
         :init-values="values"
         :config="config"
+        :type-match-valid="true"
         :extend-state="extendState"
         @change="submit"
         @error="errorHandler"
@@ -46,13 +47,16 @@
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, useTemplateRef, watchEffect } from 'vue';
 import { Document as DocumentIcon } from '@element-plus/icons-vue';
 
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
+import { TMagicButton, tMagicMessage, TMagicScrollbar } from '@tmagic/design';
 import type { ContainerChangeEventData, FormConfig, FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
+import { filterXSS } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
+import { ENABLE_PROPS_FORM_VALIDATE } from '@editor/editorProps';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import { useServices } from '@editor/hooks/use-services';
+import { validatePropsForm } from '@editor/utils/props';
 
 import CodeEditor from '../CodeEditor.vue';
 
@@ -75,13 +79,15 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  submit: [values: any, eventData?: ContainerChangeEventData];
+  submit: [values: any, eventData?: ContainerChangeEventData, error?: any];
   'submit-error': [e: any];
   'form-error': [e: any];
   mounted: [internalInstance: any];
   unmounted: [];
 }>();
 
+const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+
 const services = useServices();
 const { editorService, uiService } = services;
 
@@ -113,9 +119,16 @@ onUnmounted(() => {
 const submit = async (v: FormValue, eventData: ContainerChangeEventData) => {
   try {
     const values = await configFormRef.value?.submitForm();
+    // 校验成功：正常更新节点（第三个参数 error 为空，表示清除该来源的错误记录）
     emit('submit', values, eventData);
   } catch (e: any) {
-    emit('submit-error', e);
+    if (enablePropsFormValidate) {
+      // 启用校验联动：校验失败时仍以当前表单值更新节点，并把错误信息一并抛给上层记录
+      emit('submit', v, eventData, e);
+    } else {
+      // 未启用：保持原行为，校验失败丢弃本次改动
+      emit('submit-error', e);
+    }
   }
 };
 
@@ -123,8 +136,56 @@ const errorHandler = (e: any) => {
   emit('form-error', e);
 };
 
-const saveCode = (values: any) => {
-  emit('submit', props.codeValueKey ? { [props.codeValueKey]: values } : values);
+/**
+ * 将校验错误文案安全地转为用于弹窗展示的 HTML。
+ *
+ * 文案形如 `字段 -> 主文案\n\n建议`，多条以结构性 `<br>` 拼接。为在保留换行排版的同时
+ * 避免 `${value}`/字段名中可能夹带的 HTML 造成 XSS：先按结构性 `<br>` 拆分，对每段做 HTML
+ * 转义后再把段内换行 `\n` 替换为 `<br>`，最后用 `<br>` 拼回。
+ */
+const formatValidateErrorHtml = (error: string): string =>
+  error
+    .split(/<br\s*\/?>/i)
+    .map((segment) => filterXSS(segment).replaceAll('\n', '<br>'))
+    .join('<br>');
+
+const saveCode = async (values: any) => {
+  const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
+
+  if (!enablePropsFormValidate) {
+    // 未启用校验联动：保持原行为，直接提交源码保存的值
+    emit('submit', newValues);
+    return;
+  }
+
+  // 启用校验联动：源码编辑器保存的值未经过表单交互，这里另建一个独立的 MForm 实例对最新配置
+  // 做一次静默校验（不复用、也不污染页面上正在展示的表单），并将校验结果（错误信息）随提交
+  // 一并抛给上层记录，使源码保存的错误状态与表单编辑保持一致。
+  try {
+    const error = await validatePropsForm({
+      config: props.config,
+      values: newValues,
+      appContext: internalInstance?.appContext ?? null,
+      services,
+      stage: stage.value,
+      typeMatchValid: true,
+      extendState: props.extendState,
+    });
+
+    if (error) {
+      tMagicMessage({
+        type: 'error',
+        message: formatValidateErrorHtml(error),
+        dangerouslyUseHTMLString: true,
+      });
+    }
+
+    emit('submit', newValues, undefined, error ? new Error(error) : undefined);
+  } catch (e: any) {
+    console.log('validateForm error', e);
+    // 静默校验本身出现异常（如初始化超时）时，退回到不携带错误信息的提交，避免阻塞源码保存
+    emit('submit', newValues);
+  }
 };
 
 defineExpose({ configForm: configFormRef, submit });