<template>
    <quill-editor ref="editor" v-model:content="htmlValue" :options="editorOption" contentType="html"
        @update:content="updateValue($event)" :style='"height: " + this.height + "px;"'
        :readOnly="see || readonly" :placeholder="placeholder" v-bind="$attrs"></quill-editor>
</template>

<script>
import { QuillEditor } from '@vueup/vue-quill';

export default {    
    name: 'PaasEditor',
    inheritAttrs: false, // 禁用自动继承，手动控制透传
    components: {
        QuillEditor
    },
    props: {
        placeholder: {
            type: String,
            default: "",
        },
        modelValue: {
            type: String,
            default: ""
        },
        height: {
            type: [Number, String],
            default: 350
        },
        readonly: {
            type: Boolean,
            default: false
        },
        onChange: {
            type: Function,
            default: null
        }
    },
    watch: {
        'modelValue': {
            handler(newValue) {
                this.htmlValue = newValue;
            },
        },
    },
    computed: {
        see() {
            return this.$store.forms.see;
        }
    },
    data() {
        return {
            htmlValue: this.modelValue,
            editorOption: {
                modules: {
                    toolbar: [
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
                        ['bold', 'italic', 'underline', 'strike'],
                        ['blockquote', 'code-block'],
                        [{ list: 'ordered' }, { list: 'bullet' }],
                        [{ script: 'sub' }, { script: 'super' }],
                        [{ indent: '-1' }, { indent: '+1' }],
                        [{ direction: 'rtl' }],
                        [{ color: [] }, { background: [] }],
                        [{ font: [] }],
                        [{ align: [] }],
                        ["clean"],
                        ["image", "video", "link", "table"]
                    ],
                    syntax: {
                        highlight: text => hljs.highlightAuto(text).value
                    },
                    history: {
                        delay: 1000,
                        maxStack: 50,
                        userOnly: true
                    }
                },
                theme: 'snow',
                language: 'zh-CN'
            },
        }
    },

    methods: {
        getContent() {
            return this.quill.root.innerHTML.trim()
        },
        updateValue(newValue) {
            this.$emit("update:modelValue", newValue);
        }
    }
}
</script>
<style scoped>
.ql-container {
    width: 100%;
    min-height: 350px;
}
</style>