refactoring(modules): Events module is util now (#1582)

* refactoring(modules): events module is util now

* Update changelog

* remove redundant line

* refactor

* Update editor-modules.d.ts

Co-authored-by: Peter Savchenko <specc.dev@gmail.com>

docs/CHANGELOG.md

@@ -15,6 +15,7 @@
 - `Fix` - Fix unexpected behavior on an empty link pasting [#1348](https://github.com/codex-team/editor.js/issues/1348).
 - `Fix` - Fix SanitizerConfig type definition [#1513](https://github.com/codex-team/editor.js/issues/1513)
 - `Refactoring` - The Listeners module now is a util.
+- `Refactoring` - The Events module now is a util.
 - `Fix` - Editor Config now immutable [#1552](https://github.com/codex-team/editor.js/issues/1552).
 - `Refactoring` - Shortcuts module is util now.
 - `Fix` - Fix bubbling on BlockManagers' listener [#1433](https://github.com/codex-team/editor.js/issues/1433).

src/components/__module.ts

@@ -2,6 +2,7 @@ import { EditorModules } from '../types-internal/editor-modules';
 import { EditorConfig } from '../../types';
 import { ModuleConfig } from '../types-internal/module-config';
 import Listeners from './utils/listeners';
+import EventsDispatcher from './utils/events';
 
 /**
  * The type <T> of the Module generic.
@@ -39,6 +40,11 @@ export default class Module<T extends ModuleNodes = {}> {
    */
   protected config: EditorConfig;
 
+  /**
+   * Editor event dispatcher class
+   */
+  protected eventsDispatcher: EventsDispatcher;
+
   /**
    * Util for bind/unbind DOM event listeners
    */
@@ -86,14 +92,17 @@ export default class Module<T extends ModuleNodes = {}> {
 
   /**
    * @class
+   *
    * @param {EditorConfig} config - Editor's config
+   * @param {EventsDispatcher} eventsDispatcher - Editor's event dispatcher
    */
-  constructor({ config }: ModuleConfig) {
+  constructor({ config, eventsDispatcher }: ModuleConfig) {
     if (new.target === Module) {
       throw new TypeError('Constructors for abstract class Module are not allowed.');
     }
 
     this.config = config;
+    this.eventsDispatcher = eventsDispatcher;
   }
 
   /**

src/components/core.ts

@@ -4,6 +4,7 @@ import { EditorConfig, SanitizerConfig } from '../../types';
 import { EditorModules } from '../types-internal/editor-modules';
 import I18n from './i18n';
 import { CriticalError } from './errors/critical';
+import EventsDispatcher from './utils/events';
 
 /**
  * @typedef {Core} Core - editor core class
@@ -53,6 +54,11 @@ export default class Core {
    */
   public isReady: Promise<void>;
 
+  /**
+   * Event Dispatcher util
+   */
+  private eventsDispatcher: EventsDispatcher = new EventsDispatcher();
+
   /**
    * @param {EditorConfig} config - user configuration
    *
@@ -338,6 +344,7 @@ export default class Core {
          */
         this.moduleInstances[Module.displayName] = new Module({
           config: this.configuration,
+          eventsDispatcher: this.eventsDispatcher,
         });
       } catch (e) {
         _.log(`Module ${Module.displayName} skipped because`, 'warn', e);

src/components/modules/api/events.ts

@@ -1,5 +1,5 @@
-import { Events } from '../../../../types/api';
 import Module from '../../__module';
+import { Events } from '../../../../types/api';
 
 /**
  * @class EventsAPI
@@ -26,7 +26,7 @@ export default class EventsAPI extends Module {
    * @param {Function} callback - event handler
    */
   public on(eventName, callback): void {
-    this.Editor.Events.on(eventName, callback);
+    this.eventsDispatcher.on(eventName, callback);
   }
 
   /**
@@ -36,7 +36,7 @@ export default class EventsAPI extends Module {
    * @param {object} data - event's data
    */
   public emit(eventName, data): void {
-    this.Editor.Events.emit(eventName, data);
+    this.eventsDispatcher.emit(eventName, data);
   }
 
   /**
@@ -46,6 +46,6 @@ export default class EventsAPI extends Module {
    * @param {Function} callback - event handler
    */
   public off(eventName, callback): void {
-    this.Editor.Events.off(eventName, callback);
+    this.eventsDispatcher.off(eventName, callback);
   }
 }

src/components/modules/toolbar/blockSettings.ts

@@ -147,7 +147,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     this.addDefaultSettings();
 
     /** Tell to subscribers that block settings is opened */
-    this.Editor.Events.emit(this.events.opened);
+    this.eventsDispatcher.emit(this.events.opened);
 
     this.flipper.activate(this.blockTunesButtons);
   }
@@ -183,7 +183,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     this.nodes.defaultSettings.innerHTML = '';
 
     /** Tell to subscribers that block settings is closed */
-    this.Editor.Events.emit(this.events.closed);
+    this.eventsDispatcher.emit(this.events.closed);
 
     /** Clear cached buttons */
     this.buttons = [];

src/components/modules/tools.ts

@@ -14,6 +14,8 @@ import BoldInlineTool from '../inline-tools/inline-tool-bold';
 import ItalicInlineTool from '../inline-tools/inline-tool-italic';
 import LinkInlineTool from '../inline-tools/inline-tool-link';
 import Stub from '../tools/stub';
+import { ModuleConfig } from '../../types-internal/module-config';
+import EventsDispatcher from '../utils/events';
 
 /**
  * @module Editor.js Tools Submodule
@@ -198,9 +200,13 @@ export default class Tools extends Module {
    * @class
    *
    * @param {EditorConfig} config - Editor's configuration
+   * @param {EventsDispatcher} eventsDispatcher - Editor's event dispatcher
    */
-  constructor({ config }) {
-    super({ config });
+  constructor({ config, eventsDispatcher }: ModuleConfig) {
+    super({
+      config,
+      eventsDispatcher,
+    });
 
     this.toolsClasses = {};
 

src/components/modules/tooltip.ts

@@ -5,7 +5,6 @@ import Module from '../__module';
  * Use external module CodeX Tooltip
  */
 import CodeXTooltips, { TooltipContent, TooltipOptions } from 'codex-tooltip';
-import { ModuleConfig } from '../../types-internal/module-config';
 
 /**
  * Tooltip
@@ -20,14 +19,6 @@ export default class Tooltip extends Module {
    */
   private lib: CodeXTooltips = new CodeXTooltips();
 
-  /**
-   * @class
-   * @param {EditorConfig} - Editor's config
-   */
-  constructor({ config }: ModuleConfig) {
-    super({ config });
-  }
-
   /**
    * Shows tooltip on element with passed HTML content
    *

src/components/utils/events.ts

@@ -1,19 +1,17 @@
-import Module from '../__module';
-
 /**
- * @module eventDispatcher
+ * @class EventDispatcher
  *
  * Has two important methods:
  *    - {Function} on - appends subscriber to the event. If event doesn't exist - creates new one
  *    - {Function} emit - fires all subscribers with data
- *    - {Function off - unsubsribes callback
+ *    - {Function off - unsubscribes callback
  *
  * @version 1.0.0
  *
  * @typedef {Events} Events
  * @property {object} subscribers - all subscribers grouped by event name
  */
-export default class Events extends Module {
+export default class EventsDispatcher {
   /**
    * Object with events` names as key and array of callback functions as value
    *

src/types-internal/editor-modules.d.ts

@@ -4,8 +4,6 @@ import Toolbar from '../components/modules/toolbar/index';
 import InlineToolbar from '../components/modules/toolbar/inline';
 import Toolbox from '../components/modules/toolbar/toolbox';
 import BlockSettings from '../components/modules/toolbar/blockSettings';
-import Events from '../components/modules/events';
-import Shortcuts from '../components/utils/shortcuts';
 import Paste from '../components/modules/paste';
 import Notifier from '../components/modules/notifier';
 import Tooltip from '../components/modules/tooltip';
@@ -48,8 +46,6 @@ export interface EditorModules {
   Toolbox: Toolbox;
   BlockSettings: BlockSettings;
   ConversionToolbar: ConversionToolbar;
-  Events: Events;
-  Shortcuts: Shortcuts;
   Paste: Paste;
   DragNDrop: DragNDrop;
   ModificationsObserver: ModificationsObserver;

src/types-internal/module-config.d.ts

@@ -1,8 +1,10 @@
-import {EditorConfig} from '../../types/index';
+import { EditorConfig } from '../../types/index';
+import EventsDispatcher from '../components/utils/events';
 
 /**
  * Describes object passed to Editor modules constructor
  */
 export interface ModuleConfig {
   config: EditorConfig;
+  eventsDispatcher: EventsDispatcher;
 }

types/index.d.ts

@@ -104,8 +104,6 @@ declare class EditorJS {
 
   public blocks: Blocks;
   public caret: Caret;
-  public events: Events;
-  public listeners: Listeners;
   public sanitizer: Sanitizer;
   public saver: Saver;
   public selection: Selection;