import { Mark } from '@tiptap/core'

export default function () {
    return Mark.create({
        name: 'highlightColor',

        priority: 1001,

        parseHTML() {
            return [
                {
                    tag: 'span[data-hbg]',
                    getAttrs: (el) => ({ 'data-hbg': el.getAttribute('data-hbg') }),
                },
            ]
        },

        renderHTML({ HTMLAttributes }) {
            const color = HTMLAttributes['data-hbg']
            return [
                'span',
                {
                    'data-hbg': color,
                    style: `background-color: ${color};`,
                },
                0,
            ]
        },

        addAttributes() {
            return {
                'data-hbg': {
                    default: null,
                    parseHTML: (el) => el.getAttribute('data-hbg'),
                    renderHTML: (attrs) => {
                        if (!attrs['data-hbg']) return {}
                        return { 'data-hbg': attrs['data-hbg'] }
                    },
                },
            }
        },

    })
}