From d083d20a94ed2283a101c4af0ac232d4c31d7207 Mon Sep 17 00:00:00 2001
From: colin <colin.in@foxmail.com>
Date: Wed, 23 Apr 2025 10:59:54 +0800
Subject: [PATCH] feat(vben5): add component `MarkdownViewer`

---
 .../@abp/components/src/vditor/Viewer.vue     | 82 +++++++++++++++++++
 .../@abp/components/src/vditor/index.ts       |  1 +
 2 files changed, 83 insertions(+)
 create mode 100644 apps/vben5/packages/@abp/components/src/vditor/Viewer.vue

diff --git a/apps/vben5/packages/@abp/components/src/vditor/Viewer.vue b/apps/vben5/packages/@abp/components/src/vditor/Viewer.vue
new file mode 100644
index 000000000..de960fbda
--- /dev/null
+++ b/apps/vben5/packages/@abp/components/src/vditor/Viewer.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onDeactivated,
+  ref,
+  unref,
+  watch,
+} from 'vue';
+
+import { preferences } from '@vben/preferences';
+
+import VditorPreview from 'vditor';
+
+const props = defineProps<{
+  class?: string;
+  value: string;
+}>();
+const viewerRef = ref<HTMLDivElement>();
+const vditorPreviewRef = ref<VditorPreview>();
+
+const skinName = computed(() => {
+  return preferences.theme.mode === 'light' ? 'light' : 'dark';
+});
+
+function init() {
+  const viewerEl = unref(viewerRef) as HTMLDivElement;
+  const isDark = skinName.value === 'dark';
+  VditorPreview.preview(viewerEl, props.value, {
+    hljs: {
+      style: isDark ? 'dracula' : 'github',
+    },
+    mode: isDark ? 'dark' : 'light',
+    theme: {
+      current: isDark ? 'dark' : 'light',
+    },
+  });
+}
+
+watch(
+  () => skinName.value,
+  (val) => {
+    const isDark = val === 'dark';
+    VditorPreview.setContentTheme(isDark ? 'dark' : 'light', '');
+    VditorPreview.setCodeTheme(isDark ? 'dracula' : 'github');
+    init();
+  },
+);
+
+watch(
+  () => props.value,
+  (v, oldValue) => {
+    v !== oldValue && nextTick(init);
+  },
+  {
+    immediate: true,
+  },
+);
+
+function destroy() {
+  const vditorInstance = unref(vditorPreviewRef);
+  if (!vditorInstance) return;
+  try {
+    vditorInstance?.destroy?.();
+  } catch {}
+  vditorPreviewRef.value = undefined;
+}
+
+onBeforeUnmount(destroy);
+onDeactivated(destroy);
+</script>
+
+<template>
+  <div ref="viewerRef" id="markdownViewer" :class="$props.class"></div>
+</template>
+
+<style scoped>
+.markdown-viewer {
+  width: 100%;
+}
+</style>
diff --git a/apps/vben5/packages/@abp/components/src/vditor/index.ts b/apps/vben5/packages/@abp/components/src/vditor/index.ts
index 7ceb1995b..437fcb85c 100644
--- a/apps/vben5/packages/@abp/components/src/vditor/index.ts
+++ b/apps/vben5/packages/@abp/components/src/vditor/index.ts
@@ -1 +1,2 @@
 export { default as MarkdownEditor } from './Editor.vue';
+export { default as MarkdownViewer } from './Viewer.vue';