@tmagic/editor 1.8.0-manmanyu.8 → 1.8.0

package/src/fields/configs/stickyAddButton.ts

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+/**
+ * 属性面板列表字段共用的吸底全宽「添加」按钮与吸顶标题，展开到 group-list 配置上。
+ *
+ * 吸底按钮会盖住列表底部，吸顶标题会盖住列表顶部，新增的项必须同时滚进视口才看得见。
+ */
+export const stickyAddButton = (text: string) => ({
+  scrollLastItemIntoView: true as const,
+  header: { sticky: true as const },
+  addButtonConfig: {
+    sticky: true as const,
+    text,
+    props: { type: 'primary', plain: true, text: false },
+  },
+});

package/src/fields/headless-validation.ts

@@ -0,0 +1,177 @@
+/*
+ * 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 DisplayCondsConfig,
+  type EventSelectConfig,
+  type FieldInnerConfig,
+  type FieldMountValueEffect,
+  filterFunction,
+  type FormItemConfig,
+  type HeadlessFieldOptions,
+} from '@tmagic/form/headless';
+import type { StyleSchema } from '@tmagic/schema';
+
+import { editorTypeMatchRules, validateDataSourceFieldSelect } from '@editor/utils/type-match-rules';
+
+import { createCodeSelectConfig, normalizeCodeSelectValue } from './configs/codeSelect';
+import { createDisplayCondsConfig } from './configs/displayConds';
+import { createEventSelectConfig, isLegacyEventValue } from './configs/eventSelect';
+import { createStyleSetterConfig } from './StyleSetter/configs';
+
+const getName = (config: FormItemConfig): string => `${(config as any).name ?? ''}`;
+
+/** `code-select` 旧数据兼容：空值改写成 `{ hookType, hookData }`。 */
+const codeSelectEffect: FieldMountValueEffect = ({ config, model }) => {
+  normalizeCodeSelectValue(model, getName(config));
+};
+
+/** `event-select`：表单 init 对未声明 defaultValue 的自定义 type 会写成空串，统一收成数组。 */
+const eventSelectEffect: FieldMountValueEffect = ({ config, model }) => {
+  const name = getName(config);
+  if (model && !Array.isArray(model[name])) {
+    model[name] = [];
+  }
+};
+
+/**
+ * `code-select` 的内部配置。
+ *
+ * 对应 `fields/CodeSelect.vue` 内部
+ * `<MContainer :config="codeConfig" :model="model[name]" :prop="prop">`。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns 内部容器的 config / model / prop
+ */
+const codeSelectInnerConfig: FieldInnerConfig = ({ config, model, prop }) => {
+  const name = getName(config);
+
+  return {
+    config: createCodeSelectConfig(config as any),
+    model: model?.[name],
+    prop,
+  };
+};
+
+/**
+ * `display-conds` 的内部配置。
+ *
+ * 对应 `fields/DisplayConds.vue` 内部把同一份 groupList 配置交给 `MGroupList`。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns 内部 group-list 配置；prop 基准为 parentProp，避免 name 被拼两次
+ */
+const displayCondsInnerConfig: FieldInnerConfig = ({ config, model, prop, parentProp, mForm }) => {
+  const name = getName(config);
+  const parentFields =
+    filterFunction<string[]>(mForm, (config as DisplayCondsConfig).parentFields, {
+      model,
+      config,
+      prop,
+    }) || [];
+
+  return {
+    config: createDisplayCondsConfig(config as DisplayCondsConfig, name, parentFields),
+    // 内部 group-list 复用了字段自身的 name，prop 基准要退回父级，否则 name 会被拼两次
+    prop: parentProp,
+  };
+};
+
+/**
+ * `event-select` 的内部配置。
+ *
+ * 对应 `fields/EventSelect.vue`：列表走 group-list，事件名渲染在 title slot，
+ * 无渲染校验仍把事件名当作列表项字段，路径为 `<prop>.<index>.name`。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns 合成的 group-list 配置；旧数据格式返回 null，不参与校验
+ */
+const eventSelectInnerConfig: FieldInnerConfig = ({ config, model, parentProp }) => {
+  const name = getName(config);
+  const events = model?.[name];
+
+  // 旧数据格式走的是另一套表格配置，其中不含任何 rules，不参与校验
+  if (!Array.isArray(events) || isLegacyEventValue(events)) return null;
+
+  return {
+    config: createEventSelectConfig(config as EventSelectConfig, name, { includeEventName: true }),
+    prop: parentProp,
+  };
+};
+
+/**
+ * `style-setter` 的内部配置。
+ *
+ * 对应 `fields/StyleSetter/Index.vue`：6 个面板共用 `:values="model[name]"`、`:prop="prop || name"`。
+ * `theme` 按 `useTheme` 缺省空串传入，只改 flexWrap 的 UI childType，不影响校验字段。
+ *
+ * @param ctx - innerConfig 回调入参
+ * @returns style 面板配置及 styleModel
+ */
+const styleSetterInnerConfig: FieldInnerConfig = ({ config, model, prop }) => {
+  const name = getName(config);
+  const styleModel = (model?.[name] ?? {}) as Partial<StyleSchema>;
+
+  return {
+    config: createStyleSetterConfig(styleModel, '', validateDataSourceFieldSelect),
+    model: styleModel,
+    prop,
+  };
+};
+
+/**
+ * 编辑器字段的无渲染登记表（不含 Vue 组件）。
+ *
+ * Node 里 `registerFields(editorFields)` 即可配合 `validateForm` / `submitForm`。
+ * 安装编辑器时由 plugin 把 `component` 叠上去再传给 `@tmagic/form`。
+ *
+ * - 叶子：内部只渲染叶子 UI，或把子表单渲染在独立的 MForm / MFormBox 实例里
+ * - innerConfig：内部再渲染 MContainer / MPanel / MGroupList，把运行期配置交出来
+ * - typeMatch：该 type 自身的类型匹配校验
+ *
+ * innerConfig 返回的 config / model / prop 与组件模板里传给内部容器的那一组保持一一对应，
+ * 且配置本身与组件共用同一份工厂（`fields/configs/`）。
+ */
+export const editorFields: Record<string, HeadlessFieldOptions> = {
+  'vs-code': {},
+  'code-link': {},
+  'ui-select': { typeMatch: editorTypeMatchRules['ui-select'] },
+  'cond-op-select': { typeMatch: editorTypeMatchRules['cond-op-select'] },
+  'page-fragment-select': { typeMatch: editorTypeMatchRules['page-fragment-select'] },
+  'data-source-select': { typeMatch: editorTypeMatchRules['data-source-select'] },
+  'data-source-input': { typeMatch: editorTypeMatchRules['data-source-input'] },
+  'key-value': { typeMatch: editorTypeMatchRules['key-value'] },
+  'code-select-col': { typeMatch: editorTypeMatchRules['code-select-col'] },
+  'data-source-fields': { typeMatch: editorTypeMatchRules['data-source-fields'] },
+  'data-source-mocks': { typeMatch: editorTypeMatchRules['data-source-mocks'] },
+  'data-source-methods': { typeMatch: editorTypeMatchRules['data-source-methods'] },
+  'data-source-method-select': { typeMatch: editorTypeMatchRules['data-source-method-select'] },
+  'data-source-field-select': { typeMatch: editorTypeMatchRules['data-source-field-select'] },
+  'code-select': {
+    effect: codeSelectEffect,
+    innerConfig: codeSelectInnerConfig,
+    typeMatch: editorTypeMatchRules['code-select'],
+  },
+  'display-conds': { innerConfig: displayCondsInnerConfig, typeMatch: editorTypeMatchRules['display-conds'] },
+  'event-select': {
+    effect: eventSelectEffect,
+    innerConfig: eventSelectInnerConfig,
+    typeMatch: editorTypeMatchRules['event-select'],
+  },
+  'style-setter': { innerConfig: styleSetterInnerConfig, typeMatch: editorTypeMatchRules['style-setter'] },
+};

package/src/headless.ts

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+/**
+ * @fileoverview `@tmagic/editor/headless`：编辑器字段的无渲染登记表。
+ *
+ * 不加载编辑器界面（Editor.vue、各面板、monaco 等），可在无 DOM 的 Node 里 import。
+ * 配合 `@tmagic/form/headless`：`registerBuiltInFields(builtInFields); registerFields(editorFields);`
+ *
+ * 注意这里不是「零 Vue 依赖」：`style-setter` 的字段配置与编辑器 UI 共用同一份工厂
+ * （`fields/StyleSetter/configs.ts`），配置里的 `icon` / `component` 会带进来若干图标
+ * SFC；typeMatch 的提示文案要读画布与数据源，也会带进 editor services。这些都只在
+ * import 时定义、不访问 DOM，但产物体积明显大于 `@tmagic/form/headless`。
+ *
+ * @module @tmagic/editor/headless
+ */
+
+export { editorFields } from './fields/headless-validation';

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,166 @@
+/*
+ * 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 } from 'vue';
+
+import type { CodeBlockContent, MNode } from '@tmagic/core';
+import { type FormConfig, type FormContext, type FormValue, MForm } from '@tmagic/form';
+
+import { useEditorFormContext } from '@editor/hooks/use-form-context';
+import type { CompareFormBaseProps } from '@editor/type';
+import { getCodeBlockFormConfig } from '@editor/utils/code-block';
+
+export interface UseCompareFormReturn {
+  config: Ref<FormConfig>;
+  currentValues: ComputedRef<FormValue>;
+  wrapperStyle: ComputedRef<Record<string, string> | undefined>;
+  formContext: ComputedRef<FormContext>;
+  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 作为 form context 传给 MForm，保证 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 formContext = useEditorFormContext(() => props.services);
+
+  /**
+   * 内置的默认 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 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');
+
+  return {
+    config,
+    currentValues,
+    wrapperStyle,
+    formContext,
+    loadConfig,
+    formRef,
+    normalizeCodeBlockValue,
+  };
+};

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

@@ -0,0 +1,56 @@
+/*
+ * 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, unref } from 'vue';
+
+import { FORM_CONTEXT_KEY, type FormContext, mergeFormContexts } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+
+/**
+ * 编辑器注入给表单的业务上下文：`services` 与当前画布 `stage`。
+ *
+ * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
+ * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
+ *
+ * 宿主可能在 `<MEditor>` 外层 provide 了自己的业务字段，这里必须把那一层合并进来：
+ * 否则编辑器再 provide 一次会把宿主整层遮蔽掉，属性面板、对比表单里的配置回调就
+ * 读不到宿主字段了。`services` / `stage` 由编辑器兜底，优先级高于宿主同名字段。
+ *
+ * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
+ */
+export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> => {
+  // inject 只能在 setup 期取值，因此本 hook 必须在 setup 中调用（`use` 前缀即此约定）。
+  // 返回的 computed 可以随便传递，但 hook 本身不能延迟到事件回调或 onMounted 里再调。
+  const hostContext = inject(FORM_CONTEXT_KEY, undefined);
+
+  return computed(() => {
+    const services = getServices();
+    const host = unref(hostContext);
+
+    // 上层（通常是 Editor.vue）已经用同一份 services 合并过了。FormPanel / useCompareForm
+    // 都是它的后代，再合并一次只会多套一层 Proxy，让每次属性 miss 多一轮线性查找。
+    // services 相同即可判定 stage 也相同——两边都是从同一个 editorService 读的。
+    if (host && host.services === services) return host;
+
+    return mergeFormContexts(host, {
+      services,
+      stage: services?.editorService.get('stage'),
+    });
+  });
+};

package/src/hooks/use-stage.ts

@@ -28,6 +28,7 @@ export const useStage = (stageOptions: StageOptions) => {
     containerHighlightClassName: stageOptions.containerHighlightClassName,
     containerHighlightDuration: stageOptions.containerHighlightDuration,
     containerHighlightType: stageOptions.containerHighlightType,
+    containerHighlightAddOnly: stageOptions.containerHighlightAddOnly,
     disabledDragStart: stageOptions.disabledDragStart,
     renderType: stageOptions.renderType,
     canSelect: (el, event, stop) => {

package/src/index.ts

@@ -32,6 +32,9 @@ export { DepTargetType } from '@tmagic/core';
 export * from './type';
 export * from './hooks';
 export * from './utils';
+// `isGlobalFlat` 同时在 `@tmagic/design` 和 `./utils/config` 中存在，
+// 通过显式重导一次消除 `export *` 带来的歧义，并固定使用 editor 自己那份。
+export { isGlobalFlat } from './utils/config';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
 export { default as editorService } from './services/editor';
@@ -44,8 +47,11 @@ export { default as stageOverlayService } from './services/stageOverlay';
 export { default as uiService } from './services/ui';
 export { default as codeBlockService } from './services/codeBlock';
 export { default as depService } from './services/dep';
+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';
@@ -71,6 +77,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';
@@ -84,4 +91,6 @@ export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';
 export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 
+export { editorFields } from './fields/headless-validation';
+
 export { default } from './plugin';