Add support for custom selection builders (#4128)

* Add support for custom cursor builders * Add documentation for selectionRender --------- Co-authored-by: Ben Lewis <[email protected]>
ueberdosis · Aug 3, 2023 · 7cf17d0 · 7cf17d0
1 parent d1e879d
commit 7cf17d0
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/docs/api/extensions/collaboration-cursor.md b/docs/api/extensions/collaboration-cursor.md
@@ -33,6 +33,9 @@ Default: `{ user: null, color: null }`
 ### render
 A render function for the cursor, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) for an example.
 
+### selectionRender
+A render function for the selection, look at [the extension source code](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-collaboration-cursor/) for an example.
+
 ## Commands
 
 ### updateUser()

diff --git a/packages/extension-collaboration-cursor/src/collaboration-cursor.ts b/packages/extension-collaboration-cursor/src/collaboration-cursor.ts
@@ -1,5 +1,6 @@
 import { Extension } from '@tiptap/core'
-import { yCursorPlugin } from 'y-prosemirror'
+import { DecorationAttrs } from 'prosemirror-view'
+import { defaultSelectionBuilder, yCursorPlugin } from 'y-prosemirror'
 
 type CollaborationCursorStorage = {
   users: { clientId: number, [key: string]: any }[],
@@ -9,6 +10,7 @@ export interface CollaborationCursorOptions {
   provider: any,
   user: Record<string, any>,
   render (user: Record<string, any>): HTMLElement,
+  selectionRender (user: Record<string, any>): DecorationAttrs
   /**
    * @deprecated The "onUpdate" option is deprecated. Please use `editor.storage.collaborationCursor.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-cursor
    */
@@ -68,6 +70,7 @@ export const CollaborationCursor = Extension.create<CollaborationCursorOptions,
 
         return cursor
       },
+      selectionRender: defaultSelectionBuilder,
       onUpdate: defaultOnUpdate,
     }
   },
@@ -118,6 +121,7 @@ export const CollaborationCursor = Extension.create<CollaborationCursorOptions,
         // @ts-ignore
         {
           cursorBuilder: this.options.render,
+          selectionBuilder: this.options.selectionRender,
         },
       ),
     ]