add mooore content

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

@@ -1,6 +1,5 @@
 <template>
   <div>
-    BUG: Headings can’t be transformed to a bullet or ordered list.
     <div v-if="editor">
       <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
         bold
@@ -89,25 +88,24 @@ export default {
           Hi there,
         </h2>
         <p>
-          this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the bullet lists:
+          this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
         </p>
         <ul>
           <li>
-            With one …
+            That’s a bullet list with one …
           </li>
           <li>
             … or two list items.
           </li>
-          <li>
-            And yes, even more.
-          </li>
         </ul>
         <p>
-          Isn’t that great? But wait, there’s more. Let’s try a code block:
+          Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
         </p>
-        <pre><code class="language-css">body { display: none; }</code></pre>
+        <pre><code class="language-css">body {
+  display: none;
+}</code></pre>
         <p>
-          I know, I know, it’s impressive. Give it a try and click a little bit around. But don’t forget to check the other examples too.
+          I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
         </p>
         <blockquote>
           Wow, that’s amazing. Good work, boy! 👏

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

@@ -1,12 +1,12 @@
 <template>
   <div>
     <div class="actions">
-      <button class="button" @click="clearContent">
-        Clear Content
-      </button>
       <button class="button" @click="setContent">
         Set Content
       </button>
+      <button class="button" @click="clearContent">
+        Clear Content
+      </button>
     </div>
 
     <editor-content :editor="editor" />
@@ -61,11 +61,6 @@ export default {
   },
 
   methods: {
-    clearContent() {
-      this.editor.clearContent(true)
-      this.editor.focus()
-    },
-
     setContent() {
       // You can pass a JSON document …
       this.editor.setContent({
@@ -87,6 +82,11 @@ export default {
       // It’s likely that you’d like to focus the Editor after most commands.
       this.editor.focus()
     },
+
+    clearContent() {
+      this.editor.clearContent(true)
+      this.editor.focus()
+    },
   },
 
   beforeDestroy() {

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

@@ -10,6 +10,8 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Code from '@tiptap/extension-code'
+import BulletList from '@tiptap/extension-bullet-list'
+import ListItem from '@tiptap/extension-list-item'
 import Focus from '@tiptap/extension-focus'
 
 export default {
@@ -30,6 +32,8 @@ export default {
         Paragraph(),
         Text(),
         Code(),
+        BulletList(),
+        ListItem(),
         Focus({
           className: 'has-focus',
           nested: true,
@@ -38,12 +42,11 @@ export default {
       autoFocus: true,
       content: `
         <p>
-          The focus extension adds custom classes to focused nodes. By default, it’ll add a <code>has-focus</code> class, even to nested nodes:
+          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
         </p>
-        <pre><code>{ className: 'has-focus', nested: true }</code></pre>
         <ul>
-          <li>With <code>nested: true</code> nested elements like this list item will be focused.</li>
-          <li>Otherwise the whole list will get the focus class, even if only a single list item is selected.</li>
+          <li>Nested elements (like this list item) will be focused with the default setting of <code>nested: true</code>.</li>
+          <li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
         </ul>
       `,
     })

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

@@ -39,10 +39,13 @@ export default {
       ],
       content: `
         <p>
-          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web" target="_self">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/" target="_self">another one!</a> Yep, seems to work.
+          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
         </p>
         <p>
-          By default every link will get a \`rel="noopener noreferrer nofollow"\` attribute. It’s configurable though.
+          By default every link will get a [rel="noopener noreferrer nofollow"] attribute <a href="https://web.dev/external-anchors-use-rel-noopener/">for security reasons</a>. It’s configurable though.
+        </p>
+        <p>
+          Ah, and links open in a new tab by default, but that’s also - yes, you’ve guessed it - configurable.
         </p>
       `,
     })

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

@@ -21,19 +21,19 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      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.
-        </p>
-        <p>
-          The paragraph extension is not literally required, but you need at least one node. That node can be something different, for example to render a task list and only that task list.
-        </p>
-      `,
       extensions: [
         Document(),
         Paragraph(),
         Text(),
       ],
+      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.
+        </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.
+        </p>
+      `,
     })
   },
 

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

@@ -28,7 +28,10 @@ export default {
       editable: this.editable,
       content: `
         <p>
-          This text is <strong>read-only</strong>. You are not able to edit something. <a href="https://ueber.io/">Links to fancy websites</a> are still working.
+          This text is <strong>read-only</strong>. No matter what you try, you are not able to edit something. Okay, if you toggle the checkbox above you’ll be able to edit the text.
+        </p>
+        <p>
+          If you want to check the state, you can call <code>editor.isEditable()</code>.
         </p>
       `,
       extensions: defaultExtensions(),
@@ -60,5 +63,6 @@ export default {
 
 [contenteditable=false] {
   color: #999;
+  cursor: not-allowed;
 }
 </style>

docs/src/docPages/examples/basic.md

@@ -1,3 +1,4 @@
 # Basic
+BUG: Headings can’t be transformed to a bullet or ordered list.
 
 <live-demo name="Examples/Basic" />

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

@@ -1,6 +1,12 @@
 # Collaborative editing
-:::warning Public
-The content of this editor is shared with other users.
+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.
+
+If you want to learn more about collaborative text editing, [check out our guide on that topic](/guide/collaborative-editing). Anyway, it’s showtime now:
+
+:::warning The content of this editor is shared with other users from the Internet.
+Don’t share your password, credit card numbers or other things you wouldn’t make public.
 :::
 
 <!-- <demo name="Examples/Collaboration" :show-source="false"/> -->

docs/src/docPages/examples/focus.md

@@ -1,3 +1,3 @@
 # Focus
 
-<demo name="Examples/Focus" highlight="13,33-36,38" />
+<demo name="Examples/Focus" highlight="15,37-40,42" />

docs/src/docPages/examples/minimalist.md

@@ -1,3 +1,3 @@
 # Minimalist
 
-<demo name="Examples/Minimalist" highlight="7-9,26-28" />
+<demo name="Examples/Minimalist" highlight="7-9,25-27" />

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

@@ -0,0 +1,24 @@
+# Collaborative editing
+
+## Table of Contents
+
+## 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
+
+### WebRTC provider
+
+### Websocket provider
+
+### Add cursors
+
+### Offline support
+
+## Store the content
+
+### Client-only implementation
+
+### Server implementation
+

docs/src/layouts/App/base.scss

@@ -103,13 +103,14 @@ blockquote {
   pre {
     background: rgba($colorBlack, 0.9);
     color: rgba($colorWhite, 0.9);
-    padding: 1rem;
+    padding: 0.75rem 1rem;
     margin: 0.5rem 0;
     border-radius: 0.25rem;
 
     code {
       color: inherit;
       background: none;
+      font-size: 0.8rem;
     }
   }
 

docs/src/links.yaml

@@ -90,9 +90,9 @@
     - title: Use Vue Components
       link: /guide/use-vue-components
       draft: true
-    # - title: Collaborative editing
-    #   link: /guide/use-vue-components
-    #   draft: true
+    - title: Collaborative editing
+      link: /guide/collaborative-editing
+      draft: true
 
 - title: API
   items: