From 16c0ca7412014430636877bfb47378e008f20905 Mon Sep 17 00:00:00 2001
From: SemmyWong <67748948+semmywong@users.noreply.github.com>
Date: Wed, 30 Mar 2022 15:46:50 +0800
Subject: [PATCH] fix: markdown support ellipsis (#257)

* fix: markdown add "format" props

* fix: markdown support ellipsis
---
 .../src/schema-component/antd/markdown/Markdown.Void.tsx  | 4 ++--
 .../src/schema-component/antd/markdown/Markdown.tsx       | 4 ++--
 .../client/src/schema-component/antd/markdown/util.ts     | 8 ++++++++
 .../client/src/schema-initializer/Initializers/utils.ts   | 6 +++++-
 .../client/src/schema-initializer/SchemaInitializer.tsx   | 3 +--
 5 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/schema-component/antd/markdown/Markdown.Void.tsx b/packages/client/src/schema-component/antd/markdown/Markdown.Void.tsx
index ba15aedc9..0b6ff9d5b 100644
--- a/packages/client/src/schema-component/antd/markdown/Markdown.Void.tsx
+++ b/packages/client/src/schema-component/antd/markdown/Markdown.Void.tsx
@@ -22,7 +22,7 @@ const MarkdownEditor = (props: any) => {
       <Space style={{ position: 'absolute', bottom: 5, right: 5 }}>
         <Button
           onClick={(e) => {
-            props.onCancel && props.onCancel(e);
+            props.onCancel?.(e);
           }}
         >
           {t('Cancel')}
@@ -30,7 +30,7 @@ const MarkdownEditor = (props: any) => {
         <Button
           type={'primary'}
           onClick={() => {
-            props.onSubmit && props.onSubmit(value);
+            props.onSubmit?.(value);
           }}
         >
           {t('Save')}
diff --git a/packages/client/src/schema-component/antd/markdown/Markdown.tsx b/packages/client/src/schema-component/antd/markdown/Markdown.tsx
index 0b170dd7a..9d210081f 100644
--- a/packages/client/src/schema-component/antd/markdown/Markdown.tsx
+++ b/packages/client/src/schema-component/antd/markdown/Markdown.tsx
@@ -4,7 +4,7 @@ import { Input as AntdInput } from 'antd';
 import React from 'react';
 import { ReadPretty as InputReadPretty } from '../input';
 import { MarkdownVoid } from './Markdown.Void';
-import { markdown } from './util';
+import { convertToText, markdown } from './util';
 
 export const Markdown: any = connect(
   AntdInput.TextArea,
@@ -19,7 +19,7 @@ export const Markdown: any = connect(
     };
   }),
   mapReadPretty((props) => {
-    let text = props.value;
+    let text = convertToText(props.value);
     let value = <div className={'nb-markdown'} dangerouslySetInnerHTML={{ __html: markdown(text) }} />;
     return <InputReadPretty.TextArea {...props} text={text} value={value} />;
   }),
diff --git a/packages/client/src/schema-component/antd/markdown/util.ts b/packages/client/src/schema-component/antd/markdown/util.ts
index af1787c1c..a3d285a8e 100644
--- a/packages/client/src/schema-component/antd/markdown/util.ts
+++ b/packages/client/src/schema-component/antd/markdown/util.ts
@@ -6,3 +6,11 @@ export function markdown(text) {
   }
   return marked.parse(text);
 }
+export function convertToText(markdownText: string) {
+  const content = markdown(markdownText);
+  let temp = document.createElement('div');
+  temp.innerHTML = content;
+  const text = temp.innerText;
+  temp = null;
+  return text.replace(/[\n\r]/g, '');
+}
diff --git a/packages/client/src/schema-initializer/Initializers/utils.ts b/packages/client/src/schema-initializer/Initializers/utils.ts
index 6f68f2f2b..285636c30 100644
--- a/packages/client/src/schema-initializer/Initializers/utils.ts
+++ b/packages/client/src/schema-initializer/Initializers/utils.ts
@@ -64,9 +64,13 @@ export const useTableColumnInitializerFields = () => {
     .filter((field) => field?.interface && field?.interface !== 'subTable')
     .map((field) => {
       const componentProps = {};
-      if (field?.uiSchema['x-component']?.startsWith?.('Input')) {
+      if (
+        field?.uiSchema['x-component']?.startsWith?.('Input') ||
+        field?.uiSchema['x-component']?.startsWith?.('Markdown')
+      ) {
         componentProps['ellipsis'] = true;
       }
+
       if (field.interface === 'attachment') {
         componentProps['size'] = 'small';
         return {
diff --git a/packages/client/src/schema-initializer/SchemaInitializer.tsx b/packages/client/src/schema-initializer/SchemaInitializer.tsx
index 97c6f280b..d6bf8a0f4 100644
--- a/packages/client/src/schema-initializer/SchemaInitializer.tsx
+++ b/packages/client/src/schema-initializer/SchemaInitializer.tsx
@@ -7,7 +7,7 @@ import {
   SchemaInitializerButtonProps,
   SchemaInitializerItemComponent,
   SchemaInitializerItemOptions,
-  SchemaInitializerItemProps
+  SchemaInitializerItemProps,
 } from './types';
 
 const defaultWrap = (s: ISchema) => s;
@@ -88,7 +88,6 @@ SchemaInitializer.Button = observer((props: SchemaInitializerButtonProps) => {
       }
     });
   };
-
   const menu = <Menu>{renderItems(items)}</Menu>;
 
   if (!designable && props.designable !== true) {