emit events for toolbox and inline toolbar

src/components/events/InlineToolbarClosed.ts

@@ -0,0 +1,13 @@
+/**
+ * Fired when inline toolbar closed
+ */
+export const InlineToolbarClosed = 'inline-toolbar-closed';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface InlineToolbarClosedPayload {
+  /**
+   * CustomEvent describing inline toolbar closed
+   */
+}

src/components/events/InlineToolbarOpened.ts

@@ -0,0 +1,13 @@
+/**
+ * Fired when inline toolbar opened
+ */
+export const InlineToolbarOpened = 'inline-toolbar-opened';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface InlineToolbarOpenedPayload {
+  /**
+   * CustomEvent describing inline toolbar opened
+   */
+}

src/components/events/ToolboxBlockAdded.ts

@@ -0,0 +1,16 @@
+import { BlockAPI } from '../../../types';
+
+/**
+ * Fired when toolbox block added
+ */
+export const ToolboxBlockAdded = 'toolbox-block-added';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface ToolboxBlockAddedPayload {
+  /**
+   * CustomEvent describing toolbox opened
+   */
+  block: BlockAPI
+}

src/components/events/ToolboxClosed.ts

@@ -0,0 +1,13 @@
+/**
+ * Fired when toolbox closed
+ */
+export const ToolboxClosed = 'toolbox-closed';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface ToolboxClosedPayload {
+  /**
+   * CustomEvent describing toolbox closed
+   */
+}

src/components/events/ToolboxOpened.ts

@@ -0,0 +1,13 @@
+/**
+ * Fired when toolbox opened
+ */
+export const ToolboxOpened = 'toolbox-opened';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface ToolboxOpenedPayload {
+  /**
+   * CustomEvent describing toolbox opened
+   */
+}

src/components/events/index.ts

@@ -3,6 +3,11 @@ import { BlockChanged, BlockChangedPayload } from './BlockChanged';
 import { BlockHovered, BlockHoveredPayload } from './BlockHovered';
 import { FakeCursorAboutToBeToggled, FakeCursorAboutToBeToggledPayload } from './FakeCursorAboutToBeToggled';
 import { FakeCursorHaveBeenSet, FakeCursorHaveBeenSetPayload } from './FakeCursorHaveBeenSet';
+import { InlineToolbarOpened, InlineToolbarOpenedPayload } from './InlineToolbarOpened';
+import { InlineToolbarClosed, InlineToolbarClosedPayload } from './InlineToolbarClosed';
+import { ToolboxOpened, ToolboxOpenedPayload } from './ToolboxOpened';
+import { ToolboxClosed, ToolboxClosedPayload } from './ToolboxClosed';
+import { ToolboxBlockAdded, ToolboxBlockAddedPayload } from './ToolboxBlockAdded';
 
 /**
  * Events fired by Editor Event Dispatcher
@@ -11,7 +16,12 @@ export {
   RedactorDomChanged,
   BlockChanged,
   FakeCursorAboutToBeToggled,
-  FakeCursorHaveBeenSet
+  FakeCursorHaveBeenSet,
+  InlineToolbarOpened,
+  InlineToolbarClosed,
+  ToolboxOpened,
+  ToolboxClosed,
+  ToolboxBlockAdded
 };
 
 /**
@@ -23,4 +33,9 @@ export interface EditorEventMap {
   [BlockChanged]: BlockChangedPayload;
   [FakeCursorAboutToBeToggled]: FakeCursorAboutToBeToggledPayload;
   [FakeCursorHaveBeenSet]: FakeCursorHaveBeenSetPayload;
+  [InlineToolbarOpened]: InlineToolbarOpenedPayload;
+  [InlineToolbarClosed]: InlineToolbarClosedPayload;
+  [ToolboxOpened]: ToolboxOpenedPayload;
+  [ToolboxClosed]: ToolboxClosedPayload;
+  [ToolboxBlockAdded]: ToolboxBlockAddedPayload;
 }

src/components/modules/toolbar/index.ts

@@ -6,9 +6,12 @@ import { I18nInternalNS } from '../../i18n/namespace-internal';
 import * as tooltip from '../../utils/tooltip';
 import { ModuleConfig } from '../../../types-internal/module-config';
 import Block from '../../block';
-import Toolbox, { ToolboxEvent } from '../../ui/toolbox';
+import Toolbox from '../../ui/toolbox';
 import { IconMenu, IconPlus } from '@codexteam/icons';
 import { BlockHovered } from '../../events/BlockHovered';
+import { ToolboxOpened } from '../../events/ToolboxOpened';
+import { ToolboxClosed } from '../../events/ToolboxClosed';
+import { ToolboxBlockAdded } from '../../events/ToolboxBlockAdded';
 
 /**
  * @todo Tab on non-empty block should open Block Settings of the hoveredBlock (not where caret is set)
@@ -447,15 +450,15 @@ export default class Toolbar extends Module<ToolbarNodes> {
       },
     });
 
-    this.toolboxInstance.on(ToolboxEvent.Opened, () => {
+    this.toolboxInstance.on(ToolboxOpened, () => {
       this.Editor.UI.nodes.wrapper.classList.add(this.CSS.openedToolboxHolderModifier);
     });
 
-    this.toolboxInstance.on(ToolboxEvent.Closed, () => {
+    this.toolboxInstance.on(ToolboxClosed, () => {
       this.Editor.UI.nodes.wrapper.classList.remove(this.CSS.openedToolboxHolderModifier);
     });
 
-    this.toolboxInstance.on(ToolboxEvent.BlockAdded, ({ block }) => {
+    this.toolboxInstance.on(ToolboxBlockAdded, ({ block }) => {
       const { BlockManager, Caret } = this.Editor;
       const newBlock = BlockManager.getBlockById(block.id);
 

src/components/modules/toolbar/inline.ts

@@ -12,6 +12,8 @@ import { ModuleConfig } from '../../../types-internal/module-config';
 import InlineTool from '../../tools/inline';
 import { CommonInternalSettings } from '../../tools/base';
 import { IconChevronDown } from '@codexteam/icons';
+import { InlineToolbarOpened } from '../../events/InlineToolbarOpened';
+import { InlineToolbarClosed } from '../../events/InlineToolbarClosed';
 
 /**
  * Inline Toolbar elements
@@ -182,6 +184,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
 
     this.reset();
     this.opened = false;
+    this.eventsDispatcher.emit(InlineToolbarClosed);
 
     this.flipper.deactivate();
     this.Editor.ConversionToolbar.close();
@@ -208,6 +211,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
 
     this.buttonsList = this.nodes.buttons.querySelectorAll(`.${this.CSS.inlineToolButton}`);
     this.opened = true;
+    this.eventsDispatcher.emit(InlineToolbarOpened);
 
     if (needToShowConversionToolbar && this.Editor.ConversionToolbar.hasTools()) {
       /**

src/components/ui/toolbox.ts

@@ -3,49 +3,20 @@ import { BlockToolAPI } from '../block';
 import Shortcuts from '../utils/shortcuts';
 import BlockTool from '../tools/block';
 import ToolsCollection from '../tools/collection';
-import { API, BlockToolData, ToolboxConfigEntry, PopoverItem, BlockAPI } from '../../../types';
+import { API, BlockToolData, ToolboxConfigEntry, PopoverItem } from '../../../types';
 import EventsDispatcher from '../utils/events';
 import Popover, { PopoverEvent } from '../utils/popover';
 import I18n from '../i18n';
 import { I18nInternalNS } from '../i18n/namespace-internal';
+import { ToolboxOpened } from '../events/ToolboxOpened';
+import { ToolboxClosed } from '../events/ToolboxClosed';
+import { EditorEventMap } from '../events';
+import { ToolboxBlockAdded } from '../events/ToolboxBlockAdded';
 
 /**
  * @todo the first Tab on the Block — focus Plus Button, the second — focus Block Tunes Toggler, the third — focus next Block
  */
 
-/**
- * Event that can be triggered by the Toolbox
- */
-export enum ToolboxEvent {
-  /**
-   * When the Toolbox is opened
-   */
-  Opened = 'toolbox-opened',
-
-  /**
-   * When the Toolbox is closed
-   */
-  Closed = 'toolbox-closed',
-
-  /**
-   * When the new Block added by Toolbox
-   */
-  BlockAdded = 'toolbox-block-added',
-}
-
-/**
- * Events fired by the Toolbox
- *
- * Event name -> payload
- */
-export interface ToolboxEventMap {
-  [ToolboxEvent.Opened]: undefined;
-  [ToolboxEvent.Closed]: undefined;
-  [ToolboxEvent.BlockAdded]: {
-    block: BlockAPI
-  };
-}
-
 /**
  * Available i18n dict keys that should be passed to the constructor
  */
@@ -56,9 +27,9 @@ type ToolboxTextLabelsKeys = 'filter' | 'nothingFound';
  * This UI element contains list of Block Tools available to be inserted
  * It appears after click on the Plus Button
  *
- * @implements {EventsDispatcher} with some events, see {@link ToolboxEvent}
+ * @implements {EventsDispatcher} with some events, see {@link EditorEventMap}
  */
-export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
+export default class Toolbox extends EventsDispatcher<EditorEventMap> {
   /**
    * Returns True if Toolbox is Empty and nothing to show
    *
@@ -199,7 +170,8 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
     this.popover?.show();
     this.opened = true;
-    this.emit(ToolboxEvent.Opened);
+    this.emit(ToolboxOpened);
+    this.api.events.emit(ToolboxOpened, undefined);
   }
 
   /**
@@ -208,7 +180,8 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
   public close(): void {
     this.popover?.hide();
     this.opened = false;
-    this.emit(ToolboxEvent.Closed);
+    this.emit(ToolboxClosed);
+    this.api.events.emit(ToolboxClosed, undefined);
   }
 
   /**
@@ -227,7 +200,8 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private onPopoverClose = (): void => {
     this.opened = false;
-    this.emit(ToolboxEvent.Closed);
+    this.emit(ToolboxClosed);
+    this.api.events.emit(ToolboxClosed, undefined);
   };
 
   /**
@@ -394,7 +368,10 @@ export default class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
     this.api.caret.setToBlock(index);
 
-    this.emit(ToolboxEvent.BlockAdded, {
+    this.emit(ToolboxBlockAdded, {
+      block: newBlock,
+    });
+    this.api.events.emit(ToolboxBlockAdded, {
       block: newBlock,
     });