55 lines
1.6 KiB
Vue
55 lines
1.6 KiB
Vue
<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 prose-strong:text-white prose-em:text-white prose-blockquote:text-white prose-code:text-white prose-a:text-white marker: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> |