add render function to the collaboration cursor

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;

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()