From d40131d8d1a6684d1e907d5b362c8d95814ff965 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 4 Feb 2021 16:56:17 +0100
Subject: [PATCH] docs: update content

---
 .../Examples/CollaborativeEditing/index.vue   |  4 +
 docs/src/demos/Examples/Formatting/index.vue  | 75 +++++++++----------
 docs/src/demos/Examples/Minimal/index.vue     |  4 +-
 .../examples/collaborative-editing.md         | 11 ++-
 docs/src/docPages/examples/drawing.md         |  1 -
 .../docPages/guide/collaborative-editing.md   |  2 +-
 docs/src/docPages/overview/installation.md    |  2 +-
 docs/src/links.yaml                           | 11 ++-
 8 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/docs/src/demos/Examples/CollaborativeEditing/index.vue b/docs/src/demos/Examples/CollaborativeEditing/index.vue
index 05b4646d..a833b665 100644
--- a/docs/src/demos/Examples/CollaborativeEditing/index.vue
+++ b/docs/src/demos/Examples/CollaborativeEditing/index.vue
@@ -293,6 +293,10 @@ export default {
     }
   }
 
+  mark {
+    background-color: #FAF594;
+  }
+
   img {
     max-width: 100%;
     height: auto;
diff --git a/docs/src/demos/Examples/Formatting/index.vue b/docs/src/demos/Examples/Formatting/index.vue
index 6c1b48a7..6ef60996 100644
--- a/docs/src/demos/Examples/Formatting/index.vue
+++ b/docs/src/demos/Examples/Formatting/index.vue
@@ -1,12 +1,6 @@
 <template>
   <div>
     <div v-if="editor">
-      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
-        bold
-      </button>
-      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
-        italic
-      </button>
       <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
         h1
       </button>
@@ -19,6 +13,18 @@
       <button @click="editor.chain().focus().setParagraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
         paragraph
       </button>
+      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        bold
+      </button>
+      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        italic
+      </button>
+      <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }">
+        strike
+      </button>
+      <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }">
+        highlight
+      </button>
       <button @click="editor.chain().focus().setTextAlign('left').run()" :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }">
         left
       </button>
@@ -39,6 +45,8 @@
 <script>
 import { defaultExtensions, Editor, EditorContent } from '@tiptap/vue-starter-kit'
 import TextAlign from '@tiptap/extension-text-align'
+import Highlight from '@tiptap/extension-highlight'
+import Strike from '@tiptap/extension-strike'
 
 export default {
   components: {
@@ -56,51 +64,32 @@ export default {
       extensions: [
         ...defaultExtensions(),
         TextAlign,
+        Highlight,
       ],
       content: `
-        <h3>
-          Girls Just Want to Have Fun (Cyndi Lauper)
+        <h3 style="text-align:center">
+          Devs Just Want to Have Fun by Cyndi Lauper
         </h3>
-        <p>
+        <p style="text-align:center">
           I come home in the morning light<br>
-          My mother says, “When you gonna live your life right?”<br>
+          My mother says, <mark>“When you gonna live your life right?”</mark><br>
           Oh mother dear we’re not the fortunate ones<br>
-          And girls, they wanna have fun<br>
-          Oh girls just want to have fun</p>
-          <p style="text-align: center">The phone rings in the middle of the night<br>
+          And devs, they wanna have fun<br>
+          Oh devs just want to have fun</p>
+        <p style="text-align:center">
+          The phone rings in the middle of the night<br>
           My father yells, "What you gonna do with your life?"<br>
           Oh daddy dear, you know you’re still number one<br>
-          But girls, they wanna have fun<br>
-          Oh girls just want to have
+          But <s>girls</s>devs, they wanna have fun<br>
+          Oh devs just want to have
         </p>
-        <p style="text-align:right">
+        <p style="text-align:center">
           That’s all they really want<br>
           Some fun<br>
           When the working day is done<br>
-          Oh girls, they wanna have fun<br>
-          Oh girls just wanna have fun<br>
-          (girls, they wanna, wanna have fun, girls wanna have)
-        </p>
-        <p style="text-align:justify">
-          Some boys take a beautiful girl
-          And hide her away from the rest of the world
-          I want to be the one to walk in the sun
-          Oh girls, they wanna have fun
-          Oh girls just wanna have
-        </p>
-        <p style="text-align:justify">
-          That's all they really want
-          Some fun
-          When the working day is done
-          Oh girls, they wanna have fun
-          Oh girls just want to have fun (girls, they wanna, wanna have fun, girls wanna have)
-          They just wanna, they just wanna (girls)
-          They just wanna, they just wanna, oh girl (girls just wanna have fun)
-          Girls just wanna have fun
-          They just wanna, they just wanna
-          They just wanna, they just wanna (girls)
-          They just wanna, they just wanna, oh girl (girls just wanna have fun)
-          Girls just want to have fun
+          Oh devs, they wanna have fun<br>
+          Oh devs just wanna have fun<br>
+          (devs, they wanna, wanna have fun, devs wanna have)
         </p>
       `,
     })
@@ -115,6 +104,8 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .ProseMirror {
+  margin-top: 1rem;
+
   > * + * {
     margin-top: 0.75em;
   }
@@ -152,6 +143,10 @@ export default {
     }
   }
 
+  mark {
+    background-color: #FAF594;
+  }
+
   img {
     max-width: 100%;
     height: auto;
diff --git a/docs/src/demos/Examples/Minimal/index.vue b/docs/src/demos/Examples/Minimal/index.vue
index 8eeccee3..0f3e5124 100644
--- a/docs/src/demos/Examples/Minimal/index.vue
+++ b/docs/src/demos/Examples/Minimal/index.vue
@@ -28,10 +28,10 @@ export default {
       ],
       content: `
         <p>
-          This is a radically reduced version of tiptap. It has only support for a document, paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
         </p>
         <p>
-          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different. You’ll mostly likely want to add a paragraph though.
+          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
         </p>
       `,
     })
diff --git a/docs/src/docPages/examples/collaborative-editing.md b/docs/src/docPages/examples/collaborative-editing.md
index e30d10c8..2a7d23b0 100644
--- a/docs/src/docPages/examples/collaborative-editing.md
+++ b/docs/src/docPages/examples/collaborative-editing.md
@@ -1,16 +1,25 @@
 # Collaborative editing
 
+:::pro Commercial use
+Using the collaborative editing commercially? [Become a sponsor](/sponsor) to fund its development!
+:::
+
+## toc
+
+## Introduction
 This example shows how you can use tiptap to let multiple users collaborate in the same document in real-time.
 
 It connects all clients to a WebSocket server and merges changes to the document with the power of [Y.js](https://github.com/yjs/yjs). If you want to learn more about collaborative text editing, check out [our guide on collaborative editing](/guide/collaborative-editing).
 
+## Example
 :::warning Shared Document
 Be nice! The content of this editor is shared with other users from the Internet.
 :::
 
 <demo name="Examples/CollaborativeEditing" />
 
-In case you’re wondering what kind of sorcery you need on the server to achieve this, here is the backend code for the demo:
+## Backend
+In case you’re wondering what kind of sorcery you need on the server to achieve this, here is the whole backend code for the demo:
 
 ```js
 import { Server } from '@hocuspocus/server'
diff --git a/docs/src/docPages/examples/drawing.md b/docs/src/docPages/examples/drawing.md
index 4104151e..d49d2aaf 100644
--- a/docs/src/docPages/examples/drawing.md
+++ b/docs/src/docPages/examples/drawing.md
@@ -1,5 +1,4 @@
 # Drawing
-
 Did you ever wanted to draw in a text editor? Me neither. Anyway, here is an example how that could work with tiptap. If you want to build something like that, [learn more about node views](/guide/node-views).
 
 <demo name="Examples/Drawing" />
diff --git a/docs/src/docPages/guide/collaborative-editing.md b/docs/src/docPages/guide/collaborative-editing.md
index 62442302..1c3c7f05 100644
--- a/docs/src/docPages/guide/collaborative-editing.md
+++ b/docs/src/docPages/guide/collaborative-editing.md
@@ -1,6 +1,6 @@
 # Collaborative editing
 
-:::pro Professionals
+:::pro Commercial use
 Using the collaborative editing commercially? [Become a sponsor](/sponsor) to fund its development!
 :::
 
diff --git a/docs/src/docPages/overview/installation.md b/docs/src/docPages/overview/installation.md
index ae61e363..cbe6b928 100644
--- a/docs/src/docPages/overview/installation.md
+++ b/docs/src/docPages/overview/installation.md
@@ -3,7 +3,7 @@
 ## toc
 
 ## Introduction
-There are a few different ways to install tiptap, depending on how your development setup looks like. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use tiptap without any front-end framework, too. Choose the way that fits your workflow and start building cool things!
+There are a few different ways to install tiptap, depending on your development setup. We have put together integration guides for a few popular frameworks to get you started quickly. You can even use tiptap without any front-end framework, too. Choose the way that fits your workflow and start building cool things!
 
 ## Integration guides
 * [Vue.js](/guide/getting-started/vue)
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 586a5b41..7ce44c61 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -23,7 +23,6 @@
       link: /examples/markdown-shortcuts
     - title: Formatting
       link: /examples/formatting
-      type: draft
     - title: Todo app
       link: /examples/todo-app
     - title: Write a book
@@ -40,7 +39,7 @@
       type: draft
     - title: Tables
       link: /examples/tables
-      type: draft
+      type: pro
     - title: Images
       link: /examples/images
       type: draft
@@ -148,16 +147,16 @@
           link: /api/nodes/paragraph
         - title: Table
           link: /api/nodes/table
-          type: draft
+          type: pro
         - title: TableRow
           link: /api/nodes/table-row
-          type: draft
+          type: pro
         - title: TableCell
           link: /api/nodes/table-cell
-          type: draft
+          type: pro
         - title: TableHeader
           link: /api/nodes/table-header
-          type: draft
+          type: pro
         - title: TaskList
           link: /api/nodes/task-list
         - title: TaskItem