Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

docs/src/docPages/api/events.md

@@ -10,7 +10,7 @@ You can define your event listeners on a new editor instance right-away:
 
 ```js
 const editor = new Editor({
-  onInit() {
+  onCreate() {
     // The editor is ready.
   },
   onUpdate() {
@@ -28,6 +28,9 @@ const editor = new Editor({
   onBlur({ event }) {
     // The editor isn’t focused anymore.
   },
+  onDestroy() {
+    // The editor is destroyed.
+  },
 })
 ```
 
@@ -36,7 +39,7 @@ Or you can register your event listeners on a running editor instance:
 
 ### Bind event listeners
 ```js
-editor.on('init', () => {
+editor.on('create', () => {
   // The editor is ready.
 }
 
@@ -59,6 +62,10 @@ editor.on('focus', ({ event }) => {
 editor.on('blur', ({ event }) => {
   // The editor isn’t focused anymore.
 }
+
+editor.on('destroy', () => {
+  // The editor is destroyed.
+}
 ```
 
 ### Unbind event listeners

packages/core/src/Editor.ts

@@ -50,12 +50,13 @@ export class Editor extends EventEmitter {
     parseOptions: {},
     enableInputRules: true,
     enablePasteRules: true,
-    onInit: () => null,
+    onCreate: () => null,
     onUpdate: () => null,
     onSelection: () => null,
     onTransaction: () => null,
     onFocus: () => null,
     onBlur: () => null,
+    onDestroy: () => null,
   }
 
   constructor(options: Partial<EditorOptions> = {}) {
@@ -73,16 +74,17 @@ export class Editor extends EventEmitter {
     this.createSchema()
     this.createView()
     this.injectCSS()
-    this.on('init', this.options.onInit)
+    this.on('create', this.options.onCreate)
     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)
+    this.on('destroy', this.options.onDestroy)
 
     window.setTimeout(() => {
       this.commands.focus(this.options.autofocus)
-      this.emit('init')
+      this.emit('create')
     }, 0)
   }
 

packages/core/src/Extension.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state'
+import { Plugin, Transaction } from 'prosemirror-state'
 import { InputRule } from 'prosemirror-inputrules'
 import { Editor } from './Editor'
 import { GlobalAttributes } from './types'
@@ -63,6 +63,72 @@ export interface ExtensionConfig<Options = any, Commands = {}> {
     editor: Editor,
   }) => Plugin[],
 
+  /**
+   * The editor is ready.
+   */
+  onCreate?: ((this: {
+    options: Options,
+    editor: Editor,
+  }) => void) | null,
+
+  /**
+   * The content has changed.
+   */
+  onUpdate?: ((this: {
+    options: Options,
+    editor: Editor,
+  }) => void) | null,
+
+  /**
+   * The selection has changed.
+   */
+  onSelection?: ((this: {
+    options: Options,
+    editor: Editor,
+  }) => void) | null,
+
+  /**
+   * The editor state has changed.
+   */
+  onTransaction?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+    },
+    props: {
+      transaction: Transaction,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor is focused.
+   */
+  onFocus?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+    },
+    props: {
+      event: FocusEvent,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor isn’t focused anymore.
+   */
+  onBlur?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+    },
+    props: {
+      event: FocusEvent,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor is destroyed.
+   */
   onDestroy?: ((this: {
     options: Options,
     editor: Editor,
@@ -81,6 +147,12 @@ export class Extension<Options = any, Commands = any> {
     addInputRules: () => [],
     addPasteRules: () => [],
     addProseMirrorPlugins: () => [],
+    onCreate: null,
+    onUpdate: null,
+    onSelection: null,
+    onTransaction: null,
+    onFocus: null,
+    onBlur: null,
     onDestroy: null,
   }
 

packages/core/src/ExtensionManager.ts

@@ -34,6 +34,30 @@ export default class ExtensionManager {
 
       editor.registerCommands(commands)
 
+      if (typeof extension.config.onCreate === 'function') {
+        this.editor.on('create', extension.config.onCreate.bind(context))
+      }
+
+      if (typeof extension.config.onUpdate === 'function') {
+        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.onTransaction === 'function') {
+        this.editor.on('transaction', extension.config.onTransaction.bind(context))
+      }
+
+      if (typeof extension.config.onFocus === 'function') {
+        this.editor.on('focus', extension.config.onFocus.bind(context))
+      }
+
+      if (typeof extension.config.onBlur === 'function') {
+        this.editor.on('blur', extension.config.onBlur.bind(context))
+      }
+
       if (typeof extension.config.onDestroy === 'function') {
         this.editor.on('destroy', extension.config.onDestroy.bind(context))
       }

packages/core/src/Mark.ts

@@ -4,7 +4,7 @@ import {
   Mark as ProseMirrorMark,
   MarkType,
 } from 'prosemirror-model'
-import { Plugin } from 'prosemirror-state'
+import { Plugin, Transaction } from 'prosemirror-state'
 import { InputRule } from 'prosemirror-inputrules'
 import { ExtensionConfig } from './Extension'
 import { Attributes, Overwrite } from './types'
@@ -109,6 +109,78 @@ export interface MarkConfig<Options = any, Commands = {}> extends Overwrite<Exte
     type: MarkType,
   }) => Plugin[],
 
+  /**
+   * The editor is ready.
+   */
+  onCreate?: ((this: {
+    options: Options,
+    editor: Editor,
+    type: MarkType,
+  }) => void) | null,
+
+  /**
+   * The content has changed.
+   */
+  onUpdate?: ((this: {
+    options: Options,
+    editor: Editor,
+    type: MarkType,
+  }) => void) | null,
+
+  /**
+   * The selection has changed.
+   */
+  onSelection?: ((this: {
+    options: Options,
+    editor: Editor,
+    type: MarkType,
+  }) => void) | null,
+
+  /**
+   * The editor state has changed.
+   */
+  onTransaction?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: MarkType,
+    },
+    props: {
+      transaction: Transaction,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor is focused.
+   */
+  onFocus?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: MarkType,
+    },
+    props: {
+      event: FocusEvent,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor isn’t focused anymore.
+   */
+  onBlur?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: MarkType,
+    },
+    props: {
+      event: FocusEvent,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor is destroyed.
+   */
   onDestroy?: ((this: {
     options: Options,
     editor: Editor,
@@ -135,6 +207,12 @@ export class Mark<Options = any, Commands = {}> {
     parseHTML: () => null,
     renderHTML: null,
     addAttributes: () => ({}),
+    onCreate: null,
+    onUpdate: null,
+    onSelection: null,
+    onTransaction: null,
+    onFocus: null,
+    onBlur: null,
     onDestroy: null,
   }
 

packages/core/src/Node.ts

@@ -4,7 +4,7 @@ import {
   Node as ProseMirrorNode,
   NodeType,
 } from 'prosemirror-model'
-import { Plugin } from 'prosemirror-state'
+import { Plugin, Transaction } from 'prosemirror-state'
 import { InputRule } from 'prosemirror-inputrules'
 import { ExtensionConfig } from './Extension'
 import { Attributes, NodeViewRenderer, Overwrite } from './types'
@@ -153,6 +153,78 @@ export interface NodeConfig<Options = any, Commands = {}> extends Overwrite<Exte
     type: NodeType,
   }) => NodeViewRenderer) | null,
 
+  /**
+   * The editor is ready.
+   */
+  onCreate?: ((this: {
+    options: Options,
+    editor: Editor,
+    type: NodeType,
+  }) => void) | null,
+
+  /**
+   * The content has changed.
+   */
+  onUpdate?: ((this: {
+    options: Options,
+    editor: Editor,
+    type: NodeType,
+  }) => void) | null,
+
+  /**
+   * The selection has changed.
+   */
+  onSelection?: ((this: {
+    options: Options,
+    editor: Editor,
+    type: NodeType,
+  }) => void) | null,
+
+  /**
+   * The editor state has changed.
+   */
+  onTransaction?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: NodeType,
+    },
+    props: {
+      transaction: Transaction,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor is focused.
+   */
+  onFocus?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: NodeType,
+    },
+    props: {
+      event: FocusEvent,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor isn’t focused anymore.
+   */
+  onBlur?: ((
+    this: {
+      options: Options,
+      editor: Editor,
+      type: NodeType,
+    },
+    props: {
+      event: FocusEvent,
+    },
+  ) => void) | null,
+
+  /**
+   * The editor is destroyed.
+   */
   onDestroy?: ((this: {
     options: Options,
     editor: Editor,
@@ -187,6 +259,12 @@ export class Node<Options = any, Commands = {}> {
     renderHTML: null,
     addAttributes: () => ({}),
     addNodeView: null,
+    onCreate: null,
+    onUpdate: null,
+    onSelection: null,
+    onTransaction: null,
+    onFocus: null,
+    onBlur: null,
     onDestroy: null,
   }
 

packages/core/src/types.ts

@@ -25,12 +25,13 @@ export interface EditorOptions {
   parseOptions: ParseOptions,
   enableInputRules: boolean,
   enablePasteRules: boolean,
-  onInit: () => void,
+  onCreate: () => void,
   onUpdate: () => void,
   onSelection: () => void,
   onTransaction: (props: { transaction: Transaction }) => void,
   onFocus: (props: { event: FocusEvent }) => void,
   onBlur: (props: { event: FocusEvent }) => void,
+  onDestroy: () => void,
 }
 
 export type EditorContent = string | JSON | null