From 1ceb54bc198f273e4cec5726dd076f9bb2bdd90b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Mon, 30 Nov 2020 13:56:42 +0100 Subject: [PATCH 1/2] rename init to create --- docs/src/docPages/api/events.md | 11 +++++++++-- packages/core/src/Editor.ts | 8 +++++--- packages/core/src/types.ts | 3 ++- 3 files changed, 16 insertions(+), 6 deletions(-) diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index 0be726bc..db2a990d 100644 --- a/docs/src/docPages/api/events.md +++ b/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 diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts index 8731902a..8d464faf 100644 --- a/packages/core/src/Editor.ts +++ b/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 = {}) { @@ -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) } diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index c6db1b24..ff36dcdf 100644 --- a/packages/core/src/types.ts +++ b/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 From f6206b3df53e6fa525902d0324ed49322d6bb15e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Mon, 30 Nov 2020 14:12:36 +0100 Subject: [PATCH 2/2] add all events to extensions --- packages/core/src/Extension.ts | 74 ++++++++++++++++++++++++- packages/core/src/ExtensionManager.ts | 24 ++++++++ packages/core/src/Mark.ts | 80 ++++++++++++++++++++++++++- packages/core/src/Node.ts | 80 ++++++++++++++++++++++++++- 4 files changed, 255 insertions(+), 3 deletions(-) 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, }