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

package/src/utils/event.ts

@@ -0,0 +1,224 @@
+/*
+ * 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 type { EventOption, Id, MComponent, MContainer } from '@tmagic/core';
+import type { CascaderOption } from '@tmagic/form';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
+
+import dataSourceService from '@editor/services/dataSource';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import { getCascaderOptionsFromFields } from '@editor/utils/data-source';
+
+export const EVENT_NAME_VALUE_SEPARATOR = '.';
+
+export type EventNameSelectOption = { text: string; value: string };
+export type EventNameOption = EventOption | CascaderOption | EventNameSelectOption;
+
+/** 与 EventSelect 中 checkStrictly 一致：component 为 false，其余为 true */
+export const isEventNameCheckStrictly = (src?: string) => src !== 'component';
+
+/** 将动作 method 值规范为与 collectEventNameOptionValues 一致的字符串（cascader 无 valueSeparator 时存数组） */
+export const normalizeCompActionValue = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+  }
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  return `${value}`;
+};
+
+/**
+ * 组装事件名称下拉/级联 options，与 EventSelect 默认 eventNameConfig.options 逻辑一致。
+ */
+export const getEventNameOptions = (
+  src: string | undefined,
+  formValue: Record<string, any> = {},
+): EventNameOption[] => {
+  if (!formValue.type) {
+    return [];
+  }
+
+  if (src === 'component') {
+    let events: EventOption[] | CascaderOption[] = eventsService.getEvent(formValue.type) || [];
+
+    if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+      const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+      if (!pageFragment) {
+        return [];
+      }
+
+      events = [
+        {
+          label: pageFragment.name || '页面片容器',
+          value: pageFragment.id,
+          children: events,
+        },
+      ];
+
+      (pageFragment.items || []).forEach((node) => {
+        traverseNode<MComponent | MContainer>(node, (current) => {
+          const nodeEvents = (current.type && eventsService.getEvent(current.type)) || [];
+          (events as CascaderOption[]).push({
+            label: `${current.name}_${current.id}`,
+            value: `${current.id}`,
+            children: nodeEvents,
+          });
+        });
+      });
+
+      return events;
+    }
+
+    return (events as EventOption[]).map((option) => ({
+      text: option.label,
+      value: option.value,
+    }));
+  }
+
+  if (src === 'datasource') {
+    const events: EventNameOption[] = dataSourceService.getFormEvent(formValue.type) || [];
+    const dataSource = dataSourceService.getDataSourceById(formValue.id);
+    const fields = dataSource?.fields || [];
+
+    if (fields.length > 0) {
+      return [
+        ...events,
+        {
+          label: '数据变化',
+          value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+          children: getCascaderOptionsFromFields(fields),
+        },
+      ];
+    }
+
+    return events;
+  }
+
+  return [];
+};
+
+/** 将 select / cascader options 展平为最终写入 name 的字符串集合（cascader 用 `.` 拼接） */
+export const collectEventNameOptionValues = (
+  options: EventNameOption[],
+  checkStrictly: boolean,
+  prefix: any[] = [],
+  result: Set<string> = new Set(),
+): Set<string> => {
+  options.forEach((option) => {
+    if (typeof option?.value === 'undefined') {
+      return;
+    }
+
+    const path = [...prefix, option.value];
+    const joined = path.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+    const children = 'children' in option ? option.children : undefined;
+
+    if (Array.isArray(children) && children.length) {
+      if (checkStrictly) {
+        result.add(joined);
+      }
+      collectEventNameOptionValues(children as EventNameOption[], checkStrictly, path, result);
+      return;
+    }
+
+    result.add(joined);
+  });
+
+  return result;
+};
+
+/**
+ * 解析 event-select 允许的 name 集合。
+ * 自定义 eventNameConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getEventNameAllowedValues = (
+  config: { src?: string; eventNameConfig?: { options?: unknown } } = {},
+  formValue: Record<string, any> = {},
+): Set<string> | null => {
+  if (typeof config.eventNameConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  if (config.src !== 'component' && config.src !== 'datasource') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getEventNameOptions(config.src, formValue), isEventNameCheckStrictly(config.src));
+};
+
+/**
+ * 组装联动组件动作下拉/级联 options，与 EventSelect 默认 compActionConfig.options 逻辑一致。
+ */
+export const getCompActionOptions = (toId?: Id): EventNameOption[] => {
+  if (typeof toId === 'undefined' || toId === null || toId === '') {
+    return [];
+  }
+
+  const node = editorService.getNodeById(toId);
+  if (!node?.type) {
+    return [];
+  }
+
+  let methods: EventOption[] | CascaderOption[] = eventsService.getMethod(node.type, toId) || [];
+
+  if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+    const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+    if (!pageFragment) {
+      return [];
+    }
+
+    methods = [];
+    (pageFragment.items || []).forEach((item: MComponent | MContainer) => {
+      traverseNode<MComponent | MContainer>(item, (current) => {
+        const nodeMethods = (current.type && eventsService.getMethod(current.type, current.id)) || [];
+
+        if (nodeMethods.length) {
+          (methods as CascaderOption[]).push({
+            label: `${current.name}_${current.id}`,
+            value: `${current.id}`,
+            children: nodeMethods,
+          });
+        }
+      });
+    });
+
+    return methods;
+  }
+
+  return (methods as EventOption[]).map((method) => ({
+    text: method.label,
+    value: method.value,
+  }));
+};
+
+/**
+ * 解析 event-select 联动组件动作允许的 method 集合。
+ * 自定义 compActionConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getCompActionAllowedValues = (
+  config: { src?: string; compActionConfig?: { options?: unknown } } = {},
+  model: { to?: Id } = {},
+): Set<string> | null => {
+  if (typeof config.compActionConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getCompActionOptions(model.to), isEventNameCheckStrictly(config.src));
+};

package/src/utils/index.ts

@@ -30,4 +30,6 @@ export * from './undo-redo';
 export * from './indexed-db';
 export * from './history';
 export * from './const';
+export * from './type-match-rules';
+export * from './event';
 export { default as loadMonaco } from './monaco-editor';

package/src/utils/monaco-editor.ts

@@ -1,7 +1,34 @@
 let cached: Promise<typeof import('monaco-editor')> | undefined;
 
+// 是否为 Monaco 内部抛出的取消错误（Canceled）
+// 销毁编辑器时，WordHighlighter 内部挂起的 Delayer 会被取消，
+// 取消时 reject 出的 Canceled 错误没有 catch，会变成 "Uncaught (in promise) Canceled"，
+// 该错误本身无害，这里做一次性、全局的兜底处理，仅吞掉这类取消错误。
+const isMonacoCanceledError = (reason: any): boolean => {
+  if (!reason) return false;
+  if (reason instanceof Error) {
+    return reason.name === 'Canceled' || reason.message === 'Canceled';
+  }
+  return reason === 'Canceled';
+};
+
+let canceledRejectionHandlerInstalled = false;
+const installCanceledRejectionHandler = () => {
+  if (canceledRejectionHandlerInstalled || typeof globalThis.addEventListener !== 'function') return;
+  canceledRejectionHandlerInstalled = true;
+
+  globalThis.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
+    if (isMonacoCanceledError(event.reason)) {
+      // 阻止其冒泡到控制台，避免无意义的报错噪音
+      event.preventDefault();
+    }
+  });
+};
+
 export default () => {
   if (!cached) {
+    installCanceledRejectionHandler();
+
     cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
       const { emmetHTML, emmetCSS } = emmet;
       emmetHTML(monaco);

package/src/utils/props.ts

@@ -17,14 +17,28 @@
  * limitations under the License.
  */
 
+import type { AppContext } from 'vue';
+
 import {
+  HookType,
   NODE_CONDS_KEY,
   NODE_CONDS_RESULT_KEY,
   NODE_DISABLE_CODE_BLOCK_KEY,
   NODE_DISABLE_DATA_SOURCE_KEY,
 } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
-import type { ChildConfig, DisplayCondsConfig, FormConfig, TabConfig, TabPaneConfig } from '@tmagic/form';
+import type {
+  ChildConfig,
+  DisplayCondsConfig,
+  FormConfig,
+  FormState,
+  FormValue,
+  TabConfig,
+  TabPaneConfig,
+} from '@tmagic/form';
+import { validateForm } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
 
 export const arrayOptions = [
   { text: '包含', value: 'include' },
@@ -45,10 +59,36 @@ export const numberOptions = [
   { text: '不在范围内', value: 'not_between' },
 ];
 
+export const booleanOptions = [
+  { text: '是', value: 'is' },
+  { text: '不是', value: 'not' },
+];
+
+/** 按字段类型返回条件运算符选项（UI 与 typeMatch 校验共用） */
+export const getCondOpOptionsByFieldType = (type: string) => {
+  if (type === 'array') {
+    return arrayOptions;
+  }
+
+  if (type === 'boolean' || type === 'null') {
+    return booleanOptions;
+  }
+
+  if (type === 'number') {
+    return [...eqOptions, ...numberOptions];
+  }
+
+  if (type === 'string') {
+    return [...arrayOptions, ...eqOptions];
+  }
+
+  return [...arrayOptions, ...eqOptions, ...numberOptions];
+};
+
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
   lazy: true,
-  display: ({ services }: any) => !(services.uiService.get('showStylePanel') ?? true),
+  display: ({ services }: any) => !(services?.uiService?.get('showStylePanel') ?? true),
   items: [
     {
       name: 'style',
@@ -127,6 +167,7 @@ export const eventTabConfig: TabPaneConfig = {
       src: 'component',
       labelWidth: '100px',
       type: 'event-select',
+      rules: [{ typeMatch: true }],
     },
   ],
 };
@@ -155,6 +196,17 @@ export const advancedTabConfig: TabPaneConfig = {
       labelPosition: 'top',
       type: 'code-select',
       extra: '组件初始化时执行',
+      rules: [
+        { typeMatch: true, trigger: 'change' },
+        {
+          validator: ({ value, callback }: any) => {
+            if (value && value.hookType !== HookType.CODE) {
+              return callback('hookType 必须是 code');
+            }
+            callback();
+          },
+        },
+      ],
     },
     {
       name: 'mounted',
@@ -162,6 +214,17 @@ export const advancedTabConfig: TabPaneConfig = {
       labelPosition: 'top',
       type: 'code-select',
       extra: '组件挂载到dom时执行',
+      rules: [
+        { typeMatch: true, trigger: 'change' },
+        {
+          validator: ({ value, callback }: any) => {
+            if (value && value.hookType !== HookType.CODE) {
+              return callback('hookType 必须是 code');
+            }
+            callback();
+          },
+        },
+      ],
     },
     {
       name: 'display',
@@ -169,6 +232,17 @@ export const advancedTabConfig: TabPaneConfig = {
       extra: '控制组件是否渲染，关系的代码块返回值为false时不渲染',
       labelPosition: 'top',
       type: 'code-select',
+      rules: [
+        { typeMatch: true, trigger: 'change' },
+        {
+          validator: ({ value, callback }: any) => {
+            if (value && value.hookType !== HookType.CODE) {
+              return callback('hookType 必须是 code');
+            }
+            callback();
+          },
+        },
+      ],
     },
   ],
 };
@@ -194,6 +268,7 @@ export const displayTabConfig: TabPaneConfig<DisplayCondsConfig> = {
       name: NODE_CONDS_KEY,
       titlePrefix: '条件组',
       defaultValue: [],
+      rules: [{ typeMatch: true }],
     },
   ],
 };
@@ -286,3 +361,86 @@ export const fillConfig = (
 
   return [tabConfig];
 };
+
+// #region ValidatePropsFormOptions
+/**
+ * validatePropsForm 参数
+ */
+export interface ValidatePropsFormOptions {
+  /** 组件属性表单配置 */
+  config: FormConfig;
+  /** 待校验的表单值 */
+  values: FormValue;
+  /**
+   * 当前组件实例的 appContext（通常为 `getCurrentInstance()?.appContext`）。
+   * 会与 services 一并合入临时 MForm 的 appContext，使编辑器字段组件（DataSourceInput 等）能正常 inject。
+   */
+  appContext?: AppContext | null;
+  /** 编辑器服务集合，注入到临时表单的 formState */
+  services?: Services;
+  /** stage 实例，注入到临时表单的 formState */
+  stage?: any;
+  /** 外部扩展的 formState */
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /**
+   * 调试模式，默认 `true`：以弹层形式可见地渲染表单，点击「确定」才触发校验。
+   * 置为 `false` 时静默挂载后自动校验。
+   */
+  debug?: boolean;
+  typeMatchValid?: boolean;
+}
+// #endregion ValidatePropsFormOptions
+
+/**
+ * 对一份「组件属性表单配置 + 值」做一次独立的校验，**不复用也不污染页面上正在展示的表单**。
+ *
+ * 内部基于 `@tmagic/form` 的 `validateForm` 另建一个独立的 MForm 实例完成校验，并统一处理
+ * 编辑器场景所需的上下文注入：将当前组件实例的 provides 合入 appContext，并向 formState 注入
+ * stage / services 及外部扩展状态，保证校验规则依赖的上下文可用。
+ *
+ * 常用于源码编辑器保存后，对最新配置做一次校验，并将校验结果（错误信息）随提交一并抛给上层记录，
+ * 使源码保存的错误状态与表单编辑保持一致。
+ *
+ * @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
+ *   仅在初始化超时或挂载失败等异常情况下才会 reject。
+ *
+ * @example
+ * ```ts
+ * const error = await validatePropsForm({
+ *   config,
+ *   values,
+ *   appContext: getCurrentInstance()?.appContext,
+ *   services,
+ *   stage: editorService.get('stage'),
+ *   extendState,
+ * });
+ * if (error) {
+ *   // 配置不合法，error 为错误文案
+ * }
+ * ```
+ */
+export const validatePropsForm = ({
+  config,
+  values,
+  appContext = null,
+  services,
+  stage,
+  extendState,
+  debug,
+  typeMatchValid,
+}: ValidatePropsFormOptions): Promise<string> =>
+  validateForm({
+    config,
+    debug,
+    typeMatchValid,
+    initValues: values,
+    // 将当前组件实例的 provides（含 Editor 顶层的 services / codeOptions 等组件级 provide）
+    // 合入 appContext，使临时 MForm 中的编辑器字段组件（DataSourceInput 等）能正常 inject
+    appContext: appContext ? { ...appContext, provides: { services } } : null,
+    // 与页面表单保持一致：注入 stage/services 及外部扩展状态，保证校验规则依赖的上下文可用
+    extendState: async (state) => ({
+      ...((await extendState?.(state)) || {}),
+      stage,
+      services,
+    }),
+  });