<svelte:options
	customElement={{
		tag: 'eve-markdown-editor',
		shadow: 'none'
	}}
/>

<script lang="ts">
	import { Carta, MarkdownEditor } from 'carta-md';
	import DOMPurify from 'isomorphic-dompurify';
	import { math } from '@cartamd/plugin-math';
	import { tikz } from '@cartamd/plugin-tikz';
	import { code } from '@cartamd/plugin-code';

	import 'katex/dist/katex.min.css';
	import '@cartamd/plugin-code/default.css';
	import './markdown.css';

	let { value = $bindable(), placeholder } = $props();

	const carta = new Carta({
		sanitizer: DOMPurify.sanitize,
		extensions: [code(), math(), tikz()]
	});
</script>

<div class="bg-base-300 text-base-content card p-4">
	<MarkdownEditor mode="tabs" theme="eve" {carta} bind:value />
</div>
