From 73dc492b2a49793d945ccdae7f5c429c874f298c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Fri, 10 Sep 2021 11:24:53 +0800
Subject: [PATCH] feat(markdown-viewer): add new component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增MarkdownViewer组件用于显示Markdown格式的富文本

close: #1181
---
 CHANGELOG.zh_CN.md                            |  1 +
 package.json                                  |  2 +
 src/components/Markdown/index.ts              |  2 +
 .../Markdown/src/MarkdownViewer.vue           | 22 +++++++++++
 src/views/demo/editor/markdown/index.vue      | 28 +++++++++-----
 yarn.lock                                     | 37 +++++++++++++++++++
 6 files changed, 82 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Markdown/src/MarkdownViewer.vue

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 18ca68d05ad..4c43ef78416 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -5,6 +5,7 @@
   - 单元格编辑新增提交回调，将根据回调函数返回的结果来决定是否将数据提交到表格
   - 行编辑添加校验方法，允许只校验而不提交值，以便异步保存数据成功后才提交倒表格
   - 修复`rowClassName`属性无法和`striped`同时使用的问题
+- 新增组件 **MarkdownViewer** 用于显示 Markdown 格式的富文本
 
 ### 🐛 Bug Fixes
 
diff --git a/package.json b/package.json
index ef9c92381f0..9504d5160c7 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "print-js": "^1.6.0",
     "qrcode": "^1.4.4",
     "resize-observer-polyfill": "^1.5.1",
+    "showdown": "^1.9.1",
     "sortablejs": "^1.14.0",
     "tinymce": "^5.9.2",
     "vditor": "^3.8.6",
@@ -81,6 +82,7 @@
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
+    "@types/showdown": "^1.9.4",
     "@types/sortablejs": "^1.10.7",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
diff --git a/src/components/Markdown/index.ts b/src/components/Markdown/index.ts
index bbfc5175586..d337681ff7f 100644
--- a/src/components/Markdown/index.ts
+++ b/src/components/Markdown/index.ts
@@ -1,5 +1,7 @@
 import { withInstall } from '/@/utils';
 import markDown from './src/Markdown.vue';
+import markDownViewer from './src/MarkdownViewer.vue';
 
 export const MarkDown = withInstall(markDown);
+export const MarkdownViewer = withInstall(markDownViewer);
 export * from './src/typing';
diff --git a/src/components/Markdown/src/MarkdownViewer.vue b/src/components/Markdown/src/MarkdownViewer.vue
new file mode 100644
index 00000000000..b453451ea3a
--- /dev/null
+++ b/src/components/Markdown/src/MarkdownViewer.vue
@@ -0,0 +1,22 @@
+<template>
+  <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer"></div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import showdown from 'showdown';
+
+  const converter = new showdown.Converter();
+  converter.setOption('tables', true);
+  const props = defineProps({
+    value: { type: String },
+    class: { type: String },
+  });
+  const getHtmlData = computed(() => converter.makeHtml(props.value || ''));
+</script>
+
+<style scoped>
+  .markdown-viewer {
+    width: 100%;
+  }
+</style>
diff --git a/src/views/demo/editor/markdown/index.vue b/src/views/demo/editor/markdown/index.vue
index 56a5f5f04c4..968bd910697 100644
--- a/src/views/demo/editor/markdown/index.vue
+++ b/src/views/demo/editor/markdown/index.vue
@@ -1,22 +1,30 @@
 <template>
   <PageWrapper title="MarkDown组件示例">
-    <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
-    <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button>
-    <MarkDown
-      v-model:value="value"
-      @change="handleChange"
-      ref="markDownRef"
-      placeholder="这是占位文本"
-    />
+    <div>
+      <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
+      <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button>
+      <MarkDown
+        v-model:value="value"
+        @change="handleChange"
+        ref="markDownRef"
+        placeholder="这是占位文本"
+      />
+    </div>
+    <div class="mt-2">
+      <a-card title="Markdown Viewer 组件演示">
+        <MarkdownViewer :value="value" />
+      </a-card>
+    </div>
   </PageWrapper>
 </template>
 <script lang="ts">
   import { defineComponent, ref, unref } from 'vue';
-  import { MarkDown, MarkDownActionType } from '/@/components/Markdown';
+  import { MarkDown, MarkDownActionType, MarkdownViewer } from '/@/components/Markdown';
   import { PageWrapper } from '/@/components/Page';
+  import { Card } from 'ant-design-vue';
 
   export default defineComponent({
-    components: { MarkDown, PageWrapper },
+    components: { MarkDown, PageWrapper, MarkdownViewer, ACard: Card },
     setup() {
       const markDownRef = ref<Nullable<MarkDownActionType>>(null);
       const valueRef = ref(`
diff --git a/yarn.lock b/yarn.lock
index b8c110ce87f..c1bb567e5d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2064,6 +2064,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/showdown@^1.9.4":
+  version "1.9.4"
+  resolved "https://registry.nlark.com/@types/showdown/download/@types/showdown-1.9.4.tgz?cache=0&sync_timestamp=1629709796532&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fshowdown%2Fdownload%2F%40types%2Fshowdown-1.9.4.tgz#5385adf34143abad9309561661fa6c781d2ab962"
+  integrity sha1-U4Wt80FDq62TCVYWYfpseB0quWI=
+
 "@types/sortablejs@^1.10.7":
   version "1.10.7"
   resolved "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.7.tgz#ab9039c85429f0516955ec6dbc0bb20139417b15"
@@ -10127,6 +10132,13 @@ shelljs@^0.8.3:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+showdown@^1.9.1:
+  version "1.9.1"
+  resolved "https://registry.nlark.com/showdown/download/showdown-1.9.1.tgz#134e148e75cd4623e09c21b0511977d79b5ad0ef"
+  integrity sha1-E04UjnXNRiPgnCGwURl315ta0O8=
+  dependencies:
+    yargs "^14.2"
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -12260,6 +12272,14 @@ yargs-parser@^13.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^15.0.1:
+  version "15.0.3"
+  resolved "https://registry.nlark.com/yargs-parser/download/yargs-parser-15.0.3.tgz#316e263d5febe8b38eef61ac092b33dfcc9b1115"
+  integrity sha1-MW4mPV/r6LOO72GsCSsz38ybERU=
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs@^13.2.4:
   version "13.3.2"
   resolved "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -12276,6 +12296,23 @@ yargs@^13.2.4:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
+yargs@^14.2:
+  version "14.2.3"
+  resolved "https://registry.nlark.com/yargs/download/yargs-14.2.3.tgz?cache=0&sync_timestamp=1628889096518&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fyargs%2Fdownload%2Fyargs-14.2.3.tgz#1a1c3edced1afb2a2fea33604bc6d1d8d688a414"
+  integrity sha1-Ghw+3O0a+yov6jNgS8bR2NaIpBQ=
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.1"
+
 yargs@^16.0.3, yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"