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

<script lang="ts">
	import { Carta, Markdown } from 'carta-md';
	import DOMPurify from 'isomorphic-dompurify';
	import { math } from '@cartamd/plugin-math';
	import { tikz } from '@cartamd/plugin-tikz';
	import 'katex/dist/katex.min.css';
	import '@cartamd/plugin-code/default.css';
	import './markdown.css';

	const carta = new Carta({
		sanitizer: DOMPurify.sanitize,
		extensions: [
			math(),
			tikz({
				class: 'tikz',
				postProcessing(html) {
					return html
						.replaceAll('#000000', 'var(--color-base-content)')
						.replaceAll('#000', 'var(--color-base-content)')
						.replaceAll('black', 'var(--color-base-content)')
						.replaceAll('#ffffff', 'var(--color-base-300)')
						.replaceAll('#fff', 'var(--color-base-300)')
						.replaceAll('white', 'var(--color-base-300)')
						.replaceAll('#ff0000', 'var(--color-error)')
						.replaceAll('#f00', 'var(--color-error)')
						.replaceAll('red', 'var(--color-error)')
						.replaceAll('#00ff00', 'var(--color-success)')
						.replaceAll('#0f0', 'var(--color-success)')
						.replaceAll('green', 'var(--color-success)')
						.replaceAll('#0000ff', 'var(--color-info)')
						.replaceAll('#00f', 'var(--color-info)')
						.replaceAll('blue', 'var(--color-info)')
						.replaceAll('#ffff00', 'var(--color-warning)')
						.replaceAll('#ff0', 'var(--color-warning)')
						.replaceAll('yellow', 'var(--color-warning)')
						.replaceAll('#808080', 'var(--color-neutral)')
						.replaceAll('#888888', 'var(--color-neutral)')
						.replaceAll('#999999', 'var(--color-neutral)')
						.replaceAll('gray', 'var(--color-neutral)')
						.replaceAll('grey', 'var(--color-neutral)')
						.replaceAll('#cccccc', 'var(--color-base-300)')
						.replaceAll('#f5f5f5', 'var(--color-base-200)')
						.replaceAll('#eeeeee', 'var(--color-base-100)');
				}
			})
		]
	});

	let value = '...';

	let { content } = $props();
</script>

<div class="prose prose-sm max-w-none">
	<p class="whitespace-pre-wrap break-words text-base-content leading-relaxed">
		<Markdown theme="eve" {carta} value={content} />
	</p>
</div>
