From 48b54d1186abe272583d72207ab07586daa5422e Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 29 Jan 2021 21:52:34 +0100
Subject: [PATCH 1/6] docs: update the installation page

---
 docs/src/docPages/overview/installation.md | 92 ++++++----------------
 1 file changed, 26 insertions(+), 66 deletions(-)

diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md
index a6d24ad9..93868f52 100644
--- a/docs/src/docPages/overview/installation.md
+++ b/docs/src/docPages/overview/installation.md
@@ -3,10 +3,20 @@
 ## toc
 
 ## Introduction
-You’re free to use tiptap with the framework of your choice. Depending on what you want to do, there are a few different ways to install tiptap in your project. Choose the way that fits your workflow.
+Depending on how your development setup looks like, there are a few different ways to install tiptap. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use it without any front-end framework. Choose the way that fits your workflow and start building cool things!
 
-## Option 1: Vanilla JavaScript
-Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect tiptap with other frameworks not mentioned here.
+## Integration guides
+* [Vue.js](/guide/getting-started/vue-cli)
+* [Nuxt.js](/guide/getting-started/nuxtjs)
+* [React](/guide/getting-started/react) (Draft)
+* [Svelte](/guide/getting-started/svelte) (Draft)
+* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
+* [Livewire](/guide/getting-started/livewire) (Draft)
+
+Don’t see your framework here? That shouldn’t stop you from installing tiptap. Just use the Vanilla JavaScript version, that should work fine, too.
+
+## Vanilla JavaScript
+Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can use that version to connect tiptap with other frameworks not mentioned here, too.
 
 ```bash
 # with npm
@@ -16,7 +26,7 @@ npm install @tiptap/core @tiptap/starter-kit
 yarn add @tiptap/core @tiptap/starter-kit
 ```
 
-Great, that should be enough to start. Here is the most essential code you need to get a running instance of tiptap:
+Great, that’s all you need for now. Here is the boilerplate code to start your first tiptap instance:
 
 ```js
 import { Editor } from '@tiptap/core'
@@ -29,45 +39,8 @@ new Editor({
 })
 ```
 
-## Option 2: Vue.js
-To use tiptap with Vue.js (and tools that are based on Vue.js) install tiptap together with the Vue.js adapter in your project. We even prepared a Vue.js starter kit, which gives you a good headstart.
-
-```bash
-# with npm
-npm install @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
-
-# with Yarn
-yarn add @tiptap/core @tiptap/vue @tiptap/vue-starter-kit
-```
-
-Create a new component and add the following content to get a basic version of tiptap:
-
-<demo name="Overview/Installation" />
-
-### 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.
-
-[Read more](https://nuxtjs.org/api/components-client-only)
-
-## Option 3: CodeSandbox
-CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
-
-<iframe
-  src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
-  style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
-  title="tiptap-issue-template"
-  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-></iframe>
-
-It’s also amazing for bug reports. Try to recreate a bug there and share it with us before when you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug quickly, and fix them faster.
-
-
-## Option 4: CDN (Draft)
-To pull in tiptap for quick demos or just giving it a spin, grab the latest build via CDN. We use two different provides:
-
-### Skypack (ES Modules)
-Skypack enables you to use ES modules, which should be supported in all modern browsers. The packages are smaller, that’s great, too. So here is how to use it:
+## CDN
+For testing purposes or demos, use our [Skypack](https://www.skypack.dev/) CDN builds. Here are the few lines of code you need to get started:
 
 ```html
 <!doctype html>
@@ -89,27 +62,14 @@ Skypack enables you to use ES modules, which should be supported in all modern b
 </html>
 ```
 
-### ~~Unpkg (UMD, deprecated)~~
-We also have an UMD build on unpkg. Those UMD builds are larger, but should work even in older browsers. As tiptap doesn’t work in older browsers anyway, we tend to remove those builds. What do you think? Anyway, here‘s how you can use it:
+## CodeSandbox
+CodeSandbox is an online coding environment. It’s great to fiddle around without setting up a local project and to share your code with others.
 
-```html
-<!doctype html>
-<head>
-  <meta charset="utf-8">
-  <script src="https://unpkg.com/@tiptap/core@latest"></script>
-  <script src="https://unpkg.com/@tiptap/starter-kit@latest"></script>
-</head>
-<body>
-  <div class="element"></div>
-  <script>
-    const { Editor } = window['@tiptap/core']
-    const { defaultExtensions } = window['@tiptap/starter-kit']
-    const editor = new Editor({
-      element: document.querySelector('.element'),
-      extensions: defaultExtensions(),
-      content: '<p>Your content.</p>',
-    })
-  </script>
-</body>
-</html>
-```
+<iframe
+  src="https://codesandbox.io/embed/tiptap-issue-template-b83rr?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fcomponents%2FTiptap.vue&theme=dark"
+  style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
+  title="tiptap-issue-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
+It’s also amazing for bug reports. Try to recreate a bug there and share it with us before you [file an issue on GitHub](https://github.com/ueberdosis/tiptap-next/issues/new/choose). That helps us to reproduce the bug easily, and release a fix faster.

From 435e9a6049c1c2983680605ed8914d2a4ff57f4a Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Fri, 29 Jan 2021 22:05:47 +0100
Subject: [PATCH 2/6] docs: update the integration guides

---
 .../guide/getting-started/alpinejs.md         |  3 ++
 .../guide/getting-started/intertiajs.md       |  5 ++++
 .../guide/getting-started/livewire.md         |  3 ++
 .../docPages/guide/getting-started/nextjs.md  |  3 ++
 .../docPages/guide/getting-started/nuxtjs.md  |  2 +-
 .../docPages/guide/getting-started/react.md   |  3 ++
 .../docPages/guide/getting-started/svelte.md  |  8 +++++-
 .../getting-started/{vue-cli.md => vuejs.md}  | 28 +++++--------------
 docs/src/links.yaml                           |  6 ++--
 9 files changed, 35 insertions(+), 26 deletions(-)
 rename docs/src/docPages/guide/getting-started/{vue-cli.md => vuejs.md} (79%)

diff --git a/docs/src/docPages/guide/getting-started/alpinejs.md b/docs/src/docPages/guide/getting-started/alpinejs.md
index 5a73adf2..74de0b44 100644
--- a/docs/src/docPages/guide/getting-started/alpinejs.md
+++ b/docs/src/docPages/guide/getting-started/alpinejs.md
@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Alpine.js](https://github.com/alpinejs/alpine) project.
+
 TODO
 
 https://codesandbox.io/s/alpine-tiptap-2ro5e?file=/index.html:0-1419
diff --git a/docs/src/docPages/guide/getting-started/intertiajs.md b/docs/src/docPages/guide/getting-started/intertiajs.md
index 1b1a7cd7..d4f05a50 100644
--- a/docs/src/docPages/guide/getting-started/intertiajs.md
+++ b/docs/src/docPages/guide/getting-started/intertiajs.md
@@ -2,6 +2,11 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Inertia.js](https://inertiajs.com/) project.
+
+## toc
+
 TODO
 
 ## Introduction
diff --git a/docs/src/docPages/guide/getting-started/livewire.md b/docs/src/docPages/guide/getting-started/livewire.md
index 4085a9a8..bba3daef 100644
--- a/docs/src/docPages/guide/getting-started/livewire.md
+++ b/docs/src/docPages/guide/getting-started/livewire.md
@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Livewire](https://laravel-livewire.com/) project.
+
 TODO
 
 editor.blade.php
diff --git a/docs/src/docPages/guide/getting-started/nextjs.md b/docs/src/docPages/guide/getting-started/nextjs.md
index db54da0d..10ad2d60 100644
--- a/docs/src/docPages/guide/getting-started/nextjs.md
+++ b/docs/src/docPages/guide/getting-started/nextjs.md
@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [Next.js](https://nextjs.org/) project.
+
 TODO
 
 <demo name="React" mode="react" />
diff --git a/docs/src/docPages/guide/getting-started/nuxtjs.md b/docs/src/docPages/guide/getting-started/nuxtjs.md
index 2d31d488..6893d922 100644
--- a/docs/src/docPages/guide/getting-started/nuxtjs.md
+++ b/docs/src/docPages/guide/getting-started/nuxtjs.md
@@ -3,7 +3,7 @@
 ## toc
 
 ## Introduction
-The following guide describes how to integrate tiptap with your Nuxt.js project.
+The following guide describes how to integrate tiptap with your [Nuxt.js](https://nuxtjs.org/) project.
 
 ## Requirements
 * [Node](https://nodejs.org/en/download/) installed on your machine
diff --git a/docs/src/docPages/guide/getting-started/react.md b/docs/src/docPages/guide/getting-started/react.md
index 26366565..b7d6acfc 100644
--- a/docs/src/docPages/guide/getting-started/react.md
+++ b/docs/src/docPages/guide/getting-started/react.md
@@ -2,6 +2,9 @@
 
 ## toc
 
+## Introduction
+The following guide describes how to integrate tiptap with your [React](https://reactjs.org/) project.
+
 TODO
 
 <demo name="React" mode="react" />
diff --git a/docs/src/docPages/guide/getting-started/svelte.md b/docs/src/docPages/guide/getting-started/svelte.md
index 3e991fd7..d7dcafcc 100644
--- a/docs/src/docPages/guide/getting-started/svelte.md
+++ b/docs/src/docPages/guide/getting-started/svelte.md
@@ -1,5 +1,10 @@
 # Svelte
 
+## toc
+
+## Introduction
+The following guide describes how to integrate tiptap with your Svelte project.
+
 TODO
 
 Svelte REPL: https://svelte.dev/repl/c839da77db2444e5b23a752266613639?version=3.31.2
@@ -15,7 +20,7 @@ App.svelte
 
 Editor.svelte
 ```html
-<script>
+<script type="module">
 	import { onMount } from 'svelte'
 	import { Editor } from '@tiptap/core'
   import { defaultExtensions } from '@tiptap/starter-kit'
@@ -44,3 +49,4 @@ Editor.svelte
 {/if}
 
 <div bind:this={element} />
+```
diff --git a/docs/src/docPages/guide/getting-started/vue-cli.md b/docs/src/docPages/guide/getting-started/vuejs.md
similarity index 79%
rename from docs/src/docPages/guide/getting-started/vue-cli.md
rename to docs/src/docPages/guide/getting-started/vuejs.md
index bc3b6af1..3dfda933 100644
--- a/docs/src/docPages/guide/getting-started/vue-cli.md
+++ b/docs/src/docPages/guide/getting-started/vuejs.md
@@ -3,28 +3,14 @@
 ## toc
 
 ## Introduction
-The following guide describes how to integrate tiptap with your Vue CLI project. If you’ve got Vue CLI on your machine already, you can skip the first step.
+The following guide describes how to integrate tiptap with your [Vue](https://vuejs.org/) CLI project.
 
 ## Requirements
 * [Node](https://nodejs.org/en/download/) installed on your machine
+* [Vue CLI](https://cli.vuejs.org/) installed on your machine
 * Experience with [Vue](https://vuejs.org/v2/guide/#Getting-Started)
 
-## 1. Install Vue CLI (optional)
-Vue CLI aims to be the standard tooling baseline for the Vue ecosystem, and helps to create new projects quickly. If you’re working with Vue a lot, chances are you have this installed already. Just skip this step then.
-
-Here is how you could install (or update) it:
-
-```bash
-# with npm
-npm install -g @vue/cli
-
-# with Yarn
-yarn global add @vue/cli
-```
-
-From now on, the `vue` command is available globally. Test it with `vue --version`, this should output the current version.
-
-## 2. Create a project (optional)
+## 1. Create a project (optional)
 If you already have an existing Vue project, that’s fine too. Just skip this step and proceed with the next step.
 
 For the sake of this guide, let’s start with a fresh Vue project called `tiptap-example`. The Vue CLI sets up everything we need, just select the default Vue 2 template.
@@ -37,7 +23,7 @@ vue create 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
@@ -50,7 +36,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 dev` or `yarn dev`, and open [http://localhost:8080/](http://localhost:3000/) 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 `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.
@@ -88,7 +74,7 @@ export default {
 </script>
 ```
 
-## 5. Add it to your app
+## 4. 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.
 
 ```html
@@ -112,7 +98,7 @@ export default {
 
 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)
+## 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" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 0c547d71..8688b4ac 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -6,11 +6,11 @@
       link: /overview/installation
     - title: Upgrade Guide
       link: /overview/upgrade-guide
-    - title: Contributing
-      link: /overview/contributing
     - title: Become a sponsor
       link: /sponsor
       type: sponsor
+    - title: Contributing
+      link: /overview/contributing
 
 - title: Examples
   link: /examples
@@ -50,7 +50,7 @@
       link: /guide/getting-started
       items:
         - title: Vue.js 2
-          link: /guide/getting-started/vue-cli
+          link: /guide/getting-started/vuejs
           skip: true
         - title: Nuxt.js
           link: /guide/getting-started/nuxtjs

From 5b81deeeeb3af2ac527501ce256531da713950f5 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 2 Feb 2021 13:49:53 +0100
Subject: [PATCH 3/6] docs: update all getting started links, fix #131

---
 docs/src/docPages/guide/getting-started.md             |  6 +++---
 .../guide/getting-started/{alpinejs.md => alpine.md}   |  0
 .../getting-started/{intertiajs.md => intertia.md}     |  0
 .../guide/getting-started/{nextjs.md => next.md}       |  0
 .../guide/getting-started/{nuxtjs.md => nuxt.md}       |  0
 .../guide/getting-started/{vuejs.md => vue.md}         |  2 +-
 docs/src/docPages/overview/installation.md             |  6 +++---
 docs/src/links.yaml                                    | 10 +++++-----
 8 files changed, 12 insertions(+), 12 deletions(-)
 rename docs/src/docPages/guide/getting-started/{alpinejs.md => alpine.md} (100%)
 rename docs/src/docPages/guide/getting-started/{intertiajs.md => intertia.md} (100%)
 rename docs/src/docPages/guide/getting-started/{nextjs.md => next.md} (100%)
 rename docs/src/docPages/guide/getting-started/{nuxtjs.md => nuxt.md} (100%)
 rename docs/src/docPages/guide/getting-started/{vuejs.md => vue.md} (99%)

diff --git a/docs/src/docPages/guide/getting-started.md b/docs/src/docPages/guide/getting-started.md
index 1fb1573b..f2a9188c 100644
--- a/docs/src/docPages/guide/getting-started.md
+++ b/docs/src/docPages/guide/getting-started.md
@@ -6,11 +6,11 @@
 tiptap 2 is framework-agnostic and even works with plain JavaScript, if that’s your thing. We’re working on guides for all the different frameworks and workflows, but here is the general one. The following steps should help you to integrate tiptap in your JavaScript project.
 
 ## Alternative Guides
-* [Vue CLI](/guide/getting-started/vue-cli)
-* [Nuxt.js](/guide/getting-started/nuxtjs)
+* [Vue CLI](/guide/getting-started/vue)
+* [Nuxt.js](/guide/getting-started/nuxt)
 * [React](/guide/getting-started/react) (Draft)
 * [Svelte](/guide/getting-started/svelte) (Draft)
-* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
+* [Alpine.js](/guide/getting-started/alpine) (Draft)
 * [Livewire](/guide/getting-started/livewire) (Draft)
 
 ## Requirements
diff --git a/docs/src/docPages/guide/getting-started/alpinejs.md b/docs/src/docPages/guide/getting-started/alpine.md
similarity index 100%
rename from docs/src/docPages/guide/getting-started/alpinejs.md
rename to docs/src/docPages/guide/getting-started/alpine.md
diff --git a/docs/src/docPages/guide/getting-started/intertiajs.md b/docs/src/docPages/guide/getting-started/intertia.md
similarity index 100%
rename from docs/src/docPages/guide/getting-started/intertiajs.md
rename to docs/src/docPages/guide/getting-started/intertia.md
diff --git a/docs/src/docPages/guide/getting-started/nextjs.md b/docs/src/docPages/guide/getting-started/next.md
similarity index 100%
rename from docs/src/docPages/guide/getting-started/nextjs.md
rename to docs/src/docPages/guide/getting-started/next.md
diff --git a/docs/src/docPages/guide/getting-started/nuxtjs.md b/docs/src/docPages/guide/getting-started/nuxt.md
similarity index 100%
rename from docs/src/docPages/guide/getting-started/nuxtjs.md
rename to docs/src/docPages/guide/getting-started/nuxt.md
diff --git a/docs/src/docPages/guide/getting-started/vuejs.md b/docs/src/docPages/guide/getting-started/vue.md
similarity index 99%
rename from docs/src/docPages/guide/getting-started/vuejs.md
rename to docs/src/docPages/guide/getting-started/vue.md
index 3dfda933..237b4f80 100644
--- a/docs/src/docPages/guide/getting-started/vuejs.md
+++ b/docs/src/docPages/guide/getting-started/vue.md
@@ -1,4 +1,4 @@
-# Vue CLI
+# Vue.js
 
 ## toc
 
diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md
index 93868f52..fd34c7c5 100644
--- a/docs/src/docPages/overview/installation.md
+++ b/docs/src/docPages/overview/installation.md
@@ -6,11 +6,11 @@
 Depending on how your development setup looks like, there are a few different ways to install tiptap. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use it without any front-end framework. Choose the way that fits your workflow and start building cool things!
 
 ## Integration guides
-* [Vue.js](/guide/getting-started/vue-cli)
-* [Nuxt.js](/guide/getting-started/nuxtjs)
+* [Vue.js](/guide/getting-started/vue)
+* [Nuxt.js](/guide/getting-started/nuxt)
 * [React](/guide/getting-started/react) (Draft)
 * [Svelte](/guide/getting-started/svelte) (Draft)
-* [Alpine.js](/guide/getting-started/alpinejs) (Draft)
+* [Alpine.js](/guide/getting-started/alpine) (Draft)
 * [Livewire](/guide/getting-started/livewire) (Draft)
 
 Don’t see your framework here? That shouldn’t stop you from installing tiptap. Just use the Vanilla JavaScript version, that should work fine, too.
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 8688b4ac..a4bf733c 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -50,13 +50,13 @@
       link: /guide/getting-started
       items:
         - title: Vue.js 2
-          link: /guide/getting-started/vuejs
+          link: /guide/getting-started/vue
           skip: true
         - title: Nuxt.js
-          link: /guide/getting-started/nuxtjs
+          link: /guide/getting-started/nuxt
           skip: true
         - title: Inertia.js
-          link: /guide/getting-started/intertiajs
+          link: /guide/getting-started/intertia
           type: draft
           skip: true
         - title: React
@@ -64,7 +64,7 @@
           type: draft
           skip: true
         - title: Next.js
-          link: /guide/getting-started/nextjs
+          link: /guide/getting-started/next
           type: draft
           skip: true
         - title: Svelte
@@ -72,7 +72,7 @@
           type: draft
           skip: true
         - title: Alpine.js
-          link: /guide/getting-started/alpinejs
+          link: /guide/getting-started/alpine
           type: draft
           skip: true
         - title: Livewire

From 22ed56769cce7741f72abce0bba0eef4d2cbdfd9 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 2 Feb 2021 14:08:45 +0100
Subject: [PATCH 4/6] docs: update content

---
 docs/src/docPages/api/schema.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/docs/src/docPages/api/schema.md b/docs/src/docPages/api/schema.md
index 1e0a26df..ce0f80e7 100644
--- a/docs/src/docPages/api/schema.md
+++ b/docs/src/docPages/api/schema.md
@@ -145,6 +145,17 @@ Node.create({
 })
 ```
 
+For some cases where you want features that aren’t available in marks, for example a node view, try if an inline node would work:
+
+```js
+Node.create({
+  name: 'customInlineNode',
+  group: 'inline',
+  inline: true,
+  content: 'text*',
+})
+```
+
 #### Atom
 Nodes with `atom: true` aren’t directly editable and should be treated as a single unit. It’s not so likely to use that in a editor context, but this is how it would look like:
 

From a9708f65354485b16adcbe46749e975aa9011204 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 2 Feb 2021 14:48:58 +0100
Subject: [PATCH 5/6] docs: minor improvements to the demo style

---
 docs/src/demos/Examples/Book/index.vue        |  9 ++++
 .../Examples/CollaborativeEditing/index.vue   |  9 ++++
 docs/src/demos/Examples/Community/index.vue   |  9 ++++
 docs/src/demos/Examples/Default/index.vue     |  9 ++++
 docs/src/demos/Examples/Formatting/index.vue  |  9 ++++
 .../Examples/MarkdownShortcuts/index.vue      |  9 ++++
 docs/src/demos/Examples/Tables/index.vue      | 54 ++++++++++---------
 .../demos/Guide/Content/ExportHTML/index.vue  |  9 ++++
 .../demos/Guide/Content/ExportJSON/index.vue  |  9 ++++
 9 files changed, 100 insertions(+), 26 deletions(-)

diff --git a/docs/src/demos/Examples/Book/index.vue b/docs/src/demos/Examples/Book/index.vue
index 44b31291..1e3a53b5 100644
--- a/docs/src/demos/Examples/Book/index.vue
+++ b/docs/src/demos/Examples/Book/index.vue
@@ -109,6 +109,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index bba1e2ac..5f962783 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -265,6 +265,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/Community/index.vue b/docs/src/demos/Examples/Community/index.vue
index d64d4a4f..b7bcf223 100644
--- a/docs/src/demos/Examples/Community/index.vue
+++ b/docs/src/demos/Examples/Community/index.vue
@@ -147,6 +147,15 @@ export default {
   > * + * {
     margin-top: 0.75em;
   }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
 }
 
 .mention {
diff --git a/docs/src/demos/Examples/Default/index.vue b/docs/src/demos/Examples/Default/index.vue
index b3bb8114..1f0bd869 100644
--- a/docs/src/demos/Examples/Default/index.vue
+++ b/docs/src/demos/Examples/Default/index.vue
@@ -139,6 +139,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue
index 0e795b82..6c1b48a7 100644
--- a/docs/src/demos/Examples/Formatting/index.vue
+++ b/docs/src/demos/Examples/Formatting/index.vue
@@ -124,6 +124,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/MarkdownShortcuts/index.vue b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
index 59062178..8f55d2ae 100644
--- a/docs/src/demos/Examples/MarkdownShortcuts/index.vue
+++ b/docs/src/demos/Examples/MarkdownShortcuts/index.vue
@@ -65,6 +65,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Examples/Tables/index.vue b/docs/src/demos/Examples/Tables/index.vue
index 07288eaf..8e89ac38 100644
--- a/docs/src/demos/Examples/Tables/index.vue
+++ b/docs/src/demos/Examples/Tables/index.vue
@@ -4,56 +4,56 @@
       insertTable
     </button>
 
-    <template v-if="editor.isActive('table')">
-      <button @click="editor.chain().focus().addColumnBefore().run()" v-if="editor.can().addColumnBefore()">
+    <template>
+      <button @click="editor.chain().focus().addColumnBefore().run()" :disabled="!editor.can().addColumnBefore()">
         addColumnBefore
       </button>
-      <button @click="editor.chain().focus().addColumnAfter().run()" v-if="editor.can().addColumnAfter()">
+      <button @click="editor.chain().focus().addColumnAfter().run()" :disabled="!editor.can().addColumnAfter()">
         addColumnAfter
       </button>
-      <button @click="editor.chain().focus().deleteColumn().run()" v-if="editor.can().deleteColumn()">
+      <button @click="editor.chain().focus().deleteColumn().run()" :disabled="!editor.can().deleteColumn()">
         deleteColumn
       </button>
-      <button @click="editor.chain().focus().addRowBefore().run()" v-if="editor.can().addRowBefore()">
+      <button @click="editor.chain().focus().addRowBefore().run()" :disabled="!editor.can().addRowBefore()">
         addRowBefore
       </button>
-      <button @click="editor.chain().focus().addRowAfter().run()" v-if="editor.can().addRowAfter()">
+      <button @click="editor.chain().focus().addRowAfter().run()" :disabled="!editor.can().addRowAfter()">
         addRowAfter
       </button>
-      <button @click="editor.chain().focus().deleteRow().run()" v-if="editor.can().deleteRow()">
+      <button @click="editor.chain().focus().deleteRow().run()" :disabled="!editor.can().deleteRow()">
         deleteRow
       </button>
-      <button @click="editor.chain().focus().deleteTable().run()" v-if="editor.can().deleteTable()">
+      <button @click="editor.chain().focus().deleteTable().run()" :disabled="!editor.can().deleteTable()">
         deleteTable
       </button>
-      <button @click="editor.chain().focus().mergeCells().run()" v-if="editor.can().mergeCells()">
+      <button @click="editor.chain().focus().mergeCells().run()" :disabled="!editor.can().mergeCells()">
         mergeCells
       </button>
-      <button @click="editor.chain().focus().splitCell().run()" v-if="editor.can().splitCell()">
+      <button @click="editor.chain().focus().splitCell().run()" :disabled="!editor.can().splitCell()">
         splitCell
       </button>
-      <button @click="editor.chain().focus().toggleHeaderColumn().run()" v-if="editor.can().toggleHeaderColumn()">
+      <button @click="editor.chain().focus().toggleHeaderColumn().run()" :disabled="!editor.can().toggleHeaderColumn()">
         toggleHeaderColumn
       </button>
-      <button @click="editor.chain().focus().toggleHeaderRow().run()" v-if="editor.can().toggleHeaderRow()">
+      <button @click="editor.chain().focus().toggleHeaderRow().run()" :disabled="!editor.can().toggleHeaderRow()">
         toggleHeaderRow
       </button>
-      <button @click="editor.chain().focus().toggleHeaderCell().run()" v-if="editor.can().toggleHeaderCell()">
+      <button @click="editor.chain().focus().toggleHeaderCell().run()" :disabled="!editor.can().toggleHeaderCell()">
         toggleHeaderCell
       </button>
-      <button @click="editor.chain().focus().mergeOrSplit().run()" v-if="editor.can().mergeOrSplit()">
+      <button @click="editor.chain().focus().mergeOrSplit().run()" :disabled="!editor.can().mergeOrSplit()">
         mergeOrSplit
       </button>
-      <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()" v-if="editor.can().setCellAttribute('colspan', 2)">
+      <button @click="editor.chain().focus().setCellAttribute('colspan', 2).run()" :disabled="!editor.can().setCellAttribute('colspan', 2)">
         setCellAttribute
       </button>
-      <button @click="editor.chain().focus().fixTables().run()" v-if="editor.can().fixTables()">
+      <button @click="editor.chain().focus().fixTables().run()" :disabled="!editor.can().fixTables()">
         fixTables
       </button>
-      <button @click="editor.chain().focus().goToNextCell().run()" v-if="editor.can().goToNextCell()">
+      <button @click="editor.chain().focus().goToNextCell().run()" :disabled="!editor.can().goToNextCell()">
         goToNextCell
       </button>
-      <button @click="editor.chain().focus().goToPreviousCell().run()" v-if="editor.can().goToPreviousCell()">
+      <button @click="editor.chain().focus().goToPreviousCell().run()" :disabled="!editor.can().goToPreviousCell()">
         goToPreviousCell
       </button>
     </template>
@@ -95,14 +95,8 @@ export default {
       ],
       content: `
         <h1>
-          Fun with tables
+          Have you seen our tables? They are amazing.
         </h1>
-        <p>
-          Greeks were the first people to use a table as a dining place. Not sure why they put their plates on a computer display, but I don’t care. If you want to create your own table, tiptap got you covered. No matter, what you want to do with those tables.
-        </p>
-        <h2>
-          Amazing features
-        </h2>
         <ul>
           <li>tables with rows, headers and cells</li>
           <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
@@ -145,6 +139,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
@@ -232,7 +235,6 @@ export default {
 }
 
 .tableWrapper {
-  padding: 1rem 0;
   overflow-x: auto;
 }
 
diff --git a/docs/src/demos/Guide/Content/ExportHTML/index.vue b/docs/src/demos/Guide/Content/ExportHTML/index.vue
index 0509ac3b..61c273e3 100644
--- a/docs/src/demos/Guide/Content/ExportHTML/index.vue
+++ b/docs/src/demos/Guide/Content/ExportHTML/index.vue
@@ -121,6 +121,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;
diff --git a/docs/src/demos/Guide/Content/ExportJSON/index.vue b/docs/src/demos/Guide/Content/ExportJSON/index.vue
index e51532bf..e3302067 100644
--- a/docs/src/demos/Guide/Content/ExportJSON/index.vue
+++ b/docs/src/demos/Guide/Content/ExportJSON/index.vue
@@ -128,6 +128,15 @@ export default {
     padding: 0 1rem;
   }
 
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+  }
+
   code {
     background-color: rgba(#616161, 0.1);
     color: #616161;

From 88de231bfe52caae5cfa58064e960f8f58b192ac Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 2 Feb 2021 15:01:37 +0100
Subject: [PATCH 6/6] docs: update content

---
 docs/src/demos/Examples/Tables/index.vue |  6 +++---
 docs/src/docPages/guide/content.md       | 15 ++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Examples/Tables/index.vue b/docs/src/demos/Examples/Tables/index.vue
index 8e89ac38..e0209314 100644
--- a/docs/src/demos/Examples/Tables/index.vue
+++ b/docs/src/demos/Examples/Tables/index.vue
@@ -94,9 +94,9 @@ export default {
         TableCell,
       ],
       content: `
-        <h1>
-          Have you seen our tables? They are amazing.
-        </h1>
+        <p>
+          Have you seen our tables? They are amazing!
+        </p>
         <ul>
           <li>tables with rows, headers and cells</li>
           <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
diff --git a/docs/src/docPages/guide/content.md b/docs/src/docPages/guide/content.md
index 865aa55f..332d1f6c 100644
--- a/docs/src/docPages/guide/content.md
+++ b/docs/src/docPages/guide/content.md
@@ -66,13 +66,22 @@ Use this interactive example to fiddle around:
 
 <demo name="Guide/Content/ExportHTML" :show-source="false"/>
 
+### Option 3: Y.js
+Our editor has amazing support for Y.js, which is amazing to add [realtime collaboration, offline editing, or syncing between devices](/guide/collaborative-editing).
+
+Internally, Y.js stores a history of all changes. That can be in the browser, on a server, synced with other connected clients, or on a USB stick. But, it’s important to know that Y.js needs those stored changes. A simple JSON document is not enough to merge changes.
+
+Sure, you can import existing JSON documents to get started and get a JSON out of Y.js, but that’s more like an import/export format. It won’t be your single source. That’s important to consider when adding Y.js for one of the mentioned use cases.
+
+That said, it’s amazing and we’re about to provide an amazing backend, that makes all that a breeze.
+
 ### Not an option: Markdown
 Unfortunately, **tiptap doesn’t support Markdown as an input or output format**. We considered to add support for it, but those are the reasons why we decided to not do it:
 
 * Both, HTML and JSON, can have deeply nested structures, Markdown is flat.
 * There are enough packages to convert HTML to Markdown and vice-versa.
 * Markdown standards vary.
-* tiptap’s strength is cutomization, that doesn’t work very well with Markdown
+* tiptap’s strength is cutomization, that doesn’t work very well with Markdown.
 
 You should really consider to work with HTML or JSON to store your content, they are perfectly fine for most use cases.
 
@@ -120,3 +129,7 @@ If you’re migrating existing content to tiptap we would recommend to get your
 We’re about to go through a few cases to help with that, for example we provide a PHP package to convert HTML to a compatible JSON structure: [ueberdosis/prosemirror-to-html](https://github.com/ueberdosis/html-to-prosemirror).
 
 Share your experiences with us! We’d like to add more information here.
+
+## Security
+
+There’s no reason to use on or the other for security reasons.