From b51daf222055f3bcd96597c93ec7838217fc37e5 Mon Sep 17 00:00:00 2001
From: Semmy <semmywong@126.com>
Date: Mon, 28 Mar 2022 23:28:14 +0800
Subject: [PATCH] fix: textarea read pretty can support  break line

---
 .../src/schema-component/antd/input/ReadPretty.tsx | 14 ++++++++++++--
 .../schema-component/antd/input/demos/demo2.tsx    | 13 ++++++++++++-
 .../src/schema-component/antd/input/shared.ts      |  7 +++++++
 3 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/src/schema-component/antd/input/shared.ts

diff --git a/packages/client/src/schema-component/antd/input/ReadPretty.tsx b/packages/client/src/schema-component/antd/input/ReadPretty.tsx
index cf3043101..b1826c7ae 100644
--- a/packages/client/src/schema-component/antd/input/ReadPretty.tsx
+++ b/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>
diff --git a/packages/client/src/schema-component/antd/input/demos/demo2.tsx b/packages/client/src/schema-component/antd/input/demos/demo2.tsx
index 1287bb838..c4a041f4e 100644
--- a/packages/client/src/schema-component/antd/input/demos/demo2.tsx
+++ b/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,
+      },
+    },
   },
 };
 
diff --git a/packages/client/src/schema-component/antd/input/shared.ts b/packages/client/src/schema-component/antd/input/shared.ts
new file mode 100644
index 000000000..55fd09837
--- /dev/null
+++ b/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;
+}