<script setup>
import { computed, onMounted, ref } from "vue";

const props = defineProps(["df"]);

let jeditor = ref(null);
let jeditor_control = computed(() => {
	if (!jeditor.value) return;
	jeditor.value.innerHTML = "";

	return jingrow.ui.form.make_control({
		parent: jeditor.value,
		df: { ...props.df, hidden: 0 },
		disabled: true,
		render_input: true,
		only_input: true,
	});
});

onMounted(() => {
	if (jeditor.value) jeditor_control.value;
});
</script>

<template>
	<div class="control editable">
		<div class="field-controls">
			<slot name="label" />
			<slot name="actions" />
		</div>
		<div class="jeditor" ref="jeditor"></div>
		<div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
	</div>
</template>

<style lang="scss" scoped>
:deep(.jeditor) {
	.tiptap-toolbar {
		pointer-events: none;
		
		.tiptap-toolbar-btn {
			pointer-events: none;
		}
	}
	.tiptap-content {
		cursor: pointer;
		pointer-events: none;
	}
}
</style> 