<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { marked } from 'marked'
import DOMPurify from 'dompurify'

//const model = defineModel({ default: '' })
const props = defineProps(['active_note'])
const emit = defineEmits(['update-note-content'])
const markdownInput = defineModel({ default: '' })

const isEditing = ref(false)

// render the markdown and sanitize the result
const renderedMarkdown = computed(() => {
	// parse raw text into markdown
	const rawHTML = marked.parse(markdownInput.value)
	// sanitize the raw html from marked
	return DOMPurify.sanitize(rawHTML as string)
})

// function to start the edit state
function startEditing() {
	// set the edit state to true
	isEditing.value = true
	// wait a tick and focus the input field
	nextTick(() => { (document.querySelector('textarea#editor') as HTMLTextAreaElement)?.focus() })
}

// function to stop the edit state
function stopEditing() {
	// set the edit state to false
	isEditing.value = false
	// update the prop outside this component
	emit('update-note-content', {id: props.active_note, content: markdownInput.value})
}
</script>

<template>
	<div>
		<div 
			v-if="!isEditing"
			class="prose max-w-none w-full h-full text-lg cursor-pointer text-white prose-headings:text-white"
			v-html="renderedMarkdown"
			@click="startEditing"
		></div>
		<textarea
			v-else
			id="editor"
			v-model="markdownInput"
			@blur="stopEditing"
			@keydown.esc.prevent="stopEditing"
			class="w-full h-full text-lg outline-none"
		></textarea>
	</div>
</template>