<template>
    <div ref="quillEditor" class="quill-editor"></div>
</template>

<script>
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Underline from 'quill/formats/underline';
import List from 'quill/formats/list';

Quill.register({
    'modules/toolbar': Toolbar,
    'themes/snow': Snow,
    'formats/bold': Bold,
    'formats/italic': Italic,
    'formats/underline': Underline,
    'formats/list': List
});

export default {
    name: 'QuillEditor',
    props: {
        content: {
            type: String,
            default: ''
        },
        placeholder: {
            type: String,
            default: 'Compose an epic...'
        }
    },
    data() {
        return {
            editor: null,
        };
    },
    mounted() {
        this.editor = new Quill(this.$refs.quillEditor, {
            theme: 'snow',
            placeholder: this.placeholder,
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, false] }],
                    ['bold', 'italic', 'underline'],
                    ['link', 'image'],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    [{ 'align': [] }],
                    [{ 'color': [] }, { 'background': [] }],
                    ['clean']
                ]
            }
        });

        this.editor.on('text-change', () => {
            this.$emit('update:content', this.editor.root.innerHTML);
        });

        this.editor.root.innerHTML = this.content;
    },
    beforeUnmount() {
        if (this.editor) {
            this.editor.off('text-change');
            this.editor = null;
        }
    }
};
</script>

<style scoped>
.quill-editor {
    min-height: 200px;
}
</style>
