add onSelection event

docs/src/docPages/api/events.md

@@ -16,6 +16,9 @@ const editor = new Editor({
   onUpdate() {
     // The content has changed.
   },
+  onSelection() {
+    // The selection has changed.
+  },
   onTransaction({ transaction }) {
     // The editor state has changed.
   },
@@ -41,15 +44,19 @@ editor.on('update', () => {
   // The content has changed.
 }
 
+editor.on('selection', () => {
+  // The selection has changed.
+}
+
 editor.on('transaction', ({ transaction }) => {
   // The editor state has changed.
 }
 
-editor.on('focus', () => {
+editor.on('focus', ({ event }) => {
   // The editor is focused.
 }
 
-editor.on('blur', () => {
+editor.on('blur', ({ event }) => {
   // The editor isn’t focused anymore.
 }
 ```

packages/core/src/Editor.ts

@@ -18,7 +18,6 @@ import {
   EditorOptions,
   EditorContent,
   CommandSpec,
-  EditorSelection,
 } from './types'
 import * as extensions from './extensions'
 import style from './style'
@@ -44,8 +43,6 @@ export class Editor extends EventEmitter {
 
   public view!: EditorView
 
-  public selection: EditorSelection = { from: 0, to: 0 }
-
   public isFocused = false
 
   public options: EditorOptions = {
@@ -61,6 +58,7 @@ export class Editor extends EventEmitter {
     enablePasteRules: true,
     onInit: () => null,
     onUpdate: () => null,
+    onSelection: () => null,
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
@@ -83,6 +81,7 @@ export class Editor extends EventEmitter {
     this.injectCSS()
     this.on('init', this.options.onInit)
     this.on('update', this.options.onUpdate)
+    this.on('selection', this.options.onSelection)
     this.on('transaction', this.options.onTransaction)
     this.on('focus', this.options.onFocus)
     this.on('blur', this.options.onBlur)
@@ -295,14 +294,6 @@ export class Editor extends EventEmitter {
     return this.createDocument('')
   }
 
-  /**
-   * Store the current selection.
-   */
-  private storeSelection() {
-    const { from, to } = this.state.selection
-    this.selection = { from, to }
-  }
-
   /**
    * The callback over which to send transactions (state updates) produced by the view.
    *
@@ -310,11 +301,15 @@ export class Editor extends EventEmitter {
    */
   private dispatchTransaction(transaction: Transaction) {
     const state = this.state.apply(transaction)
+    const selectionHasChanged = !this.state.selection.eq(state.selection)
 
     this.view.updateState(state)
-    this.storeSelection()
     this.emit('transaction', { transaction })
 
+    if (selectionHasChanged) {
+      this.emit('selection')
+    }
+
     const focus = transaction.getMeta('focus')
     const blur = transaction.getMeta('blur')
 

packages/core/src/commands/focus.ts

@@ -42,7 +42,7 @@ export const focus = (position: FocusPosition = null): Command => ({
     return true
   }
 
-  const { from, to } = resolveSelection(editor.state, position) || editor.selection
+  const { from, to } = resolveSelection(editor.state, position) || editor.state.selection
   const { doc } = tr
   const resolvedFrom = minMax(from, 0, doc.content.size)
   const resolvedEnd = minMax(to, 0, doc.content.size)

packages/core/src/types.ts

@@ -27,16 +27,12 @@ export interface EditorOptions {
   enablePasteRules: boolean,
   onInit: () => void,
   onUpdate: () => void,
+  onSelection: () => void,
   onTransaction: (props: { transaction: Transaction }) => void,
   onFocus: (props: { event: FocusEvent }) => void,
   onBlur: (props: { event: FocusEvent }) => void,
 }
 
-export type EditorSelection = {
-  from: number,
-  to: number,
-}
-
 export type EditorContent = string | JSON | null
 
 export type Command = (props: {