Use the new storage feature for the CollaborationCursor extension (#2096)

* extension-collaboration-cursor: make use of the new storage feature, deprecate users command and onUsers callback, clean up

* docs: update the jobs page
This commit is contained in:
Hans Pagel
2021-10-28 10:00:16 +02:00
committed by GitHub
parent 85cec0d4da
commit b004f1e21d
5 changed files with 54 additions and 38 deletions

View File

@@ -1,10 +1,17 @@
import { Extension } from '@tiptap/core'
import { yCursorPlugin } from 'y-prosemirror'
type CollaborationCursorStorage = {
users: { clientId: number, [key: string]: any }[],
}
export interface CollaborationCursorOptions {
provider: any,
user: Record<string, any>,
render (user: Record<string, any>): HTMLElement,
/**
* @deprecated The "onUpdate" option is deprecated. Please use `editor.storage.collaborationCursor.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-cursor
*/
onUpdate: (users: { clientId: number, [key: string]: any }[]) => null,
}
@@ -14,6 +21,12 @@ declare module '@tiptap/core' {
/**
* Update details of the current user
*/
updateUser: (attributes: Record<string, any>) => ReturnType,
/**
* Update details of the current user
*
* @deprecated The "user" command is deprecated. Please use "updateUser" instead. Read more: https://tiptap.dev/api/extensions/collaboration-cursor
*/
user: (attributes: Record<string, any>) => ReturnType,
}
}
@@ -28,7 +41,9 @@ const awarenessStatesToArray = (states: Map<number, Record<string, any>>) => {
})
}
export const CollaborationCursor = Extension.create<CollaborationCursorOptions>({
const defaultOnUpdate = () => null
export const CollaborationCursor = Extension.create<CollaborationCursorOptions, CollaborationCursorStorage>({
name: 'collaborationCursor',
addOptions() {
@@ -51,19 +66,36 @@ export const CollaborationCursor = Extension.create<CollaborationCursorOptions>(
return cursor
},
onUpdate: () => null,
onUpdate: defaultOnUpdate,
}
},
onCreate() {
if (this.options.onUpdate !== defaultOnUpdate) {
console.warn('[tiptap warn]: DEPRECATED: The "onUpdate" option is deprecated. Please use `editor.storage.collaborationCursor.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-cursor')
}
},
addStorage() {
return {
users: [],
}
},
addCommands() {
return {
user: attributes => () => {
updateUser: attributes => () => {
this.options.user = attributes
this.options.provider.awareness.setLocalStateField('user', this.options.user)
return true
},
user: attributes => ({ editor }) => {
console.warn('[tiptap warn]: DEPRECATED: The "user" command is deprecated. Please use "updateUser" instead. Read more: https://tiptap.dev/api/extensions/collaboration-cursor')
return editor.commands.updateUser(attributes)
},
}
},
@@ -72,22 +104,12 @@ export const CollaborationCursor = Extension.create<CollaborationCursorOptions>(
yCursorPlugin((() => {
this.options.provider.awareness.setLocalStateField('user', this.options.user)
this.options.provider.awareness.on('change', () => {
this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
})
this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states)
this.options.provider.awareness.on('update', () => {
this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states)
})
this.options.provider.on('status', (event: { status: string }) => {
if (event.status === 'connected') {
this.options.provider.awareness.setLocalStateField('user', this.options.user)
}
})
this.options.onUpdate(awarenessStatesToArray(this.options.provider.awareness.states))
return this.options.provider.awareness
})(),
// @ts-ignore