docs: update content

docs/src/demos/Examples/CollaborativeEditing/index.vue

@@ -293,6 +293,10 @@ export default {
     }
   }
 
+  mark {
+    background-color: #FAF594;
+  }
+
   img {
     max-width: 100%;
     height: auto;

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;

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>
       `,
     })

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'

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" />

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!
 :::
 

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)

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