@nocobase/client-v2 2.2.0-beta.8 → 2.2.0

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/common/Markdown/style.ts

@@ -26,6 +26,10 @@ export default function useStyle() {
     () => ({
       [`.${COMPONENT_CLS}`]: {
         '.vditor-reset': { fontSize: `${token.fontSize}px !important`, color: 'unset' },
+        '.vditor-reset h2': {
+          borderBottom: 'none !important',
+          boxShadow: 'none !important',
+        },
         '.vditor': {
           borderRadius: 8,
         },

package/src/flow/components/BlockItemCard.tsx

@@ -150,7 +150,7 @@ export const BlockItemCard = React.forwardRef(
   ) => {
     const { t } = useTranslation();
     const { token } = theme.useToken();
-    const { title: blockTitle, description, children, className, heightMode, ...rest } = props;
+    const { title: blockTitle, description, children, className, heightMode, style, ...rest } = props;
     const cardRef = useRef<HTMLDivElement | null>(null);
     const setCardRef = useCallback(
       (node: HTMLDivElement | null) => {
@@ -185,7 +185,7 @@ export const BlockItemCard = React.forwardRef(
       <Card
         ref={setCardRef as any}
         title={title}
-        style={{ display: 'flex', flexDirection: 'column', height: height }}
+        style={{ display: 'flex', flexDirection: 'column', ...style, height: height ?? style?.height }}
         styles={{
           body: { flex: 1, display: 'flex', flexDirection: 'column', overflow: 'auto' },
           header: {

package/src/flow/components/FieldAssignExactDatePicker.tsx

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { DatePicker, Select, Space } from 'antd';
 import { inferPickerType } from '../../flow-compat';
 import { dayjs, getDateTimeFormat, getPickerFormat } from '@nocobase/utils/client';
@@ -29,6 +29,7 @@ export interface FieldAssignExactDatePickerProps {
   isRange?: boolean;
   onChange?: (value: ExactDatePickerValue) => void;
   style?: React.CSSProperties;
+  disabled?: boolean;
 }
 
 function getRawSingleValue(value: unknown, isRange: boolean): unknown {
@@ -114,7 +115,7 @@ function parseRangeValue(value: unknown, format: string): [dayjs.Dayjs, dayjs.Da
 }
 
 export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProps> = (props) => {
-  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style } = props;
+  const { picker = 'date', format, showTime, timeFormat, value, isRange = false, onChange, style, disabled } = props;
   const flowCtx = useFlowContext();
   const t = flowCtx.model.translate.bind(flowCtx.model);
 
@@ -124,17 +125,17 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     return inferPickerFromRawValue(rawSingleValue, picker);
   });
 
-  const getResolvedFormat = (nextPicker: ExactDatePickerMode) => {
-    const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
-    const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
-    return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
-  };
-
-  const resolvedFormat = useMemo(
-    () => getResolvedFormat(targetPicker),
-    [targetPicker, format, picker, showTime, timeFormat],
+  const getResolvedFormat = useCallback(
+    (nextPicker: ExactDatePickerMode) => {
+      const baseFormat = nextPicker === picker && format ? format : getPickerFormat(nextPicker);
+      const dateFormat = nextPicker === 'date' ? stripTimeFromFormat(baseFormat) : baseFormat;
+      return getDateTimeFormat(nextPicker, dateFormat, showTime, timeFormat);
+    },
+    [format, picker, showTime, timeFormat],
   );
 
+  const resolvedFormat = useMemo(() => getResolvedFormat(targetPicker), [getResolvedFormat, targetPicker]);
+
   const singleValue = useMemo(() => {
     if (isRange) return null;
     return parseDateFromRawValue(value, resolvedFormat);
@@ -156,6 +157,10 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
   );
 
   const handlePickerTypeChange = (nextPicker: ExactDatePickerMode) => {
+    if (disabled) {
+      return;
+    }
+
     setTargetPicker(nextPicker);
 
     if (!onChange) {
@@ -182,7 +187,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
     value: singleValue,
+    disabled,
     onChange: (nextDate: dayjs.Dayjs | null) => {
+      if (disabled) {
+        return;
+      }
       if (nextDate && dayjs.isDayjs(nextDate)) {
         onChange?.(nextDate);
         return;
@@ -200,7 +209,11 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
     inputReadOnly: flowCtx.isMobileLayout,
     showTime: showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')] } : false,
     value: rangeValue,
+    disabled,
     onChange: (nextDates: [dayjs.Dayjs | null, dayjs.Dayjs | null] | null) => {
+      if (disabled) {
+        return;
+      }
       if (Array.isArray(nextDates) && nextDates[0] && nextDates[1]) {
         onChange?.([nextDates[0], nextDates[1]]);
         return;
@@ -218,6 +231,7 @@ export const FieldAssignExactDatePicker: React.FC<FieldAssignExactDatePickerProp
         value={targetPicker}
         options={pickerOptions}
         onChange={handlePickerTypeChange}
+        disabled={disabled}
       />
       {isRange ? <DatePicker.RangePicker {...rangePickerProps} /> : <DatePicker {...singlePickerProps} />}
     </Space.Compact>