From b226f777545b9c93d44bb6eab07397b33cd9c5f3 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Tue, 22 Jun 2021 21:33:05 +0200 Subject: [PATCH] docs: update event page --- docs/src/docPages/api/events.md | 28 ++++++++++++++++++++++------ 1 file changed, 22 insertions(+), 6 deletions(-) diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index 6a2173e9..6e860d4c 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -3,9 +3,25 @@ ## toc ## Introduction -The editor fires a few different events that you can hook into. There are three ways to register event listeners: +The editor fires a few different events that you can hook into. Let’s have a look at all the available events first: -## Option 1: Configuration +## List of available events + +| Event | Description | +| --------------- | --------------------------------- | +| beforeCreate | Before the view is created. | +| create | The editor is ready. | +| update | The content has changed. | +| selectionUpdate | The selection has changed. | +| transaction | The editor state has changed. | +| focus | The editor is focused. | +| blur | The editor isn’t focused anymore. | +| destroy | The editor is being destroyed. | + +## Register event listeners +There are three ways to register event listeners. + +### Option 1: Configuration You can define your event listeners on a new editor instance right-away: ```js @@ -37,10 +53,10 @@ const editor = new Editor({ }) ``` -## Option 2: Binding +### Option 2: Binding Or you can register your event listeners on a running editor instance: -### Bind event listeners +#### Bind event listeners ```js editor.on('beforeCreate', ({ editor }) => { // Before the view is created. @@ -75,7 +91,7 @@ editor.on('destroy', () => { } ``` -### Unbind event listeners +#### Unbind event listeners If you need to unbind those event listeners at some point, you should register your event listeners with `.on()` and unbind them with `.off()` then. ```js @@ -90,7 +106,7 @@ editor.on('update', onUpdate) editor.off('update', onUpdate) ``` -## Option 3: Extensions +### Option 3: Extensions Moving your event listeners to custom extensions (or nodes, or marks) is also possible. Here’s how that would look like: ```js