From c44c30dc500735905fe01da8f503e98e5ce22621 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Sat, 26 Sep 2020 14:17:51 +0200
Subject: [PATCH] add number of connected users

---
 .../src/demos/Examples/Collaboration/index.vue | 12 +++++++++++-
 .../demos/Examples/Collaboration/style.scss    | 18 ++++++++++++++++++
 docs/src/docPages/examples/collaboration.md    |  2 ++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/docs/src/demos/Examples/Collaboration/index.vue b/docs/src/demos/Examples/Collaboration/index.vue
index 112c8e78..6874f4c5 100644
--- a/docs/src/demos/Examples/Collaboration/index.vue
+++ b/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.
diff --git a/docs/src/demos/Examples/Collaboration/style.scss b/docs/src/demos/Examples/Collaboration/style.scss
index 2d7b502b..45408c84 100644
--- a/docs/src/demos/Examples/Collaboration/style.scss
+++ b/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;
diff --git a/docs/src/docPages/examples/collaboration.md b/docs/src/docPages/examples/collaboration.md
index 97e86848..8e2f57ae 100644
--- a/docs/src/docPages/examples/collaboration.md
+++ b/docs/src/docPages/examples/collaboration.md
@@ -1,5 +1,7 @@
 # Collaboration
 
+The content of this editor is shared with every users that opens that example.
+
 <!-- <demo name="Examples/Collaboration" :show-source="false"/> -->
 
 <demo name="Examples/Collaboration" />