Add `block:category:update` event

src/abstract/ModuleCategories.ts

@@ -1,9 +1,29 @@
 import { isArray, isString } from 'underscore';
 import { AddOptions, Collection } from '../common';
 import { normalizeKey } from '../utils/mixins';
+import EditorModel from '../editor/model/Editor';
 import Category, { CategoryProperties } from './ModuleCategory';
 
+type CategoryCollectionParams = ConstructorParameters<typeof Collection<Category>>;
+
+interface CategoryOptions {
+  events?: { update?: string };
+  em?: EditorModel;
+}
+
 export default class Categories extends Collection<Category> {
+  constructor(models?: CategoryCollectionParams[0], opts: CategoryOptions = {}) {
+    super(models, opts);
+    const { events, em } = opts;
+    const evUpdate = events?.update;
+    if (em) {
+      evUpdate &&
+        this.on('change', (category, options) =>
+          em.trigger(evUpdate, { category, changes: category.changedAttributes(), options })
+        );
+    }
+  }
+
   /** @ts-ignore */
   add(model: (CategoryProperties | Category)[] | CategoryProperties | Category, opts?: AddOptions) {
     const models = isArray(model) ? model : [model];

src/block_manager/index.ts

@@ -66,7 +66,10 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
     // Global blocks collection
     this.blocks = this.all;
     this.blocksVisible = new Blocks(this.blocks.models, { em });
-    this.categories = new Categories();
+    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));

src/block_manager/types.ts

@@ -54,6 +54,13 @@ export enum BlocksEvents {
    */
   dragEnd = 'block:drag:stop',
 
+  /**
+   * @event `block:category:update` Block category updated.
+   * @example
+   * editor.on('block:category:update', ({ category, changes }) => { ... });
+   */
+  categoryUpdate = 'block:category:update',
+
   /**
    * @event `block:custom` Event to use in case of [custom Block Manager UI](https://grapesjs.com/docs/modules/Blocks.html#customization).
    * @example