remove gridsome

docs/api/events.md

@@ -0,0 +1,145 @@
+---
+tableOfContents: true
+---
+
+# Events
+
+## toc
+
+## Introduction
+The editor fires a few different events that you can hook into. Let’s have a look at all the available events first:
+
+## 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
+const editor = new Editor({
+  onBeforeCreate({ editor }) {
+    // Before the view is created.
+  },
+  onCreate({ editor }) {
+    // The editor is ready.
+  },
+  onUpdate({ editor }) {
+    // The content has changed.
+  },
+  onSelectionUpdate({ editor }) {
+    // The selection has changed.
+  },
+  onTransaction({ editor, transaction }) {
+    // The editor state has changed.
+  },
+  onFocus({ editor, event }) {
+    // The editor is focused.
+  },
+  onBlur({ editor, event }) {
+    // The editor isn’t focused anymore.
+  },
+  onDestroy() {
+    // The editor is being destroyed.
+  },
+})
+```
+
+### Option 2: Binding
+Or you can register your event listeners on a running editor instance:
+
+#### Bind event listeners
+```js
+editor.on('beforeCreate', ({ editor }) => {
+  // Before the view is created.
+}
+
+editor.on('create', ({ editor }) => {
+  // The editor is ready.
+}
+
+editor.on('update', ({ editor }) => {
+  // The content has changed.
+}
+
+editor.on('selectionUpdate', ({ editor }) => {
+  // The selection has changed.
+}
+
+editor.on('transaction', ({ editor, transaction }) => {
+  // The editor state has changed.
+}
+
+editor.on('focus', ({ editor, event }) => {
+  // The editor is focused.
+}
+
+editor.on('blur', ({ editor, event }) => {
+  // The editor isn’t focused anymore.
+}
+
+editor.on('destroy', () => {
+  // The editor is being destroyed.
+}
+```
+
+#### 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
+const onUpdate = () => {
+  // The content has changed.
+}
+
+// Bind …
+editor.on('update', onUpdate)
+
+// … and unbind.
+editor.off('update', onUpdate)
+```
+
+### 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
+import { Extension } from '@tiptap/core'
+
+const CustomExtension = Extension.create({
+  onBeforeCreate({ editor }) {
+    // Before the view is created.
+  },
+  onCreate({ editor }) {
+    // The editor is ready.
+  },
+  onUpdate({ editor }) {
+    // The content has changed.
+  },
+  onSelectionUpdate({ editor }) {
+    // The selection has changed.
+  },
+  onTransaction({ editor, transaction }) {
+    // The editor state has changed.
+  },
+  onFocus({ editor, event }) {
+    // The editor is focused.
+  },
+  onBlur({ editor, event }) {
+    // The editor isn’t focused anymore.
+  },
+  onDestroy() {
+    // The editor is being destroyed.
+  },
+})
+```