@nocobase/client-v2 2.3.0-alpha.1 → 2.3.0-beta.11

package/src/flow/models/fields/DisplayAssociationField/DisplaySubTableFieldModel.tsx

@@ -17,14 +17,16 @@ import {
   observer,
 } from '@nocobase/flow-engine';
 import { Table } from 'antd';
+import type { TableProps } from 'antd';
 import classNames from 'classnames';
 import { DragEndEvent } from '@dnd-kit/core';
 import { css } from '@emotion/css';
-import { isEmpty } from 'lodash';
+import { get, isEmpty, orderBy } from 'lodash';
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FieldModel } from '../../base';
 import { DetailsItemModel } from '../../blocks/details/DetailsItemModel';
+import { FormAssociationItemModel } from '../../blocks/form/FormAssociationItemModel';
 import { adjustColumnOrder } from '../../blocks/table/utils';
 
 const HeaderWrapperComponent = React.memo((props) => {
@@ -65,11 +67,31 @@ const AddFieldColumn = ({ model }) => {
 };
 
 const DisplayTable = (props) => {
-  const { pageSize, value, size, collection, baseColumns, enableIndexColumn = true, model } = props;
+  const { pageSize, value: rawValue, size, collection, baseColumns, enableIndexColumn = true, model } = props;
+  const isFormAssociation = model.parent instanceof FormAssociationItemModel;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [localSort, setLocalSort] = useState<{ field: string; order: 'asc' | 'desc' }>();
   const { t } = useTranslation();
 
+  const value = useMemo(() => {
+    if (!isFormAssociation || Array.isArray(rawValue)) return rawValue;
+    if (rawValue && Array.isArray(rawValue.rows)) return rawValue.rows;
+    return rawValue && typeof rawValue === 'object' ? [rawValue] : [];
+  }, [isFormAssociation, rawValue]);
+
+  const sortedValue = useMemo(
+    () =>
+      isFormAssociation && localSort
+        ? orderBy(value, [(record) => get(record, localSort.field)], [localSort.order])
+        : value,
+    [isFormAssociation, localSort, value],
+  );
+
+  useEffect(() => {
+    if (isFormAssociation) setCurrentPage(1);
+  }, [isFormAssociation, rawValue]);
+
   useEffect(() => {
     setCurrentPageSize(pageSize);
   }, [pageSize]);
@@ -89,7 +111,7 @@ const DisplayTable = (props) => {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, value]);
+  }, [currentPage, currentPageSize, value, t]);
 
   const getColumns = () => {
     const cols = adjustColumnOrder(
@@ -119,8 +141,20 @@ const DisplayTable = (props) => {
     }
     return cols;
   };
-  const handleChange = useCallback(
-    async (pagination, filters, sorter) => {
+  const handleChange = useCallback<NonNullable<TableProps<Record<string, unknown>>['onChange']>>(
+    async (pagination, filters, sorters, extra) => {
+      const sorter = Array.isArray(sorters) ? sorters[0] : sorters;
+      if (isFormAssociation) {
+        if (extra.action !== 'sort') return;
+        const column = sorter?.column as { sortField?: string } | undefined;
+        const sortField = column?.sortField || sorter?.field;
+        const fullPath = Array.isArray(sortField) ? sortField.join('.') : String(sortField ?? '');
+        const prefix = `${model.context.fieldPath}.`;
+        const field = fullPath.startsWith(prefix) ? fullPath.slice(prefix.length) : fullPath;
+        setLocalSort(sorter?.order && field ? { field, order: sorter.order === 'ascend' ? 'asc' : 'desc' } : undefined);
+        setCurrentPage(1);
+        return;
+      }
       //支持列点击排序
       if (!isEmpty(sorter)) {
         const resource = model.context.blockModel.resource;
@@ -138,7 +172,7 @@ const DisplayTable = (props) => {
         await resource.refresh();
       }
     },
-    [model],
+    [isFormAssociation, model],
   );
 
   return (
@@ -147,7 +181,7 @@ const DisplayTable = (props) => {
       size={size}
       rowKey={collection.filterTargetKey}
       scroll={{ x: 'max-content' }}
-      dataSource={value}
+      dataSource={sortedValue}
       columns={getColumns()}
       pagination={pagination}
       onChange={handleChange}
@@ -269,3 +303,4 @@ DisplaySubTableFieldModel.define({
 });
 
 DetailsItemModel.bindModelToInterface('DisplaySubTableFieldModel', ['m2m', 'o2m', 'mbm']);
+FormAssociationItemModel.bindModelToInterface('DisplaySubTableFieldModel', ['m2m', 'o2m', 'mbm']);

package/src/flow/models/fields/DisplayAssociationField/__tests__/DisplaySubTableFieldModel.test.tsx

@@ -0,0 +1,351 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import React from 'react';
+import { Form, type FormInstance, type TableProps } from 'antd';
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react';
+import { DisplayItemModel, FlowEngine, FlowEngineProvider, FlowModelProvider } from '@nocobase/flow-engine';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  DetailsItemModel,
+  DisplaySubTableFieldModel,
+  DisplayTextFieldModel,
+  FormAssociationItemModel,
+  FormItemModel,
+  TableColumnModel,
+  aclCheck,
+  displayFieldComponent,
+  fixed,
+  overflowMode,
+  titleField,
+} from '../../../../index';
+import { buildAssociationOptions } from '../../../../actions/displayFieldComponent';
+import { rebuildFieldSubModel } from '../../../../internal/utils/rebuildFieldSubModel';
+
+type Row = Record<string, unknown>;
+type TableOptions = TableProps<Row>;
+
+const { tableRender } = vi.hoisted(() => ({ tableRender: vi.fn() }));
+
+vi.mock('react-i18next', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('react-i18next')>()),
+  useTranslation: () => ({ t: (value: string) => value }),
+}));
+
+vi.mock('antd', async (importOriginal) => ({
+  ...(await importOriginal<typeof import('antd')>()),
+  Table: (props: TableOptions) => {
+    tableRender(props);
+    return <div data-testid="rows">{JSON.stringify(props.dataSource)}</div>;
+  },
+}));
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  tableRender.mockClear();
+});
+
+function setup(parentUse = 'FormAssociationItemModel') {
+  const engine = new FlowEngine();
+  engine.registerActions({ aclCheck, displayFieldComponent, fixed, overflowMode, titleField });
+  engine.registerModels({
+    DetailsItemModel,
+    DisplaySubTableFieldModel,
+    DisplayTextFieldModel,
+    FormAssociationItemModel,
+    FormItemModel,
+    TableColumnModel,
+  });
+  const dataSource = engine.dataSourceManager.getDataSource('main');
+  dataSource.addCollection({
+    name: 'users',
+    filterTargetKey: 'id',
+    titleField: 'name',
+    fields: [
+      { name: 'id', type: 'integer', interface: 'integer' },
+      { name: 'name', type: 'string', interface: 'input' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'orgs',
+    fields: [
+      { name: 'staff', type: 'belongsToMany', interface: 'm2m', target: 'users' },
+      { name: 'reports', type: 'hasMany', interface: 'o2m', target: 'users' },
+      { name: 'members', type: 'belongsToArray', interface: 'mbm', target: 'users' },
+      { name: 'manager', type: 'belongsTo', interface: 'm2o', target: 'users' },
+      { name: 'name', type: 'string', interface: 'input' },
+    ],
+  });
+  dataSource.addCollection({
+    name: 'posts',
+    fields: [{ name: 'org', type: 'belongsTo', interface: 'm2o', target: 'orgs' }],
+  });
+  const parent = engine.createModel<FormAssociationItemModel>({
+    use: parentUse,
+    stepParams: {
+      fieldSettings: {
+        init: { dataSourceKey: 'main', collectionName: 'posts', fieldPath: 'org.staff' },
+      },
+    },
+  });
+  const resource = { getAppends: vi.fn(() => ['staff']), setAppends: vi.fn(), refresh: vi.fn() };
+  parent.context.defineProperty('blockModel', {
+    value: { collection: dataSource.getCollection('posts'), resource, addAppends: vi.fn() },
+  });
+  parent.context.defineProperty('flowSettingsEnabled', { value: false });
+  parent.context.defineProperty('aclCheck', { value: vi.fn().mockResolvedValue(true) });
+  const field = parent.setSubModel('field', { use: 'DisplaySubTableFieldModel', props: { pageSize: 10 } });
+  return { engine, parent, field: field as DisplaySubTableFieldModel, resource, dataSource };
+}
+
+function tableProps(): TableOptions {
+  return tableRender.mock.lastCall[0] as TableOptions;
+}
+
+describe('DisplaySubTableFieldModel in association display fields', () => {
+  it.each(['staff', 'reports', 'members'])('offers a subtable for the to-many field %s', (fieldName) => {
+    const { parent, dataSource } = setup();
+    const collectionField = dataSource.getCollection('orgs').getField(fieldName);
+    const bindings = FormAssociationItemModel.getBindingsByField(parent.context, collectionField);
+    expect(bindings.map((binding) => binding.modelName)).toContain('DisplaySubTableFieldModel');
+    expect(buildAssociationOptions(parent.context, FormAssociationItemModel)).toContainEqual({
+      label: expect.any(String),
+      value: 'DisplaySubTableFieldModel',
+    });
+  });
+
+  it('keeps the binding scoped and preserves the default title-field display', () => {
+    const { parent, dataSource } = setup();
+    const collection = dataSource.getCollection('orgs');
+    for (const itemModel of [DisplayItemModel, TableColumnModel, FormItemModel]) {
+      expect(itemModel.getBindingsByField(parent.context, collection.getField('staff'))).not.toEqual(
+        expect.arrayContaining([expect.objectContaining({ modelName: 'DisplaySubTableFieldModel' })]),
+      );
+    }
+    for (const fieldName of ['manager', 'name']) {
+      expect(FormAssociationItemModel.getBindingsByField(parent.context, collection.getField(fieldName))).not.toEqual(
+        expect.arrayContaining([expect.objectContaining({ modelName: 'DisplaySubTableFieldModel' })]),
+      );
+    }
+    expect(DetailsItemModel.getBindingsByField(parent.context, collection.getField('staff'))).toEqual(
+      expect.arrayContaining([expect.objectContaining({ modelName: 'DisplaySubTableFieldModel' })]),
+    );
+    expect(
+      FormAssociationItemModel.getDefaultBindingByField(parent.context, collection.getField('staff'), {
+        fallbackToTargetTitleField: true,
+      })?.modelName,
+    ).toBe('DisplayTextFieldModel');
+  });
+
+  it.each([undefined, null, [], { rows: [] }])('renders an empty table for %j', (value) => {
+    const { field } = setup();
+    field.setProps({ value });
+    render(field.render());
+    expect(tableProps().dataSource).toEqual([]);
+  });
+
+  it('updates rows and resets pagination when the association changes or is cleared', async () => {
+    const { field, resource } = setup();
+    field.setProps({ value: [{ id: 1, name: 'Alice' }] });
+    const view = render(field.render());
+    await act(async () => {
+      const pagination = tableProps().pagination;
+      if (pagination) pagination.onChange?.(3, 10);
+    });
+    expect(tableProps().pagination).toMatchObject({ current: 3 });
+    act(() => {
+      field.setProps({ value: { rows: [{ id: 2, name: 'Bob' }] } });
+      view.rerender(field.render());
+    });
+    expect(screen.getByTestId('rows').textContent).toContain('Bob');
+    expect(screen.getByTestId('rows').textContent).not.toContain('Alice');
+    expect(tableProps().pagination).toMatchObject({ current: 1 });
+    act(() => {
+      field.setProps({ value: null });
+      view.rerender(field.render());
+    });
+    expect(tableProps().dataSource).toEqual([]);
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('sorts nested columns locally without mutating form values or refreshing the form resource', async () => {
+    const { field, resource } = setup();
+    const rows = [
+      { id: 1, name: 'Bob' },
+      { id: 2, name: 'Alice' },
+    ];
+    const original = structuredClone(rows);
+    field.setProps({ value: rows });
+    render(field.render());
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'org.staff.name', order: 'ascend' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual([rows[1], rows[0]]);
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'org.staff.name', order: 'descend' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual(rows);
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'org.staff.name' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual(rows);
+    expect(rows).toEqual(original);
+    expect(resource.setAppends).not.toHaveBeenCalled();
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('retains resource-based sorting in details fields', async () => {
+    const { field, resource } = setup('DetailsItemModel');
+    field.setProps({ value: [{ id: 1 }] });
+    render(field.render());
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'name', order: 'ascend' },
+        {
+          action: 'sort',
+          currentDataSource: [],
+        },
+      );
+    });
+    expect(resource.setAppends).toHaveBeenCalledWith(['staff(sort=name)']);
+    expect(resource.refresh).toHaveBeenCalledOnce();
+  });
+
+  it('uses the configured sort field and keeps local ordering when paginating', async () => {
+    const { field, resource } = setup();
+    const rows = [{ id: 10 }, { id: 2 }];
+    field.setProps({ value: rows });
+    render(field.render());
+    const column: NonNullable<TableOptions['columns']>[number] & { sortField: string } = {
+      sortField: 'org.staff.id',
+    };
+    await act(async () => {
+      await tableProps().onChange?.(
+        {},
+        {},
+        { field: 'other', column, order: 'ascend' },
+        {
+          action: 'sort',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual([rows[1], rows[0]]);
+    await act(async () => {
+      await tableProps().onChange?.(
+        { current: 2 },
+        {},
+        {},
+        {
+          action: 'paginate',
+          currentDataSource: rows,
+        },
+      );
+    });
+    expect(tableProps().dataSource).toEqual([rows[1], rows[0]]);
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('follows form association changes without writing displayed records into the form', async () => {
+    vi.spyOn(window, 'matchMedia').mockImplementation((query) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    }));
+    const { engine, parent, resource } = setup();
+    let form: FormInstance;
+    const firstOrg = { id: 1, staff: [{ id: 1, name: 'Alice' }] };
+    const secondOrg = { id: 2, staff: [{ id: 2, name: 'Bob' }] };
+    function TestForm() {
+      const [formInstance] = Form.useForm();
+      form = formInstance;
+      parent.context.defineProperty('form', { value: formInstance });
+      parent.context.defineProperty('formValues', { get: () => formInstance.getFieldsValue(true), cache: false });
+      return (
+        <Form form={formInstance} initialValues={{ org: firstOrg, note: 'unsaved' }}>
+          <FlowModelProvider model={parent}>{parent.renderItem()}</FlowModelProvider>
+        </Form>
+      );
+    }
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestForm />
+      </FlowEngineProvider>,
+    );
+    await waitFor(() => expect(screen.getByTestId('rows').textContent).toContain('Alice'));
+    act(() => form.setFieldValue('org', secondOrg));
+    await waitFor(() => expect(screen.getByTestId('rows').textContent).toContain('Bob'));
+    expect(form.getFieldsValue(true)).toEqual({ org: secondOrg, note: 'unsaved' });
+    act(() => form.setFieldValue('org', null));
+    await waitFor(() => expect(tableProps().dataSource).toEqual([]));
+    expect(form.getFieldsValue(true)).toEqual({ org: null, note: 'unsaved' });
+    expect(resource.refresh).not.toHaveBeenCalled();
+  });
+
+  it('keeps nested column paths and column configuration when switching components', async () => {
+    const { parent, field } = setup();
+    vi.spyOn(parent, 'save').mockResolvedValue(undefined);
+    const column = field.addSubModel('columns', {
+      use: 'TableColumnModel',
+      stepParams: {
+        fieldSettings: {
+          init: { dataSourceKey: 'main', collectionName: 'posts', fieldPath: 'org.staff.name' },
+        },
+      },
+      subModels: { field: { use: 'DisplayTextFieldModel' } },
+    });
+    expect(field.context.prefixFieldPath).toBe('org.staff');
+    expect(field.collection.name).toBe('users');
+    const columnField = column.subModels.field as DisplayTextFieldModel;
+    const createFork = vi.spyOn(columnField, 'createFork');
+    (column as TableColumnModel).renderItem()(undefined, { id: 1, name: 'Alice' }, 0);
+    expect(createFork.mock.results[0].value.props.value).toBe('Alice');
+    expect(createFork.mock.results[0].value.context.record).toEqual({ id: 1, name: 'Alice' });
+    await rebuildFieldSubModel({ parentModel: parent, targetUse: 'DisplayTextFieldModel' });
+    await rebuildFieldSubModel({ parentModel: parent, targetUse: 'DisplaySubTableFieldModel' });
+    const rebuilt = parent.subModels.field as DisplaySubTableFieldModel;
+    expect(rebuilt.uid).toBe(field.uid);
+    expect(rebuilt.serialize().subModels.columns[0]).toMatchObject({
+      uid: column.uid,
+      stepParams: { fieldSettings: { init: { fieldPath: 'org.staff.name' } } },
+    });
+  });
+});

package/src/flow/models/fields/DisplayHtmlFieldModel.tsx

@@ -8,6 +8,7 @@
  */
 
 import { DisplayItemModel, tExpr } from '@nocobase/flow-engine';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
 import React from 'react';
 import { DisplayMarkdown } from '../../internal/components/Markdown/DisplayMarkdown';
 import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
@@ -15,7 +16,7 @@ import { DisplayTitleFieldModel } from './DisplayTitleFieldModel';
 export class DisplayHtmlFieldModel extends DisplayTitleFieldModel {
   public renderComponent(value) {
     const { textOnly = true } = this.props;
-    return <DisplayMarkdown {...this.props} textOnly={textOnly} value={value} />;
+    return <DisplayMarkdown {...this.props} sanitizeHtml={sanitizeRichTextHtml} textOnly={textOnly} value={value} />;
   }
 }
 

package/src/flow/models/fields/DisplayNumberFieldModel.tsx

@@ -71,7 +71,7 @@ function formatBigNumberWithSeparator(value, format = '0.00', step = 1, formatSt
   let number = value;
 
   if (formatStyle) {
-    number = new BigNumber(value).toString();
+    number = new BigNumber(value).toFixed();
   }
 
   let formattedNumber = '';

package/src/flow/models/fields/JsonFieldModel.tsx

@@ -13,6 +13,22 @@ import JSON5 from 'json5';
 import React, { useState, useEffect, useRef } from 'react';
 import { FieldModel } from '../base/FieldModel';
 
+const jsonValidationRuleMarker = '__jsonSyntaxValidation';
+
+interface JsonValidationRule {
+  [jsonValidationRuleMarker]: true;
+  type: 'any';
+  validator?: (_rule: unknown, value: unknown) => Promise<void>;
+}
+
+function isRuleObject(rule: unknown): rule is Record<string, unknown> {
+  return typeof rule === 'object' && rule !== null;
+}
+
+function isJsonValidationRule(rule: unknown): rule is JsonValidationRule {
+  return isRuleObject(rule) && rule[jsonValidationRuleMarker] === true;
+}
+
 const jsonCss = css`
   font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
   font-size: 14px;
@@ -40,7 +56,7 @@ export const JsonInput = observer((props: any) => {
     }
 
     internalChange.current = false;
-  }, [value]);
+  }, [_JSON, space, value]);
 
   // 用户输入时
   const handleChange = (ev) => {
@@ -91,23 +107,30 @@ JsonFieldModel.registerFlow({
   key: 'jsonInitSetting',
   steps: {
     initValidation: {
-      handler(ctx, params) {
-        const rules = ctx.model.parent.props.rules || [];
+      handler(ctx) {
+        const currentRules = Array.isArray(ctx.model.parent.props.rules) ? ctx.model.parent.props.rules : [];
+        const rules = currentRules.filter((rule: unknown) => {
+          return (!isRuleObject(rule) || Object.keys(rule).length > 0) && !isJsonValidationRule(rule);
+        });
         // 添加 JSON 语法校验规则
         rules.push({
-          validator: (_, value) => {
+          // validator 函数序列化后会被丢弃；保留 any 类型可避免持久化规则退化为默认字符串校验。
+          type: 'any',
+          [jsonValidationRuleMarker]: true,
+          validator: (_rule: unknown, value: unknown) => {
             // 允许空
             if (value === null || value === undefined || value === '') return Promise.resolve();
             // 如果已经是对象/数组，直接通过
             if (typeof value === 'object') return Promise.resolve();
             try {
-              JSON.parse(value);
+              JSON.parse(String(value));
               return Promise.resolve();
-            } catch (err) {
-              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + err.message);
+            } catch (error) {
+              const message = error instanceof Error ? error.message : String(error);
+              return Promise.reject(ctx.t('Invalid JSON format') + ': ' + message);
             }
           },
-        });
+        } satisfies JsonValidationRule);
         ctx.model.parent.setProps({
           rules,
         });

package/src/flow/models/fields/NumberFieldModel.tsx

@@ -20,7 +20,7 @@ function toSafeNumber(value) {
     return value;
   }
   if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
-    return new BigNumber(value).toString();
+    return new BigNumber(value).toFixed();
   } else {
     return Number(value);
   }

package/src/flow/models/fields/RichTextFieldModel/__tests__/RichTextFieldModel.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { act, render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { RichTextField } from '..';
+
+const mockState = vi.hoisted(() => ({
+  onChange: undefined as ((value: string) => void) | undefined,
+  value: undefined as unknown,
+}));
+
+vi.mock('../../../../../flow-compat', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../../../../flow-compat')>();
+  return {
+    ...actual,
+    lazy: () => (props: { onChange?: (value: string) => void; value?: unknown }) => {
+      mockState.onChange = props.onChange;
+      mockState.value = props.value;
+      return null;
+    },
+  };
+});
+
+describe('RichTextField edit mode sanitization', () => {
+  beforeEach(() => {
+    mockState.onChange = undefined;
+    mockState.value = undefined;
+  });
+
+  it('sanitizes stored HTML before passing it to ReactQuill', () => {
+    const payload = '<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>';
+
+    render(<RichTextField value={payload} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(sanitizeRichTextHtml(payload));
+  });
+
+  it('preserves Delta values', () => {
+    const delta = { ops: [{ insert: 'safe\n' }] };
+
+    render(<RichTextField value={delta} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(delta);
+  });
+
+  it('does not normalize active editor feedback', () => {
+    const editorValue = '<p>Hello<br>World</p>';
+    expect(sanitizeRichTextHtml(editorValue)).not.toBe(editorValue);
+
+    const { rerender } = render(<RichTextField value="" onChange={vi.fn()} />);
+    act(() => mockState.onChange?.(editorValue));
+    rerender(<RichTextField value={editorValue} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(editorValue);
+  });
+
+  it('sanitizes subsequent external values', () => {
+    const payload = '<img src=x onerror="alert(1)">';
+    const { rerender } = render(<RichTextField value="" onChange={vi.fn()} />);
+
+    rerender(<RichTextField value={payload} onChange={vi.fn()} />);
+
+    expect(mockState.value).toBe(sanitizeRichTextHtml(payload));
+  });
+});