@tiptap/extension-collaboration-caret 3.23.6 → 3.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +33 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +33 -16
- package/dist/index.js.map +1 -1
- package/package.json +27 -28
- package/src/collaboration-caret.ts +44 -20
package/dist/index.cjs
CHANGED
|
@@ -27,12 +27,18 @@ module.exports = __toCommonJS(index_exports);
|
|
|
27
27
|
|
|
28
28
|
// src/collaboration-caret.ts
|
|
29
29
|
var import_core = require("@tiptap/core");
|
|
30
|
+
var import_state = require("@tiptap/pm/state");
|
|
30
31
|
var import_y_tiptap = require("@tiptap/y-tiptap");
|
|
31
32
|
var awarenessStatesToArray = (states) => {
|
|
32
33
|
return Array.from(states.entries()).map(([key, value]) => {
|
|
34
|
+
if (value && value.user) {
|
|
35
|
+
return {
|
|
36
|
+
clientId: key,
|
|
37
|
+
...value.user
|
|
38
|
+
};
|
|
39
|
+
}
|
|
33
40
|
return {
|
|
34
|
-
clientId: key
|
|
35
|
-
...value.user
|
|
41
|
+
clientId: key
|
|
36
42
|
};
|
|
37
43
|
});
|
|
38
44
|
};
|
|
@@ -92,21 +98,32 @@ var CollaborationCaret = import_core.Extension.create({
|
|
|
92
98
|
};
|
|
93
99
|
},
|
|
94
100
|
addProseMirrorPlugins() {
|
|
101
|
+
const { provider } = this.options;
|
|
102
|
+
const storage = this.storage;
|
|
103
|
+
const user = this.options.user;
|
|
104
|
+
const awarenessListenerPlugin = new import_state.Plugin({
|
|
105
|
+
key: new import_state.PluginKey("collaborationCaretAwarenessListener"),
|
|
106
|
+
view: () => {
|
|
107
|
+
const onAwarenessUpdate = () => {
|
|
108
|
+
storage.users = awarenessStatesToArray(provider.awareness.states);
|
|
109
|
+
};
|
|
110
|
+
provider.awareness.setLocalStateField("user", user);
|
|
111
|
+
storage.users = awarenessStatesToArray(provider.awareness.states);
|
|
112
|
+
provider.awareness.on("update", onAwarenessUpdate);
|
|
113
|
+
return {
|
|
114
|
+
destroy: () => {
|
|
115
|
+
provider.awareness.off("update", onAwarenessUpdate);
|
|
116
|
+
storage.users = [];
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
});
|
|
95
121
|
return [
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states);
|
|
102
|
-
});
|
|
103
|
-
return this.options.provider.awareness;
|
|
104
|
-
})(),
|
|
105
|
-
{
|
|
106
|
-
cursorBuilder: this.options.render,
|
|
107
|
-
selectionBuilder: this.options.selectionRender
|
|
108
|
-
}
|
|
109
|
-
)
|
|
122
|
+
awarenessListenerPlugin,
|
|
123
|
+
(0, import_y_tiptap.yCursorPlugin)(provider.awareness, {
|
|
124
|
+
cursorBuilder: this.options.render,
|
|
125
|
+
selectionBuilder: this.options.selectionRender
|
|
126
|
+
})
|
|
110
127
|
];
|
|
111
128
|
}
|
|
112
129
|
});
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/collaboration-caret.ts"],"sourcesContent":["import { CollaborationCaret } from './collaboration-caret.js'\n\nexport * from './collaboration-caret.js'\n\nexport default CollaborationCaret\n","import { Extension } from '@tiptap/core'\nimport type { DecorationAttrs } from '@tiptap/pm/view'\nimport { defaultSelectionBuilder, yCursorPlugin } from '@tiptap/y-tiptap'\n\ntype CollaborationCaretStorage = {\n users: { clientId: number; [key: string]: any }[]\n}\n\nexport interface CollaborationCaretOptions {\n /**\n * The Hocuspocus provider instance. This can also be a TiptapCloudProvider instance.\n * @type {HocuspocusProvider | TiptapCloudProvider}\n * @example new HocuspocusProvider()\n */\n provider: any\n\n /**\n * The user details object – feel free to add properties to this object as needed\n * @example { name: 'John Doe', color: '#305500' }\n */\n user: Record<string, any>\n\n /**\n * A function that returns a DOM element for the cursor.\n * @param user The user details object\n * @example\n * render: user => {\n * const cursor = document.createElement('span')\n * cursor.classList.add('collaboration-carets__caret')\n * cursor.setAttribute('style', `border-color: ${user.color}`)\n *\n * const label = document.createElement('div')\n * label.classList.add('collaboration-carets__label')\n * label.setAttribute('style', `background-color: ${user.color}`)\n * label.insertBefore(document.createTextNode(user.name), null)\n *\n * cursor.insertBefore(label, null)\n * return cursor\n * }\n */\n render(user: Record<string, any>): HTMLElement\n\n /**\n * A function that returns a ProseMirror DecorationAttrs object for the selection.\n * @param user The user details object\n * @example\n * selectionRender: user => {\n * return {\n * nodeName: 'span',\n * class: 'collaboration-carets__selection',\n * style: `background-color: ${user.color}`,\n * 'data-user': user.name,\n * }\n */\n selectionRender(user: Record<string, any>): DecorationAttrs\n\n /**\n * @deprecated The \"onUpdate\" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n onUpdate: (users: { clientId: number; [key: string]: any }[]) => null\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n collaborationCaret: {\n /**\n * Update details of the current user\n * @example editor.commands.updateUser({ name: 'John Doe', color: '#305500' })\n */\n updateUser: (attributes: Record<string, any>) => ReturnType\n /**\n * Update details of the current user\n *\n * @deprecated The \"user\" command is deprecated. Please use \"updateUser\" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n user: (attributes: Record<string, any>) => ReturnType\n }\n }\n\n interface Storage {\n collaborationCaret: CollaborationCaretStorage\n }\n}\n\nconst awarenessStatesToArray = (states: Map<number, Record<string, any
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/collaboration-caret.ts"],"sourcesContent":["import { CollaborationCaret } from './collaboration-caret.js'\n\nexport * from './collaboration-caret.js'\n\nexport default CollaborationCaret\n","import { Extension } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport type { DecorationAttrs } from '@tiptap/pm/view'\nimport { defaultSelectionBuilder, yCursorPlugin } from '@tiptap/y-tiptap'\n\ntype CollaborationCaretStorage = {\n users: { clientId: number; [key: string]: any }[]\n}\n\nexport interface CollaborationCaretOptions {\n /**\n * The Hocuspocus provider instance. This can also be a TiptapCloudProvider instance.\n * @type {HocuspocusProvider | TiptapCloudProvider}\n * @example new HocuspocusProvider()\n */\n provider: any\n\n /**\n * The user details object – feel free to add properties to this object as needed\n * @example { name: 'John Doe', color: '#305500' }\n */\n user: Record<string, any>\n\n /**\n * A function that returns a DOM element for the cursor.\n * @param user The user details object\n * @example\n * render: user => {\n * const cursor = document.createElement('span')\n * cursor.classList.add('collaboration-carets__caret')\n * cursor.setAttribute('style', `border-color: ${user.color}`)\n *\n * const label = document.createElement('div')\n * label.classList.add('collaboration-carets__label')\n * label.setAttribute('style', `background-color: ${user.color}`)\n * label.insertBefore(document.createTextNode(user.name), null)\n *\n * cursor.insertBefore(label, null)\n * return cursor\n * }\n */\n render(user: Record<string, any>): HTMLElement\n\n /**\n * A function that returns a ProseMirror DecorationAttrs object for the selection.\n * @param user The user details object\n * @example\n * selectionRender: user => {\n * return {\n * nodeName: 'span',\n * class: 'collaboration-carets__selection',\n * style: `background-color: ${user.color}`,\n * 'data-user': user.name,\n * }\n */\n selectionRender(user: Record<string, any>): DecorationAttrs\n\n /**\n * @deprecated The \"onUpdate\" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n onUpdate: (users: { clientId: number; [key: string]: any }[]) => null\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n collaborationCaret: {\n /**\n * Update details of the current user\n * @example editor.commands.updateUser({ name: 'John Doe', color: '#305500' })\n */\n updateUser: (attributes: Record<string, any>) => ReturnType\n /**\n * Update details of the current user\n *\n * @deprecated The \"user\" command is deprecated. Please use \"updateUser\" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n user: (attributes: Record<string, any>) => ReturnType\n }\n }\n\n interface Storage {\n collaborationCaret: CollaborationCaretStorage\n }\n}\n\nconst awarenessStatesToArray = (states: Map<number, Record<string, any> | null | undefined>) => {\n return Array.from(states.entries()).map(([key, value]) => {\n if (value && value.user) {\n return {\n clientId: key,\n ...value.user,\n }\n }\n return {\n clientId: key,\n }\n })\n}\n\nconst defaultOnUpdate = () => null\n\n/**\n * This extension allows you to add collaboration carets to your editor.\n * @see https://tiptap.dev/api/extensions/collaboration-caret\n */\nexport const CollaborationCaret = Extension.create<\n CollaborationCaretOptions,\n CollaborationCaretStorage\n>({\n name: 'collaborationCaret',\n\n priority: 999,\n\n addOptions() {\n return {\n provider: null,\n user: {\n name: null,\n color: null,\n },\n render: user => {\n const cursor = document.createElement('span')\n\n cursor.classList.add('collaboration-carets__caret')\n cursor.setAttribute('style', `border-color: ${user.color}`)\n\n const label = document.createElement('div')\n\n label.classList.add('collaboration-carets__label')\n label.setAttribute('style', `background-color: ${user.color}`)\n label.insertBefore(document.createTextNode(user.name), null)\n cursor.insertBefore(label, null)\n\n return cursor\n },\n selectionRender: defaultSelectionBuilder,\n onUpdate: defaultOnUpdate,\n }\n },\n\n onCreate() {\n if (this.options.onUpdate !== defaultOnUpdate) {\n console.warn(\n '[tiptap warn]: DEPRECATED: The \"onUpdate\" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret',\n )\n }\n if (!this.options.provider) {\n throw new Error('The \"provider\" option is required for the CollaborationCaret extension')\n }\n },\n\n addStorage() {\n return {\n users: [],\n }\n },\n\n addCommands() {\n return {\n updateUser: attributes => () => {\n this.options.provider.awareness.setLocalStateField('user', attributes)\n return true\n },\n user:\n attributes =>\n ({ editor }) => {\n console.warn(\n '[tiptap warn]: DEPRECATED: The \"user\" command is deprecated. Please use \"updateUser\" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret',\n )\n\n return editor.commands.updateUser(attributes)\n },\n }\n },\n\n addProseMirrorPlugins() {\n const { provider } = this.options\n const storage = this.storage\n const user = this.options.user\n\n // Owns the awareness 'update' subscription so it's torn down when the editor\n // is destroyed. Without this, the listener would keep the editor reachable\n // from a shared provider's awareness emitter and leak memory across editors.\n const awarenessListenerPlugin = new Plugin({\n key: new PluginKey('collaborationCaretAwarenessListener'),\n view: () => {\n const onAwarenessUpdate = () => {\n storage.users = awarenessStatesToArray(provider.awareness.states)\n }\n\n provider.awareness.setLocalStateField('user', user)\n storage.users = awarenessStatesToArray(provider.awareness.states)\n provider.awareness.on('update', onAwarenessUpdate)\n\n return {\n destroy: () => {\n provider.awareness.off('update', onAwarenessUpdate)\n storage.users = []\n },\n }\n },\n })\n\n return [\n awarenessListenerPlugin,\n yCursorPlugin(provider.awareness, {\n cursorBuilder: this.options.render,\n selectionBuilder: this.options.selectionRender,\n }),\n ]\n },\n})\n"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
// src/collaboration-caret.ts
|
|
2
2
|
import { Extension } from "@tiptap/core";
|
|
3
|
+
import { Plugin, PluginKey } from "@tiptap/pm/state";
|
|
3
4
|
import { defaultSelectionBuilder, yCursorPlugin } from "@tiptap/y-tiptap";
|
|
4
5
|
var awarenessStatesToArray = (states) => {
|
|
5
6
|
return Array.from(states.entries()).map(([key, value]) => {
|
|
7
|
+
if (value && value.user) {
|
|
8
|
+
return {
|
|
9
|
+
clientId: key,
|
|
10
|
+
...value.user
|
|
11
|
+
};
|
|
12
|
+
}
|
|
6
13
|
return {
|
|
7
|
-
clientId: key
|
|
8
|
-
...value.user
|
|
14
|
+
clientId: key
|
|
9
15
|
};
|
|
10
16
|
});
|
|
11
17
|
};
|
|
@@ -65,21 +71,32 @@ var CollaborationCaret = Extension.create({
|
|
|
65
71
|
};
|
|
66
72
|
},
|
|
67
73
|
addProseMirrorPlugins() {
|
|
74
|
+
const { provider } = this.options;
|
|
75
|
+
const storage = this.storage;
|
|
76
|
+
const user = this.options.user;
|
|
77
|
+
const awarenessListenerPlugin = new Plugin({
|
|
78
|
+
key: new PluginKey("collaborationCaretAwarenessListener"),
|
|
79
|
+
view: () => {
|
|
80
|
+
const onAwarenessUpdate = () => {
|
|
81
|
+
storage.users = awarenessStatesToArray(provider.awareness.states);
|
|
82
|
+
};
|
|
83
|
+
provider.awareness.setLocalStateField("user", user);
|
|
84
|
+
storage.users = awarenessStatesToArray(provider.awareness.states);
|
|
85
|
+
provider.awareness.on("update", onAwarenessUpdate);
|
|
86
|
+
return {
|
|
87
|
+
destroy: () => {
|
|
88
|
+
provider.awareness.off("update", onAwarenessUpdate);
|
|
89
|
+
storage.users = [];
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
}
|
|
93
|
+
});
|
|
68
94
|
return [
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
this.storage.users = awarenessStatesToArray(this.options.provider.awareness.states);
|
|
75
|
-
});
|
|
76
|
-
return this.options.provider.awareness;
|
|
77
|
-
})(),
|
|
78
|
-
{
|
|
79
|
-
cursorBuilder: this.options.render,
|
|
80
|
-
selectionBuilder: this.options.selectionRender
|
|
81
|
-
}
|
|
82
|
-
)
|
|
95
|
+
awarenessListenerPlugin,
|
|
96
|
+
yCursorPlugin(provider.awareness, {
|
|
97
|
+
cursorBuilder: this.options.render,
|
|
98
|
+
selectionBuilder: this.options.selectionRender
|
|
99
|
+
})
|
|
83
100
|
];
|
|
84
101
|
}
|
|
85
102
|
});
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/collaboration-caret.ts","../src/index.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\nimport type { DecorationAttrs } from '@tiptap/pm/view'\nimport { defaultSelectionBuilder, yCursorPlugin } from '@tiptap/y-tiptap'\n\ntype CollaborationCaretStorage = {\n users: { clientId: number; [key: string]: any }[]\n}\n\nexport interface CollaborationCaretOptions {\n /**\n * The Hocuspocus provider instance. This can also be a TiptapCloudProvider instance.\n * @type {HocuspocusProvider | TiptapCloudProvider}\n * @example new HocuspocusProvider()\n */\n provider: any\n\n /**\n * The user details object – feel free to add properties to this object as needed\n * @example { name: 'John Doe', color: '#305500' }\n */\n user: Record<string, any>\n\n /**\n * A function that returns a DOM element for the cursor.\n * @param user The user details object\n * @example\n * render: user => {\n * const cursor = document.createElement('span')\n * cursor.classList.add('collaboration-carets__caret')\n * cursor.setAttribute('style', `border-color: ${user.color}`)\n *\n * const label = document.createElement('div')\n * label.classList.add('collaboration-carets__label')\n * label.setAttribute('style', `background-color: ${user.color}`)\n * label.insertBefore(document.createTextNode(user.name), null)\n *\n * cursor.insertBefore(label, null)\n * return cursor\n * }\n */\n render(user: Record<string, any>): HTMLElement\n\n /**\n * A function that returns a ProseMirror DecorationAttrs object for the selection.\n * @param user The user details object\n * @example\n * selectionRender: user => {\n * return {\n * nodeName: 'span',\n * class: 'collaboration-carets__selection',\n * style: `background-color: ${user.color}`,\n * 'data-user': user.name,\n * }\n */\n selectionRender(user: Record<string, any>): DecorationAttrs\n\n /**\n * @deprecated The \"onUpdate\" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n onUpdate: (users: { clientId: number; [key: string]: any }[]) => null\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n collaborationCaret: {\n /**\n * Update details of the current user\n * @example editor.commands.updateUser({ name: 'John Doe', color: '#305500' })\n */\n updateUser: (attributes: Record<string, any>) => ReturnType\n /**\n * Update details of the current user\n *\n * @deprecated The \"user\" command is deprecated. Please use \"updateUser\" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n user: (attributes: Record<string, any>) => ReturnType\n }\n }\n\n interface Storage {\n collaborationCaret: CollaborationCaretStorage\n }\n}\n\nconst awarenessStatesToArray = (states: Map<number, Record<string, any
|
|
1
|
+
{"version":3,"sources":["../src/collaboration-caret.ts","../src/index.ts"],"sourcesContent":["import { Extension } from '@tiptap/core'\nimport { Plugin, PluginKey } from '@tiptap/pm/state'\nimport type { DecorationAttrs } from '@tiptap/pm/view'\nimport { defaultSelectionBuilder, yCursorPlugin } from '@tiptap/y-tiptap'\n\ntype CollaborationCaretStorage = {\n users: { clientId: number; [key: string]: any }[]\n}\n\nexport interface CollaborationCaretOptions {\n /**\n * The Hocuspocus provider instance. This can also be a TiptapCloudProvider instance.\n * @type {HocuspocusProvider | TiptapCloudProvider}\n * @example new HocuspocusProvider()\n */\n provider: any\n\n /**\n * The user details object – feel free to add properties to this object as needed\n * @example { name: 'John Doe', color: '#305500' }\n */\n user: Record<string, any>\n\n /**\n * A function that returns a DOM element for the cursor.\n * @param user The user details object\n * @example\n * render: user => {\n * const cursor = document.createElement('span')\n * cursor.classList.add('collaboration-carets__caret')\n * cursor.setAttribute('style', `border-color: ${user.color}`)\n *\n * const label = document.createElement('div')\n * label.classList.add('collaboration-carets__label')\n * label.setAttribute('style', `background-color: ${user.color}`)\n * label.insertBefore(document.createTextNode(user.name), null)\n *\n * cursor.insertBefore(label, null)\n * return cursor\n * }\n */\n render(user: Record<string, any>): HTMLElement\n\n /**\n * A function that returns a ProseMirror DecorationAttrs object for the selection.\n * @param user The user details object\n * @example\n * selectionRender: user => {\n * return {\n * nodeName: 'span',\n * class: 'collaboration-carets__selection',\n * style: `background-color: ${user.color}`,\n * 'data-user': user.name,\n * }\n */\n selectionRender(user: Record<string, any>): DecorationAttrs\n\n /**\n * @deprecated The \"onUpdate\" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n onUpdate: (users: { clientId: number; [key: string]: any }[]) => null\n}\n\ndeclare module '@tiptap/core' {\n interface Commands<ReturnType> {\n collaborationCaret: {\n /**\n * Update details of the current user\n * @example editor.commands.updateUser({ name: 'John Doe', color: '#305500' })\n */\n updateUser: (attributes: Record<string, any>) => ReturnType\n /**\n * Update details of the current user\n *\n * @deprecated The \"user\" command is deprecated. Please use \"updateUser\" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret\n */\n user: (attributes: Record<string, any>) => ReturnType\n }\n }\n\n interface Storage {\n collaborationCaret: CollaborationCaretStorage\n }\n}\n\nconst awarenessStatesToArray = (states: Map<number, Record<string, any> | null | undefined>) => {\n return Array.from(states.entries()).map(([key, value]) => {\n if (value && value.user) {\n return {\n clientId: key,\n ...value.user,\n }\n }\n return {\n clientId: key,\n }\n })\n}\n\nconst defaultOnUpdate = () => null\n\n/**\n * This extension allows you to add collaboration carets to your editor.\n * @see https://tiptap.dev/api/extensions/collaboration-caret\n */\nexport const CollaborationCaret = Extension.create<\n CollaborationCaretOptions,\n CollaborationCaretStorage\n>({\n name: 'collaborationCaret',\n\n priority: 999,\n\n addOptions() {\n return {\n provider: null,\n user: {\n name: null,\n color: null,\n },\n render: user => {\n const cursor = document.createElement('span')\n\n cursor.classList.add('collaboration-carets__caret')\n cursor.setAttribute('style', `border-color: ${user.color}`)\n\n const label = document.createElement('div')\n\n label.classList.add('collaboration-carets__label')\n label.setAttribute('style', `background-color: ${user.color}`)\n label.insertBefore(document.createTextNode(user.name), null)\n cursor.insertBefore(label, null)\n\n return cursor\n },\n selectionRender: defaultSelectionBuilder,\n onUpdate: defaultOnUpdate,\n }\n },\n\n onCreate() {\n if (this.options.onUpdate !== defaultOnUpdate) {\n console.warn(\n '[tiptap warn]: DEPRECATED: The \"onUpdate\" option is deprecated. Please use `editor.storage.collaborationCaret.users` instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret',\n )\n }\n if (!this.options.provider) {\n throw new Error('The \"provider\" option is required for the CollaborationCaret extension')\n }\n },\n\n addStorage() {\n return {\n users: [],\n }\n },\n\n addCommands() {\n return {\n updateUser: attributes => () => {\n this.options.provider.awareness.setLocalStateField('user', attributes)\n return true\n },\n user:\n attributes =>\n ({ editor }) => {\n console.warn(\n '[tiptap warn]: DEPRECATED: The \"user\" command is deprecated. Please use \"updateUser\" instead. Read more: https://tiptap.dev/api/extensions/collaboration-caret',\n )\n\n return editor.commands.updateUser(attributes)\n },\n }\n },\n\n addProseMirrorPlugins() {\n const { provider } = this.options\n const storage = this.storage\n const user = this.options.user\n\n // Owns the awareness 'update' subscription so it's torn down when the editor\n // is destroyed. Without this, the listener would keep the editor reachable\n // from a shared provider's awareness emitter and leak memory across editors.\n const awarenessListenerPlugin = new Plugin({\n key: new PluginKey('collaborationCaretAwarenessListener'),\n view: () => {\n const onAwarenessUpdate = () => {\n storage.users = awarenessStatesToArray(provider.awareness.states)\n }\n\n provider.awareness.setLocalStateField('user', user)\n storage.users = awarenessStatesToArray(provider.awareness.states)\n provider.awareness.on('update', onAwarenessUpdate)\n\n return {\n destroy: () => {\n provider.awareness.off('update', onAwarenessUpdate)\n storage.users = []\n },\n }\n },\n })\n\n return [\n awarenessListenerPlugin,\n yCursorPlugin(provider.awareness, {\n cursorBuilder: this.options.render,\n selectionBuilder: this.options.selectionRender,\n }),\n ]\n },\n})\n","import { CollaborationCaret } from './collaboration-caret.js'\n\nexport * from './collaboration-caret.js'\n\nexport default CollaborationCaret\n"],"mappings":";AAAA,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,iBAAiB;AAElC,SAAS,yBAAyB,qBAAqB;AAkFvD,IAAM,yBAAyB,CAAC,WAAgE;AAC9F,SAAO,MAAM,KAAK,OAAO,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AACxD,QAAI,SAAS,MAAM,MAAM;AACvB,aAAO;AAAA,QACL,UAAU;AAAA,QACV,GAAG,MAAM;AAAA,MACX;AAAA,IACF;AACA,WAAO;AAAA,MACL,UAAU;AAAA,IACZ;AAAA,EACF,CAAC;AACH;AAEA,IAAM,kBAAkB,MAAM;AAMvB,IAAM,qBAAqB,UAAU,OAG1C;AAAA,EACA,MAAM;AAAA,EAEN,UAAU;AAAA,EAEV,aAAa;AACX,WAAO;AAAA,MACL,UAAU;AAAA,MACV,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ,UAAQ;AACd,cAAM,SAAS,SAAS,cAAc,MAAM;AAE5C,eAAO,UAAU,IAAI,6BAA6B;AAClD,eAAO,aAAa,SAAS,iBAAiB,KAAK,KAAK,EAAE;AAE1D,cAAM,QAAQ,SAAS,cAAc,KAAK;AAE1C,cAAM,UAAU,IAAI,6BAA6B;AACjD,cAAM,aAAa,SAAS,qBAAqB,KAAK,KAAK,EAAE;AAC7D,cAAM,aAAa,SAAS,eAAe,KAAK,IAAI,GAAG,IAAI;AAC3D,eAAO,aAAa,OAAO,IAAI;AAE/B,eAAO;AAAA,MACT;AAAA,MACA,iBAAiB;AAAA,MACjB,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EAEA,WAAW;AACT,QAAI,KAAK,QAAQ,aAAa,iBAAiB;AAC7C,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AACA,QAAI,CAAC,KAAK,QAAQ,UAAU;AAC1B,YAAM,IAAI,MAAM,wEAAwE;AAAA,IAC1F;AAAA,EACF;AAAA,EAEA,aAAa;AACX,WAAO;AAAA,MACL,OAAO,CAAC;AAAA,IACV;AAAA,EACF;AAAA,EAEA,cAAc;AACZ,WAAO;AAAA,MACL,YAAY,gBAAc,MAAM;AAC9B,aAAK,QAAQ,SAAS,UAAU,mBAAmB,QAAQ,UAAU;AACrE,eAAO;AAAA,MACT;AAAA,MACA,MACE,gBACA,CAAC,EAAE,OAAO,MAAM;AACd,gBAAQ;AAAA,UACN;AAAA,QACF;AAEA,eAAO,OAAO,SAAS,WAAW,UAAU;AAAA,MAC9C;AAAA,IACJ;AAAA,EACF;AAAA,EAEA,wBAAwB;AACtB,UAAM,EAAE,SAAS,IAAI,KAAK;AAC1B,UAAM,UAAU,KAAK;AACrB,UAAM,OAAO,KAAK,QAAQ;AAK1B,UAAM,0BAA0B,IAAI,OAAO;AAAA,MACzC,KAAK,IAAI,UAAU,qCAAqC;AAAA,MACxD,MAAM,MAAM;AACV,cAAM,oBAAoB,MAAM;AAC9B,kBAAQ,QAAQ,uBAAuB,SAAS,UAAU,MAAM;AAAA,QAClE;AAEA,iBAAS,UAAU,mBAAmB,QAAQ,IAAI;AAClD,gBAAQ,QAAQ,uBAAuB,SAAS,UAAU,MAAM;AAChE,iBAAS,UAAU,GAAG,UAAU,iBAAiB;AAEjD,eAAO;AAAA,UACL,SAAS,MAAM;AACb,qBAAS,UAAU,IAAI,UAAU,iBAAiB;AAClD,oBAAQ,QAAQ,CAAC;AAAA,UACnB;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO;AAAA,MACL;AAAA,MACA,cAAc,SAAS,WAAW;AAAA,QAChC,eAAe,KAAK,QAAQ;AAAA,QAC5B,kBAAkB,KAAK,QAAQ;AAAA,MACjC,CAAC;AAAA,IACH;AAAA,EACF;AACF,CAAC;;;AC/MD,IAAO,gBAAQ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,18 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-collaboration-caret",
|
|
3
|
+
"version": "3.25.0",
|
|
3
4
|
"description": "collaboration caret extension for tiptap",
|
|
4
|
-
"version": "3.23.6",
|
|
5
|
-
"homepage": "https://tiptap.dev",
|
|
6
5
|
"keywords": [
|
|
7
6
|
"tiptap",
|
|
8
7
|
"tiptap extension"
|
|
9
8
|
],
|
|
9
|
+
"homepage": "https://tiptap.dev",
|
|
10
10
|
"license": "MIT",
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "https://github.com/ueberdosis/tiptap",
|
|
14
|
+
"directory": "packages/extension-collaboration-caret"
|
|
15
|
+
},
|
|
11
16
|
"funding": {
|
|
12
17
|
"type": "github",
|
|
13
18
|
"url": "https://github.com/sponsors/ueberdosis"
|
|
14
19
|
},
|
|
20
|
+
"files": [
|
|
21
|
+
"src",
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
15
24
|
"type": "module",
|
|
25
|
+
"main": "dist/index.cjs",
|
|
26
|
+
"module": "dist/index.js",
|
|
27
|
+
"types": "dist/index.d.ts",
|
|
16
28
|
"exports": {
|
|
17
29
|
".": {
|
|
18
30
|
"types": {
|
|
@@ -23,39 +35,26 @@
|
|
|
23
35
|
"require": "./dist/index.cjs"
|
|
24
36
|
}
|
|
25
37
|
},
|
|
26
|
-
"main": "dist/index.cjs",
|
|
27
|
-
"module": "dist/index.js",
|
|
28
|
-
"types": "dist/index.d.ts",
|
|
29
|
-
"files": [
|
|
30
|
-
"src",
|
|
31
|
-
"dist"
|
|
32
|
-
],
|
|
33
38
|
"devDependencies": {
|
|
34
39
|
"@tiptap/y-tiptap": "^3.0.2",
|
|
35
40
|
"yjs": "^13.6.23",
|
|
36
|
-
"@tiptap/core": "^3.
|
|
37
|
-
"@tiptap/extension-collaboration": "^3.
|
|
38
|
-
"@tiptap/extension-document": "^3.
|
|
39
|
-
"@tiptap/extension-
|
|
40
|
-
"@tiptap/extension-
|
|
41
|
-
"@tiptap/extension-table-cell": "^3.
|
|
42
|
-
"@tiptap/extension-table-header": "^3.
|
|
43
|
-
"@tiptap/extension-
|
|
44
|
-
"@tiptap/extension-
|
|
45
|
-
"@tiptap/pm": "^3.
|
|
41
|
+
"@tiptap/core": "^3.25.0",
|
|
42
|
+
"@tiptap/extension-collaboration": "^3.25.0",
|
|
43
|
+
"@tiptap/extension-document": "^3.25.0",
|
|
44
|
+
"@tiptap/extension-paragraph": "^3.25.0",
|
|
45
|
+
"@tiptap/extension-table": "^3.25.0",
|
|
46
|
+
"@tiptap/extension-table-cell": "^3.25.0",
|
|
47
|
+
"@tiptap/extension-table-header": "^3.25.0",
|
|
48
|
+
"@tiptap/extension-table-row": "^3.25.0",
|
|
49
|
+
"@tiptap/extension-text": "^3.25.0",
|
|
50
|
+
"@tiptap/pm": "^3.25.0"
|
|
46
51
|
},
|
|
47
52
|
"peerDependencies": {
|
|
48
53
|
"@tiptap/y-tiptap": "^3.0.2",
|
|
49
|
-
"@tiptap/core": "3.
|
|
50
|
-
"@tiptap/pm": "3.
|
|
51
|
-
},
|
|
52
|
-
"repository": {
|
|
53
|
-
"type": "git",
|
|
54
|
-
"url": "https://github.com/ueberdosis/tiptap",
|
|
55
|
-
"directory": "packages/extension-collaboration-caret"
|
|
54
|
+
"@tiptap/core": "3.25.0",
|
|
55
|
+
"@tiptap/pm": "3.25.0"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
|
-
"build": "tsup"
|
|
59
|
-
"lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
|
|
58
|
+
"build": "tsup"
|
|
60
59
|
}
|
|
61
60
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { Extension } from '@tiptap/core'
|
|
2
|
+
import { Plugin, PluginKey } from '@tiptap/pm/state'
|
|
2
3
|
import type { DecorationAttrs } from '@tiptap/pm/view'
|
|
3
4
|
import { defaultSelectionBuilder, yCursorPlugin } from '@tiptap/y-tiptap'
|
|
4
5
|
|
|
@@ -82,11 +83,16 @@ declare module '@tiptap/core' {
|
|
|
82
83
|
}
|
|
83
84
|
}
|
|
84
85
|
|
|
85
|
-
const awarenessStatesToArray = (states: Map<number, Record<string, any
|
|
86
|
+
const awarenessStatesToArray = (states: Map<number, Record<string, any> | null | undefined>) => {
|
|
86
87
|
return Array.from(states.entries()).map(([key, value]) => {
|
|
88
|
+
if (value && value.user) {
|
|
89
|
+
return {
|
|
90
|
+
clientId: key,
|
|
91
|
+
...value.user,
|
|
92
|
+
}
|
|
93
|
+
}
|
|
87
94
|
return {
|
|
88
95
|
clientId: key,
|
|
89
|
-
...value.user,
|
|
90
96
|
}
|
|
91
97
|
})
|
|
92
98
|
}
|
|
@@ -97,7 +103,10 @@ const defaultOnUpdate = () => null
|
|
|
97
103
|
* This extension allows you to add collaboration carets to your editor.
|
|
98
104
|
* @see https://tiptap.dev/api/extensions/collaboration-caret
|
|
99
105
|
*/
|
|
100
|
-
export const CollaborationCaret = Extension.create<
|
|
106
|
+
export const CollaborationCaret = Extension.create<
|
|
107
|
+
CollaborationCaretOptions,
|
|
108
|
+
CollaborationCaretStorage
|
|
109
|
+
>({
|
|
101
110
|
name: 'collaborationCaret',
|
|
102
111
|
|
|
103
112
|
priority: 999,
|
|
@@ -165,24 +174,39 @@ export const CollaborationCaret = Extension.create<CollaborationCaretOptions, Co
|
|
|
165
174
|
},
|
|
166
175
|
|
|
167
176
|
addProseMirrorPlugins() {
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
177
|
+
const { provider } = this.options
|
|
178
|
+
const storage = this.storage
|
|
179
|
+
const user = this.options.user
|
|
180
|
+
|
|
181
|
+
// Owns the awareness 'update' subscription so it's torn down when the editor
|
|
182
|
+
// is destroyed. Without this, the listener would keep the editor reachable
|
|
183
|
+
// from a shared provider's awareness emitter and leak memory across editors.
|
|
184
|
+
const awarenessListenerPlugin = new Plugin({
|
|
185
|
+
key: new PluginKey('collaborationCaretAwarenessListener'),
|
|
186
|
+
view: () => {
|
|
187
|
+
const onAwarenessUpdate = () => {
|
|
188
|
+
storage.users = awarenessStatesToArray(provider.awareness.states)
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
provider.awareness.setLocalStateField('user', user)
|
|
192
|
+
storage.users = awarenessStatesToArray(provider.awareness.states)
|
|
193
|
+
provider.awareness.on('update', onAwarenessUpdate)
|
|
194
|
+
|
|
195
|
+
return {
|
|
196
|
+
destroy: () => {
|
|
197
|
+
provider.awareness.off('update', onAwarenessUpdate)
|
|
198
|
+
storage.users = []
|
|
199
|
+
},
|
|
200
|
+
}
|
|
201
|
+
},
|
|
202
|
+
})
|
|
178
203
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
),
|
|
204
|
+
return [
|
|
205
|
+
awarenessListenerPlugin,
|
|
206
|
+
yCursorPlugin(provider.awareness, {
|
|
207
|
+
cursorBuilder: this.options.render,
|
|
208
|
+
selectionBuilder: this.options.selectionRender,
|
|
209
|
+
}),
|
|
186
210
|
]
|
|
187
211
|
},
|
|
188
212
|
})
|