docs: update content

docs/src/docPages/guide/build-extensions.md

@@ -1,4 +1,4 @@
-# Build custom extensions
+# Build extensions
 
 ## toc
 
@@ -354,6 +354,37 @@ const CustomStrike = Strike.extend({
 })
 ```
 
+### Events
+You can even move your [event listeners](/api/events) to a separate extension. Here is an example with listeners for all events:
+
+```js
+import { Extension } from '@tiptap/core'
+
+const CustomExtension = Extension.create({
+  onCreate() {
+    // The editor is ready.
+  },
+  onUpdate() {
+    // The content has changed.
+  },
+  onSelection() {
+    // The selection has changed.
+  },
+  onTransaction({ transaction }) {
+    // The editor state has changed.
+  },
+  onFocus({ event }) {
+    // The editor is focused.
+  },
+  onBlur({ event }) {
+    // The editor isn’t focused anymore.
+  },
+  onDestroy() {
+    // The editor is being destroyed.
+  },
+})
+```
+
 ### Node views (Advanced)
 For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated link preview, you need to learn about node views.
 

docs/src/docPages/guide/custom-styling.md

@@ -28,7 +28,8 @@ p {
 ## Option 2: Add custom classes
 Most extensions have a `class` option, which you can use to add a custom CSS class to the HTML tag.
 
-Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` configuration. You can use that to add a custom class (or any other attribute):
+### Extensions
+Most extensions allow you to add attributes to the rendered HTML through the `HTMLAttributes` option. You can use that to add a custom class (or any other attribute). That’s also very helpful, when you work with [Tailwind CSS](https://tailwindcss.com/).
 
 ```js
 new Editor({
@@ -58,6 +59,19 @@ The rendered HTML will look like that:
 
 If there are already classes defined by the extensions, your classes will be added.
 
+### Editor
+You can even pass classes to the element which contains the editor like that:
+
+```js
+new Editor({
+  editorProps: {
+    attributes: {
+      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
+    }
+  },
+})
+```
+
 ## Option 3: Customize the HTML
 You can even customize the markup for every extension. This will make a custom bold extension that doesn’t render a `<strong>` tag, but a `<b>` tag: