Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into main

docs/src/docPages/api/commands.md

@@ -141,4 +141,4 @@ Have a look at all of the core commands listed below. They should give you a goo
 ## Add your own commands
 All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.
 
-Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell.
+Of course, you can [add your custom extensions](/guide/build-extensions) with custom commands aswell.

docs/src/docPages/api/editor.md

@@ -101,7 +101,7 @@ new Editor({
 | `null`    | Disables autofocus.                                    |
 
 ### Enable input rules
-By default, tiptap enables all [input rules](/guide/build-custom-extensions/#input-rules). With `enableInputRules` you can disable that.
+By default, tiptap enables all [input rules](/guide/build-extensions/#input-rules). With `enableInputRules` you can disable that.
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -115,7 +115,7 @@ new Editor({
 ```
 
 ### Enable paste rules
-By default, tiptap enables all [paste rules](/guide/build-custom-extensions/#paste-rules). With `enablePasteRules` you can disable that.
+By default, tiptap enables all [paste rules](/guide/build-extensions/#paste-rules). With `enablePasteRules` you can disable that.
 
 ```js
 import { Editor } from '@tiptap/core'

docs/src/docPages/api/extensions.md

@@ -41,7 +41,7 @@ const editor = new Editor({
   ],
 ```
 
-Learn [more about custom extensions in our guide](/guide/build-custom-extensions).
+Learn [more about custom extensions in our guide](/guide/build-extensions).
 
 ### ProseMirror plugins
 ProseMirror has a fantastic eco system with many amazing plugins. If you want to use one of them, you can register them with tiptap like that:

docs/src/docPages/examples/v-model.md

@@ -1,3 +0,0 @@
-# Use v-model
-
-<demo name="Examples/VModel" />

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:
 

docs/src/docPages/guide/getting-started/nuxtjs.md

@@ -22,7 +22,7 @@ npm init nuxt-app tiptap-example
 cd tiptap-example
 ```
 
-## 3. Install the dependencies
+## 2. Install the dependencies
 Okay, enough of the boring boilerplate work. Let’s finally install tiptap! For the following example you’ll need `@tiptap/core` (the actual editor) and the `@tiptap/vue-starter-kit` which has everything to get started quickly, for example a few default extensions and a basic Vue component.
 
 ```bash
@@ -35,7 +35,7 @@ yarn add @tiptap/core @tiptap/vue-starter-kit
 
 If you followed step 1 and 2, you can now start your project with `npm run serve` or `yarn serve`, and open [http://localhost:8080/](http://localhost:8080/) in your favorite browser. This might be different, if you’re working with an existing project.
 
-## 4. Create a new component
+## 3. Create a new component
 To actually start using tiptap, you’ll need to add a new component to your app. Let’s call it `Tiptap` and put the following example code in `src/components/Tiptap.vue`.
 
 This is the fastest way to get tiptap up and running with Vue. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
@@ -73,8 +73,8 @@ export default {
 </script>
 ```
 
-## 5. Add it to your app
-Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
+## 4. Add it to your app
+Now, let’s replace the content of `pages/index.vue` with the following example code to use our new `Tiptap` component in our app.
 
 ```html
 <template>
@@ -82,20 +82,11 @@ Now, let’s replace the content of `src/App.vue` with the following example cod
     <tiptap />
   </div>
 </template>
-
-<script>
-import Tiptap from './components/Tiptap.vue'
-
-export default {
-  name: 'App',
-  components: {
-    Tiptap
-  }
-}
-</script>
 ```
-::: warning Nuxt.js
-If you use Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.
-:::
 
 You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
+
+## 5. Use v-model (optional)
+You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:
+
+<demo name="Guide/GettingStarted/VModel" />

docs/src/docPages/guide/getting-started/vue-cli.md

@@ -89,7 +89,7 @@ export default {
 ```
 
 ## 5. Add it to your app
-Now, let’s replace the content of `pages/index.vue` with the following example code to use our new `Tiptap` component in our app.
+Now, let’s replace the content of `src/App.vue` with the following example code to use our new `Tiptap` component in our app.
 
 ```html
 <template>
@@ -97,6 +97,22 @@ Now, let’s replace the content of `pages/index.vue` with the following example
     <tiptap />
   </div>
 </template>
+
+<script>
+import Tiptap from './components/Tiptap.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Tiptap
+  }
+}
+</script>
 ```
 
 You should now see tiptap in your browser. You’ve successfully set up tiptap! Time to give yourself a pat on the back. Let’s start to configure your editor in the next step.
+
+## 6. Use v-model (optional)
+You’re probably used to bind your data with `v-model` in forms, that’s also possible with tiptap. Here is a working example component, that you can integrate in your project:
+
+<demo name="Guide/GettingStarted/VModel" />

docs/src/docPages/overview/upgrade-guide.md

@@ -78,7 +78,7 @@ const CustomExtension = Node.create({
 })
 ```
 
-Read more about [all the nifty details building custom extensions](/guide/build-custom-extensions) in our guide.
+Read more about [all the nifty details building custom extensions](/guide/build-extensions) in our guide.
 
 ### Renamed settings and methods
 [We renamed a lot of settings and methods](/api/editor). Hopefully you can migrate to the new API with search & replace. Here is a list of what changed:

docs/src/links.yaml

@@ -30,8 +30,6 @@
       link: /examples/book
     - title: For minimalists
       link: /examples/minimalist
-    # - title: Use with v-model
-    #   link: /examples/v-model
 
 - title: Guide
   items:
@@ -47,12 +45,12 @@
     - title: Create a toolbar
       link: /guide/create-a-toolbar
       draft: true
-    - title: Add custom styling
+    - title: Custom styling
       link: /guide/custom-styling
     - title: Store content
       link: /guide/store-content
-    - title: Build custom extensions
-      link: /guide/build-custom-extensions
+    - title: Build extensions
+      link: /guide/build-extensions
     - title: Define node views
       link: /guide/node-views
       draft: true

docs/src/main.js

@@ -11,7 +11,7 @@ export default function (Vue, { head }) {
   head.htmlAttrs = { 'data-theme': 'dark' }
 
   // fix docsearch
-  if (!window.process) {
+  if (typeof window === 'object' && !window.process) {
     window.process = {
       env: {
         NODE_ENV: 'production',