maxkb/ui/src/components/markdown-renderer/MdRenderer.vue
2024-01-12 14:55:08 +08:00

39 lines
1.1 KiB
Vue

<template>
<MdPreview
ref="editorRef"
editorId="preview-only"
:modelValue="item"
v-for="(item, index) in md_view_list"
:key="index"
/>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { MdPreview } from 'md-editor-v3'
const props = withDefaults(defineProps<{ source?: string; inner_suffix?: boolean }>(), {
source: ''
})
const md_view_list = computed(() => {
const temp_source = props.source
const temp_md_img_list = temp_source.match(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
const md_img_list = temp_md_img_list ? temp_md_img_list.filter((i) => i) : []
const split_img_value = temp_source
.split(/(!\[.*?\]\(img\/.*?\){.*?})|(!\[.*?\]\(img\/.*?\))/g)
.filter((item) => item !== undefined)
.filter((item) => !md_img_list?.includes(item))
const result = Array.from(
{ length: md_img_list.length + split_img_value.length },
(v, i) => i
).map((index) => {
if (index % 2 == 0) {
return split_img_value[Math.floor(index / 2)]
} else {
return md_img_list[Math.floor(index / 2)]
}
})
return result
})
</script>
<style lang="scss" scoped></style>