@nocobase/client-v2 2.2.0-alpha.3 → 2.2.0-alpha.5

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/components/FlowRoute.tsx

@@ -10,10 +10,13 @@
 import { type FlowEngine, useFlowContext, useFlowEngine } from '@nocobase/flow-engine';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { deviceType } from 'react-device-detect';
-import { useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useApp } from '../../hooks/useApp';
-import { NocoBaseDesktopRouteType } from '../../flow-compat';
-import { resolveAdminRouteRuntimeTarget } from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
+import { NocoBaseDesktopRouteType, type NocoBaseDesktopRoute } from '../../flow-compat';
+import {
+  resolveAdminRouteRuntimeTarget,
+  toRouterNavigationPath,
+} from '../admin-shell/admin-layout/resolveAdminRouteRuntimeTarget';
 import { getAdminLayoutModel, type AdminLayoutModel } from '../admin-shell/admin-layout/AdminLayoutModel';
 import { getLayoutModel, type BaseLayoutModel } from '../admin-shell/BaseLayoutModel';
 import { useLayoutRoutePage } from '../admin-shell/useLayoutRoutePage';
@@ -21,6 +24,7 @@ import { AppNotFound } from '../../components';
 import { useKeepAlive } from '../../components/KeepAlive';
 
 type FlowRouteGuardState = {
+  pageUid?: string;
   pending: boolean;
   allowBridge: boolean;
   notFound: boolean;
@@ -35,6 +39,14 @@ type FlowRouteLayoutContext = {
   uid?: string;
 };
 
+type FlowRouteRepositoryLike = {
+  refreshAccessible?: () => Promise<unknown>;
+  isAccessibleLoaded?: () => boolean;
+  ensureAccessibleLoaded?: () => Promise<unknown>;
+  getRouteBySchemaUid?: (schemaUid: string) => NocoBaseDesktopRoute | undefined;
+  listAccessible?: () => NocoBaseDesktopRoute[];
+};
+
 export type FlowRouteProps = {
   pageUid?: string;
   active?: boolean;
@@ -70,6 +82,44 @@ const getDefaultLegacyPageBehavior = (
 
 const shouldRequireAccessibleRoute = (contextLayout?: FlowRouteLayoutContext) => contextLayout?.authCheck !== false;
 
+const findAccessibleRouteByIdentity = (
+  routes: NocoBaseDesktopRoute[] | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  if (!Array.isArray(routes)) {
+    return undefined;
+  }
+
+  for (const route of routes) {
+    if (
+      (route.type !== NocoBaseDesktopRouteType.group && route.schemaUid === pageUid) ||
+      (route.type === NocoBaseDesktopRouteType.group && route.id != null && String(route.id) === pageUid)
+    ) {
+      return route;
+    }
+
+    const matched = findAccessibleRouteByIdentity(route.children, pageUid);
+    if (matched) {
+      return matched;
+    }
+  }
+
+  return undefined;
+};
+
+const getAccessibleRouteByPageUid = (
+  routeRepository: FlowRouteRepositoryLike | undefined,
+  pageUid: string,
+): NocoBaseDesktopRoute | undefined => {
+  const routeBySchemaUid = routeRepository?.getRouteBySchemaUid?.(pageUid);
+
+  if (routeBySchemaUid && routeBySchemaUid.type !== NocoBaseDesktopRouteType.group) {
+    return routeBySchemaUid;
+  }
+
+  return findAccessibleRouteByIdentity(routeRepository?.listAccessible?.(), pageUid);
+};
+
 const hasFlowModel = async (flowEngine: FlowEngine, pageUid: string) => {
   if (flowEngine.getModel(pageUid)) {
     return true;
@@ -197,11 +247,15 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
   );
   const legacyPageBehavior = legacyPageBehaviorProp || getDefaultLegacyPageBehavior(flowEngine, routeLayout);
   const app = useApp();
-  const routeRepository = flowEngine.context.routeRepository;
+  const location = useLocation();
+  const navigate = useNavigate();
+  const routeRepository = flowEngine.context.routeRepository as FlowRouteRepositoryLike | undefined;
   const params = useParams();
   const pageUid = pageUidProp || params?.name;
+  const hasNestedRoutePath = typeof params?.tabUid !== 'undefined' || typeof params?.['*'] !== 'undefined';
   const skipRouteRepositoryCheck = !routeRepository;
   const [guardState, setGuardState] = useState<FlowRouteGuardState>({
+    pageUid: undefined,
     pending: true,
     allowBridge: false,
     notFound: false,
@@ -213,19 +267,23 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     throw new Error('[NocoBase] FlowRoute requires pageUid or route.params.name.');
   }
 
+  useEffect(() => {
+    replaceTriggeredRef.current = false;
+  }, [location.hash, location.pathname, location.search, pageUid]);
+
   useEffect(() => {
     let active = true;
     const requestId = ++requestIdRef.current;
 
     const run = async () => {
-      setGuardState({ pending: true, allowBridge: false, notFound: false });
+      setGuardState({ pageUid, pending: true, allowBridge: false, notFound: false });
 
       if (!skipRouteRepositoryCheck && !routeRepository?.isAccessibleLoaded?.()) {
         try {
           await routeRepository?.ensureAccessibleLoaded?.();
         } catch (_error) {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: true, notFound: false });
+            setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           }
           return;
         }
@@ -235,28 +293,64 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
         return;
       }
 
-      const route = skipRouteRepositoryCheck ? undefined : routeRepository?.getRouteBySchemaUid?.(pageUid);
+      const route = skipRouteRepositoryCheck ? undefined : getAccessibleRouteByPageUid(routeRepository, pageUid);
       if (!route && !skipRouteRepositoryCheck && shouldRequireAccessibleRoute(routeLayout)) {
-        setGuardState({ pending: false, allowBridge: false, notFound: true });
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
 
       if (!route && legacyPageBehavior === 'notFound') {
         const flowModelExists = await hasFlowModel(flowEngine, pageUid);
         if (active && requestId === requestIdRef.current) {
-          setGuardState({ pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+          setGuardState({ pageUid, pending: false, allowBridge: flowModelExists, notFound: !flowModelExists });
+        }
+        return;
+      }
+
+      if (route?.type === NocoBaseDesktopRouteType.group) {
+        if (hasNestedRoutePath) {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
+          return;
+        }
+
+        const target = resolveAdminRouteRuntimeTarget({
+          app,
+          route,
+          layout: routeLayout,
+        });
+
+        if (target.reason === 'emptyGroup') {
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+          return;
+        }
+
+        if (target.runtimePath) {
+          if (replaceTriggeredRef.current) {
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: false });
+            return;
+          }
+
+          replaceTriggeredRef.current = true;
+          if (target.navigationMode === 'document') {
+            window.location.replace(target.runtimePath);
+            return;
+          }
+          navigate(toRouterNavigationPath(target.runtimePath, app.router?.getBasename?.()), { replace: true });
+          return;
         }
+
+        setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
         return;
       }
 
       if (route?.type === NocoBaseDesktopRouteType.page) {
         if (legacyPageBehavior === 'notFound') {
-          setGuardState({ pending: false, allowBridge: false, notFound: true });
+          setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           return;
         }
 
         if (legacyPageBehavior === 'bridge') {
-          setGuardState({ pending: false, allowBridge: true, notFound: false });
+          setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
           return;
         }
 
@@ -279,14 +373,14 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
 
         if (target.reason === 'unsupportedV2Runtime') {
           if (active && requestId === requestIdRef.current) {
-            setGuardState({ pending: false, allowBridge: false, notFound: true });
+            setGuardState({ pageUid, pending: false, allowBridge: false, notFound: true });
           }
           return;
         }
       }
 
       if (active && requestId === requestIdRef.current) {
-        setGuardState({ pending: false, allowBridge: true, notFound: false });
+        setGuardState({ pageUid, pending: false, allowBridge: true, notFound: false });
       }
     };
 
@@ -295,10 +389,20 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     return () => {
       active = false;
     };
-  }, [app, flowEngine, legacyPageBehavior, pageUid, routeLayout, routeRepository, skipRouteRepositoryCheck]);
+  }, [
+    app,
+    flowEngine,
+    hasNestedRoutePath,
+    legacyPageBehavior,
+    navigate,
+    pageUid,
+    routeLayout,
+    routeRepository,
+    skipRouteRepositoryCheck,
+  ]);
 
   const content = useMemo(() => {
-    if (guardState.pending) {
+    if (guardState.pageUid !== pageUid || guardState.pending) {
       return null;
     }
 
@@ -311,7 +415,15 @@ const FlowRoute = (props: FlowRouteProps = {}) => {
     }
 
     return <BridgeFlowRoute pageUid={pageUid} active={active} getLayoutModel={getLayoutModel} />;
-  }, [active, getLayoutModel, guardState.allowBridge, guardState.notFound, guardState.pending, pageUid]);
+  }, [
+    active,
+    getLayoutModel,
+    guardState.allowBridge,
+    guardState.notFound,
+    guardState.pageUid,
+    guardState.pending,
+    pageUid,
+  ]);
 
   return content;
 };

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/base/ActionModel.tsx

@@ -20,7 +20,7 @@ import { ActionModel } from './ActionModelCore';
 
 function getMobileDefaultProps(ctx) {
   const defaultProps = ctx.model.defaultProps || {};
-  if (ctx.isMobileLayout && defaultProps.icon) {
+  if (ctx.isMobileLayout && defaultProps.icon && ctx.model.enableEditIconOnly !== false) {
     return {
       ...defaultProps,
       iconOnly: true,
@@ -43,6 +43,7 @@ ActionModel.registerFlow({
                 'x-decorator': 'FormItem',
                 'x-component': 'Input',
                 title: tExpr('Button title'),
+                description: ctx.model.getTitleFieldDescription?.(),
               }
             : undefined,
           tooltip: ctx.model.enableEditTooltip
@@ -59,13 +60,14 @@ ActionModel.registerFlow({
                 title: tExpr('Button icon'),
               }
             : undefined,
-          iconOnly: ctx.model.enableEditIcon
-            ? {
-                'x-decorator': 'FormItem',
-                'x-component': 'Switch',
-                title: tExpr('Icon only'),
-              }
-            : undefined,
+          iconOnly:
+            ctx.model.enableEditIcon && ctx.model.enableEditIconOnly !== false
+              ? {
+                  'x-decorator': 'FormItem',
+                  'x-component': 'Switch',
+                  title: tExpr('Icon only'),
+                }
+              : undefined,
           type: ctx.model.enableEditType
             ? {
                 'x-decorator': 'FormItem',

package/src/flow/models/base/ActionModelCore.tsx

@@ -62,6 +62,7 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
   enableEditTooltip = true;
   enableEditTitle = true;
   enableEditIcon = true;
+  enableEditIconOnly = true;
   enableEditType = true;
   enableEditDanger = true;
   enableEditColor = false;
@@ -136,6 +137,10 @@ export class ActionModel<T extends DefaultStructure = DefaultStructure> extends
     return this.props.title;
   }
 
+  getTitleFieldDescription() {
+    return undefined;
+  }
+
   getIcon() {
     return this.props.icon;
   }

package/src/flow/models/blocks/table/TableColumnModel.tsx

@@ -373,14 +373,18 @@ TableColumnModel.registerFlow({
               currentProps: ctx.model.props,
             })
           : undefined;
+        const collectionFieldComponentProps = collectionField.getComponentProps();
         const componentProps =
           collectionField.isAssociationField() && titleField
             ? {
-                ...collectionField.getComponentProps(),
+                ...collectionFieldComponentProps,
                 ...targetCollectionField?.getComponentProps?.(),
                 ...savedDateTimeDisplayProps,
               }
-            : collectionField.getComponentProps();
+            : {
+                ...collectionFieldComponentProps,
+                ...savedDateTimeDisplayProps,
+              };
         ctx.model.setProps('title', collectionField.title);
         ctx.model.setProps('dataIndex', collectionField.name);
         // for quick edit

package/src/flow/models/blocks/table/__tests__/TableColumnModel.test.tsx

@@ -327,6 +327,57 @@ describe('TableColumnModel sorter settings', () => {
     );
   });
 
+  it('keeps saved ordinary datetime format when table column initializes again', async () => {
+    const engine = new FlowEngine();
+    const model = new TableColumnModel({
+      uid: 'table-column-saved-datetime-format',
+      flowEngine: engine,
+    } as any);
+    const initStep = model.getFlow('tableColumnSettings')?.steps?.init as any;
+    const setProps = vi.fn();
+
+    await initStep.handler({
+      model: {
+        context: {
+          collectionField: {
+            title: 'Datetime',
+            name: 'datetime',
+            isAssociationField: () => false,
+            getComponentProps: () => ({
+              dateFormat: 'YYYY-MM-DD',
+              showTime: false,
+            }),
+          },
+        },
+        props: {},
+        subModels: {
+          field: {
+            getStepParams: (flowKey, stepKey) =>
+              flowKey === 'datetimeSettings' && stepKey === 'dateFormat'
+                ? {
+                    picker: 'date',
+                    dateFormat: 'YYYY-MM-DD',
+                    showTime: true,
+                    timeFormat: 'HH:mm:ss',
+                  }
+                : undefined,
+          },
+        },
+        applySubModelsBeforeRenderFlows: vi.fn(),
+        setProps,
+      },
+    });
+
+    expect(setProps).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateFormat: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
+        timeFormat: 'HH:mm:ss',
+      }),
+    );
+  });
+
   it('does not update field component setting when title field refresh fails', async () => {
     const engine = new FlowEngine();
     const model = new TableColumnModel({ uid: 'table-column-title-field-component-failed', flowEngine: engine } as any);

package/src/flow/models/fields/AssociationFieldModel/RecordSelectFieldModel.tsx

@@ -198,6 +198,48 @@ const useFieldPermissionMessage = (model, allowEdit) => {
   return messageValue;
 };
 
+const recordSelectClassName = css`
+  min-width: 0;
+
+  .ant-select-selector {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .ant-select-selection-search,
+  .ant-select-selection-item,
+  .ant-select-selection-placeholder,
+  .ant-select-selection-overflow,
+  .ant-select-selection-overflow-item {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .ant-select-selection-item,
+  .ant-select-selection-item-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+
+const recordSelectLabelClassName = css`
+  display: block;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  * {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap !important;
+  }
+`;
+
 const LazySelect = (props: Readonly<LazySelectProps>) => {
   const {
     fieldNames,
@@ -210,6 +252,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
     onChange,
     allowCreate = true,
     allowEdit = true,
+    className,
     ...others
   } = props;
   const model: any = useFlowModel();
@@ -317,6 +360,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
       <Select
         style={{ width: '100%' }}
         {...others}
+        className={[recordSelectClassName, className].filter(Boolean).join(' ')}
         allowClear
         showSearch
         maxTagCount="responsive"
@@ -409,19 +453,7 @@ const LazySelect = (props: Readonly<LazySelectProps>) => {
         }}
         popupMatchSelectWidth
         labelRender={(data) => {
-          return (
-            <div
-              className={css`
-                div {
-                  white-space: nowrap !important;
-                  overflow: hidden;
-                  text-overflow: ellipsis;
-                }
-              `}
-            >
-              {data.label}
-            </div>
-          );
+          return <div className={recordSelectLabelClassName}>{data.label}</div>;
         }}
         dropdownRender={(menu) => {
           const isFullMatch = realOptions.some((v) => v[normalizedFieldNames.label] === others.searchText);