From d95815b5031984e224140eb1b1d46e2dbf80abc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Tue, 13 Jul 2021 15:28:10 +0800
Subject: [PATCH] fix(markdown): resolving markdown exceptions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复markdown组件的异常以及不能正确设置value的问题
---
 CHANGELOG.zh_CN.md                       |  1 +
 src/components/Markdown/src/Markdown.vue | 67 +++++++++++++++---------
 src/views/demo/editor/markdown/index.vue | 13 ++++-
 3 files changed, 54 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 44758e4cf48..176d3114fb9 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -21,6 +21,7 @@
   - 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
   - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
 - **Breadcrumb** 修复带有重定向的菜单点击无法跳转的问题
+- **Markdown** 修复初始化异常以及不能正确地动态设置 value 的问题
 - **其它**
   - 修复菜单默认折叠的配置不起作用的问题
   - 修复`safari`浏览器报错导致网站打不开
diff --git a/src/components/Markdown/src/Markdown.vue b/src/components/Markdown/src/Markdown.vue
index d293958908a..016cc4d0079 100644
--- a/src/components/Markdown/src/Markdown.vue
+++ b/src/components/Markdown/src/Markdown.vue
@@ -5,18 +5,19 @@
   import {
     defineComponent,
     ref,
-    onMounted,
     unref,
-    onUnmounted,
     nextTick,
     computed,
     watch,
+    onBeforeUnmount,
+    onDeactivated,
   } from 'vue';
   import Vditor from 'vditor';
   import 'vditor/dist/index.css';
   import { useLocale } from '/@/locales/useLocale';
   import { useModalContext } from '../../Modal';
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
 
   type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;
 
@@ -26,7 +27,7 @@
       height: { type: Number, default: 360 },
       value: { type: String, default: '' },
     },
-    emits: ['change', 'get'],
+    emits: ['change', 'get', 'update:value'],
     setup(props, { attrs, emit }) {
       const wrapRef = ref<ElRef>(null);
       const vditorRef = ref<Nullable<Vditor>>(null);
@@ -36,17 +37,16 @@
 
       const { getLocale } = useLocale();
       const { getDarkMode } = useRootSetting();
+      const valueRef = ref('');
 
       watch(
         [() => getDarkMode.value, () => initedRef.value],
-        ([val]) => {
-          const vditor = unref(vditorRef);
-
-          if (!vditor) {
+        ([val, inited]) => {
+          if (!inited) {
             return;
           }
-          const theme = val === 'dark' ? 'dark' : undefined;
-          vditor.setTheme(theme as 'dark');
+          const theme = val === 'dark' ? 'dark' : 'classic';
+          instance.getVditor()?.setTheme(theme);
         },
         {
           immediate: true,
@@ -54,6 +54,16 @@
         }
       );
 
+      watch(
+        () => props.value,
+        (v) => {
+          if (v !== valueRef.value) {
+            instance.getVditor()?.setValue(v);
+            valueRef.value = v;
+          }
+        }
+      );
+
       const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
         let lang: Lang;
         switch (unref(getLocale)) {
@@ -72,54 +82,59 @@
         return lang;
       });
       function init() {
-        const wrapEl = unref(wrapRef);
+        const wrapEl = unref(wrapRef) as HTMLElement;
         if (!wrapEl) return;
         const bindValue = { ...attrs, ...props };
         vditorRef.value = new Vditor(wrapEl, {
-          theme: 'classic',
+          theme: getDarkMode.value === 'dark' ? 'dark' : 'classic',
           lang: unref(getCurrentLang),
           mode: 'sv',
           preview: {
             actions: [],
           },
           input: (v) => {
-            // emit('update:value', v);
+            valueRef.value = v;
+            emit('update:value', v);
             emit('change', v);
           },
+          after: () => {
+            nextTick(() => {
+              modalFn?.redoModalHeight?.();
+              initedRef.value = true;
+            });
+          },
           blur: () => {
-            unref(vditorRef)?.setValue(props.value);
+            //unref(vditorRef)?.setValue(props.value);
           },
           ...bindValue,
           cache: {
             enable: false,
           },
         });
-        initedRef.value = true;
       }
 
       const instance = {
         getVditor: (): Vditor => vditorRef.value!,
       };
 
-      onMounted(() => {
-        nextTick(() => {
-          init();
-          setTimeout(() => {
-            modalFn?.redoModalHeight?.();
-          }, 200);
-        });
-
-        emit('get', instance);
-      });
-
-      onUnmounted(() => {
+      function destroy() {
         const vditorInstance = unref(vditorRef);
         if (!vditorInstance) return;
         try {
           vditorInstance?.destroy?.();
         } catch (error) {}
+        vditorRef.value = null;
+      }
+
+      onMountedOrActivated(() => {
+        nextTick(() => {
+          init();
+        });
+        emit('get', instance);
       });
 
+      onBeforeUnmount(destroy);
+      onDeactivated(destroy);
       return {
         wrapRef,
         ...instance,
diff --git a/src/views/demo/editor/markdown/index.vue b/src/views/demo/editor/markdown/index.vue
index b9c290580f2..56a5f5f04c4 100644
--- a/src/views/demo/editor/markdown/index.vue
+++ b/src/views/demo/editor/markdown/index.vue
@@ -1,7 +1,13 @@
 <template>
   <PageWrapper title="MarkDown组件示例">
     <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
-    <MarkDown :value="value" @change="handleChange" ref="markDownRef" />
+    <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button>
+    <MarkDown
+      v-model:value="value"
+      @change="handleChange"
+      ref="markDownRef"
+      placeholder="这是占位文本"
+    />
   </PageWrapper>
 </template>
 <script lang="ts">
@@ -30,11 +36,16 @@
         valueRef.value = v;
       }
 
+      function clearValue() {
+        valueRef.value = '';
+      }
+
       return {
         value: valueRef,
         toggleTheme,
         markDownRef,
         handleChange,
+        clearValue,
       };
     },
   });