@nocobase/client-v2 2.1.18 → 2.1.19

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

@@ -303,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) {

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() {

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

@@ -7,8 +7,9 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { FlowEngine } from '@nocobase/flow-engine';
+import { FieldModelRenderer, FlowEngine, FlowEngineProvider } from '@nocobase/flow-engine';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { Form } from 'antd';
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
 import { TextareaFieldModel } from '../TextareaFieldModel';
@@ -23,6 +24,36 @@ function createTextareaFieldModel(props?: Record<string, unknown>) {
 }
 
 describe('TextareaFieldModel', () => {
+  it('syncs multiline values assigned through the form renderer', async () => {
+    const flowEngine = new FlowEngine();
+    const model = createTextareaFieldModel();
+    model.dispatchEvent = vi.fn().mockResolvedValue([]);
+
+    function FormHost() {
+      const [form] = Form.useForm();
+
+      React.useEffect(() => {
+        form.setFieldsValue({ address: 'aaaaaa\nbbbbbb' });
+      }, [form]);
+
+      return (
+        <FlowEngineProvider engine={flowEngine}>
+          <Form form={form}>
+            <Form.Item name="address">
+              <FieldModelRenderer model={model} />
+            </Form.Item>
+          </Form>
+        </FlowEngineProvider>
+      );
+    }
+
+    render(<FormHost />);
+
+    await waitFor(() => {
+      expect((screen.getByRole('textbox') as HTMLTextAreaElement).value).toBe('aaaaaa\nbbbbbb');
+    });
+  });
+
   it('keeps IME composition text visible before the parent value is committed', () => {
     const onChange = vi.fn();
     const onCompositionStart = vi.fn();

package/src/flow/routeTransientInputArgs.ts

@@ -0,0 +1,27 @@
+/**
+ * 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.
+ */
+
+export const ROUTE_TRANSIENT_INPUT_ARGS_KEY = '__nocobaseOpenViewInputArgs';
+
+export type RouteTransientInputArgsState = {
+  [ROUTE_TRANSIENT_INPUT_ARGS_KEY]?: Record<string, Record<string, unknown>>;
+  usr?: RouteTransientInputArgsState;
+};
+
+export const getRouteTransientInputArgs = (state: unknown, viewUid?: string) => {
+  if (!viewUid || !state || typeof state !== 'object') {
+    return {};
+  }
+
+  const stateValue = state as RouteTransientInputArgsState;
+  const values = (stateValue[ROUTE_TRANSIENT_INPUT_ARGS_KEY] || stateValue.usr?.[ROUTE_TRANSIENT_INPUT_ARGS_KEY])?.[
+    viewUid
+  ];
+  return values && typeof values === 'object' ? values : {};
+};

package/src/index.ts

@@ -39,5 +39,6 @@ export * from './collection-manager/interfaces';
 export * from './collection-manager/template-fields';
 export * from './data-source';
 export * from './flow';
+export * from './utils/markdownSanitize';
 export { DEFAULT_DATA_SOURCE_KEY, isTitleField, isTitleFieldInterface } from './flow-compat';
 export { default as AntdAppProvider } from './theme/AntdAppProvider';

package/src/utils/markdownSanitize.ts

@@ -0,0 +1,88 @@
+/**
+ * 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.
+ */
+
+export function stripMarkdownIframeTags(markdown: string) {
+  if (!markdown) {
+    return markdown;
+  }
+
+  let result = '';
+  let cursor = 0;
+
+  while (cursor < markdown.length) {
+    const iframeStart = markdown.slice(cursor).search(/<iframe\b/i);
+    if (iframeStart === -1) {
+      result += markdown.slice(cursor);
+      break;
+    }
+
+    const start = cursor + iframeStart;
+    result += markdown.slice(cursor, start);
+
+    const openingEnd = findTagEnd(markdown, start);
+    if (openingEnd === -1) {
+      break;
+    }
+
+    const openingTag = markdown.slice(start, openingEnd + 1);
+    if (/\/\s*>$/.test(openingTag)) {
+      cursor = openingEnd + 1;
+      continue;
+    }
+
+    const closingStart = markdown.slice(openingEnd + 1).search(/<\/iframe\s*>/i);
+    if (closingStart === -1) {
+      break;
+    }
+
+    cursor =
+      openingEnd + 1 + closingStart + markdown.slice(openingEnd + 1 + closingStart).match(/^<\/iframe\s*>/i)[0].length;
+  }
+
+  return result;
+}
+
+export function stripMarkdownIframes(html: string) {
+  if (!html || typeof DOMParser === 'undefined') {
+    return html;
+  }
+
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  doc.querySelectorAll('iframe').forEach((iframe) => iframe.remove());
+  return doc.body.innerHTML;
+}
+
+export function removeMarkdownIframes(container?: ParentNode | null) {
+  container?.querySelectorAll('iframe').forEach((iframe) => iframe.remove());
+}
+
+function findTagEnd(html: string, start: number) {
+  let quote: string | undefined;
+
+  for (let index = start; index < html.length; index += 1) {
+    const char = html[index];
+    if (quote) {
+      if (char === quote) {
+        quote = undefined;
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      continue;
+    }
+
+    if (char === '>') {
+      return index;
+    }
+  }
+
+  return -1;
+}