@tmagic/editor 1.8.0-beta.24 → 1.8.0-beta.26

package/src/fields/configs/stickyAddButton.ts

@@ -0,0 +1,31 @@
+/*
+ * 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,
+  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/use-compare-form.ts

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
-import { computed, type ComputedRef, inject, provide, type Ref, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, type ComputedRef, inject, provide, type Ref, ref, useTemplateRef, watch } from 'vue';
 
 import type { CodeBlockContent, MNode } from '@tmagic/core';
-import { type FormConfig, type FormState, type FormValue, MForm } from '@tmagic/form';
+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';
 
@@ -28,7 +29,7 @@ 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>>;
+  formContext: ComputedRef<FormContext>;
   loadConfig: () => Promise<void>;
   formRef: Readonly<Ref<InstanceType<typeof MForm> | null>>;
   normalizeCodeBlockValue: (v: Partial<CodeBlockContent> | Record<string, any> | undefined) => Record<string, any>;
@@ -39,7 +40,7 @@ export interface UseCompareFormReturn {
  * - 按 `category`(node / data-source / code-block) 加载 FormConfig（支持自定义 `loadConfig`）；
  * - 代码块 `content` 归一化为字符串；
  * - 外层容器固定高度 + 内部滚动的 `wrapperStyle`；
- * - 将 services / stage 注入 MForm.formState，保证 filterFunction 上下文一致。
+ * - 将 services / stage 作为 form context 传给 MForm，保证 filterFunction 上下文一致。
  *
  * 两个组件的差异仅在于是否做新旧值对比，这部分逻辑保留在各自组件中。
  */
@@ -87,10 +88,7 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur
     return style;
   });
 
-  const mergedExtendState = (state: FormState) => {
-    const extendState = props.extendState ?? ((s: FormState) => s);
-    return extendState(props.baseFormState || state);
-  };
+  const formContext = useEditorFormContext(() => props.services);
 
   /**
    * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
@@ -156,27 +154,11 @@ export const useCompareForm = (props: CompareFormBaseProps): UseCompareFormRetur
 
   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,
+    formContext,
     loadConfig,
     formRef,
     normalizeCodeBlockValue,

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

@@ -0,0 +1,40 @@
+/*
+ * 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 } from 'vue';
+
+import type { FormContext } from '@tmagic/form';
+
+import type { Services } from '@editor/type';
+
+/**
+ * 编辑器注入给表单的业务上下文：`services` 与当前画布 `stage`。
+ *
+ * 由 `Editor.vue`（provide `FORM_CONTEXT_KEY`）、`FormPanel.vue` 与 `useCompareForm`
+ * 共用。`stage` 走 computed 而非快照，保证切换画布后配置回调读到的是最新实例。
+ *
+ * 字段类型见 `@editor/type` 里对 `@tmagic/form-schema` 的 `FormContext` 模块增强。
+ */
+export const useEditorFormContext = (getServices: () => Services | undefined): ComputedRef<FormContext> =>
+  computed(() => {
+    const services = getServices();
+    return {
+      services,
+      stage: services?.editorService.get('stage'),
+    };
+  });

package/src/index.ts

@@ -91,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';

package/src/initService.ts

@@ -29,6 +29,7 @@ import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from '@tmag
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { isIncludeDataSource } from './utils/editor';
+import { error as logError } from './utils/logger';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
 
@@ -36,6 +37,19 @@ export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
 };
 
+/**
+ * select 为异步串行执行，节点不可选中（如已从 DSL 中移除）时会抛错。
+ * 在 watch 回调中调用不能把拒绝抛回调用方，否则会变成 Vue 的「Unhandled error during execution of watcher callback」，
+ * 这里统一兜底成日志。
+ */
+const selectNode = async (editorService: Services['editorService'], id: Id) => {
+  try {
+    await editorService.select(id);
+  } catch (e) {
+    logError(e);
+  }
+};
+
 export const initServiceState = (
   props: EditorProps,
   {
@@ -193,9 +207,17 @@ export const initServiceState = (
     },
   );
 
+  // defaultSelected 可能早于 modelValue 到位（immediate 首次执行时 root 还是空的，或节点尚未出现在 DSL 中），
+  // 此时 select 会因为「获取不到组件信息」而抛错，交由 root-change 中的选中逻辑在 root 就绪后补上即可。
   watch(
     () => props.defaultSelected,
-    (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+    (defaultSelected) => {
+      if (!defaultSelected || !editorService.getNodeById(defaultSelected)) {
+        return;
+      }
+
+      selectNode(editorService, defaultSelected);
+    },
     {
       immediate: true,
     },

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

@@ -43,8 +43,6 @@
         :data-source-type="payload.dataSourceType"
         :value="rightValue"
         :last-value="leftValue"
-        :base-form-state="compareFormState"
-        :extend-state="extendState"
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
         :services="props.services"
@@ -86,7 +84,6 @@ import {
   TMagicRadioGroup,
   TMagicTag,
 } from '@tmagic/design';
-import type { FormState } from '@tmagic/form';
 
 import CompareForm from '@editor/components/CompareForm.vue';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
@@ -100,12 +97,6 @@ const props = withDefaults(
   defineProps<{
     /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
     services?: Services;
-    /**
-     * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
-     * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
-     * `display` / `disabled` 等 filterFunction 正常工作。
-     */
-    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
     /**
      * 自定义 FormConfig 加载逻辑，透传给 CompareForm。传入后将接管内置的按 `category`
      * 取配置逻辑，可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
@@ -117,7 +108,6 @@ const props = withDefaults(
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];
-    compareFormState?: FormState;
   }>(),
   {
     width: '900px',

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

@@ -133,7 +133,6 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Clock, Close } from '@element-plus/icons-vue';
 
 import { getDesignConfig, TMagicButton, tMagicMessage, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
-import type { FormState } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -193,17 +192,6 @@ watch([disabledDataSource, disabledCodeBlock], ([dsDisabled, cbDisabled]) => {
   }
 });
 
-/**
- * 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
- * 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
- * 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
- */
-const extendFormState = inject<((_state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined>(
-  'extendFormState',
-  undefined,
-);
-const getPropsPanelFormState = inject<(() => FormState | undefined) | undefined>('getPropsPanelFormState', undefined);
-
 const {
   expanded,
   toggleGroup,
@@ -316,7 +304,7 @@ const onCodeBlockGotoInitial = (id: string | number) => {
  * 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
  */
 const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } =
-  useHistoryRevert({ extendState: extendFormState, getPropsPanelFormState }, services);
+  useHistoryRevert({}, services);
 
 /**
  * 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，

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

@@ -74,7 +74,7 @@ interface MountedDiffDialog {
  * 弹窗组件动态 import，避免拖累其它消费者。供「确认回滚」与「查看差异」两种交互共用。
  */
 const mountHistoryDiffDialog = async (
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
       services?: Services;
       isConfirm?: boolean;
@@ -90,10 +90,8 @@ const mountHistoryDiffDialog = async (
   const app = createApp(historyDiffDialog, {
     services: options.services,
     isConfirm: options.isConfirm,
-    extendState: options.extendState,
     loadConfig: options.loadConfig,
     selfDiffFieldTypes: options.selfDiffFieldTypes,
-    compareFormState: options.compareFormState,
     width: options.width,
     size: options.size ?? options.services?.uiService?.get('propsPanelSize'),
     onClose: options.onClose,
@@ -125,7 +123,7 @@ const mountHistoryDiffDialog = async (
  */
 const confirmRevertWithDiffDialog = async (
   payload: DiffDialogPayload,
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
       services?: Services;
     },
@@ -147,7 +145,7 @@ const confirmRevertWithDiffDialog = async (
  */
 const viewHistoryDiffDialog = async (
   payload: DiffDialogPayload,
-  options: Pick<UseHistoryRevertOptions, 'appContext' | 'extendState'> &
+  options: Pick<UseHistoryRevertOptions, 'appContext'> &
     CustomDiffFormOptions & {
       services?: Services;
     },
@@ -194,7 +192,7 @@ const viewHistoryDiffDialog = async (
 export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services?: Services) => {
   // 自动捕获调用方所在组件的 appContext（在 setup 中调用时），业务方亦可显式覆盖。
   const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-  const { extendState, getPropsPanelFormState, dialogWidth } = options;
+  const { dialogWidth } = options;
 
   /** 目标数据已被删除、无法回滚时的统一提示。 */
   const showRevertTargetMissing = () => {
@@ -220,7 +218,6 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     if (payload) {
       return confirmRevertWithDiffDialog(payload, {
         appContext,
-        extendState,
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,
@@ -307,7 +304,7 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
       showRevertTargetMissing();
       return Promise.resolve(null);
     }
-    return runRevert(buildPageDiffPayload(index), { compareFormState: getPropsPanelFormState?.() }).then((result) =>
+    return runRevert(buildPageDiffPayload(index), {}).then((result) =>
       result ? services?.editorService.revertPageStep(index) : null,
     );
   };
@@ -341,22 +338,20 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     if (payload) {
       return viewHistoryDiffDialog(payload, {
         appContext,
-        extendState,
         services,
         width: dialogWidth,
-        compareFormState: getPropsPanelFormState?.(),
       });
     }
   };
 
   const onDataSourceDiff = (id: string | number, index: number): Promise<void> | void => {
     const payload = buildDataSourceDiffPayload(id, index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services, width: dialogWidth });
+    if (payload) return viewHistoryDiffDialog(payload, { appContext, services, width: dialogWidth });
   };
 
   const onCodeBlockDiff = (id: string | number, index: number): Promise<void> | void => {
     const payload = buildCodeBlockDiffPayload(id, index);
-    if (payload) return viewHistoryDiffDialog(payload, { appContext, extendState, services, width: dialogWidth });
+    if (payload) return viewHistoryDiffDialog(payload, { appContext, services, width: dialogWidth });
   };
 
   /**
@@ -398,7 +393,6 @@ export const useHistoryRevert = (options: UseHistoryRevertOptions = {}, services
     if (payload)
       return viewHistoryDiffDialog(payload, {
         appContext,
-        extendState,
         services,
         ...extra,
         width: extra?.width ?? dialogWidth,