Add onInit to modules (#6469)

packages/core/src/abstract/Module.ts

@@ -8,6 +8,7 @@ import { createId, isDef, deepMerge } from '../utils/mixins';
 export interface IModule<TConfig extends ModuleConfig = ModuleConfig> extends IBaseModule<TConfig> {
   destroy(): void;
   postLoad(key: any): any;
+  onInit(): void;
   onLoad?(): void;
   name: string;
   postRender?(view: any): void;
@@ -72,6 +73,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig> impl
 
   render(opts?: any): HTMLElement | JQuery<HTMLElement> | void {}
   postLoad(key: any): void {}
+  onInit(): void {}
 
   get name(): string {
     return this._name;

packages/core/src/block_manager/index.ts

@@ -61,26 +61,24 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
   storageKey = '';
 
   constructor(em: EditorModel) {
-    super(em, 'BlockManager', new Blocks(em.config.blockManager?.blocks || [], { em }), BlocksEvents, defConfig());
-
-    // Global blocks collection
+    super(em, 'BlockManager', new Blocks([], { em }), BlocksEvents, defConfig());
     this.blocks = this.all;
     this.blocksVisible = new Blocks(this.blocks.models, { em });
-    this.categories = new Categories([], {
-      em,
-      events: { update: BlocksEvents.categoryUpdate },
-    });
-
-    // Setup the sync between the global and public collections
-    this.blocks.on('add', (model) => this.blocksVisible.add(model));
-    this.blocks.on('remove', (model) => this.blocksVisible.remove(model));
-    this.blocks.on('reset', (coll) => this.blocksVisible.reset(coll.models));
-
+    this.categories = new Categories([], { em, events: { update: BlocksEvents.categoryUpdate } });
     this.__onAllEvent = debounce(() => this.__trgCustom(), 0);
 
     return this;
   }
 
+  onInit() {
+    const { config, blocks, blocksVisible } = this;
+    blocks.add(config.blocks || []);
+    // Setup the sync between the global and public collections
+    blocks.on('add', (model) => blocksVisible.add(model));
+    blocks.on('remove', (model) => blocksVisible.remove(model));
+    blocks.on('reset', (coll) => blocksVisible.reset(coll.models));
+  }
+
   /**
    * Get configuration object
    * @name getConfig

packages/core/src/editor/model/Editor.ts

@@ -322,6 +322,10 @@ export default class EditorModel extends Model {
     return !!this.get('isShallow');
   }
 
+  initModules() {
+    this.modules.forEach((module) => module.onInit());
+  }
+
   /**
    * Get configurations
    * @param  {string} [prop] Property name

packages/core/src/index.ts

@@ -68,6 +68,7 @@ export const grapesjs = {
     };
     const editor = new Editor(initConfig, { $ });
     const em = editor.getModel();
+    em.initModules();
 
     // Load plugins
     initConfig.plugins!.forEach((pluginId) => {

packages/core/test/specs/block_manager/view/BlocksView.ts

@@ -52,6 +52,7 @@ describe('BlocksView', () => {
           ],
         },
       });
+      em.initModules();
       model = em.Blocks.blocks;
       view = new BlocksView({ collection: model }, { em });
       document.body.innerHTML = '<div id="fixtures"></div>';