add number of connected users

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

@@ -1,5 +1,11 @@
 <template>
-  <editor-content :editor="editor" />
+  <div>
+    <editor-content :editor="editor" />
+
+    <div class="collaboration-status">
+      {{ numberOfConnectedUsers }} user{{ numberOfConnectedUsers === 1 ? '' : 's' }}
+    </div>
+  </div>
 </template>
 
 <script>
@@ -22,6 +28,7 @@ export default {
       ydoc: null,
       provider: null,
       type: null,
+      numberOfConnectedUsers: 0,
       editor: null,
     }
   },
@@ -30,6 +37,9 @@ export default {
     this.ydoc = new Y.Doc()
     this.provider = new WebrtcProvider('example', this.ydoc)
     this.type = this.ydoc.getXmlFragment('prosemirror')
+    this.provider.on('peers', ({ bcPeers, webrtcPeers }) => {
+      this.numberOfConnectedUsers = bcPeers.length + webrtcPeers.length
+    })
 
     this.editor = new Editor({
       // TODO: This is added by every new user.

docs/src/demos/Examples/Collaboration/style.scss

@@ -1,3 +1,21 @@
+.collaboration-status {
+  background: #eee;
+  color: #666;
+  border-radius: 5px;
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+
+  &::before {
+    content: ' ';
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: green;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+  }
+}
+
 /* this is a rough fix for the first cursor position when the first paragraph is empty */
 .ProseMirror > .collaboration-cursor:first-child {
   margin-top: 16px;