Text missing after reload

[juliantp]

I'm using GrapeJS with a Laravel backend. Almost everything is working correctly, except for titles and text. I've created a t-text component, which I'm sending below, it's quite simple. When I drag it onto the canvas, I can't edit it inline, even though it's declared as type: text and editable true. But the major issue is: if I leave the editor and come back, the 'p' tag turns into a 'div' and the content disappears. Additionally, there's an error in the console.log saying the component doesn't exist.

If I create a wrapper component around it, it works. However, the wrapper can't be a 'div', it has to be something else, like a 'section', which also gets automatically changed to a div. And this would imply that all my texts and titles would need a wrapper, which I'm not sure is ideal.

I don't know what I'm doing wrong; I've tried a thousand things. I've tried using isComponent to check if the 'p' exists and return type text, I've tried putting in init and, if the tagName changes, putting in the p tag, I've tried component:add... but nothing solves it.

Can anyone help me? I've been stuck on this for over a week. Is it some issue with GrapeJS or something I'm not understanding?

Thank you very much for your attention.

  editor.DomComponents.addType('t-text', {
            model: {
                defaults: {
                    tagName: 'p',
                    attributes: {
                        class: 'text'
                    },
                    type: 'text',
                    content: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores suscipit fuga minima possimus magni illum natus officia consectetur ipsa omnis!',
                    editable: true,
                    icon: '<span class="icon icon-badge icon-text"></span>',
                },
            },

        });


        editor.Css.setRule('.text', {
            'color': '#333333',
            'font-size': '18px'
        });

        editor.Css.setRule('.text', {
            'font-size': '16px'
        }, {
            atRuleType: 'media',
            atRuleParams: '(max-width: 768px)'
        });


        editor.BlockManager.add('text-block', {
            label: '<div class="ttay_panel_block"><span class="icon icon-text"></span>@lang('blocks.text')</div>',
            content: {
                type: 't-text',
            },
            category: {
                id: 'text',
            },

        });

[artf]

It's hard to tell without a minimal reproducible demo (eg, via jsfiddle or stackblitz)