From 80d5c54cb70caf05deaebd1639c5862a57c3993e Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Sat, 26 Sep 2020 11:20:19 +0200
Subject: [PATCH] add render function to the collaboration cursor

---
 .../demos/Examples/Collaboration/style.scss   |  6 +++---
 .../extension-collaboration-cursor/index.ts   | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/Examples/Collaboration/style.scss b/docs/src/demos/Examples/Collaboration/style.scss
index e3431c90..2d7b502b 100644
--- a/docs/src/demos/Examples/Collaboration/style.scss
+++ b/docs/src/demos/Examples/Collaboration/style.scss
@@ -1,12 +1,12 @@
 /* this is a rough fix for the first cursor position when the first paragraph is empty */
-.ProseMirror > .ProseMirror-yjs-cursor:first-child {
+.ProseMirror > .collaboration-cursor:first-child {
   margin-top: 16px;
 }
 .ProseMirror p:first-child, .ProseMirror h1:first-child, .ProseMirror h2:first-child, .ProseMirror h3:first-child, .ProseMirror h4:first-child, .ProseMirror h5:first-child, .ProseMirror h6:first-child {
   margin-top: 16px
 }
 /* This gives the remote user caret. The colors are automatically overwritten*/
-.ProseMirror-yjs-cursor {
+.collaboration-cursor {
   position: relative;
   margin-left: -1px;
   margin-right: -1px;
@@ -16,7 +16,7 @@
   pointer-events: none;
 }
 /* This renders the username above the caret */
-.ProseMirror-yjs-cursor > div {
+.collaboration-cursor > div {
   position: absolute;
   top: -1.05em;
   left: -1px;
diff --git a/packages/extension-collaboration-cursor/index.ts b/packages/extension-collaboration-cursor/index.ts
index cf4ed5e9..287f56fd 100644
--- a/packages/extension-collaboration-cursor/index.ts
+++ b/packages/extension-collaboration-cursor/index.ts
@@ -5,6 +5,7 @@ export interface CollaborationCursorOptions {
   name: string,
   color: string,
   provider: any,
+  render (user: { name: string, color: string }): HTMLElement,
 }
 
 export default new Extension<CollaborationCursorOptions>()
@@ -13,6 +14,18 @@ export default new Extension<CollaborationCursorOptions>()
     provider: null,
     name: 'Someone',
     color: '#cccccc',
+    render: user => {
+      const cursor = document.createElement('span')
+      cursor.classList.add('collaboration-cursor')
+      cursor.setAttribute('style', `border-color: ${user.color}`)
+
+      const label = document.createElement('div')
+      label.setAttribute('style', `background-color: ${user.color}`)
+      label.insertBefore(document.createTextNode(user.name), null)
+      cursor.insertBefore(label, null)
+
+      return cursor
+    },
   })
   .plugins(({ options }) => [
     yCursorPlugin((() => {
@@ -22,6 +35,10 @@ export default new Extension<CollaborationCursorOptions>()
       })
 
       return options.provider.awareness
-    })()),
+    })(),
+    // @ts-ignore
+    {
+      cursorBuilder: options.render,
+    }),
   ])
   .create()