import { defineComponent, h } from 'vue';
import { module } from '/@/cool';
import { MdPreview } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';
import '../static/index.scss';
import { useTheme } from '/#/theme';

export default defineComponent({
	name: 'cl-preview-md',

	components: {
		MdPreview
	},

	props: {
		content: String
	},

	setup(props) {
		const config = module.config('editor-md');
		const theme = useTheme();

		return () => {
			return h(<md-preview v-model={props.content} />, {
				theme: theme.isDark ? 'dark' : 'light',
				...config,
				editorId: 'cl-preview-md'
			});
		};
	}
});
