<issue_start><issue_comment>Title: Added element lose styling
username_0: Hi,

Im trying to set up a emoji picker for long tiptap editor and i had some problems.

when picking an emoji and parsing it to dom it gets parsed nicely but when the page is refreshed 

`editor.setContent(content)`

is called on refresh and that element loses all its styling. this is the file im using.. 
i found in some previous threads that all styles should be defined so i did that but it didnt help.
when content is set the dom el has all the style properties but all values are undefined ..

`
import { Node } from 'tiptap';
import { replaceText } from 'tiptap-commands';
import { Suggestions } from 'tiptap-extensions';

export default class Emojis extends Node {
    get name() {
        return 'emoji';
    }

    get defaultOptions() {
        return {
            matcher: {
                char: ':',
                allowSpaces: false,
                startOfLine: false
            },
            emojiClass: 'emoji',
            suggestionClass: 'emoji-suggestion'
        };
    }

    get schema() {
        return {
            attrs: {
                style: {
                    display: {
                        default: 'inline-block'
                    },
                    width: {
                        default: '16px'
                    },
                    height: {
                        default: '16px'
                    },
                    backgroundImage: {
                        default: null
                    },
                    backgroundSize: {
                        default: null
                    },
                    backgroundPosition: {
                        default: null
                    }
                }
            },
            content: 'inline*',
            group: 'inline',
            inline: true,
            selectable: false,
            parseDOM: [{
                tag: 'span',
                getAttrs: dom => ({
                    style: dom.getAttribute('style')
                })
            }],
            toDOM: node => {
                const style = node.attrs.style;

                return ['span',
                    {
                        style: `background-image: ${style.backgroundImage}; background-size: ${style.backgroundSize}; background-position: ${style.backgroundPosition}; display: ${style.display}; width: ${style.width}; height: ${style.height}`,
                    },
                    ['span',
                        {
                            class: 'd-none'
                        },
                       emoji.char
[Truncated]
    }

    get plugins() {
        return [
            Suggestions({
                command: ({ range, attrs, schema }) => replaceText(range, schema.nodes[this.name], attrs),
                appendText: ' ',
                matcher: this.options.matcher,
                items: this.options.items,
                onEnter: this.options.onEnter,
                onChange: this.options.onChange,
                onExit: this.options.onExit,
                onKeyDown: this.options.onKeyDown,
                onFilter: this.options.onFilter,
                suggestionClass: this.options.suggestionClass
            })
        ];
    }
}
`<issue_closed>
<issue_comment>username_0: Hi,

Im trying to set up a emoji picker for long tiptap editor and i had some problems.

when picking an emoji and parsing it to dom it gets parsed nicely but when the page is refreshed 

`editor.setContent(content)`

is called on refresh and that element loses all its styling. this is the file im using.. 
i found in some previous threads that all styles should be defined so i did that but it didnt help.
when content is set the dom el has all the style properties but all values are undefined ..

`
import { Node } from 'tiptap';
import { replaceText } from 'tiptap-commands';
import { Suggestions } from 'tiptap-extensions';

export default class Emojis extends Node {
    get name() {
        return 'emoji';
    }

    get defaultOptions() {
        return {
            matcher: {
                char: ':',
                allowSpaces: false,
                startOfLine: false
            },
            emojiClass: 'emoji',
            suggestionClass: 'emoji-suggestion'
        };
    }

    get schema() {
        return {
            attrs: {
                style: {
                    display: {
                        default: 'inline-block'
                    },
                    width: {
                        default: '16px'
                    },
                    height: {
                        default: '16px'
                    },
                    backgroundImage: {
                        default: null
                    },
                    backgroundSize: {
                        default: null
                    },
                    backgroundPosition: {
                        default: null
                    }
                }
            },
            content: 'inline*',
            group: 'inline',
            inline: true,
            selectable: false,
            parseDOM: [{
                tag: 'span',
                getAttrs: dom => ({
                    style: dom.getAttribute('style')
                })
            }],
            toDOM: node => {
                const style = node.attrs.style;

                return ['span',
                    {
                        style: `background-image: ${style.backgroundImage}; background-size: ${style.backgroundSize}; background-position: ${style.backgroundPosition}; display: ${style.display}; width: ${style.width}; height: ${style.height}`,
                    },
                    ['span',
                        {
                            class: 'd-none'
                        },
                       emoji.char
[Truncated]
    }

    get plugins() {
        return [
            Suggestions({
                command: ({ range, attrs, schema }) => replaceText(range, schema.nodes[this.name], attrs),
                appendText: ' ',
                matcher: this.options.matcher,
                items: this.options.items,
                onEnter: this.options.onEnter,
                onChange: this.options.onChange,
                onExit: this.options.onExit,
                onKeyDown: this.options.onKeyDown,
                onFilter: this.options.onFilter,
                suggestionClass: this.options.suggestionClass
            })
        ];
    }
}
`<issue_closed>