diff --git a/packages/core/src/Extension.ts b/packages/core/src/Extension.ts index 4f62537d..725f6ce0 100644 --- a/packages/core/src/Extension.ts +++ b/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 { 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 { addInputRules: () => [], addPasteRules: () => [], addProseMirrorPlugins: () => [], + onCreate: null, + onUpdate: null, + onSelection: null, + onTransaction: null, + onFocus: null, + onBlur: null, onDestroy: null, } diff --git a/packages/core/src/ExtensionManager.ts b/packages/core/src/ExtensionManager.ts index 1063a002..9c7cfbb4 100644 --- a/packages/core/src/ExtensionManager.ts +++ b/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)) } diff --git a/packages/core/src/Mark.ts b/packages/core/src/Mark.ts index a76a6398..3e017498 100644 --- a/packages/core/src/Mark.ts +++ b/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 extends Overwrite 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 { parseHTML: () => null, renderHTML: null, addAttributes: () => ({}), + onCreate: null, + onUpdate: null, + onSelection: null, + onTransaction: null, + onFocus: null, + onBlur: null, onDestroy: null, } diff --git a/packages/core/src/Node.ts b/packages/core/src/Node.ts index f1379d19..1869164f 100644 --- a/packages/core/src/Node.ts +++ b/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 extends Overwrite 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 { renderHTML: null, addAttributes: () => ({}), addNodeView: null, + onCreate: null, + onUpdate: null, + onSelection: null, + onTransaction: null, + onFocus: null, + onBlur: null, onDestroy: null, }