@atlaskit/editor-plugin-collab-edit 2.0.2 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-collab-edit
 
+## 2.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.1.0
+
+### Minor Changes
+
+- [#98820](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98820)
+  [`9f7dc3ba5d256`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f7dc3ba5d256) -
+  [ux] Update the potential list of colors for avatar badges and telepointers within the editor.
+  Also add support for using presenceId over sessionId, when presenceId exists, in order to make the
+  avatar badge and telepointer color selection.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/cjs/pm-plugins/events/initialize.js

@@ -39,6 +39,7 @@ var initialize = exports.initialize = function initialize(_ref) {
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     pluginInjectionApi = _ref.pluginInjectionApi;
   return function (provider) {
+    // eslint-disable-next-line prefer-const
     var cleanup;
     var pluginState = _pluginKey.pluginKey.getState(view.state);
     if (pluginState !== null && pluginState !== void 0 && pluginState.isReady && cleanup) {

package/dist/cjs/pm-plugins/main/plugin-state.js

@@ -66,10 +66,19 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
       var participant = this.participants.get(sessionId);
       return participant ? participant.name.substring(0, 1).toUpperCase() : 'X';
     }
+  }, {
+    key: "getPresenceId",
+    value: function getPresenceId(sessionId) {
+      var _participant$presence;
+      var participant = this.participants.get(sessionId);
+      return (_participant$presence = participant === null || participant === void 0 ? void 0 : participant.presenceId) !== null && _participant$presence !== void 0 ? _participant$presence : sessionId;
+    }
   }, {
     key: "apply",
     value: function apply(tr) {
       var _this = this;
+      // Ignored via go/ees005
+      // eslint-disable-next-line prefer-const
       var participants = this.participants,
         sid = this.sid,
         isReady = this.isReady;
@@ -106,7 +115,7 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
       if (telepointerData) {
         var sessionId = telepointerData.sessionId;
         if (participants.get(sessionId) && sessionId !== sid) {
-          var oldPointers = (0, _utils.findPointers)(telepointerData.sessionId, this.decorationSet);
+          var oldPointers = (0, _utils.findPointers)(sessionId, this.decorationSet);
           if (oldPointers) {
             remove = remove.concat(oldPointers);
           }
@@ -130,7 +139,7 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
           } catch (err) {
             this.onError(err);
           }
-          add = add.concat((0, _utils.createTelepointers)(from, to, sessionId, isSelection, this.getInitial(sessionId)));
+          add = add.concat((0, _utils.createTelepointers)(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId)));
         }
       }
       if (tr.docChanged) {
@@ -142,12 +151,14 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
               if (spec.pointer && spec.pointer.sessionId && spec.key === "telepointer-".concat(spec.pointer.sessionId)) {
                 var step = tr.steps.filter(_utils.isReplaceStep)[0];
                 if (step) {
-                  var _sessionId = spec.pointer.sessionId;
+                  var _spec$pointer = spec.pointer,
+                    _sessionId = _spec$pointer.sessionId,
+                    presenceId = _spec$pointer.presenceId;
                   var _ref = step,
                     size = _ref.slice.content.size,
                     _from = _ref.from;
                   var pos = getValidPos(tr, size ? Math.min(_from + size, tr.doc.nodeSize - 3) : Math.max(_from, 1));
-                  add = add.concat((0, _utils.createTelepointers)(pos, pos, _sessionId, false, _this.getInitial(_sessionId)));
+                  add = add.concat((0, _utils.createTelepointers)(pos, pos, _sessionId, false, _this.getInitial(_sessionId), presenceId));
                 }
               }
             }

package/dist/cjs/pm-plugins/utils.js

@@ -15,7 +15,7 @@ var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _view = require("@atlaskit/editor-prosemirror/view");
-var _consts = require("@atlaskit/editor-shared-styles/consts");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var findPointers = exports.findPointers = function findPointers(id, decorations) {
   return decorations.find()
@@ -30,25 +30,19 @@ function style(options) {
   return "border-right: 2px solid ".concat(color, "; margin-right: -2px;");
 }
 function getAvatarColor(str) {
-  var hash = 0;
-  for (var i = 0; i < str.length; i++) {
-    /* eslint-disable no-bitwise */
-    hash = (hash << 5) - hash + str.charCodeAt(i);
-    hash = hash & hash;
-    /* eslint-enable no-bitwise */
-  }
-  var index = Math.abs(hash) % _consts.avatarColors.length;
+  var participantColor = (0, _editorSharedStyles.getParticipantColor)(str);
   return {
-    index: index,
-    color: _consts.avatarColors[index]
+    index: participantColor.index,
+    backgroundColor: participantColor.color.backgroundColor,
+    textColor: participantColor.color.textColor
   };
 }
-var createTelepointers = exports.createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial
+var createTelepointers = exports.createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
 ) {
   var decorations = [];
-  var avatarColor = getAvatarColor(sessionId);
+  var avatarColor = getAvatarColor(presenceId);
   var color = avatarColor.index.toString();
   if (isSelection) {
     var className = "telepointer color-".concat(color, " telepointer-selection");
@@ -60,7 +54,8 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
       'data-initial': initial
     }, {
       pointer: {
-        sessionId: sessionId
+        sessionId: sessionId,
+        presenceId: presenceId
       }
     }));
   }
@@ -72,7 +67,7 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
   cursor.textContent = _whitespace.ZERO_WIDTH_JOINER;
   cursor.className = "telepointer color-".concat(color, " telepointer-selection-badge");
   cursor.style.cssText = "".concat(style({
-    color: avatarColor.color
+    color: avatarColor.backgroundColor
   }), ";");
   cursor.setAttribute('data-initial', initial);
   return decorations.concat(
@@ -80,7 +75,8 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _view.Decoration.widget(to, spaceJoinerAfter, {
     pointer: {
-      sessionId: sessionId
+      sessionId: sessionId,
+      presenceId: presenceId
     },
     key: "telepointer-".concat(sessionId, "-zero")
   })).concat(
@@ -88,7 +84,8 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _view.Decoration.widget(to, cursor, {
     pointer: {
-      sessionId: sessionId
+      sessionId: sessionId,
+      presenceId: presenceId
     },
     key: "telepointer-".concat(sessionId)
   })).concat(
@@ -96,7 +93,8 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _view.Decoration.widget(to, spaceJoinerBefore, {
     pointer: {
-      sessionId: sessionId
+      sessionId: sessionId,
+      presenceId: presenceId
     },
     key: "telepointer-".concat(sessionId, "-zero")
   }));

package/dist/es2019/pm-plugins/events/initialize.js

@@ -26,6 +26,7 @@ export const initialize = ({
   editorAnalyticsApi,
   pluginInjectionApi
 }) => provider => {
+  // eslint-disable-next-line prefer-const
   let cleanup;
   const pluginState = pluginKey.getState(view.state);
   if (pluginState !== null && pluginState !== void 0 && pluginState.isReady && cleanup) {

package/dist/es2019/pm-plugins/main/index.js

@@ -16,7 +16,7 @@ import { pluginKey } from './plugin-key';
 import { PluginState } from './plugin-state';
 const enforceCustomStepRegisters = () => {
   const tryToRegisterStep = obj => {
-    for (let customStep of Object.values(obj)) {
+    for (const customStep of Object.values(obj)) {
       var _customStep$prototype;
       // I know this seems awful
       // But unfortunate ProseMirror does not expose the jsonID property p

package/dist/es2019/pm-plugins/main/plugin-state.js

@@ -46,7 +46,14 @@ export class PluginState {
     const participant = this.participants.get(sessionId);
     return participant ? participant.name.substring(0, 1).toUpperCase() : 'X';
   }
+  getPresenceId(sessionId) {
+    var _participant$presence;
+    const participant = this.participants.get(sessionId);
+    return (_participant$presence = participant === null || participant === void 0 ? void 0 : participant.presenceId) !== null && _participant$presence !== void 0 ? _participant$presence : sessionId;
+  }
   apply(tr) {
+    // Ignored via go/ees005
+    // eslint-disable-next-line prefer-const
     let {
       participants,
       sid,
@@ -85,7 +92,7 @@ export class PluginState {
         sessionId
       } = telepointerData;
       if (participants.get(sessionId) && sessionId !== sid) {
-        const oldPointers = findPointers(telepointerData.sessionId, this.decorationSet);
+        const oldPointers = findPointers(sessionId, this.decorationSet);
         if (oldPointers) {
           remove = remove.concat(oldPointers);
         }
@@ -109,7 +116,7 @@ export class PluginState {
         } catch (err) {
           this.onError(err);
         }
-        add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId)));
+        add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId)));
       }
     }
     if (tr.docChanged) {
@@ -122,7 +129,8 @@ export class PluginState {
               const step = tr.steps.filter(isReplaceStep)[0];
               if (step) {
                 const {
-                  sessionId
+                  sessionId,
+                  presenceId
                 } = spec.pointer;
                 const {
                   slice: {
@@ -135,7 +143,7 @@ export class PluginState {
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 } = step;
                 const pos = getValidPos(tr, size ? Math.min(from + size, tr.doc.nodeSize - 3) : Math.max(from, 1));
-                add = add.concat(createTelepointers(pos, pos, sessionId, false, this.getInitial(sessionId)));
+                add = add.concat(createTelepointers(pos, pos, sessionId, false, this.getInitial(sessionId), presenceId));
               }
             }
           }

package/dist/es2019/pm-plugins/track-steps.js

@@ -83,7 +83,7 @@ export const groupSteps = sanitizedSteps => {
  */
 export const task = (cache, onTrackDataProcessed) => {
   const stepsMetadata = [];
-  for (let entry of cache.values()) {
+  for (const entry of cache.values()) {
     const {
       startedAt,
       endedAt,

package/dist/es2019/pm-plugins/utils.js

@@ -5,7 +5,7 @@ import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import { Transaction, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { avatarColors } from '@atlaskit/editor-shared-styles/consts';
+import { getParticipantColor } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 export const findPointers = (id, decorations) => decorations.find()
 // Ignored via go/ees005
@@ -16,25 +16,19 @@ function style(options) {
   return `border-right: 2px solid ${color}; margin-right: -2px;`;
 }
 export function getAvatarColor(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    /* eslint-disable no-bitwise */
-    hash = (hash << 5) - hash + str.charCodeAt(i);
-    hash = hash & hash;
-    /* eslint-enable no-bitwise */
-  }
-  const index = Math.abs(hash) % avatarColors.length;
+  const participantColor = getParticipantColor(str);
   return {
-    index,
-    color: avatarColors[index]
+    index: participantColor.index,
+    backgroundColor: participantColor.color.backgroundColor,
+    textColor: participantColor.color.textColor
   };
 }
-export const createTelepointers = (from, to, sessionId, isSelection, initial
+export const createTelepointers = (from, to, sessionId, isSelection, initial, presenceId
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
 ) => {
-  let decorations = [];
-  const avatarColor = getAvatarColor(sessionId);
+  const decorations = [];
+  const avatarColor = getAvatarColor(presenceId);
   const color = avatarColor.index.toString();
   if (isSelection) {
     const className = `telepointer color-${color} telepointer-selection`;
@@ -46,7 +40,8 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial
       'data-initial': initial
     }, {
       pointer: {
-        sessionId
+        sessionId,
+        presenceId
       }
     }));
   }
@@ -58,7 +53,7 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial
   cursor.textContent = ZERO_WIDTH_JOINER;
   cursor.className = `telepointer color-${color} telepointer-selection-badge`;
   cursor.style.cssText = `${style({
-    color: avatarColor.color
+    color: avatarColor.backgroundColor
   })};`;
   cursor.setAttribute('data-initial', initial);
   return decorations.concat(
@@ -66,7 +61,8 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Decoration.widget(to, spaceJoinerAfter, {
     pointer: {
-      sessionId
+      sessionId,
+      presenceId
     },
     key: `telepointer-${sessionId}-zero`
   })).concat(
@@ -74,7 +70,8 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Decoration.widget(to, cursor, {
     pointer: {
-      sessionId
+      sessionId,
+      presenceId
     },
     key: `telepointer-${sessionId}`
   })).concat(
@@ -82,7 +79,8 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Decoration.widget(to, spaceJoinerBefore, {
     pointer: {
-      sessionId
+      sessionId,
+      presenceId
     },
     key: `telepointer-${sessionId}-zero`
   }));
@@ -145,7 +143,7 @@ export const scrollToCollabCursor = (editorView, participants, sessionId, index,
     const {
       state
     } = editorView;
-    let tr = state.tr;
+    const tr = state.tr;
     const analyticsPayload = {
       action: ACTION.MATCHED,
       actionSubject: ACTION_SUBJECT.SELECTION,

package/dist/esm/pm-plugins/events/initialize.js

@@ -32,6 +32,7 @@ export var initialize = function initialize(_ref) {
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     pluginInjectionApi = _ref.pluginInjectionApi;
   return function (provider) {
+    // eslint-disable-next-line prefer-const
     var cleanup;
     var pluginState = pluginKey.getState(view.state);
     if (pluginState !== null && pluginState !== void 0 && pluginState.isReady && cleanup) {

package/dist/esm/pm-plugins/main/plugin-state.js

@@ -60,10 +60,19 @@ export var PluginState = /*#__PURE__*/function () {
       var participant = this.participants.get(sessionId);
       return participant ? participant.name.substring(0, 1).toUpperCase() : 'X';
     }
+  }, {
+    key: "getPresenceId",
+    value: function getPresenceId(sessionId) {
+      var _participant$presence;
+      var participant = this.participants.get(sessionId);
+      return (_participant$presence = participant === null || participant === void 0 ? void 0 : participant.presenceId) !== null && _participant$presence !== void 0 ? _participant$presence : sessionId;
+    }
   }, {
     key: "apply",
     value: function apply(tr) {
       var _this = this;
+      // Ignored via go/ees005
+      // eslint-disable-next-line prefer-const
       var participants = this.participants,
         sid = this.sid,
         isReady = this.isReady;
@@ -100,7 +109,7 @@ export var PluginState = /*#__PURE__*/function () {
       if (telepointerData) {
         var sessionId = telepointerData.sessionId;
         if (participants.get(sessionId) && sessionId !== sid) {
-          var oldPointers = findPointers(telepointerData.sessionId, this.decorationSet);
+          var oldPointers = findPointers(sessionId, this.decorationSet);
           if (oldPointers) {
             remove = remove.concat(oldPointers);
           }
@@ -124,7 +133,7 @@ export var PluginState = /*#__PURE__*/function () {
           } catch (err) {
             this.onError(err);
           }
-          add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId)));
+          add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId)));
         }
       }
       if (tr.docChanged) {
@@ -136,12 +145,14 @@ export var PluginState = /*#__PURE__*/function () {
               if (spec.pointer && spec.pointer.sessionId && spec.key === "telepointer-".concat(spec.pointer.sessionId)) {
                 var step = tr.steps.filter(isReplaceStep)[0];
                 if (step) {
-                  var _sessionId = spec.pointer.sessionId;
+                  var _spec$pointer = spec.pointer,
+                    _sessionId = _spec$pointer.sessionId,
+                    presenceId = _spec$pointer.presenceId;
                   var _ref = step,
                     size = _ref.slice.content.size,
                     _from = _ref.from;
                   var pos = getValidPos(tr, size ? Math.min(_from + size, tr.doc.nodeSize - 3) : Math.max(_from, 1));
-                  add = add.concat(createTelepointers(pos, pos, _sessionId, false, _this.getInitial(_sessionId)));
+                  add = add.concat(createTelepointers(pos, pos, _sessionId, false, _this.getInitial(_sessionId), presenceId));
                 }
               }
             }

package/dist/esm/pm-plugins/utils.js

@@ -6,7 +6,7 @@ import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import { Transaction, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { avatarColors } from '@atlaskit/editor-shared-styles/consts';
+import { getParticipantColor } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 export var findPointers = function findPointers(id, decorations) {
   return decorations.find()
@@ -21,25 +21,19 @@ function style(options) {
   return "border-right: 2px solid ".concat(color, "; margin-right: -2px;");
 }
 export function getAvatarColor(str) {
-  var hash = 0;
-  for (var i = 0; i < str.length; i++) {
-    /* eslint-disable no-bitwise */
-    hash = (hash << 5) - hash + str.charCodeAt(i);
-    hash = hash & hash;
-    /* eslint-enable no-bitwise */
-  }
-  var index = Math.abs(hash) % avatarColors.length;
+  var participantColor = getParticipantColor(str);
   return {
-    index: index,
-    color: avatarColors[index]
+    index: participantColor.index,
+    backgroundColor: participantColor.color.backgroundColor,
+    textColor: participantColor.color.textColor
   };
 }
-export var createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial
+export var createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/max-params
 ) {
   var decorations = [];
-  var avatarColor = getAvatarColor(sessionId);
+  var avatarColor = getAvatarColor(presenceId);
   var color = avatarColor.index.toString();
   if (isSelection) {
     var className = "telepointer color-".concat(color, " telepointer-selection");
@@ -51,7 +45,8 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
       'data-initial': initial
     }, {
       pointer: {
-        sessionId: sessionId
+        sessionId: sessionId,
+        presenceId: presenceId
       }
     }));
   }
@@ -63,7 +58,7 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
   cursor.textContent = ZERO_WIDTH_JOINER;
   cursor.className = "telepointer color-".concat(color, " telepointer-selection-badge");
   cursor.style.cssText = "".concat(style({
-    color: avatarColor.color
+    color: avatarColor.backgroundColor
   }), ";");
   cursor.setAttribute('data-initial', initial);
   return decorations.concat(
@@ -71,7 +66,8 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Decoration.widget(to, spaceJoinerAfter, {
     pointer: {
-      sessionId: sessionId
+      sessionId: sessionId,
+      presenceId: presenceId
     },
     key: "telepointer-".concat(sessionId, "-zero")
   })).concat(
@@ -79,7 +75,8 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Decoration.widget(to, cursor, {
     pointer: {
-      sessionId: sessionId
+      sessionId: sessionId,
+      presenceId: presenceId
     },
     key: "telepointer-".concat(sessionId)
   })).concat(
@@ -87,7 +84,8 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Decoration.widget(to, spaceJoinerBefore, {
     pointer: {
-      sessionId: sessionId
+      sessionId: sessionId,
+      presenceId: presenceId
     },
     key: "telepointer-".concat(sessionId, "-zero")
   }));

package/dist/types/collabEditPluginType.d.ts

@@ -1,4 +1,3 @@
-import type { Color } from '@atlaskit/editor-common/collab';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -18,7 +17,8 @@ export type CollabEditPlugin = NextEditorPlugin<'collabEdit', {
     actions: {
         getAvatarColor: (str: string) => {
             index: number;
-            color: Color;
+            backgroundColor: string;
+            textColor: string;
         };
         addInlineCommentMark: (props: {
             from: number;

package/dist/types/pm-plugins/main/plugin-state.d.ts

@@ -17,6 +17,7 @@ export declare class PluginState {
     get sessionId(): string | undefined;
     constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void);
     getInitial(sessionId: string): string;
+    getPresenceId(sessionId: string): string;
     apply(tr: ReadonlyTransaction): PluginState;
     static eq(a: PluginState, b: PluginState): boolean;
     static init(config: any): PluginState;

package/dist/types/pm-plugins/utils.d.ts

@@ -7,9 +7,10 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 export declare const findPointers: (id: string, decorations: DecorationSet) => Decoration[];
 export declare function getAvatarColor(str: string): {
     index: number;
-    color: "var(--ds-icon-accent-lime)" | "var(--ds-icon-accent-red)" | "var(--ds-icon-accent-orange)" | "var(--ds-icon-accent-yellow)" | "var(--ds-icon-accent-green)" | "var(--ds-icon-accent-teal)" | "var(--ds-icon-accent-blue)" | "var(--ds-icon-accent-purple)" | "var(--ds-icon-accent-magenta)" | "var(--ds-icon-accent-gray)" | "var(--ds-background-accent-lime-bolder-hovered)" | "var(--ds-background-accent-red-bolder-hovered)" | "var(--ds-background-accent-orange-bolder-hovered)" | "var(--ds-background-accent-yellow-bolder-hovered)" | "var(--ds-background-accent-yellow-bolder-pressed)" | "var(--ds-background-accent-green-bolder-hovered)" | "var(--ds-background-accent-teal-bolder-hovered)" | "var(--ds-background-accent-blue-bolder-hovered)" | "var(--ds-background-accent-purple-bolder-hovered)" | "var(--ds-background-accent-magenta-bolder-hovered)" | "var(--ds-background-accent-gray-bolder-hovered)";
+    backgroundColor: string;
+    textColor: string;
 };
-export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string) => Decoration[];
+export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string) => Decoration[];
 export declare const replaceDocument: (doc: any, state: EditorState, version?: number, options?: CollabEditOptions, reserveCursor?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => Transaction;
 export declare const scrollToCollabCursor: (editorView: EditorView, participants: CollabParticipant[], sessionId: string | undefined, index: number, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => void;
 export declare const getPositionOfTelepointer: (sessionId: string, decorationSet: DecorationSet) => undefined | number;

package/dist/types-ts4.5/collabEditPluginType.d.ts

@@ -1,4 +1,3 @@
-import type { Color } from '@atlaskit/editor-common/collab';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
@@ -18,7 +17,8 @@ export type CollabEditPlugin = NextEditorPlugin<'collabEdit', {
     actions: {
         getAvatarColor: (str: string) => {
             index: number;
-            color: Color;
+            backgroundColor: string;
+            textColor: string;
         };
         addInlineCommentMark: (props: {
             from: number;

package/dist/types-ts4.5/pm-plugins/main/plugin-state.d.ts

@@ -17,6 +17,7 @@ export declare class PluginState {
     get sessionId(): string | undefined;
     constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void);
     getInitial(sessionId: string): string;
+    getPresenceId(sessionId: string): string;
     apply(tr: ReadonlyTransaction): PluginState;
     static eq(a: PluginState, b: PluginState): boolean;
     static init(config: any): PluginState;

package/dist/types-ts4.5/pm-plugins/utils.d.ts

@@ -7,9 +7,10 @@ import { Decoration } from '@atlaskit/editor-prosemirror/view';
 export declare const findPointers: (id: string, decorations: DecorationSet) => Decoration[];
 export declare function getAvatarColor(str: string): {
     index: number;
-    color: "var(--ds-icon-accent-lime)" | "var(--ds-icon-accent-red)" | "var(--ds-icon-accent-orange)" | "var(--ds-icon-accent-yellow)" | "var(--ds-icon-accent-green)" | "var(--ds-icon-accent-teal)" | "var(--ds-icon-accent-blue)" | "var(--ds-icon-accent-purple)" | "var(--ds-icon-accent-magenta)" | "var(--ds-icon-accent-gray)" | "var(--ds-background-accent-lime-bolder-hovered)" | "var(--ds-background-accent-red-bolder-hovered)" | "var(--ds-background-accent-orange-bolder-hovered)" | "var(--ds-background-accent-yellow-bolder-hovered)" | "var(--ds-background-accent-yellow-bolder-pressed)" | "var(--ds-background-accent-green-bolder-hovered)" | "var(--ds-background-accent-teal-bolder-hovered)" | "var(--ds-background-accent-blue-bolder-hovered)" | "var(--ds-background-accent-purple-bolder-hovered)" | "var(--ds-background-accent-magenta-bolder-hovered)" | "var(--ds-background-accent-gray-bolder-hovered)";
+    backgroundColor: string;
+    textColor: string;
 };
-export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string) => Decoration[];
+export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string) => Decoration[];
 export declare const replaceDocument: (doc: any, state: EditorState, version?: number, options?: CollabEditOptions, reserveCursor?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => Transaction;
 export declare const scrollToCollabCursor: (editorView: EditorView, participants: CollabParticipant[], sessionId: string | undefined, index: number, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => void;
 export declare const getPositionOfTelepointer: (sessionId: string, decorationSet: DecorationSet) => undefined | number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-collab-edit",
-	"version": "2.0.2",
+	"version": "2.1.1",
 	"description": "Collab Edit plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,9 +33,9 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/custom-steps": "^0.9.0",
-		"@atlaskit/editor-common": "^97.2.0",
+		"@atlaskit/editor-common": "^98.0.0",
 		"@atlaskit/editor-json-transformer": "^8.21.0",
-		"@atlaskit/editor-plugin-analytics": "1.10.9",
+		"@atlaskit/editor-plugin-analytics": "1.10.10",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.2.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",