Text align extension

[zvitek]

Hello, I have this extension for text align support

class Alignment extends Mark {
    get name() {
        return 'alignment';
    }

    get defaultOptions() {
        return {levels: ["left", "center", "right", "justify"]};
    }

    get schema() {
        return {
            attrs:    {
                align: {
                    default: 'left',
                },
            },
            parseDOM: [{
                style:    'text-align',
                getAttrs: value => ({
                    align: value
                }),
            }],
            toDOM:    mark => {
                return ['span', {
                    class: `block text-${mark.attrs.align}`
                }, 0];
            }
        };
    }

    commands({ type }) {
        return attrs => updateMark(type, attrs);
    }

    inputRules({ type }) {
        return [
            markInputRule(/(?:\*\*|__)([^*_]+)(?:\*\*|__)$/, type),
        ];
    }
}

Everything works well and I get a HTML like

<p><span class="block text-right">hello</span></p>

This HMTL code I save to database and done.
Then load this HTML to editor for next edit and here is the problem because editor remove class definition and load only

<p>hello</p>

Can you help me define where can be a problem?

Thank you

Version

{
    "tiptap": "^1.29.4",
    "tiptap-extensions": "^1.32.1"
}

[mikbox74]

Hello @zvitek ! Seems you forgot to add tag: "span" in parseDOM:

   get schema() {
        return {
            attrs:    {
                align: {
                    default: 'left',
                },
            },
            parseDOM: [{
                tag: "span", //<------
                style:    'text-align',
                getAttrs: value => ({
                    align: value
                }),
            }],
            toDOM:    mark => {
                return ['span', {
                    class: `block text-${mark.attrs.align}`
                }, 0];
            }
        };
    }