[Q] Loading a new module into the editor

I have built a fully working page management system into the editor but I wasn't quite sure the proper way to inject the panel into the editor without doing the below code so i'm looking for some advice if this is not correct.

I have a Page Plugin that I load in:

var editor = grapesjs.init( {
    height: '100%',
    showOffsets: 1,
    noticeOnUnload: 0,
    storageManager: {
        id: 'sa-', // Prefix identifier that will be used on parameters
        type: 'local', // Type of the storage
        autosave: false, // Store data automatically
        autoload: true, // Autoload stored data on init
    },
    container: '#gjs',
    fromElement: true,
    plugins: [ 'page-editor' ],
    pluginsOpts: {
        'page-editor': {}
    }
} );

The page-editor plugin basically loads in a custom panels plugin i have import panels from './panels'; which then in the Plugin Constructor does

    panels( editor, config );

This is where things to me feel weird. I load in my PageManager class import PageManager from "./pagemanager";

And then in the init function of the Panels Controller Class, after I have set all the custom panels for devices, buttons etc, I load in the Page Manager like:

// ADDING IN NEW PAGE MANAGER COMPONENT
        editor.getModel().loadModule( PageManager );
        editor.PageManager = editor.getModel().get( 'PageManager' );

I found the loadModule function from the source code and wasnt sure if there was a different way to inject this into the core as I also wanted to create a custom command that toggles the PageManager on and off which I do by binding a new command to the system and I toggle the PageManager display to block just like the LayerManager.

Please let me know if that is not the best way of loading the PageManager in as id like to folllow the proper system flow.