From 8c679b09388bdb413ac2976266335e550d92a615 Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Wed, 6 Jan 2021 15:45:38 +0800
Subject: [PATCH] feat: support marked render for textarea field

---
 packages/app/src/components/views/Field/index.tsx | 15 +++++++++++----
 .../app/src/components/views/Field/style.less     |  6 ++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/views/Field/index.tsx b/packages/app/src/components/views/Field/index.tsx
index cf296cda2..fe06a8495 100644
--- a/packages/app/src/components/views/Field/index.tsx
+++ b/packages/app/src/components/views/Field/index.tsx
@@ -11,8 +11,15 @@ import ViewFactory from '..';
 import './style.less';
 import { getImageByUrl, testUrl } from '@/components/form.fields';
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import marked from 'marked';
 import Lightbox from 'react-image-lightbox';
 import 'react-image-lightbox/style.css';
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
 const InterfaceTypes = new Map<string, any>();
 
 function registerFieldComponent(type, Component) {
@@ -58,13 +65,13 @@ export function TextareaField(props: any) {
     return null;
   }
   if (viewType !== 'table') {
-    return value;
+    return <div className={'textarea-field-content'} style={{maxWidth: 300}} dangerouslySetInnerHTML={{__html: marked(value)}}/>;
   }
   if (value.length > 20) {
     return (
-      <Popover content={<div onClick={(e) => {
-        e.stopPropagation();
-      }} style={{maxWidth: 300}}>{value}</div>}>{value.substring(0, 15)}...</Popover>
+      <Popover content={(
+        <div onClick={(e) => e.stopPropagation()} className={'textarea-field-content'} style={{maxWidth: 300}} dangerouslySetInnerHTML={{__html: marked(value)}}/>
+      )}>{value.substring(0, 15)}...</Popover>
     );
   }
   return (
diff --git a/packages/app/src/components/views/Field/style.less b/packages/app/src/components/views/Field/style.less
index 7a1cf7d18..bb8f269f2 100644
--- a/packages/app/src/components/views/Field/style.less
+++ b/packages/app/src/components/views/Field/style.less
@@ -26,4 +26,10 @@
   .ant-modal-close {
     background: rgba(255,255,255,.4);
   }
+}
+
+.textarea-field-content {
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
\ No newline at end of file