44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { MdPreview } from 'md-editor-v3';
|
||
|
|
import 'md-editor-v3/lib/preview.css';
|
||
|
|
import useColorModeStore from '~/stores/colorModeStore';
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<{
|
||
|
|
editorId: string;
|
||
|
|
markdown?: string;
|
||
|
|
}>(), {
|
||
|
|
markdown: () => '## Hello World!',
|
||
|
|
});
|
||
|
|
console.log(props.markdown);
|
||
|
|
const eraseHeaderMarkdown = computed(() => props.markdown.replace(/^---[\s\S]*?---\n?/, ''));
|
||
|
|
|
||
|
|
const { colorMode } = storeToRefs(useColorModeStore());
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="p-5 pt-0 bg-old-neutral-200 dark:bg-old-neutral-800">
|
||
|
|
<MdPreview :editor-id="editorId" :theme="colorMode" :model-value="eraseHeaderMarkdown" class="transition-all duration-500"/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
:global(.md-editor) {
|
||
|
|
--md-bk-color: #e5e5e5;
|
||
|
|
--md-theme-heading-1-color: #fff;
|
||
|
|
transition-property: all;
|
||
|
|
transition-duration: 500ms;
|
||
|
|
--tw-ease: cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
|
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||
|
|
}
|
||
|
|
|
||
|
|
:global(.dark .md-editor) {
|
||
|
|
--md-bk-color: #262626;
|
||
|
|
--md-theme-heading-1-color: #fff;
|
||
|
|
}
|
||
|
|
:global(.dark .md-editor-preview) {
|
||
|
|
--md-color: var(--ui-text);
|
||
|
|
}
|
||
|
|
</style>
|