<template>
    <div class="editor">
        <menu-bar v-if="editor" :editor="editor" />
        <editor-content :editor="editor" />
    </div>
</template>

<script setup>
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Image from '@tiptap/extension-image'
import MenuBar from './MenuBar.vue' // کامپوننت نوار ابزار اختیاری

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

const emit = defineEmits(['update:modelValue'])

const editor = useEditor({
    content: props.modelValue,
    extensions: [
        StarterKit,
        Image.configure({ inline: true }),
    ],
    onUpdate: () => {
        emit('update:modelValue', editor.value.getHTML())
    },
})

watch(() => props.modelValue, (value) => {
    if (editor.value && value !== editor.value.getHTML()) {
        editor.value.commands.setContent(value, false)
    }
})
</script>

<style>
/* استایل‌های ضروری */
.ProseMirror {
    min-height: 200px;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 4px;
}
</style>
