rename selection to selectionUpdate, add editor to event listener props

docs/src/docPages/api/events.md

@@ -47,10 +47,14 @@ editor.on('update', () => {
   // The content has changed.
 }
 
-editor.on('selection', () => {
+editor.on('selectionUpdate', () => {
   // The selection has changed.
 }
 
+editor.on('viewUpdate', () => {
+  // The view has changed.
+}
+
 editor.on('transaction', ({ transaction }) => {
   // The editor state has changed.
 }

packages/core/src/Editor.ts

@@ -55,7 +55,8 @@ export class Editor extends EventEmitter {
     enablePasteRules: true,
     onCreate: () => null,
     onUpdate: () => null,
-    onSelection: () => null,
+    onSelectionUpdate: () => null,
+    onViewUpdate: () => null,
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
@@ -72,7 +73,8 @@ export class Editor extends EventEmitter {
     this.injectCSS()
     this.on('create', this.options.onCreate)
     this.on('update', this.options.onUpdate)
-    this.on('selection', this.options.onSelection)
+    this.on('selectionUpdate', this.options.onSelectionUpdate)
+    this.on('viewUpdate', this.options.onViewUpdate)
     this.on('transaction', this.options.onTransaction)
     this.on('focus', this.options.onFocus)
     this.on('blur', this.options.onBlur)
@@ -80,7 +82,7 @@ export class Editor extends EventEmitter {
 
     window.setTimeout(() => {
       this.commands.focus(this.options.autofocus)
-      this.emit('create')
+      this.emit('create', { editor: this })
     }, 0)
   }
 
@@ -222,7 +224,9 @@ export class Editor extends EventEmitter {
       plugins: [
         new Plugin({
           view: () => ({
-            update: () => this.emit('viewUpdate'),
+            update: () => this.emit('viewUpdate', {
+              editor: this,
+            }),
           }),
         }),
         ...this.extensionManager.plugins,
@@ -314,28 +318,42 @@ export class Editor extends EventEmitter {
     const selectionHasChanged = !this.state.selection.eq(state.selection)
 
     this.view.updateState(state)
-    this.emit('transaction', { transaction })
+    this.emit('transaction', {
+      editor: this,
+      transaction,
+    })
 
     if (selectionHasChanged) {
-      this.emit('selection')
+      this.emit('selectionUpdate', {
+        editor: this,
+      })
     }
 
     const focus = transaction.getMeta('focus')
     const blur = transaction.getMeta('blur')
 
     if (focus) {
-      this.emit('focus', { event: focus.event })
+      this.emit('focus', {
+        editor: this,
+        event: focus.event,
+      })
     }
 
     if (blur) {
-      this.emit('blur', { event: blur.event })
+      this.emit('blur', {
+        editor: this,
+        event: blur.event,
+      })
     }
 
     if (!transaction.docChanged || transaction.getMeta('preventUpdate')) {
       return
     }
 
-    this.emit('update', { transaction })
+    this.emit('update', {
+      editor: this,
+      transaction,
+    })
   }
 
   /**

packages/core/src/Extension.ts

@@ -112,7 +112,15 @@ declare module '@tiptap/core' {
     /**
      * The selection has changed.
      */
-    onSelection?: ((this: {
+    onSelectionUpdate?: ((this: {
+      options: Options,
+      editor: Editor,
+    }) => void) | null,
+
+    /**
+     * The view has changed.
+     */
+     onViewUpdate?: ((this: {
       options: Options,
       editor: Editor,
     }) => void) | null,

packages/core/src/ExtensionManager.ts

@@ -40,8 +40,12 @@ export default class ExtensionManager {
         this.editor.on('update', extension.config.onUpdate.bind(context))
       }
 
-      if (typeof extension.config.onSelection === 'function') {
-        this.editor.on('selection', extension.config.onSelection.bind(context))
+      if (typeof extension.config.onSelectionUpdate === 'function') {
+        this.editor.on('selectionUpdate', extension.config.onSelectionUpdate.bind(context))
+      }
+
+      if (typeof extension.config.onViewUpdate === 'function') {
+        this.editor.on('viewUpdate', extension.config.onViewUpdate.bind(context))
       }
 
       if (typeof extension.config.onTransaction === 'function') {

packages/core/src/Mark.ts

@@ -129,7 +129,16 @@ declare module '@tiptap/core' {
     /**
      * The selection has changed.
      */
-    onSelection?: ((this: {
+     onSelectionUpdate?: ((this: {
+      options: Options,
+      editor: Editor,
+      type: MarkType,
+    }) => void) | null,
+
+    /**
+     * The view has changed.
+     */
+     onViewUpdate?: ((this: {
       options: Options,
       editor: Editor,
       type: MarkType,

packages/core/src/Node.ts

@@ -130,7 +130,16 @@ declare module '@tiptap/core' {
     /**
      * The selection has changed.
      */
-    onSelection?: ((this: {
+     onSelectionUpdate?: ((this: {
+      options: Options,
+      editor: Editor,
+      type: NodeType,
+    }) => void) | null,
+
+    /**
+     * The view has changed.
+     */
+     onViewUpdate?: ((this: {
       options: Options,
       editor: Editor,
       type: NodeType,

packages/core/src/types.ts

@@ -41,12 +41,13 @@ export interface EditorOptions {
   parseOptions: ParseOptions,
   enableInputRules: boolean,
   enablePasteRules: boolean,
-  onCreate: () => void,
-  onUpdate: () => void,
-  onSelection: () => void,
-  onTransaction: (props: { transaction: Transaction }) => void,
-  onFocus: (props: { event: FocusEvent }) => void,
-  onBlur: (props: { event: FocusEvent }) => void,
+  onCreate: (props: { editor: Editor }) => void,
+  onUpdate: (props: { editor: Editor }) => void,
+  onViewUpdate: (props: { editor: Editor }) => void,
+  onSelectionUpdate: (props: { editor: Editor }) => void,
+  onTransaction: (props: { editor: Editor, transaction: Transaction }) => void,
+  onFocus: (props: { editor: Editor, event: FocusEvent }) => void,
+  onBlur: (props: { editor: Editor, event: FocusEvent }) => void,
   onDestroy: () => void,
 }