import { Node, mergeAttributes } from '@tiptap/core';
import { Plugin } from 'prosemirror-state';
const TagSpan = Node.create({
    name: 'tagSpan',
    group: 'inline',
    inline: true,
    atom: true,
    addOptions() {
        return {
            HTMLAttributes: {},
        };
    },
    addAttributes() {
        return {
            'data-tag': {
                default: null,
                parseHTML: element => element.getAttribute('data-tag'),
                renderHTML: attributes => {
                    if (!attributes['data-tag']) {
                        return {};
                    }
                    return {
                        'data-tag': attributes['data-tag'],
                    };
                },
            },
            text: {
                default: '',
                parseHTML: element => element.textContent,
                renderHTML: () => {
                    return {};
                },
            },
        };
    },
    parseHTML() {
        return [
            {
                tag: 'span[class="tagStyle"]',
                getAttrs: (node) => {
                    const el = node;
                    return {
                        'data-tag': el.getAttribute('data-tag'),
                        text: el.textContent,
                    };
                },
            },
        ];
    },
    renderHTML({ HTMLAttributes, node }) {
        return ['span', mergeAttributes({
                class: 'tagStyle',
                contenteditable: 'false',
                style: 'cursor: pointer;',
            }, HTMLAttributes), node.attrs.text || ''];
    },
    addProseMirrorPlugins() {
        return [
            new Plugin({
                props: {
                    handleDOMEvents: {
                        click: (view, event) => {
                            const target = event.target;
                            if (target && target.classList.contains('tagStyle')) {
                                const pos = view.posAtDOM(target, 0);
                                if (pos !== null && pos !== -1) {
                                    const node = view.state.doc.nodeAt(pos);
                                    if (node && node.type.name === 'tagSpan') {
                                        view.dispatch(view.state.tr.delete(pos, pos + node.nodeSize));
                                        return true;
                                    }
                                }
                            }
                            return false;
                        },
                    },
                    handleKeyDown: (view, event) => {
                        if (event.key === 'Backspace') {
                            const { selection } = view.state;
                            const { $from } = selection;
                            // Check if we're at the start of a tagSpan or right after one
                            const nodeBefore = $from.nodeBefore;
                            if (nodeBefore && nodeBefore.type.name === 'tagSpan') {
                                const pos = $from.pos - nodeBefore.nodeSize;
                                // Remove the trailing ' ✕' from the tag text if present
                                let tagText = nodeBefore.attrs.text || '';
                                tagText = tagText.replace(/\s*✕$/, '');
                                // Replace the tag node with plain text
                                const tr = view.state.tr
                                    .delete(pos, $from.pos)
                                    .insertText(tagText, pos);
                                view.dispatch(tr);
                                return true;
                            }
                            // Check if cursor is inside a tagSpan (though this shouldn't happen normally)
                            const nodeAt = view.state.doc.nodeAt($from.pos);
                            if (nodeAt && nodeAt.type.name === 'tagSpan') {
                                const tagText = nodeAt.attrs.text || '';
                                const tr = view.state.tr
                                    .delete($from.pos, $from.pos + nodeAt.nodeSize)
                                    .insertText(tagText, $from.pos);
                                view.dispatch(tr);
                                return true;
                            }
                        }
                        return false;
                    },
                },
            }),
        ];
    },
});
export default TagSpan;
