Is it posible to have multiple grapesjs instances on the same page?

Question

I am using Boostrap 4 Tabs. On each tab, I have an instance of grapesjs. One is using the webpage plugin:

const productEditor = grapesjs.init({
            container: '#gjs',
            fromElement: 1,
            showOffsets: 1,
            allowScripts: 1,
            plugins: ['gjs-preset-webpage'],
            pluginsOpts: {
                'gjs-preset-webpage': {
                    // ... other options
                }
            },
            storageManager: {
                id: 'gjs-',
                type: 'remote',
                autosave: false,
                autoload: true,
                stepsBeforeSave: 3,
                urlStore: '',
                urlLoad: '',
                contentTypeJson: true
            },
            canvas: {},
        });

the other tab uses the newsletter plugin

const newsletterEditor = grapesjs.init({
            container: '#newsletter-gjs',
            fromElement: 1,
            showOffsets: 1,
            allowScripts: 1,
            plugins: ['gjs-preset-newsletter'],
            pluginsOpts: {
                'gjs-preset-newsletter': {
                    modalTitleImport: 'Import template',
                    // ... other options
                }
            },
            storageManager: {
                id: 'gjs-',
                type: 'remote',
                autosave: false,
                autoload: true,
                stepsBeforeSave: 3,
                urlStore:'',
                urlLoad: '',
                contentTypeJson: true
            },
            canvas: {},
        });

What I am noticing that the productEditor is working properly. For example, I can click the "text center" button and all is well. On the second tab, the "text center" button doesn't work.

I think it is not working because the system is seeing the first instance of grapesjs and ignoring the second. Is there a proper way to initialize multiple grapesjs instances on the same page?

Thank you for any suggestions!

EDIT

I thought about doing something like this:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
    const $activeTab = $(event.target); // newly activated tab
    const previousTab = event.relatedTarget; // previous active tab

            if ($activeTab[0].hash === '#tab-2') {
                console.log('product tab is active');
            }

            if ($activeTab[0].hash === '#tab-3') {
                console.log('newsletter tab is active');
            }
        });

That way I could check which tab was open, then destroy or init whichever tab was currently active.

Answer 1

just pass them in plugins

grapesjs.init({
  ...
  plugins: ['plugin1', 'plugin2', ...],
  // options
  pluginsOpts: {
    'plugin1': {...},
    'plugin2': {...},
    ...
  }
});