<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
    </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { SlateTransforms } from "@wangeditor/editor";
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

export default {
    name: "editor", // 富文本编辑器
    components: { Editor, Toolbar },
    data() {
        return {
            editor: null,
            html: "",
            toolbarConfig: {
                toolbarKeys: ["codeBlock", "codeSelectLang"],
            },
            editorConfig: {
                placeholder: "",
                MENU_CONF: {
                    codeSelectLang: {
                        codeLangs: [{ text: "Python", value: "python" }],
                    },
                },
            },
            mode: "simple", // or 'simple'
        };
    },
    props: {
        content: {
            type: String,
            default: "",
        },
        isEdit: {
            type: Boolean,
            default: true,
        },
    },
    watch: {
        content(newVal, oldVal) {
            if (newVal && newVal != oldVal) {
                this.html = `<pre><code>${newVal}</code></pre>`;

                this.$nextTick(() => {
                    SlateTransforms.setNodes(
                        this.editor,
                        { language: "python" },
                        {
                            type: "code",
                        }
                    );
                });
            }
        },
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
            if (!this.isEdit) this.html = `<pre><code></code></pre>`;
        },
    },
    mounted() {
        // if (this.content) {
        //     this.html = `<pre><code>${this.content}</code></pre>`;
        // }
        // this.html = `<pre><code>${this.content}</code></pre>`;
        // 模拟 ajax 请求，异步渲染编辑器
        /* setTimeout(() => {
            console.log(this.content);
            console.log(this.content.length);
            //     this.editor = Object.seal(editor)
            //     const editor = this.editor
            // if (editor == null) return
            // if (editor == null) return
            // if (editor == null) return
            // editor.destroy() // 组件销毁时，及时销毁编辑器
            this.html = `<pre><code>  
        ${this.content}
             
                 </code></pre>`;
            // return
            // setTimeout(() => {

            //     // console.log(this.editor.getHtml());
            //     // console.log(this.editor.getText());
            //     console.log(this.editor.getText().trim().length);
            //     return
            //     // console.log(this.editor.getMenuConfig('codeSelectLang').codeLangs);//{text: 'Python', value: 'python'}
            //     console.log(this.editor.children);

            //     let c = ""

            //     this.editor.children.forEach(i => {
            //         c += i.children[0].text + '\r\n'
            //         // this.editor.insertBreak()

            //     })

            //     console.log(c);

            //     // this.html = `   <pre><code>
            //     //     ${c}
            //     //    </code> </pre>  `

            //     console.log(this.editor.getHtml());
            //     console.log(this.editor.getText());
            //     console.log(this.editor.getText().length);
            // })
        }, 1200); */
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy(); // 组件销毁时，及时销毁编辑器
    },
};
</script>

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