What's wrong with this piece of code?

[aspyropoulos]

I am trying to create a highlighted node that is not editable. When user selects a word and the function toggleTest() is used the html should look from:
<p>random text</p>
to:
<p>random <span class="bg-red-700" contenteditable="false">text<span/></p>

export const Test = Node.create<TestOptions>({
    name: 'test',

    defaultOptions: {
        HTMLAttributes: {},
    },
    group: 'inline',
    inline: true,

    renderHTML({ HTMLAttributes }) {
        return ['span', mergeAttributes(HTMLAttributes, { 'class': 'bg-red-700', 'contenteditable': 'false'}), 0]
    },

    addCommands() {
        return {
            toggleTest: attributes => ({ commands }) => {
                return commands.toggleNode('test', attributes)
            },
        }
    },

    addKeyboardShortcuts() {
        return {
            'Mod-Shift-2': () => this.editor.commands.toggleTest(),
        }
    },
})

The above does not work. However if I change it to a block by removing inline: true and :

group: 'block',
content: 'text*',

it works. The problem is that now it's a block while I want it to work as an inline element within <p> html tags.

Is there any mistake that I don't see?