@nocobase/client-v2 2.1.17 → 2.1.19

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

@@ -284,13 +284,36 @@ function SetIsMobileLayout(props: { isMobile: boolean; children: any; model?: Ad
   const flowEngine = useFlowEngine();
   const adminLayoutModel = props.model || flowEngine.getModel<AdminLayoutModel>(ADMIN_LAYOUT_MODEL_UID);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     adminLayoutModel?.setIsMobileLayout(props.isMobile);
   }, [adminLayoutModel, props.isMobile]);
 
   return props.children;
 }
 
+function AdminLayoutContentWithMobileState(props: {
+  isMobile: boolean;
+  model?: AdminLayoutModel;
+  onContentElementChange?: (element: HTMLDivElement | null) => void;
+}) {
+  const modelRef = useRef(props.model);
+  const isMobileRef = useRef(props.isMobile);
+  const onContentElementChangeRef = useRef(props.onContentElementChange);
+
+  modelRef.current = props.model;
+  isMobileRef.current = props.isMobile;
+  onContentElementChangeRef.current = props.onContentElementChange;
+
+  const handleContentElementChange = useCallback((element: HTMLDivElement | null) => {
+    if (element) {
+      modelRef.current?.setIsMobileLayout(isMobileRef.current);
+    }
+    onContentElementChangeRef.current?.(element);
+  }, []);
+
+  return <AdminLayoutContent onContentElementChange={handleContentElementChange} />;
+}
+
 const DesignerButtonMenuItem: FC<{ item: AdminLayoutMenuNode; fallbackParentRoute?: NocoBaseDesktopRoute }> = (
   props,
 ) => {
@@ -697,7 +720,11 @@ export const AdminLayoutComponent = observer((props: any) => {
                     <SetIsMobileLayout isMobile={isMobile} model={adminLayoutModel}>
                       <ConfigProvider theme={isMobile ? mobileTheme : theme}>
                         <GlobalStyle />
-                        <AdminLayoutContent onContentElementChange={handleLayoutContentElementChange} />
+                        <AdminLayoutContentWithMobileState
+                          isMobile={isMobile}
+                          model={adminLayoutModel}
+                          onContentElementChange={handleLayoutContentElementChange}
+                        />
                       </ConfigProvider>
                     </SetIsMobileLayout>
                   );

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

@@ -11,10 +11,12 @@ import React from 'react';
 import { observable } from '@formily/reactive';
 import { act, render, waitFor } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
 
-const { flowModelRendererSpy } = vi.hoisted(() => {
+const { flowModelRendererSpy, adminLayoutContentEffectSpy } = vi.hoisted(() => {
   return {
     flowModelRendererSpy: vi.fn(),
+    adminLayoutContentEffectSpy: vi.fn(),
   };
 });
 
@@ -35,6 +37,52 @@ vi.mock('@nocobase/flow-engine', async (importOriginal) => {
   };
 });
 
+vi.mock('@ant-design/pro-layout', async () => {
+  const ReactActual = await import('react');
+  const RouteContext = ReactActual.createContext({ isMobile: true });
+  const ProLayout = (props: { children?: React.ReactNode }) => {
+    return ReactActual.createElement(RouteContext.Provider, { value: { isMobile: true } }, props.children);
+  };
+
+  return {
+    default: ProLayout,
+    RouteContext,
+  };
+});
+
+vi.mock('../AdminLayoutSlotModels', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../AdminLayoutSlotModels')>();
+  const ReactActual = await import('react');
+
+  return {
+    ...actual,
+    AdminLayoutContent: (props: { onContentElementChange?: (element: HTMLDivElement | null) => void }) => {
+      const bindContentRef = ReactActual.useCallback(
+        (element: HTMLDivElement | null) => {
+          props.onContentElementChange?.(element);
+          if (element) {
+            adminLayoutContentEffectSpy();
+          }
+        },
+        [props.onContentElementChange],
+      );
+
+      return ReactActual.createElement('div', { ref: bindContentRef, 'data-testid': 'admin-layout-content' });
+    },
+  };
+});
+
+vi.mock('../useApplications', () => ({
+  useApplications: () => ({
+    Component: null,
+    appList: [],
+  }),
+}));
+
+vi.mock('../AppListRender', () => ({
+  useAppListRender: () => undefined,
+}));
+
 import {
   FlowEngine,
   FlowEngineProvider,
@@ -43,7 +91,7 @@ import {
   useFlowEngine,
   type FlowModel,
 } from '@nocobase/flow-engine';
-import { AdminLayoutModel, getAdminLayoutModel } from '..';
+import { AdminLayoutComponent, AdminLayoutModel, getAdminLayoutModel } from '..';
 import { getLayoutPageRouteName, getLayoutPageViewRouteName } from '../../../../layout-manager/utils';
 import { TopbarActionModel } from '../../../models/topbar/TopbarActionModel';
 import { UserCenterTopbarActionModel } from '../../../models/topbar/UserCenterTopbarActionModel';
@@ -83,6 +131,7 @@ const TestAdminLayoutHost = (props) => {
 describe('AdminLayoutModel runtime', () => {
   beforeEach(() => {
     flowModelRendererSpy.mockClear();
+    adminLayoutContentEffectSpy.mockReset();
   });
 
   it('should create model via getAdminLayoutModel and update props on rerender', async () => {
@@ -142,6 +191,46 @@ describe('AdminLayoutModel runtime', () => {
     expect(model.context.layoutContentElement).toBeNull();
   });
 
+  it('should expose mobile layout state before initial layout content effects run', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        listAccessible: vi.fn(() => []),
+        subscribe: vi.fn(),
+        unsubscribe: vi.fn(),
+        ensureAccessibleLoaded: vi.fn(() => Promise.resolve()),
+        moveRoute: vi.fn(() => Promise.resolve()),
+      },
+    });
+    const model = getAdminLayoutModel<AdminLayoutModel>(engine, { create: true });
+    if (!model) {
+      throw new Error('[NocoBase] Failed to create admin-layout-model.');
+    }
+    const modelLifecycle = model as unknown as { onMount: () => void; onUnmount: () => void };
+    modelLifecycle.onMount();
+    const observedMobileStates: boolean[] = [];
+    adminLayoutContentEffectSpy.mockImplementation(() => {
+      observedMobileStates.push(model.context.isMobileLayout);
+    });
+
+    const { unmount } = render(
+      <FlowEngineProvider engine={engine}>
+        <MemoryRouter initialEntries={['/admin/lrmg36pcahi']}>
+          <AdminLayoutComponent model={model} />
+        </MemoryRouter>
+      </FlowEngineProvider>,
+    );
+
+    await waitFor(() => {
+      expect(adminLayoutContentEffectSpy).toHaveBeenCalledTimes(1);
+    });
+
+    expect(observedMobileStates).toEqual([true]);
+
+    unmount();
+    modelLifecycle.onUnmount();
+  });
+
   it('should expose layout definition only while mounted', async () => {
     const engine = new FlowEngine();
     const { unmount } = render(
@@ -214,6 +303,54 @@ describe('AdminLayoutModel runtime', () => {
     });
   });
 
+  it('should keep route state when route page registers after route sync', async () => {
+    const engine = new FlowEngine();
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    const routeState = {
+      __nocobaseOpenViewInputArgs: {
+        popup: {
+          formData: {
+            start: '2026-06-24',
+            end: '2026-06-25',
+          },
+        },
+      },
+    };
+
+    act(() => {
+      model.syncLayoutRoute({
+        name: getLayoutPageViewRouteName('admin'),
+        pathname: '/admin/page-1/view/popup',
+        layoutBasePathname: '/admin',
+        state: routeState,
+      });
+    });
+
+    const coordinator = (model as any).getCoordinator();
+    const syncRoute = vi.spyOn(coordinator, 'syncRoute').mockImplementation(() => undefined);
+
+    act(() => {
+      model.registerRoutePage('page-1', {
+        active: true,
+        layoutContentElement: document.createElement('div'),
+      });
+    });
+
+    expect(syncRoute).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pageUid: 'page-1',
+        pathname: '/admin/page-1/view/popup',
+        state: routeState,
+      }),
+    );
+  });
+
   it('should parse RunJS openView route params into layout route view stack state', async () => {
     const token = encodeOpenViewRouteState('popup', { mode: 'dialog', size: 'large' });
     if (!token) {
@@ -395,6 +532,226 @@ describe('AdminLayoutModel runtime', () => {
     });
   });
 
+  it('should restore layout route from router context when a route page registers after stale cleanup', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.page',
+        pathname: '/admin/page-1',
+        params: { name: 'page-1' },
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+    const routeLike = {
+      name: 'admin.page',
+      pathname: '/admin/page-1',
+      layoutRouteName: 'admin',
+      layoutBasePathname: '/admin',
+    };
+
+    act(() => {
+      model.syncLayoutRoute(routeLike);
+      model.clearLayoutRoute(routeLike);
+    });
+
+    expect(model.context.layoutRoute).toBeNull();
+    const syncRouteSpy = vi.spyOn(model.getCoordinator(), 'syncRoute');
+    syncRouteSpy.mockClear();
+
+    act(() => {
+      model.registerRoutePage('page-1', {
+        active: true,
+      });
+    });
+
+    await waitFor(() => {
+      expect(model.context.layoutRoute).toMatchObject({
+        type: 'page',
+        pageUid: 'page-1',
+        pathname: '/admin/page-1',
+      });
+    });
+    expect(model.context.currentRoute.title).toBe('page-1');
+    expect(syncRouteSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        layoutRouteName: 'admin',
+        pageUid: 'page-1',
+        pathname: '/admin/page-1',
+        layoutBasePathname: '/admin',
+      }),
+    );
+  });
+
+  it('should restore layout route from a legacy dotted page view route name', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.page.view',
+        pathname: '/admin/page-1/view/popup',
+        params: { name: 'page-1' },
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.registerRoutePage('page-1', {
+        active: true,
+      });
+    });
+
+    expect(model.context.layoutRoute).toMatchObject({
+      type: 'page',
+      pageUid: 'page-1',
+      pathname: '/admin/page-1/view/popup',
+      viewStack: [{ viewUid: 'page-1' }, { viewUid: 'popup' }],
+    });
+    expect(model.context.currentRoute.title).toBe('page-1');
+  });
+
+  it('should not restore layout route from another layout when a route page registers', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.settings.publicForms.page',
+        pathname: '/admin/settings/public-forms/form-1',
+        params: { name: 'form-1' },
+        layoutRouteName: 'admin.settings.publicForms',
+        layoutBasePathname: '/admin/settings/public-forms',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.registerRoutePage('form-1', {
+        active: true,
+      });
+    });
+
+    expect(model.context.layoutRoute).toBeNull();
+    expect(model.context.currentRoute).toEqual({});
+  });
+
+  it('should not restore layout route from a nested layout route without layoutRouteName', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.settings.publicForms.page',
+        pathname: '/admin/settings/public-forms/form-1',
+        params: { name: 'form-1' },
+        layoutBasePathname: '/admin/settings/public-forms',
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+
+    act(() => {
+      model.registerRoutePage('form-1', {
+        active: true,
+      });
+    });
+
+    expect(model.context.layoutRoute).toBeNull();
+    expect(model.context.currentRoute).toEqual({});
+  });
+
+  it('should ignore stale layout route cleanup after a route page has registered on the same path', async () => {
+    const engine = new FlowEngine();
+    engine.context.defineProperty('route', {
+      value: {
+        name: 'admin.page',
+        pathname: '/admin/page-1',
+        params: { name: 'page-1' },
+      },
+    });
+    engine.context.defineProperty('routeRepository', {
+      value: {
+        getRouteBySchemaUid: (pageUid: string) => ({ title: pageUid }),
+      },
+    });
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <TestAdminLayoutHost />
+      </FlowEngineProvider>,
+    );
+
+    const model = engine.getModel<TestAdminLayoutModel>('admin-layout-model');
+    expect(model).toBeTruthy();
+    const staleRouteLike = {
+      name: 'admin.page',
+      pathname: '/admin/page-1',
+      layoutRouteName: 'admin',
+      layoutBasePathname: '/admin',
+    };
+
+    act(() => {
+      model.syncLayoutRoute(staleRouteLike);
+      model.clearLayoutRoute(staleRouteLike);
+      model.registerRoutePage('page-1', {
+        active: true,
+      });
+      model.clearLayoutRoute(staleRouteLike);
+    });
+
+    expect(model.context.layoutRoute).toMatchObject({
+      type: 'page',
+      pageUid: 'page-1',
+      pathname: '/admin/page-1',
+    });
+    expect(model.context.currentRoute.title).toBe('page-1');
+  });
+
   it('should keep pageActive in sync after non-active route page updates', async () => {
     const engine = new FlowEngine();
     engine.context.defineProperty('routeRepository', {

package/src/flow/common/Markdown/Display.tsx

@@ -12,6 +12,7 @@ import { css } from '@emotion/css';
 import { createRoot } from 'react-dom/client';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import Vditor from 'vditor';
+import { removeMarkdownIframes, stripMarkdownIframes } from '../../../utils/markdownSanitize';
 import { useCDN } from './useCDN';
 import useStyle from './style';
 
@@ -51,8 +52,15 @@ function DisplayInner(props: { value: string; style?: CSSProperties; loadImages?
       Vditor.preview(containerRef.current, props.value ?? '', {
         mode: 'light',
         cdn,
-      });
+        markdown: {
+          sanitize: true,
+        },
+        transform: stripMarkdownIframes,
+      })
+        .then(() => removeMarkdownIframes(containerRef.current))
+        .catch(() => removeMarkdownIframes(containerRef.current));
       setTimeout(() => {
+        removeMarkdownIframes(containerRef.current);
         containerRef.current?.querySelectorAll('img').forEach((img: HTMLImageElement) => {
           img.style.cursor = 'zoom-in';
           img.addEventListener('click', () => {
@@ -129,13 +137,16 @@ export const Display = (props) => {
       Vditor.md2html(props.value, {
         mode: 'light',
         cdn,
+        markdown: {
+          sanitize: true,
+        },
       })
         .then((html) => {
-          setText(convertToText(html));
+          setText(convertToText(stripMarkdownIframes(html)));
         })
         .catch(() => setText(''));
     }
-  }, [props.value, textOnly]);
+  }, [props.value, textOnly, cdn]);
 
   const isOverflowTooltip = useCallback(() => {
     if (!elRef.current) return false;

package/src/flow/common/Markdown/Edit.tsx

@@ -17,6 +17,7 @@ import React, { useEffect, useCallback, useLayoutEffect, useMemo, useRef, useSta
 import { useTranslation } from 'react-i18next';
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
+import { stripMarkdownIframeTags, stripMarkdownIframes } from '../../../utils/markdownSanitize';
 import { useCDN } from './useCDN';
 import useStyle from './style';
 
@@ -102,13 +103,20 @@ const Edit = (props) => {
     if (!containerRef.current) return;
 
     const toolbarConfig = placeToolbarTooltipsBelow(toolbar ?? defaultToolbar);
+    const safeValue = stripMarkdownIframeTags(value ?? '');
     const vditor = new Vditor(containerRef.current, {
-      value: value ?? '',
+      value: safeValue,
       lang,
       cache: { enable: false },
       undoDelay: 0,
       mode: props.mode || 'ir',
-      preview: { math: { engine: 'KaTeX' } },
+      preview: {
+        markdown: {
+          sanitize: true,
+        },
+        math: { engine: 'KaTeX' },
+        transform: stripMarkdownIframes,
+      },
       toolbar: toolbarConfig,
       fullscreen: { index: 1200 },
       cdn,
@@ -117,7 +125,6 @@ const Edit = (props) => {
       after: () => {
         vdRef.current = vditor;
         setEditorReady(true); // Notify that the editor is ready
-        vditor.setValue(value ?? '');
         if (disabled) {
           vditor.disabled();
         } else {
@@ -131,8 +138,12 @@ const Edit = (props) => {
           });
         }
       },
-      input(value) {
-        onChange(value);
+      input(nextValue) {
+        const safeNextValue = stripMarkdownIframeTags(nextValue);
+        if (safeNextValue !== nextValue) {
+          vditor.setValue(safeNextValue);
+        }
+        onChange(safeNextValue);
       },
       upload: {
         multiple: false,
@@ -229,8 +240,9 @@ const Edit = (props) => {
   useEffect(() => {
     if (editorReady && vdRef.current) {
       const editor = vdRef.current;
-      if (value !== editor.getValue()) {
-        editor.setValue(value ?? '');
+      const safeValue = stripMarkdownIframeTags(value ?? '');
+      if (safeValue !== editor.getValue()) {
+        editor.setValue(safeValue);
 
         const preArea = containerRef.current?.querySelector(
           'div.vditor-content > div.vditor-ir > pre',

package/src/flow/internal/components/Markdown/util.ts

@@ -9,13 +9,14 @@
 
 import _ from 'lodash';
 import { useEffect, useState } from 'react';
+import { stripMarkdownIframes } from '../../../../utils/markdownSanitize';
 
 export const parseMarkdown = _.memoize(async (text: string) => {
   if (!text) {
     return text;
   }
   const m = await import('./md');
-  return m.default.render(text);
+  return stripMarkdownIframes(m.default.render(text));
 });
 
 export function useParseMarkdown(text: string) {

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

@@ -9,56 +9,79 @@
 
 import { Input } from 'antd';
 import type { TextAreaProps } from 'antd/es/input';
-import type { TextAreaRef } from 'antd/es/input/TextArea';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { largeField, EditableItemModel } from '@nocobase/flow-engine';
 import { FieldModel } from '../base/FieldModel';
 
 function IMESafeTextArea(props: TextAreaProps) {
   const { value, onChange, onCompositionStart, onCompositionEnd, ...rest } = props;
-  const textAreaRef = useRef<TextAreaRef>(null);
-  const previousValueRef = useRef(value);
-  const defaultValue = typeof value === 'bigint' ? String(value) : value;
+  const [textAreaValue, setTextAreaValue] = useState<TextAreaProps['value']>(() => normalizeTextAreaValue(value));
+  const textAreaValueRef = useRef<TextAreaProps['value']>(textAreaValue);
+  const pendingLocalValuesRef = useRef<TextAreaProps['value'][]>([]);
 
   useEffect(() => {
-    if (Object.is(previousValueRef.current, value)) {
-      return;
-    }
-    previousValueRef.current = value;
+    const nextValue = normalizeTextAreaValue(value);
+    const pendingValues = pendingLocalValuesRef.current;
+    const pendingIndex = pendingValues.findIndex((item) => Object.is(item, nextValue));
 
-    const textArea = textAreaRef.current?.resizableTextArea?.textArea;
-    if (textArea) {
-      const nextValue = value == null ? '' : String(value);
-      if (textArea.value !== nextValue) {
-        textArea.value = nextValue;
+    if (pendingIndex >= 0) {
+      pendingValues.splice(0, pendingIndex + 1);
+      if (!Object.is(textAreaValueRef.current, nextValue)) {
+        return;
       }
     }
+
+    pendingValues.length = 0;
+    if (Object.is(textAreaValueRef.current, nextValue)) {
+      return;
+    }
+
+    textAreaValueRef.current = nextValue;
+    setTextAreaValue(nextValue);
   }, [value]);
 
   const getEventValue = (event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>) =>
     event.currentTarget.value;
 
+  const recordLocalValue = (
+    event: React.ChangeEvent<HTMLTextAreaElement> | React.CompositionEvent<HTMLTextAreaElement>,
+  ) => {
+    const nextValue = getEventValue(event);
+    const pendingValues = pendingLocalValuesRef.current;
+    pendingValues.push(nextValue);
+    if (pendingValues.length > 20) {
+      pendingValues.shift();
+    }
+    textAreaValueRef.current = nextValue;
+    setTextAreaValue(nextValue);
+  };
+
   return (
     <Input.TextArea
       {...rest}
-      ref={textAreaRef}
-      defaultValue={defaultValue}
+      value={textAreaValue}
       onChange={(event) => {
-        previousValueRef.current = getEventValue(event);
+        recordLocalValue(event);
         onChange?.(event);
       }}
       onCompositionStart={(event) => {
-        previousValueRef.current = getEventValue(event);
+        recordLocalValue(event);
         onCompositionStart?.(event);
       }}
       onCompositionEnd={(event) => {
-        previousValueRef.current = getEventValue(event);
+        recordLocalValue(event);
         onCompositionEnd?.(event);
       }}
     />
   );
 }
 
+function normalizeTextAreaValue(nextValue: unknown): TextAreaProps['value'] {
+  if (typeof nextValue === 'bigint') return String(nextValue);
+  if (nextValue == null) return '';
+  return nextValue as TextAreaProps['value'];
+}
+
 @largeField()
 export class TextareaFieldModel extends FieldModel {
   render() {