<script setup>
import Editor from "primevue/editor"
import {ref} from "vue";

// reference: https://quilljs.com/docs/modules/toolbar/
/**
 * 	['bold', 'italic', 'underline', 'strike'],
 * 					[{'header': 1}, {'header': 2}],
 * 					[{'list': 'ordered'}, {'list': 'bullet'}],
 * 					[{'indent': '-1'}, {'indent': '+1'}],
 * 					[{'direction': 'rtl'}],
 * 					[{'size': ['small', false, 'large', 'huge']}],
 * 					[{'header': [1, 2, 3, 4, 5, 6, false]}],
 * 					[{'color': []}, {'background': []}],
 * 					[{'font': []}],
 * 					[{'align': []}],
 * 					['link', 'image'],
 * 					['clean']
 */



const props = defineProps({
	name: String,
	modelValue: {
		type: String,
		default: ""
	}
})

const emits = defineEmits(["update:modelValue"])
const value = ref(props.modelValue)

const onLoad = ({instance}) => {
	instance.setContents(instance.clipboard.convert({
		html: props.modelValue
	}))
}

const onChange = (v) => {
	value.value = v
	emits("update:modelValue", v)
}
</script>

<template>
	<Editor editorStyle="height: 20em" @load="onLoad" @update:modelValue="onChange">
		<template #toolbar>
        <span class="ql-formats">
            <button v-tooltip.bottom="'Bold'" class="ql-bold"></button>
            <button v-tooltip.bottom="'Italic'" class="ql-italic"></button>
            <button v-tooltip.bottom="'Underline'" class="ql-underline"></button>
			<button v-tooltip.bottom="'Strike'" class="ql-strike"></button>
        </span>
		</template>
	</Editor>
	<input type="hidden" :name="name" :value="value"/>
</template>

<style scoped>

</style>