add render function to the collaboration cursor

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