[QUESTION] The domComponents property inside grapesjs.init({...})

[joao678]

Hello! As commented here config.ts, there seems to be a way of adding custom components at the time of the creation of the actual edior itself, however I cannot find any examples, or how I should define these components. this is how my code looks like so far

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: '100%',
    storageManager: false,
    traitManager: {
        appendTo: '.gjs-pn-views-upper-container'
    },
    selectorManager: {
        appendTo: '.gjs-pn-views-upper-container'
    },
    styleManager: {
        appendTo: '.gjs-pn-views-upper-container'
    },
    layerManager: {
        appendTo: '.gjs-pn-views-lower-container'
    },
    domComponents: {
        components: [{
            id: 'test-qrcode',
            type: 'test-qrcode',
            model: {
                defaults: {
                    // The tag name that will be used in the final code
                    tagName: 'div',
                    attributes: { customProp: 'val1' },
                    // You would use traits to customize custom properties
                    traits: [
                        {
                            type: 'select',
                            name: 'customProp',
                            options: [
                                { value: 'val1', name: 'Value 1' },
                                { value: 'val2', name: 'Value 2' },
                            ]
                        }
                    ]
                }
            },
            view: {
                // eg. You can customize the tag in the canvas
                // By default, the view will use the same tag of the model
                tagName: 'div',
                onRender() {
                    // What the user see in the canvas is totally up to you
                    // it can be a simple image as a placeholder or
                    // you can make it as much close to the original markup
                    const attrs = this.model.getAttributes();
                    this.el.innerHTML = `<div>
                            My custom HTML for this component<br>
                            My custom prop: ${attrs['customProp']}
                        </div>`;
                }
            }
        }]
    },
...

When I try to drag a block that has this component type, this is shown in the console.

How can this be done?

[artf]

Just stick to what the documentation says https://grapesjs.com/docs/modules/Components.html#define-custom-component-type