import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import CharacterCount from '@tiptap/extension-character-count'
import BubbleMenu, { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
import Image from '@tiptap/extension-image'
import { getDom } from './utils.js'

import "./style/index.scss"

class Inkeon {
    constructor(dom: string | Element) {
        const domEl = getDom(dom)
        this.#init(domEl)
    }

    #editor: Editor

    #init(dom: Element) {
        this.#editor = new Editor({
            element: getDom(dom),
            autofocus: true,
            extensions: [
                StarterKit,
                Image,
                CharacterCount.configure({
                    limit: 240,
                }),
                BubbleMenu.configure({
                    element: document.querySelector('.bubble-menu'),
                    shouldShow: ({ editor, view, state, oldState, from, to }) => {
                        console.log(editor, view, state, oldState, from, to);
                        //如果是图片或链接才显示菜单
                        return editor.isActive('image') || editor.isActive('link')
                    },
                }),
            ],
        })
        console.log(this.#editor);
        document.querySelector(".aa").addEventListener("click", () => {
            // console.log(this.#editor.getJSON());
            // console.log(this.#editor.getHTML());
            console.log(this.#editor.getText());
        })
        // this.#editor.options.element = getDom(dom)
        // setTimeout(() => {
        //     this.#editor.registerPlugin(BubbleMenuPlugin({
        //         updateDelay: 0,
        //         editor: this.#editor,
        //         pluginKey: "bubbleMenu",
        //         element: document.querySelector('.bubble-menu'),
        //     }))
        // }, 0);
        this.#editor.chain().setContent(`<p>Hello World!</p> <img src="https://cd2.boardgamesmaker.com/AttachFiles/WebsiteImages/Product_Show/FI_8807.jpg" />`).run()
    }
}

export { Inkeon }
export default Inkeon