feat: #1898 Made the EventEmitter generic to improve the types of the tiptap events (#1959)

.gitignore

@@ -23,3 +23,5 @@ yarn-error.log*
 
 tests/cypress/videos
 /tests/cypress/screenshots
+# Ignore intellij project files
+.idea

packages/core/src/Editor.ts

@@ -23,7 +23,7 @@ import {
   CanCommands,
   ChainedCommands,
   SingleCommands,
-  TextSerializer,
+  TextSerializer, EditorEvents,
 } from './types'
 import * as extensions from './extensions'
 import style from './style'
@@ -34,7 +34,7 @@ export interface HTMLElement {
   editor?: Editor
 }
 
-export class Editor extends EventEmitter {
+export class Editor extends EventEmitter<EditorEvents> {
 
   private commandManager!: CommandManager
 
@@ -195,7 +195,7 @@ export class Editor extends EventEmitter {
   /**
    * Unregister a ProseMirror plugin.
    *
-   * @param name The plugins name
+   * @param nameOrPluginKey The plugins name
    */
   public unregisterPlugin(nameOrPluginKey: string | PluginKey): void {
     if (this.isDestroyed) {

packages/core/src/EventEmitter.ts

@@ -1,8 +1,12 @@
-export default class EventEmitter {
+type StringKeyOf<T> = Extract<keyof T, string>;
+type CallbackType<T extends Record<string, any>, EVENT extends StringKeyOf<T>> = T[EVENT] extends any[] ? T[EVENT] : [T[EVENT]];
+type CallbackFunction<T extends Record<string, any>, EVENT extends StringKeyOf<T>> = (...props: CallbackType<T, EVENT>) => any
+
+export default class EventEmitter<T extends Record<string, any>> {
 
   private callbacks: { [key: string]: Function[] } = {}
 
-  public on(event: string, fn: Function): this {
+  public on<EVENT extends StringKeyOf<T>>(event: EVENT, fn: CallbackFunction<T, EVENT>): this {
     if (!this.callbacks[event]) {
       this.callbacks[event] = []
     }
@@ -12,7 +16,7 @@ export default class EventEmitter {
     return this
   }
 
-  protected emit(event: string, ...args: any): this {
+  protected emit<EVENT extends StringKeyOf<T>>(event: EVENT, ...args: CallbackType<T, EVENT>): this {
     const callbacks = this.callbacks[event]
 
     if (callbacks) {
@@ -22,7 +26,7 @@ export default class EventEmitter {
     return this
   }
 
-  public off(event: string, fn?: Function): this {
+  public off<EVENT extends StringKeyOf<T>>(event: EVENT, fn?: CallbackFunction<T, EVENT>): this {
     const callbacks = this.callbacks[event]
 
     if (callbacks) {

packages/core/src/types.ts

@@ -39,6 +39,17 @@ export type MaybeReturnType<T> = T extends (...args: any) => any
   ? ReturnType<T>
   : T
 
+export interface EditorEvents {
+  beforeCreate: { editor: Editor }
+  create: { editor: Editor }
+  update: { editor: Editor, transaction: Transaction }
+  selectionUpdate: { editor: Editor, transaction: Transaction }
+  transaction: { editor: Editor, transaction: Transaction }
+  focus: { editor: Editor, event: FocusEvent, transaction: Transaction }
+  blur: { editor: Editor, event: FocusEvent, transaction: Transaction }
+  destroy: void
+}
+
 export interface EditorOptions {
   element: Element,
   content: Content,
@@ -51,14 +62,14 @@ export interface EditorOptions {
   enableInputRules: boolean,
   enablePasteRules: boolean,
   enableCoreExtensions: boolean,
-  onBeforeCreate: (props: { editor: Editor }) => void,
-  onCreate: (props: { editor: Editor }) => void,
-  onUpdate: (props: { editor: Editor, transaction: Transaction }) => void,
-  onSelectionUpdate: (props: { editor: Editor, transaction: Transaction }) => void,
-  onTransaction: (props: { editor: Editor, transaction: Transaction }) => void,
-  onFocus: (props: { editor: Editor, event: FocusEvent, transaction: Transaction }) => void,
-  onBlur: (props: { editor: Editor, event: FocusEvent, transaction: Transaction }) => void,
-  onDestroy: () => void,
+  onBeforeCreate: (props: EditorEvents['beforeCreate']) => void,
+  onCreate: (props: EditorEvents['create']) => void,
+  onUpdate: (props: EditorEvents['update']) => void,
+  onSelectionUpdate: (props: EditorEvents['selectionUpdate']) => void,
+  onTransaction: (props: EditorEvents['transaction']) => void,
+  onFocus: (props: EditorEvents['focus']) => void,
+  onBlur: (props: EditorEvents['blur']) => void,
+  onDestroy: (props: EditorEvents['destroy']) => void,
 }
 
 export type HTMLContent = string