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

package/src/flow/admin-shell/admin-layout/AdminLayoutComponent.tsx

@@ -18,7 +18,6 @@ import { theme as antdTheme, ConfigProvider, Grid, Popover } from 'antd';
 import { createStyles, createGlobalStyle } from 'antd-style';
 import React, { FC, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import {
   AdminLayoutMenuModelRenderer,
@@ -35,7 +34,6 @@ import { ResetThemeTokenAndKeepAlgorithm } from './ResetThemeTokenAndKeepAlgorit
 import { PinnedPluginListLite } from './PinnedPluginListLite';
 import { useApplications } from './useApplications';
 import { useGlobalTheme, type CustomToken } from '../../../theme';
-import { useSystemSettings } from '../../system-settings';
 import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../../flow-compat';
 import {
   FLOW_SETTINGS_PREFERENCE_CHANGE_EVENT,
@@ -44,60 +42,7 @@ import {
 } from './flowSettingsPreference';
 import { joinAdminLayoutRoutePath, type AdminLayoutRoutePathLike } from './resolveAdminRouteRuntimeTarget';
 import { useAppListRender } from './AppListRender';
-
-const className1 = css`
-  height: var(--nb-header-height);
-  margin-right: 4px;
-  display: inline-flex;
-  flex-shrink: 0;
-  color: #fff;
-  padding: 0;
-  align-items: center;
-`;
-const className1WithFixedWidth = css`
-  ${className1}
-  width: 168px;
-`;
-const className1WithAutoWidth = css`
-  ${className1}
-  width: auto;
-  min-width: 168px;
-`;
-const className2 = css`
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
-`;
-const className3 = css`
-  width: 100%;
-  height: 100%;
-  font-weight: 500;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-
-const NocoBaseLogo = observer(() => {
-  const { token } = antdTheme.useToken();
-  const customToken = token as CustomToken;
-  const result = useSystemSettings();
-  const { t } = useTranslation('lm-collections');
-  const fontSizeStyle = useMemo(() => ({ fontSize: customToken.fontSizeHeading3 }), [customToken.fontSizeHeading3]);
-
-  const hasLogo = result?.data?.data?.logo?.url;
-  const logo = hasLogo ? (
-    <img className={className2} src={result?.data?.data?.logo?.url} />
-  ) : (
-    <span style={fontSizeStyle} className={className3}>
-      {t(result?.data?.data?.title)}
-    </span>
-  );
-
-  return (
-    <div className={hasLogo ? className1WithFixedWidth : className1WithAutoWidth}>{result?.loading ? null : logo}</div>
-  );
-});
+import { NocoBaseLogo } from './NocoBaseLogo';
 
 const resetStyle = css`
   .ant-layout-sider-children {

package/src/flow/admin-shell/admin-layout/NocoBaseLogo.tsx

@@ -0,0 +1,77 @@
+/**
+ * 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 { css } from '@emotion/css';
+import { observer } from '@nocobase/flow-engine';
+import { theme as antdTheme } from 'antd';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSystemSettings } from '../../system-settings';
+import type { CustomToken } from '../../../theme';
+
+const logoContainerClassName = css`
+  height: var(--nb-header-height);
+  margin-right: 4px;
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0;
+  align-items: center;
+`;
+
+const fixedWidthClassName = css`
+  ${logoContainerClassName}
+  width: 168px;
+`;
+
+const autoWidthClassName = css`
+  ${logoContainerClassName}
+  width: auto;
+  min-width: 168px;
+`;
+
+const logoImageClassName = css`
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+`;
+
+const titleClassName = css`
+  width: 100%;
+  height: 100%;
+  font-weight: 500;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export const NocoBaseLogo = observer(() => {
+  const { token } = antdTheme.useToken();
+  const customToken = token as CustomToken;
+  const result = useSystemSettings();
+  const { t } = useTranslation('lm-collections');
+  const title = t(result?.data?.data?.title || 'NocoBase');
+  const logoUrl = result?.data?.data?.logo?.url;
+  const titleStyle = useMemo<React.CSSProperties>(
+    () => ({ color: customToken.colorTextHeaderMenu, fontSize: customToken.fontSizeHeading3 }),
+    [customToken.colorTextHeaderMenu, customToken.fontSizeHeading3],
+  );
+
+  const logo = logoUrl ? (
+    <img alt={title} className={logoImageClassName} src={logoUrl} />
+  ) : (
+    <span style={titleStyle} className={titleClassName}>
+      {title}
+    </span>
+  );
+
+  return <div className={logoUrl ? fixedWidthClassName : autoWidthClassName}>{result?.loading ? null : logo}</div>;
+});
+
+NocoBaseLogo.displayName = 'NocoBaseLogo';

package/src/flow/admin-shell/admin-layout/TopbarActionsBar.tsx

@@ -24,7 +24,9 @@ const topbarActionsBarClassName = css`
   align-items: center;
   color: var(--nb-topbar-action-color);
 
-  .nb-topbar-actions-list {
+  .nb-topbar-actions-list,
+  .nb-topbar-utility-actions-list,
+  .nb-topbar-plugin-settings-action {
     display: inline-flex;
     align-items: center;
     height: 100%;
@@ -127,12 +129,18 @@ const getTopbarActionId = (action: TopbarActionModel) => {
   return action?.actionId || action?.uid || '';
 };
 
+const PLUGIN_SETTINGS_ACTION_ID = 'plugin-settings';
+
 const TopbarActionsContent = React.memo((props: { actions: TopbarActionModel[]; onActionClick?: () => void }) => {
   const { allow } = useAclSnippets();
   const { token } = theme.useToken();
   const customToken = token as CustomToken;
   const actions = useMemo(() => getVisibleTopbarActions(props.actions, allow), [allow, props.actions]);
-  const mainActions = actions.filter((action) => getTopbarActionId(action) !== USER_CENTER_ACTION_ID);
+  const mainActions = actions.filter((action) => {
+    const actionId = getTopbarActionId(action);
+    return actionId !== PLUGIN_SETTINGS_ACTION_ID && actionId !== USER_CENTER_ACTION_ID;
+  });
+  const pluginSettingsAction = actions.find((action) => getTopbarActionId(action) === PLUGIN_SETTINGS_ACTION_ID);
   const userCenterAction = actions.find((action) => getTopbarActionId(action) === USER_CENTER_ACTION_ID);
 
   return (
@@ -153,18 +161,33 @@ const TopbarActionsContent = React.memo((props: { actions: TopbarActionModel[];
       <ConfigProvider theme={dividerTheme}>
         <Divider type="vertical" />
       </ConfigProvider>
-      <HelpLite />
-      {userCenterAction ? (
-        <ErrorBoundary
-          key={userCenterAction.uid}
-          FallbackComponent={TopbarActionErrorFallback}
-          onError={(error) => {
-            console.error('[NocoBase] Topbar action render failed.', error);
-          }}
-        >
-          <FlowModelRenderer model={userCenterAction} />
-        </ErrorBoundary>
-      ) : null}
+      <div className="nb-topbar-utility-actions-list">
+        {pluginSettingsAction ? (
+          <span className="nb-topbar-plugin-settings-action" onClick={props.onActionClick}>
+            <ErrorBoundary
+              key={pluginSettingsAction.uid}
+              FallbackComponent={TopbarActionErrorFallback}
+              onError={(error) => {
+                console.error('[NocoBase] Topbar action render failed.', error);
+              }}
+            >
+              <FlowModelRenderer model={pluginSettingsAction} />
+            </ErrorBoundary>
+          </span>
+        ) : null}
+        <HelpLite />
+        {userCenterAction ? (
+          <ErrorBoundary
+            key={userCenterAction.uid}
+            FallbackComponent={TopbarActionErrorFallback}
+            onError={(error) => {
+              console.error('[NocoBase] Topbar action render failed.', error);
+            }}
+          >
+            <FlowModelRenderer model={userCenterAction} />
+          </ErrorBoundary>
+        ) : null}
+      </div>
     </div>
   );
 });

package/src/flow/admin-shell/admin-layout/__tests__/TopbarActionsBar.test.tsx

@@ -136,6 +136,16 @@ describe('TopbarActionsBar helpers', () => {
           title: 'Plugin manager',
           path: '/admin/settings/plugin-manager',
           icon: null,
+          sort: -200,
+          componentLoader: async () => null,
+        },
+        {
+          key: 'multi-portal',
+          name: 'multi-portal',
+          title: 'Portal manager',
+          path: '/admin/settings/multi-portal',
+          icon: null,
+          sort: -300,
           componentLoader: async () => null,
         },
         {
@@ -159,13 +169,14 @@ describe('TopbarActionsBar helpers', () => {
     });
 
     expect((items as any[]).map((item) => item.type || item.key)).toEqual([
+      'multi-portal',
       'plugin-manager',
       'divider',
       'system-settings',
       'divider',
       'security',
     ]);
-    expect((items as any[])[2]).toMatchObject({
+    expect((items as any[]).find((item) => item.key === 'system-settings')).toMatchObject({
       key: 'system-settings',
       name: 'system-settings',
       path: '/admin/settings/system-settings',
@@ -191,7 +202,7 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
@@ -216,7 +227,7 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'Plugin manager' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/plugin-manager');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/plugin-manager');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
@@ -241,13 +252,13 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/crm-amd/ekeisumx1zu');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/apps/a_9xlild35jir/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
     expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
     expect(link).toHaveAttribute('rel', expect.stringContaining('noreferrer'));
   });
 
-  it('should keep regular admin settings as SPA links inside admin runtime', () => {
+  it('should open regular admin settings in the standalone SPA from admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -266,11 +277,12 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/admin/settings/routes');
 
     const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
   });
 
-  it('should keep sub-app admin settings in the current window inside sub-app admin runtime', () => {
+  it('should open sub-app settings in the standalone SPA from sub-app admin runtime', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -289,8 +301,9 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/apps/a_9xlild35jir/admin/settings/routes');
 
     const link = screen.getByRole('link', { name: 'Routes' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/apps/a_9xlild35jir/admin/settings/routes');
-    expect(link).not.toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/apps/a_9xlild35jir/routes');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', expect.stringContaining('noopener'));
   });
 
   it('should not treat admin-like paths as admin runtime', () => {
@@ -312,11 +325,11 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/admin2/foo');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
     expect(link).toHaveAttribute('target', '_blank');
   });
 
-  it('should not duplicate the basename when building new-tab settings hrefs', () => {
+  it('should remove the modern basename when building standalone settings hrefs', () => {
     const items = getTopbarPluginSettingsItems({
       canManagePlugins: false,
       t: (key) => key,
@@ -335,7 +348,30 @@ describe('TopbarActionsBar helpers', () => {
     renderSettingsLabel((items as any[])[0].label, '/sales/p1');
 
     const link = screen.getByRole('link', { name: 'System settings' });
-    expect(link).toHaveAttribute('href', '/nocobase/v/admin/settings/system-settings');
+    expect(link).toHaveAttribute('href', '/nocobase/settings/system-settings');
+  });
+
+  it('should preserve the new sub-app scope in standalone settings hrefs', () => {
+    const items = getTopbarPluginSettingsItems({
+      canManagePlugins: false,
+      t: (key) => key,
+      settings: [
+        {
+          key: 'system-settings',
+          name: 'system-settings',
+          title: 'System settings',
+          path: '/admin/settings/system-settings',
+          icon: null,
+          componentLoader: async () => null,
+        },
+      ] as any,
+    });
+
+    renderSettingsLabel((items as any[])[0].label, '/_app/a_new/admin/settings/system-settings');
+
+    const link = screen.getByRole('link', { name: 'System settings' });
+    expect(link).toHaveAttribute('href', '/nocobase/settings/_app/a_new/system-settings');
+    expect(link).toHaveAttribute('target', '_blank');
   });
 
   it('should keep external settings opening in a new tab', () => {
@@ -402,6 +438,34 @@ describe('TopbarActionsBar', () => {
     vi.restoreAllMocks();
   });
 
+  it('should group plugin settings with Help and user center', () => {
+    render(
+      <TopbarActionsBar
+        actions={[
+          createAction({ uid: 'notification', actionId: 'notification' }),
+          createAction({ uid: 'plugin-settings', actionId: 'plugin-settings' }),
+          createAction({ uid: 'user-center', actionId: 'user-center' }),
+        ]}
+      />,
+    );
+
+    const notification = screen.getByTestId('flow-model-notification');
+    const pluginSettings = screen.getByTestId('flow-model-plugin-settings');
+    const help = screen.getByTestId('help-lite');
+    const userCenter = screen.getByTestId('flow-model-user-center');
+    const mainGroup = notification.closest('.nb-topbar-actions-list');
+    const utilityGroup = pluginSettings.closest('.nb-topbar-utility-actions-list');
+
+    expect(mainGroup).toContainElement(notification);
+    expect(mainGroup).not.toContainElement(pluginSettings);
+    expect(utilityGroup).not.toBeNull();
+    expect(utilityGroup).toContainElement(pluginSettings);
+    expect(utilityGroup).toContainElement(help);
+    expect(utilityGroup).toContainElement(userCenter);
+    expect(pluginSettings.compareDocumentPosition(help) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    expect(help.compareDocumentPosition(userCenter) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it('should keep HelpLite rendered when one action fails', () => {
     vi.spyOn(console, 'error').mockImplementation(() => {});
 

package/src/flow/internal/components/Markdown/DisplayMarkdown.tsx

@@ -7,16 +7,17 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useRef, useState, useEffect } from 'react';
-import { useParseMarkdown, convertToText } from './util';
-import { useMarkdownStyles } from './style';
+import React, { useEffect, useRef, useState } from 'react';
 import { Tooltip } from 'antd';
+import { useMarkdownStyles } from './style';
+import { convertToText, useParseMarkdown } from './util';
 
 export const DisplayMarkdown = (props) => {
-  const { textOnly, overflowMode, style } = props;
+  const { textOnly, overflowMode, sanitizeHtml, style } = props;
   const markdownClass = useMarkdownStyles();
   const { html = '' } = useParseMarkdown(props.value);
-  const text: any = convertToText(html);
+  const displayHtml = sanitizeHtml ? sanitizeHtml(html) : html;
+  const text = convertToText(displayHtml);
   const isEllipsis = overflowMode === 'ellipsis';
 
   const contentRef = useRef<HTMLDivElement>(null);
@@ -29,7 +30,7 @@ export const DisplayMarkdown = (props) => {
       const overflowed = el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
       setIsOverflowed(overflowed);
     }
-  }, [html, style, overflowMode]);
+  }, [displayHtml, style, overflowMode]);
 
   // 通用样式（用于 ellipsis 模式）
   const baseStyle: React.CSSProperties = {
@@ -48,11 +49,15 @@ export const DisplayMarkdown = (props) => {
       : {}),
   };
 
-  const content = (
+  const content = textOnly ? (
+    <div ref={contentRef} className={`${markdownClass} nb-markdown`} style={baseStyle}>
+      {text}
+    </div>
+  ) : (
     <div
       ref={contentRef}
       className={`${markdownClass} nb-markdown`}
-      dangerouslySetInnerHTML={{ __html: textOnly ? text : html }}
+      dangerouslySetInnerHTML={{ __html: displayHtml }}
       style={baseStyle}
     />
   );
@@ -61,7 +66,7 @@ export const DisplayMarkdown = (props) => {
     <Tooltip
       title={
         <div
-          dangerouslySetInnerHTML={{ __html: html }}
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
           style={{
             maxHeight: 500,
             overflowY: 'auto',

package/src/flow/internal/components/Markdown/__tests__/DisplayMarkdown.test.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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 { render } from '@nocobase/test/client';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import React from 'react';
+import { DisplayMarkdown } from '../DisplayMarkdown';
+
+vi.mock('../util', () => ({
+  useParseMarkdown: (value: string) => ({ html: value }),
+  convertToText: (value: string) => {
+    const element = document.createElement('div');
+    element.innerHTML = value;
+    return element.textContent || '';
+  },
+}));
+
+describe('DisplayMarkdown', () => {
+  it('sanitizes HTML mode', () => {
+    const { container } = render(
+      <DisplayMarkdown
+        value={'<p>safe</p><img src="https://example.com/image.png" onerror="alert(1)"><script>alert(1)</script>'}
+        sanitizeHtml={sanitizeRichTextHtml}
+        textOnly={false}
+      />,
+    );
+
+    expect(container.querySelector('p')).toHaveTextContent('safe');
+    expect(container.querySelector('img')).not.toHaveAttribute('onerror');
+    expect(container.querySelector('script')).toBeNull();
+  });
+
+  it('renders decoded text as a text node', () => {
+    const payload = '&lt;img src=x onerror=alert(document.domain)&gt;';
+    const { container } = render(<DisplayMarkdown value={payload} sanitizeHtml={sanitizeRichTextHtml} textOnly />);
+
+    expect(container).toHaveTextContent('<img src=x onerror=alert(document.domain)>');
+    expect(container.querySelector('img')).toBeNull();
+  });
+});

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/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));
+  });
+});

package/src/flow/models/fields/RichTextFieldModel/index.tsx

@@ -9,6 +9,8 @@
 
 import React from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
+import { sanitizeRichTextHtml } from '@nocobase/utils/client';
+import type ReactQuillComponent from 'react-quill';
 import { lazy } from '../../../../flow-compat';
 import { useRichTextStyles } from './style';
 import { FieldModel } from '../../base';
@@ -26,6 +28,8 @@ const ReactQuill = lazy(async () => {
   return import('react-quill');
 });
 
+type ReactQuillValue = ReactQuillComponent.ReactQuillProps['value'];
+
 export const RichTextField = (props) => {
   const richTextClass = useRichTextStyles();
   const boundsClass = React.useMemo(() => `quill-bounds-${Math.random().toString(36).slice(2, 9)}`, []);
@@ -83,19 +87,36 @@ export const RichTextField = (props) => {
     'break',
   ];
   const { value, onChange, disabled, modules: propsModules, formats: propsFormats } = props;
+  const previousIncomingValueRef = React.useRef(value);
+  const pendingEditorValueRef = React.useRef<{ value: ReactQuillValue }>();
+  const [editorValue, setEditorValue] = React.useState<ReactQuillValue>(() =>
+    typeof value === 'string' ? sanitizeRichTextHtml(value) : value,
+  );
+
+  React.useEffect(() => {
+    if (Object.is(value, previousIncomingValueRef.current)) {
+      return;
+    }
+    previousIncomingValueRef.current = value;
+    const pendingEditorValue = pendingEditorValueRef.current;
+    pendingEditorValueRef.current = undefined;
+    if (pendingEditorValue && Object.is(value, pendingEditorValue.value)) {
+      return;
+    }
+    setEditorValue(typeof value === 'string' ? sanitizeRichTextHtml(value) : value);
+  }, [value]);
 
   return (
     <ReactQuill
       className={`${richTextClass} ${boundsClass}`}
       modules={propsModules || modules}
       formats={propsFormats || formats}
-      value={value}
+      value={editorValue}
       onChange={(value) => {
-        if (value === '<p><br></p>') {
-          onChange('');
-        } else {
-          onChange(value);
-        }
+        const nextValue = value === '<p><br></p>' ? '' : value;
+        pendingEditorValueRef.current = { value: nextValue };
+        setEditorValue(nextValue);
+        onChange(nextValue);
       }}
       readOnly={disabled}
       bounds={`.${boundsClass}`}