Changing BlockManager html attribute value to be based on option value from DomComponent

[gagandeep-kurl-pfizer]

Here is my component:

        isComponent: el => el.tagName && el.tagName.toUpperCase() === 'DSP-MC-NOTATIONS-CONTAINER' && el.getAttribute('dsp-mc-notations-container-type') === 'dsp-mc-notations-container',
        model: {
            defaults: {
                traits: [
                    {
                        label: 'Select notations type',
                        name: 'dsp-mc-notations-type',
                        type: 'select',
                        options: [
                            {
                                id: 'dsp-mc-notations-references',
                                name: 'References'
                            },
                            {
                                id: 'dsp-mc-notations-footnotes',
                                name: 'Footnotes'
                            },
                            {
                                id: 'dsp-mc-notations-glossary',
                                name: 'Glossary terms'
                            }
                        ]
                    }
                ]
            }
        }
    });

and here is my blockmanager:

        name: 'dsp-mc-notations-container',
        label: `<i class="fad fa-bookmark fa-4x"></i><br><br>Notations`,
        content: `<dsp-mc-notations-container
            dsp-mc-notations-container-type="BASED ON SELECT VALUE?"
            style="width: 100%; height: 20%; display: block"
        ></dsp-mc-notations-container>`,
        category: 'Notations'
    });
});

Within the block manager content, I want the html attribute dsp-mc-notations-container-type to be based the option value the user selects in the component settings based on the select options defined above, so either dsp-mc-notations-references, dsp-mc-notations-footnotes or dsp-mc-notations-glossary.

[artf]

Check here on how to update blocks programmatically https://grapesjs.com/docs/modules/Blocks.html#programmatic-usage
You just need to get the block by ID (eg. const myBlock = bm.get('BLOCK-ID');) and update its content accordingly (eg. myBlock.set({ content: 'new content...' });)