<script setup lang="ts">
import Editor from '@tinymce/tinymce-vue'
import PromptEditor from '@/nodes/_base/PromptEditor/index.vue'

defineOptions({
	name: 'RichEditor'
})

type RichEditorMode = 'rich' | 'prompt'

const props = withDefaults(
	defineProps<{
		id?: string
		mode?: RichEditorMode
		placeholder?: string
		disabled?: boolean
		rows?: number
		autoFocus?: boolean
		triggerStrings?: string[]
		menuOptions?: Array<Record<string, any>>
		height?: number
	}>(),
	{
		mode: 'rich',
		placeholder: '',
		disabled: false,
		rows: 4,
		autoFocus: false,
		triggerStrings: () => ['/'],
		menuOptions: () => [],
		height: 300
	}
)

const modelValue = defineModel<string>()
</script>

<template>
	<PromptEditor
		v-if="props.mode === 'prompt'"
		v-model="modelValue"
		:placeholder="props.placeholder"
		:auto-focus="props.autoFocus"
		:trigger-strings="props.triggerStrings"
		:menu-options="props.menuOptions"
		:rows="props.rows"
	/>
	<Editor
		v-else
		v-model="modelValue"
		:id="props.id"
		:disabled="props.disabled"
		:init="{
			plugins:
				'advlist anchor autolink charmap code fullscreen help image insertdatetime link lists media preview searchreplace table visualblocks wordcount',
			toolbar:
				'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
			height: props.height,
			placeholder: props.placeholder
		}"
	/>
</template>

<style lang="less" scoped></style>
