fix: textarea read pretty can support break line

packages/client/src/schema-component/antd/input/ReadPretty.tsx

@@ -4,11 +4,14 @@ import cls from 'classnames';
 import React from 'react';
 import { useCompile } from '../..';
 import { EllipsisWithTooltip } from './EllipsisWithTooltip';
+import { HTMLEncode } from './shared';
 
 type Composed = {
   Input: React.FC<InputProps & { ellipsis?: any }>;
   URL: React.FC<InputProps>;
-  TextArea: React.FC<TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any }>;
+  TextArea: React.FC<
+    TextAreaProps & { ellipsis?: any; text?: any; addonBefore?: any; suffix?: any; addonAfter?: any; autop?: boolean }
+  >;
 };
 
 export const ReadPretty: Composed = () => null;
@@ -30,11 +33,18 @@ ReadPretty.Input = (props) => {
 ReadPretty.TextArea = (props) => {
   const prefixCls = usePrefixCls('description-textarea', props);
   const compile = useCompile();
+  const value = compile(props.value ?? '');
+  const values = HTMLEncode(value).split('\n').join('<br/>');
+  const content = (
+    <EllipsisWithTooltip ellipsis={props.ellipsis}>
+      <div dangerouslySetInnerHTML={{ __html: values }} />
+    </EllipsisWithTooltip>
+  );
   return (
     <div className={cls(prefixCls, props.className)} style={props.style}>
       {props.addonBefore}
       {props.prefix}
-      <EllipsisWithTooltip ellipsis={props.ellipsis}>{compile(props.value)}</EllipsisWithTooltip>
+      {content}
       {props.suffix}
       {props.addonAfter}
     </div>

packages/client/src/schema-component/antd/input/demos/demo2.tsx

@@ -16,7 +16,7 @@ const schema = {
       'x-decorator': 'FormItem',
       'x-component': 'Input.TextArea',
       'x-reactions': {
-        target: '*(read1,read2)',
+        target: '*(read1,read2,read3)',
         fulfill: {
           state: {
             value: '{{$self.value}}',
@@ -43,6 +43,17 @@ const schema = {
         ellipsis: true,
       },
     },
+    read3: {
+      interface: 'string',
+      type: 'string',
+      title: `Read pretty(autop)`,
+      'x-read-pretty': true,
+      'x-decorator': 'FormItem',
+      'x-component': 'Input.TextArea',
+      'x-component-props': {
+        autop: true,
+      },
+    },
   },
 };
 

packages/client/src/schema-component/antd/input/shared.ts

@@ -0,0 +1,7 @@
+export function HTMLEncode(html: string) {
+  let temp = document.createElement('div');
+  temp.textContent != null ? (temp.textContent = html) : (temp.innerText = html);
+  const output = temp.innerHTML;
+  temp = null;
+  return output;
+}