Merge branch 'main' of github.com:ueberdosis/tiptap

docs/guide/custom-extensions.md

@@ -71,9 +71,11 @@ All settings can be configured through the extension anyway, but if you want to
 import Heading from '@tiptap/extension-heading'
 
 const CustomHeading = Heading.extend({
-  defaultOptions: {
-    ...Heading.options,
-    levels: [1, 2, 3],
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      levels: [1, 2, 3],
+    }
   },
 })
 ```

docs/guide/menus.md

@@ -35,7 +35,7 @@ Okay, you’ve got your menu. But how do you wire things up?
 You’ve got the editor running already and want to add your first button. You need a `<button>` HTML tag with a click handler. Depending on your setup, that can look like the following example:
 
 ```html
-<button onclick="editor.chain().toggleBold().focus().run()">
+<button onclick="editor.chain().focus().toggleBold().run()">
   Bold
 </button>
 ```
@@ -63,7 +63,7 @@ You have already seen the `focus()` command in the above example. When you click
 The editor provides an `isActive()` method to check if something is applied to the selected text already. In Vue.js you can toggle a CSS class with help of that function like that:
 
 ```html
-<button :class="{ 'is-active': editor.isActive('bold') }" @click="editor.chain().toggleBold().focus().run()">
+<button :class="{ 'is-active': editor.isActive('bold') }" @click="editor.chain().focus().toggleBold().run()">
   Bold
 </button>
 ```

docs/guide/typescript.md

@@ -26,8 +26,10 @@ export interface CustomExtensionOptions {
 }
 
 const CustomExtension = Extension.create<CustomExtensionOptions>({
-  defaultOptions: {
-    awesomeness: 100,
+  addOptions() {
+    return {
+      awesomeness: 100,
+    }
   },
 })
 ```

docs/overview/upgrade-guide.md

@@ -103,7 +103,7 @@ import { Node } from '@tiptap/core'
 
 const CustomExtension = Node.create({
   name: 'custom_extension',
-  defaultOptions: {
+  addOptions() {
     …
   },
   addAttributes() {