import { mergeAttributes, Node } from '@tiptap/core';

export const Callout = Node.create({
    name: 'callout',
    group: 'block',
    content: 'block+',
    defining: true,
    addAttributes() {
        return {
            variant: {
                default: 'note',
                parseHTML: (element) =>
                    element.getAttribute('data-callout') || 'note',
                renderHTML: (attributes) => ({
                    'data-callout': attributes.variant,
                }),
            },
        };
    },
    parseHTML() {
        return [{ tag: 'aside[data-callout]' }];
    },
    renderHTML({ HTMLAttributes }) {
        return [
            'aside',
            mergeAttributes(HTMLAttributes, {
                class: `kb-callout kb-callout-${HTMLAttributes.variant ?? 'note'}`,
            }),
            0,
        ];
    },
});