@nocobase/client-v2 2.3.0-beta.2 → 2.3.0-beta.20

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}`}

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

@@ -13,6 +13,7 @@ import React from 'react';
 import { FieldModel } from '../base/FieldModel';
 import { MobileSelect } from './mobile-components/MobileSelect';
 import { enumToOptions, getSelectedEnumLabels, translateOptionLabel } from '../../internal/utils/enumOptionsUtils';
+import { syncQuickEditPreventClose } from '../../internal/utils/quickEditViewContainer';
 
 const getOriginalEnumOptions = (model: SelectFieldModel) => {
   const fromEnum = enumToOptions(model.context.collectionField?.uiSchema?.enum, model.translate) || [];
@@ -62,6 +63,10 @@ export class SelectFieldModel extends FieldModel {
           this.props.onChange?.(nextValue?.value);
         }}
         options={options}
+        onDropdownVisibleChange={(open) => {
+          syncQuickEditPreventClose(this, open);
+          this.props.onDropdownVisibleChange?.(open);
+        }}
         labelRender={(item) => item.label}
         maxTagCount="responsive"
         maxTagPlaceholder={(omittedValues) => (

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

@@ -27,6 +27,22 @@ function createInputFieldModel(props?: Record<string, unknown>) {
 }
 
 describe('InputFieldModel', () => {
+  it('aligns plain inputs with the top of other filter form controls', () => {
+    const model = createInputFieldModel();
+
+    render(<>{model.render()}</>);
+
+    expect(screen.getByRole('textbox')).toHaveStyle({ verticalAlign: 'top' });
+  });
+
+  it('preserves explicitly configured input styles', () => {
+    const model = createInputFieldModel({ style: { verticalAlign: 'middle', width: 200 } });
+
+    render(<>{model.render()}</>);
+
+    expect(screen.getByRole('textbox')).toHaveStyle({ verticalAlign: 'middle', width: '200px' });
+  });
+
   it('renders the normal input when scan input is disabled', () => {
     const consoleError = vi.spyOn(console, 'error').mockImplementation(() => undefined);
     const model = createInputFieldModel({ disableManualInput: true, enableScan: false });

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

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 import { SelectFieldModel } from '../SelectFieldModel';
 
 function mockT(text: string) {
@@ -40,4 +40,32 @@ describe('SelectFieldModel', () => {
 
     expect(element.props.value).toEqual({ label: '是', value: true });
   });
+
+  it('keeps the quick edit popover open while the dropdown is open', () => {
+    vi.useFakeTimers();
+    try {
+      const update = vi.fn();
+      const onDropdownVisibleChange = vi.fn();
+      const model = {
+        props: { value: undefined, onDropdownVisibleChange },
+        parent: { use: 'QuickEditFormModel', viewContainer: { update } },
+        context: { collectionField: { uiSchema: { enum: [] } } },
+        translate: mockT,
+      } as unknown as SelectFieldModel;
+
+      const element = SelectFieldModel.prototype.render.call(model) as React.ReactElement;
+
+      element.props.onDropdownVisibleChange(true);
+      expect(update).toHaveBeenCalledWith({ preventClose: true });
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(true);
+
+      element.props.onDropdownVisibleChange(false);
+      expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
+      expect(update).toHaveBeenCalledTimes(1);
+      vi.runAllTimers();
+      expect(update).toHaveBeenLastCalledWith({ preventClose: false });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
 });

package/src/flow/models/fields/mobile-components/MobileLazySelect.tsx

@@ -263,6 +263,7 @@ export function MobileLazySelect(props: Readonly<LazySelectProps>) {
     <>
       <Select
         {...restProps}
+        disabled={disabled}
         dropdownStyle={buildDropdownStyle(dropdownStyle)}
         fieldNames={fieldNames}
         options={realOptions}

package/src/flow/models/fields/mobile-components/__tests__/MobileSelect.test.tsx

@@ -388,6 +388,26 @@ describe('MobileLazySelect', () => {
     resetMockState();
   });
 
+  it.each([false, true])('updates the disabled trigger state in %s multiple mode', (multiple) => {
+    const onDropdownVisibleChange = vi.fn();
+    const { rerender } = renderMobileLazySelect({ multiple, onDropdownVisibleChange });
+
+    rerender({ disabled: true });
+
+    expect(mockState.selectProps?.disabled).toBe(true);
+    act(() => {
+      mockState.selectProps?.onClick?.();
+    });
+    expect(screen.queryByTestId('popup')).not.toBeInTheDocument();
+    expect(onDropdownVisibleChange).not.toHaveBeenCalled();
+
+    rerender({ disabled: false });
+
+    expect(mockState.selectProps?.disabled).toBe(false);
+    openLazyPopup();
+    expect(onDropdownVisibleChange).toHaveBeenCalledWith(true);
+  });
+
   it('renders a translated cancel action after searching', () => {
     renderMobileLazySelect();
 

package/src/flow/models/topbar/TopbarActionModel.tsx

@@ -201,12 +201,12 @@ function TopbarInternalSettingsLabel(props: { title: React.ReactNode; path?: str
       adminRoutePath: getTopbarAdminRoutePath(app),
     });
 
+    if (!shouldOpenInNewWindow) {
+      return <Link to={stripTopbarRouterBasePath(targetPathInCurrentApp, basename)}>{props.title}</Link>;
+    }
+
     return (
-      <a
-        href={href}
-        target={shouldOpenInNewWindow ? '_blank' : undefined}
-        rel={shouldOpenInNewWindow ? 'noopener noreferrer' : undefined}
-      >
+      <a href={href} target="_blank" rel="noopener noreferrer">
         {props.title}
       </a>
     );