add premium hints everywhere, add premium flags to the navigation, add a license page

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

@@ -197,7 +197,7 @@ export default {
 /* This renders the username above the caret */
 .collaboration-cursor__label {
   position: absolute;
-  top: -1.6em;
+  top: -1.4em;
   left: -1px;
   font-size: 13px;
   font-style: normal;

docs/src/demos/Extensions/CollaborationCursor/index.spec.js

@@ -0,0 +1,5 @@
+context('/api/extensions/collaboration', () => {
+  before(() => {
+    cy.visit('/api/extensions/collaboration')
+  })
+})

docs/src/demos/Extensions/CollaborationCursor/index.vue

@@ -0,0 +1,91 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Collaboration from '@tiptap/extension-collaboration'
+import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      documentName: 'tiptap-collaboration-cursor-extension',
+      ydoc: null,
+      provider: null,
+      type: null,
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.ydoc = new Y.Doc()
+    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
+    this.type = this.ydoc.getXmlFragment('prosemirror')
+
+    this.editor = new Editor({
+      // TODO: This is added by every new user.
+      // content: `
+      //   <p>Example Text</p>
+      // `,
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Collaboration({
+          provider: this.provider,
+          type: this.type,
+        }),
+        CollaborationCursor({
+          provider: this.provider,
+          name: 'Cyndi Lauper',
+          color: '#f783ac',
+        }),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+    this.provider.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* This gives the remote user caret */
+.collaboration-cursor__caret {
+  position: relative;
+  margin-left: -1px;
+  margin-right: -1px;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  word-break: normal;
+  pointer-events: none;
+}
+
+/* This renders the username above the caret */
+.collaboration-cursor__label {
+  position: absolute;
+  top: -1.4em;
+  left: -1px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+</style>

docs/src/docPages/api/extensions/collaboration-cursor.md

@@ -1,2 +1,35 @@
 # Collaboration Cursor
 
+:::premium Premium Extension
+Using this in production requires a **tiptap pro** license. [Read more](/tiptap-pro)
+:::
+
+## Installation
+```bash
+# With npm
+npm install @tiptap/extension-collaboration-cursor
+
+# Or: With Yarn
+yarn add @tiptap/extension-collaboration-cursor
+```
+
+## Settings
+| Option   | Type | Default | Description |
+| -------- | ---- | ------- | ----------- |
+| provider |      |         |             |
+| type     |      |         |             |
+
+## Commands
+*None*
+
+## Keyboard shortcuts
+*None*
+
+## Source code
+[packages/extension-collaboration-cursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/)
+
+## Usage
+:::warning Public
+The content of this editor is shared with other users.
+:::
+<demo name="Extensions/CollaborationCursor" highlight="" />

docs/src/docPages/api/extensions/collaboration.md

@@ -1,8 +1,8 @@
 # Collaboration
 The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
 
-:::pro Premium Extension
+:::premium Premium Extension
-Using this in production requires a **tiptap pro** license. [Read more](/license)
+Using this in production requires a **tiptap pro** license. [Read more](/tiptap-pro)
 :::
 
 ## Installation

docs/src/docPages/examples/collaborative-editing.md

@@ -1,4 +1,9 @@
 # Collaborative editing
+
+:::premium Requires Premium Extensions
+Using this example in production requires a **tiptap pro** license. [Read more](/tiptap-pro)
+:::
+
 This example shows how you can use tiptap to let different users collaboratively work on the same text in real-time.
 
 It connects client with WebRTC and merges changes to the document (no matter where they come from) with the awesome library [Y.js](https://github.com/yjs/yjs) by Kevin Jahns. Be aware that in a real-world scenario you would probably add a server, which is also able to merge changes with Y.js.

docs/src/docPages/guide/collaborative-editing.md

@@ -1,9 +1,12 @@
 # Collaborative editing
 
+:::premium Requires Premium Extensions
+Using the collaborative editing in production requires a **tiptap pro** license. [Read more](/tiptap-pro)
+:::
+
 ## toc
 
 ## Introduction
-
 Collaborative editing allows multiple users to work on the same text document in real-time. It’s a complex topic that you should be aware before adding it blindly to you app. No worries though, here is everything you need to know.
 
 ## Configure collaboration

docs/src/docPages/tiptap-pro.md

@@ -0,0 +1,3 @@
+# tiptap pro
+
+[Sponsor us on GitHub](https://github.com/sponsors/ueberdosis)

docs/src/layouts/App/index.vue

@@ -149,13 +149,13 @@
           </div>
           <ul class="app__link-list">
             <li v-for="(item, j) in linkGroup.items" :key="j">
-              <g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
+              <g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--premium': item.premium === true, 'app__link--with-children': item.items }" :to="item.link" :exact="item.link === '/'">
                 {{ item.title }}
               </g-link>
 
               <ul v-if="item.items" class="app__link-list">
                 <li v-for="(item, k) in item.items" :key="k">
-                  <g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true }" :to="item.link" exact>
+                  <g-link :class="{ 'app__link': true, 'app__link--draft': item.draft === true, 'app__link--premium': item.premium === true }" :to="item.link" exact>
                     {{ item.title }}
                   </g-link>
                 </li>

docs/src/layouts/App/style.scss

@@ -183,6 +183,17 @@ $menuBreakPoint: 800px;
       color: rgba($colorWhite, 0.2);
     }
 
+    &--premium {
+      &::after {
+        content: 'PRO';
+        color: $colorPurple;
+        background-color: rgba($colorPurple, 0.1);
+        box-decoration-break: clone;
+        padding: 0 0.5em;
+        border-radius: 5px;
+      }
+    }
+
     &--with-children::after {
       content: '↓';
       color: rgba($colorWhite, 0.2);

docs/src/links.yaml

@@ -15,6 +15,7 @@
           link: /examples/basic
         - title: Collaborative editing
           link: /examples/collaborative-editing
+          premium: true
         - title: Markdown shortcuts
           link: /examples/markdown-shortcuts
         # - title: Menu Bubble
@@ -93,6 +94,7 @@
     - title: Collaborative editing
       link: /guide/collaborative-editing
       draft: true
+      premium: true
 
 - title: API
   items:
@@ -118,10 +120,11 @@
         #   draft: true
         - title: Collaboration
           link: /api/extensions/collaboration
-          draft: true
+          premium: true
         - title: CollaborationCursor
           link: /api/extensions/collaboration-cursor
           draft: true
+          premium: true
         - title: Document
           link: /api/extensions/document
         - title: HardBreak
@@ -184,7 +187,7 @@
     - title: Keyboard Shortcuts
       link: /api/keyboard-shortcuts
 
-- title: tiptap pro
+- title:
   items:
-    - title: License
+    - title: tiptap pro
-      link: /license
+      link: /tiptap-pro

docs/src/templates/DocPage/style.scss

@@ -247,10 +247,12 @@
         color: $colorRed;
       }
 
-      &.pro {
+      &.premium {
         border-color: rgba($colorRed, 0.1);
         background-color: rgba($colorRed, 0.1);
-        color: $colorRed;
+        color: $colorPurple;
+        background-color: rgba($colorPurple, 0.1);
+        border-color: rgba($colorPurple, 0.1);
       }
 
       .remark-container-title {