Add Core event bus

packages/core/src/components/BlockManager.ts

@@ -1,11 +1,11 @@
 import { BlockAddedEvent, BlockRemovedEvent, EditorJSModel, EventType, ModelEvents } from '@editorjs/model';
 import 'reflect-metadata';
 import { Inject, Service } from 'typedi';
-import { EditorUI } from '../ui/Editor/index.js';
 import { BlockToolAdapter, CaretAdapter, FormattingAdapter } from '@editorjs/dom-adapters';
 import ToolsManager from '../tools/ToolsManager.js';
 import { BlockAPI, BlockToolData } from '@editorjs/editorjs';
 import { CoreConfigValidated } from '../entities/Config.js';
+import { BlockAddedCoreEvent, BlockRemovedCoreEvent, EventBus } from './EventBus/index.js';
 
 /**
  * Parameters for the BlocksManager.insert() method
@@ -45,9 +45,9 @@ export class BlocksManager {
   #model: EditorJSModel;
 
   /**
-   * Editor's UI class instance to add and remove blocks to the UI
+   * Editor's EventBus instance to exchange events between components
    */
-  #editorUI: EditorUI;
+  #eventBus: EventBus;
 
   /**
    * Caret Adapter instance
@@ -74,22 +74,22 @@ export class BlocksManager {
    * BlocksManager constructor
    * All parameters are injected thorugh the IoC container
    * @param model - Editor's Document Model instance
-   * @param editorUI - Editor's UI class instance
+   * @param eventBus - Editor's EventBus instance
    * @param caretAdapter - Caret Adapter instance
    * @param toolsManager - Tools manager instance
    * @param formattingAdapter - will be passed to BlockToolAdapter for rendering inputs` formatted text
    * @param config - Editor validated configuration
    */
   constructor(
     model: EditorJSModel,
-    editorUI: EditorUI,
+    eventBus: EventBus,
     caretAdapter: CaretAdapter,
     toolsManager: ToolsManager,
     formattingAdapter: FormattingAdapter,
     @Inject('EditorConfig') config: CoreConfigValidated
   ) {
     this.#model = model;
-    this.#editorUI = editorUI;
+    this.#eventBus = eventBus;
     this.#caretAdapter = caretAdapter;
     this.#toolsManager = toolsManager;
     this.#formattingAdapter = formattingAdapter;
@@ -177,7 +177,12 @@ export class BlocksManager {
     try {
       const blockElement = await block.render();
 
-      this.#editorUI.addBlock(blockElement, index.blockIndex);
+      this.#eventBus.dispatchEvent(new BlockAddedCoreEvent({
+        tool: tool.name,
+        data: data.data,
+        uiContent: blockElement,
+        index: index.blockIndex,
+      }));
     } catch (error) {
       console.error(`[BlockManager] Block Tool ${data.name} failed to render`, error);
     }
@@ -189,12 +194,15 @@ export class BlocksManager {
    * @param event - BlockRemovedEvent
    */
   #handleBlockRemovedEvent(event: BlockRemovedEvent): void {
-    const { index } = event.detail;
+    const { data, index } = event.detail;
 
     if (index.blockIndex === undefined) {
       throw new Error('Block index should be defined. Probably something wrong with the Editor Model. Please, report this issue');
     }
 
-    this.#editorUI.removeBlock(index.blockIndex);
+    this.#eventBus.dispatchEvent(new BlockRemovedCoreEvent({
+      tool: data.name,
+      index: index.blockIndex,
+    }));
   }
 }

packages/core/src/components/EventBus/core-events/BlockAddedCoreEvent.ts

@@ -0,0 +1,40 @@
+import type { BlockToolData } from '@editorjs/editorjs';
+import { CoreEventBase } from './CoreEventBase.js';
+import { CoreEventType } from './CoreEventType.js';
+
+/**
+ * Payload of BlockAddedCoreEvent custom event
+ * Contains added block data: name, data, index and UI content to be rendered on tha page
+ * @template UiContent - type of the UI content
+ */
+export interface BlockAddedCoreEventPayload<UiContent = unknown> {
+  /**
+   * Name of the added Block Tool
+   */
+  readonly tool: string;
+  /**
+   * Added Block data
+   */
+  readonly data: BlockToolData;
+  /**
+   * UI content to be rendered on the page
+   */
+  readonly uiContent: UiContent;
+  /**
+   * Index of the added Block
+   */
+  readonly index: number;
+}
+
+/**
+ * Class for event that is being fired after the block is added
+ */
+export class BlockAddedCoreEvent<UiContent = unknown> extends CoreEventBase<BlockAddedCoreEventPayload<UiContent>> {
+  /**
+   * BlockAddedCoreEvent constructor function
+   * @param payload - BlockAdded event payload with tool name, block data, index and UI content
+   */
+  constructor(payload: BlockAddedCoreEventPayload<UiContent>) {
+    super(CoreEventType.BlockAdded, payload);
+  }
+}

packages/core/src/components/EventBus/core-events/BlockRemovedCoreEvent.ts

@@ -0,0 +1,29 @@
+import { CoreEventBase } from './CoreEventBase.js';
+import { CoreEventType } from './CoreEventType.js';
+
+/**
+ * Payload of BlockRemovedCoreEvent custom event
+ */
+export interface BlockRemovedCoreEventPayload {
+  /**
+   * Block Tool name
+   */
+  readonly tool: string;
+  /**
+   * Index of the removed block
+   */
+  readonly index: number;
+}
+
+/**
+ * Class for event that is being fired after the block is removed
+ */
+export class BlockRemovedCoreEvent extends CoreEventBase<BlockRemovedCoreEventPayload> {
+  /**
+   * BlockRemovedCoreEvent constructor function
+   * @param payload - BlockRemoved event payload with toola name and block index
+   */
+  constructor(payload: BlockRemovedCoreEventPayload) {
+    super(CoreEventType.BlockRemoved, payload);
+  }
+}

packages/core/src/components/EventBus/core-events/CoreEventBase.ts

@@ -0,0 +1,17 @@
+/**
+ * Represents a base class for core events.
+ * @template Payload - The type of the event payload.
+ */
+// eslint-disable-next-line n/no-unsupported-features/node-builtins
+export class CoreEventBase<Payload = unknown> extends CustomEvent<Payload> {
+  /**
+   * CoreEventBase constructor function
+   * @param name - type of the core event
+   * @param payload - payload of the core event, can contain any data
+   */
+  constructor(name: string, payload: Payload) {
+    super(`core:${name}`, {
+      detail: payload,
+    });
+  }
+}

packages/core/src/components/EventBus/core-events/CoreEventType.ts

@@ -0,0 +1,17 @@
+/**
+ * Enumeration of core events
+ */
+export enum CoreEventType {
+  /**
+   * Event is fired when a block is added to the Editor
+   */
+  BlockAdded = 'block:added',
+  /**
+   * Event is fired when a block is removed from the Editor
+   */
+  BlockRemoved = 'block:removed',
+  /**
+   * Event is fired when a tool is loaded
+   */
+  ToolLoaded = 'tool:loaded'
+}

packages/core/src/components/EventBus/core-events/ToolLoadedCoreEvent.ts

@@ -0,0 +1,28 @@
+import type { ToolFacadeClass } from '../../../tools/facades/index.js';
+import { CoreEventBase } from './CoreEventBase.js';
+import { CoreEventType } from './CoreEventType.js';
+
+/**
+ * Payload of ToolLoadedCoreEvent custom event
+ * Contains laoded tool facade instance
+ * @todo replace facade object with API wrapper
+ */
+export interface ToolLoadedCoreEventPayload {
+  /**
+   * Loaded tool facade instance
+   */
+  readonly tool: ToolFacadeClass;
+}
+
+/**
+ * Class for event that is being fired after the tool is loaded
+ */
+export class ToolLoadedCoreEvent extends CoreEventBase<ToolLoadedCoreEventPayload> {
+  /**
+   * ToolLoadedCoreEvent constructor function
+   * @param payload - ToolLoaded event payload with loaded tool facade instance
+   */
+  constructor(payload: ToolLoadedCoreEventPayload) {
+    super(CoreEventType.ToolLoaded, payload);
+  }
+}

packages/core/src/components/EventBus/core-events/index.ts

@@ -0,0 +1,4 @@
+export * from './BlockAddedCoreEvent.js';
+export * from './BlockRemovedCoreEvent.js';
+export * from './ToolLoadedCoreEvent.js';
+export * from './CoreEventType.js';

packages/core/src/components/EventBus/index.ts

@@ -0,0 +1,43 @@
+import 'reflect-metadata';
+import { Service } from 'typedi';
+
+export type Event<Channel extends string = string, Name extends string = string> = `${Channel}:${Name}`;
+
+export type CoreEvent<Name extends string = string> = Event<'core', Name>;
+
+/**
+ * Extension for the EventTarget interface to allow for custom events.
+ */
+declare global {
+  /**
+   * EventTarget interface extension
+   */
+  interface EventTarget {
+    /**
+     * Adds an event listener for the specified event type
+     * @param type - a string representing the event type to listen for
+     * @param callback - the function to call when the event is triggered
+     * @param options - an options object that specifies characteristics about the event listener
+     */
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    addEventListener(type: Event, callback: ((event: CustomEvent) => void) | null, options?: AddEventListenerOptions | boolean): void;
+    /**
+     * Removes an event listener for the specified event type
+     * @param type - a string representing the event type to stop listening for
+     * @param callback - the event callback to remove
+     * @param options - an options object that specifies characteristics about the event listener
+     */
+    // eslint-disable-next-line n/no-unsupported-features/node-builtins
+    removeEventListener(type: Event, callback: ((event: CustomEvent) => void) | null, options?: EventListenerOptions | boolean): void;
+  }
+}
+
+/**
+ * EventBus class to handle events between components
+ * Extends native EventTarget class
+ */
+@Service()
+export class EventBus extends EventTarget {}
+
+export * from './core-events/index.js';
+export * from './ui-events/index.js';

packages/core/src/components/EventBus/ui-events/UIEventBase.ts

@@ -0,0 +1,17 @@
+/**
+ * Represents a base class for UI events.
+ * @template Payload - The type of the event payload.
+ */
+// eslint-disable-next-line n/no-unsupported-features/node-builtins
+export class UIEventBase<Payload = unknown> extends CustomEvent<Payload> {
+  /**
+   * UIEventBase constructor function
+   * @param name - type of the core event
+   * @param payload - payload of the core event, can contain any data
+   */
+  constructor(name: string, payload: Payload) {
+    super(`ui:${name}`, {
+      detail: payload,
+    });
+  }
+}

packages/core/src/components/EventBus/ui-events/index.ts

@@ -0,0 +1 @@
+export * from './UIEventBase.js';

packages/core/src/index.ts

@@ -10,7 +10,6 @@ import type { CoreConfig } from '@editorjs/sdk';
 import { BlocksManager } from './components/BlockManager.js';
 import { EditorUI } from './ui/Editor/index.js';
 import { ToolboxUI } from './ui/Toolbox/index.js';
-import { Toolbox } from './components/Toolbox.js';
 
 /**
  * If no holder is provided via config, the editor will be appended to the element with this id
@@ -98,7 +97,11 @@ export default class Core {
     this.#prepareUI();
 
     this.#iocContainer.get(BlocksManager);
-    this.#iocContainer.get(Toolbox);
+
+    /**
+     * @todo avait when isReady API is implemented
+     */
+    void this.#toolsManager.prepareTools();
 
     this.#model.initializeDocument({ blocks });
   }
@@ -108,11 +111,10 @@ export default class Core {
    */
   #prepareUI(): void {
     const editorUI = this.#iocContainer.get(EditorUI);
-    const toolboxUI = this.#iocContainer.get(ToolboxUI);
 
-    editorUI.render();
+    this.#iocContainer.get(ToolboxUI);
 
-    editorUI.addToolbox(toolboxUI.render());
+    editorUI.render();
   }
 
   /**