@atlaskit/editor-plugin-collab-edit 3.4.0 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-collab-edit
 
+## 3.5.0
+
+### Minor Changes
+
+- [#147951](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147951)
+  [`ec2f90f672938`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec2f90f672938) -
+  [ux] getFullName has been added to PluginState. User's initial and full name are now in their
+  separate elements under telepointer.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.4.1
+
+### Patch Changes
+
+- [#140813](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140813)
+  [`c4756a5c1a4ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4756a5c1a4ae) -
+  Migrating offline editing feature gates to a new experiment "platform_editor_offline_editing_web"
+- Updated dependencies
+
 ## 3.4.0
 
 ### Minor Changes

package/dist/cjs/collabEditPlugin.js

@@ -13,8 +13,8 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _prosemirrorCollab = require("@atlaskit/prosemirror-collab");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _analytics2 = require("./pm-plugins/analytics");
 var _sendTransaction = require("./pm-plugins/events/send-transaction");
 var _main = require("./pm-plugins/main");
@@ -206,7 +206,7 @@ var collabEditPlugin = exports.collabEditPlugin = function collabEditPlugin(_ref
         plugin: function plugin() {
           return (0, _prosemirrorCollab.collab)({
             clientID: userId,
-            transformUnconfirmed: (0, _platformFeatureFlags.fg)('platform_editor_merge_unconfirmed_steps') ? function (steps) {
+            transformUnconfirmed: (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true) ? function (steps) {
               return (0, _mergeUnconfirmed.mergeUnconfirmedSteps)(steps, api);
             } : undefined
           });
@@ -252,7 +252,7 @@ var collabEditPlugin = exports.collabEditPlugin = function collabEditPlugin(_ref
         name: 'collabTrackLastOrganicChangePlugin',
         plugin: _trackLastOrganicChange.createPlugin
       });
-      if ((0, _platformFeatureFlags.fg)('platform_editor_offline_conflict_resolution')) {
+      if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
         plugins.push({
           name: 'trackLastRemoteConflictPlugin',
           plugin: _trackReconnectionConflict.createPlugin

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

@@ -59,11 +59,16 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
     get: function get() {
       return this.sid;
     }
+  }, {
+    key: "getFullName",
+    value: function getFullName(sessionId) {
+      var participant = this.participants.get(sessionId);
+      return participant ? participant.name : 'X';
+    }
   }, {
     key: "getInitial",
     value: function getInitial(sessionId) {
-      var participant = this.participants.get(sessionId);
-      return participant ? participant.name.substring(0, 1).toUpperCase() : 'X';
+      return this.getFullName(sessionId).substring(0, 1).toUpperCase();
     }
   }, {
     key: "getPresenceId",
@@ -142,7 +147,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), this.getPresenceId(sessionId)));
+          add = add.concat((0, _utils.createTelepointers)(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId)));
         }
       }
       if (tr.docChanged) {
@@ -161,7 +166,7 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
                     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), presenceId));
+                  add = add.concat((0, _utils.createTelepointers)(pos, pos, _sessionId, false, _this.getInitial(_sessionId), presenceId, _this.getFullName(_sessionId)));
                 }
               }
             }

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

@@ -37,7 +37,7 @@ function getAvatarColor(str) {
     textColor: participantColor.color.textColor
   };
 }
-var createTelepointers = exports.createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId) {
+var createTelepointers = exports.createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId, fullName) {
   var decorations = [];
   var avatarColor = getAvatarColor(presenceId);
   var color = avatarColor.index.toString();
@@ -67,6 +67,18 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
     color: avatarColor.backgroundColor
   }), ";");
   cursor.setAttribute('data-initial', initial);
+  if ((0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer')) {
+    var fullNameEl = document.createElement('span');
+    fullNameEl.textContent = fullName;
+    fullNameEl.className = 'telepointer-fullname';
+    fullNameEl.style.backgroundColor = avatarColor.backgroundColor;
+    cursor.appendChild(fullNameEl);
+    var initialEl = document.createElement('span');
+    initialEl.textContent = initial;
+    initialEl.className = 'telepointer-initial';
+    initialEl.style.backgroundColor = avatarColor.backgroundColor;
+    cursor.appendChild(initialEl);
+  }
   return decorations.concat(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/es2019/collabEditPlugin.js

@@ -2,8 +2,8 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { AddMarkStep, AddNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { collab, getCollabState, sendableSteps } from '@atlaskit/prosemirror-collab';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { addSynchronyErrorAnalytics } from './pm-plugins/analytics';
 import { sendTransaction } from './pm-plugins/events/send-transaction';
 import { createPlugin } from './pm-plugins/main';
@@ -160,7 +160,7 @@ export const collabEditPlugin = ({
         name: 'pmCollab',
         plugin: () => collab({
           clientID: userId,
-          transformUnconfirmed: fg('platform_editor_merge_unconfirmed_steps') ? steps => mergeUnconfirmedSteps(steps, api) : undefined
+          transformUnconfirmed: editorExperiment('platform_editor_offline_editing_web', true) ? steps => mergeUnconfirmedSteps(steps, api) : undefined
         })
       }, {
         name: 'nativeCollabProviderPlugin',
@@ -198,7 +198,7 @@ export const collabEditPlugin = ({
         name: 'collabTrackLastOrganicChangePlugin',
         plugin: createLastOrganicChangePlugin
       });
-      if (fg('platform_editor_offline_conflict_resolution')) {
+      if (editorExperiment('platform_editor_offline_editing_web', true)) {
         plugins.push({
           name: 'trackLastRemoteConflictPlugin',
           plugin: createTrackReconnectionConflictPlugin

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

@@ -40,9 +40,12 @@ export class PluginState {
     this.isReady = collabInitalised;
     this.onError = onError || this.onError;
   }
-  getInitial(sessionId) {
+  getFullName(sessionId) {
     const participant = this.participants.get(sessionId);
-    return participant ? participant.name.substring(0, 1).toUpperCase() : 'X';
+    return participant ? participant.name : 'X';
+  }
+  getInitial(sessionId) {
+    return this.getFullName(sessionId).substring(0, 1).toUpperCase();
   }
   getPresenceId(sessionId) {
     var _participant$presence;
@@ -118,7 +121,7 @@ export class PluginState {
         } catch (err) {
           this.onError(err);
         }
-        add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId)));
+        add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId)));
       }
     }
     if (tr.docChanged) {
@@ -145,7 +148,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), presenceId));
+                add = add.concat(createTelepointers(pos, pos, sessionId, false, this.getInitial(sessionId), presenceId, this.getFullName(sessionId)));
               }
             }
           }

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

@@ -23,7 +23,7 @@ export function getAvatarColor(str) {
     textColor: participantColor.color.textColor
   };
 }
-export const createTelepointers = (from, to, sessionId, isSelection, initial, presenceId) => {
+export const createTelepointers = (from, to, sessionId, isSelection, initial, presenceId, fullName) => {
   const decorations = [];
   const avatarColor = getAvatarColor(presenceId);
   const color = avatarColor.index.toString();
@@ -53,6 +53,18 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial, pr
     color: avatarColor.backgroundColor
   })};`;
   cursor.setAttribute('data-initial', initial);
+  if (fg('confluence_team_presence_scroll_to_pointer')) {
+    const fullNameEl = document.createElement('span');
+    fullNameEl.textContent = fullName;
+    fullNameEl.className = 'telepointer-fullname';
+    fullNameEl.style.backgroundColor = avatarColor.backgroundColor;
+    cursor.appendChild(fullNameEl);
+    const initialEl = document.createElement('span');
+    initialEl.textContent = initial;
+    initialEl.className = 'telepointer-initial';
+    initialEl.style.backgroundColor = avatarColor.backgroundColor;
+    cursor.appendChild(initialEl);
+  }
   return decorations.concat(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/esm/collabEditPlugin.js

@@ -8,8 +8,8 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/anal
 import { isEmptyDocument } from '@atlaskit/editor-common/utils';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { AddMarkStep, AddNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { collab, getCollabState, sendableSteps } from '@atlaskit/prosemirror-collab';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { addSynchronyErrorAnalytics } from './pm-plugins/analytics';
 import { sendTransaction } from './pm-plugins/events/send-transaction';
 import { createPlugin } from './pm-plugins/main';
@@ -199,7 +199,7 @@ export var collabEditPlugin = function collabEditPlugin(_ref4) {
         plugin: function plugin() {
           return collab({
             clientID: userId,
-            transformUnconfirmed: fg('platform_editor_merge_unconfirmed_steps') ? function (steps) {
+            transformUnconfirmed: editorExperiment('platform_editor_offline_editing_web', true) ? function (steps) {
               return mergeUnconfirmedSteps(steps, api);
             } : undefined
           });
@@ -245,7 +245,7 @@ export var collabEditPlugin = function collabEditPlugin(_ref4) {
         name: 'collabTrackLastOrganicChangePlugin',
         plugin: createLastOrganicChangePlugin
       });
-      if (fg('platform_editor_offline_conflict_resolution')) {
+      if (editorExperiment('platform_editor_offline_editing_web', true)) {
         plugins.push({
           name: 'trackLastRemoteConflictPlugin',
           plugin: createTrackReconnectionConflictPlugin

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

@@ -53,11 +53,16 @@ export var PluginState = /*#__PURE__*/function () {
     get: function get() {
       return this.sid;
     }
+  }, {
+    key: "getFullName",
+    value: function getFullName(sessionId) {
+      var participant = this.participants.get(sessionId);
+      return participant ? participant.name : 'X';
+    }
   }, {
     key: "getInitial",
     value: function getInitial(sessionId) {
-      var participant = this.participants.get(sessionId);
-      return participant ? participant.name.substring(0, 1).toUpperCase() : 'X';
+      return this.getFullName(sessionId).substring(0, 1).toUpperCase();
     }
   }, {
     key: "getPresenceId",
@@ -136,7 +141,7 @@ export var PluginState = /*#__PURE__*/function () {
           } catch (err) {
             this.onError(err);
           }
-          add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId)));
+          add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId)));
         }
       }
       if (tr.docChanged) {
@@ -155,7 +160,7 @@ export var PluginState = /*#__PURE__*/function () {
                     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), presenceId));
+                  add = add.concat(createTelepointers(pos, pos, _sessionId, false, _this.getInitial(_sessionId), presenceId, _this.getFullName(_sessionId)));
                 }
               }
             }

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

@@ -28,7 +28,7 @@ export function getAvatarColor(str) {
     textColor: participantColor.color.textColor
   };
 }
-export var createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId) {
+export var createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId, fullName) {
   var decorations = [];
   var avatarColor = getAvatarColor(presenceId);
   var color = avatarColor.index.toString();
@@ -58,6 +58,18 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
     color: avatarColor.backgroundColor
   }), ";");
   cursor.setAttribute('data-initial', initial);
+  if (fg('confluence_team_presence_scroll_to_pointer')) {
+    var fullNameEl = document.createElement('span');
+    fullNameEl.textContent = fullName;
+    fullNameEl.className = 'telepointer-fullname';
+    fullNameEl.style.backgroundColor = avatarColor.backgroundColor;
+    cursor.appendChild(fullNameEl);
+    var initialEl = document.createElement('span');
+    initialEl.textContent = initial;
+    initialEl.className = 'telepointer-initial';
+    initialEl.style.backgroundColor = avatarColor.backgroundColor;
+    cursor.appendChild(initialEl);
+  }
   return decorations.concat(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -16,6 +16,7 @@ export declare class PluginState {
     get activeParticipants(): ReadOnlyParticipants;
     get sessionId(): string | undefined;
     constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void);
+    getFullName(sessionId: string): string;
     getInitial(sessionId: string): string;
     getPresenceId(sessionId: string): string;
     apply(tr: ReadonlyTransaction): PluginState;

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

@@ -10,7 +10,7 @@ export declare function getAvatarColor(str: string): {
     backgroundColor: string;
     textColor: string;
 };
-export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string) => Decoration[];
+export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string, fullName: 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/pm-plugins/main/plugin-state.d.ts

@@ -16,6 +16,7 @@ export declare class PluginState {
     get activeParticipants(): ReadOnlyParticipants;
     get sessionId(): string | undefined;
     constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void);
+    getFullName(sessionId: string): string;
     getInitial(sessionId: string): string;
     getPresenceId(sessionId: string): string;
     apply(tr: ReadonlyTransaction): PluginState;

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

@@ -10,7 +10,7 @@ export declare function getAvatarColor(str: string): {
     backgroundColor: string;
     textColor: string;
 };
-export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string) => Decoration[];
+export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string, fullName: 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": "3.4.0",
+	"version": "3.5.0",
 	"description": "Collab Edit plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.4.0",
+		"@atlaskit/editor-common": "^103.22.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -43,6 +43,7 @@
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-collab": "^0.16.0",
+		"@atlaskit/tmp-editor-statsig": "^4.15.0",
 		"@babel/runtime": "^7.0.0",
 		"memoize-one": "^6.0.0"
 	},
@@ -51,17 +52,17 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/editor-plugin-mentions": "^4.4.0",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/editor-plugin-mentions": "^4.5.0",
 		"@atlaskit/editor-plugin-text-formatting": "^2.2.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.6.0",
 		"@atlaskit/editor-plugin-unsupported-content": "^2.1.0",
-		"@atlaskit/editor-test-helpers": "^22.1.0",
-		"@atlaskit/ssr": "^0.4.0",
-		"@atlaskit/synchrony-test-helpers": "^3.1.0",
+		"@atlaskit/editor-test-helpers": "workspace:^",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/synchrony-test-helpers": "workspace:^",
 		"@atlaskit/util-data-test": "^18.0.0",
-		"@atlaskit/visual-regression": "^0.10.0",
+		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
@@ -106,17 +107,14 @@
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
 		},
-		"platform_editor_merge_unconfirmed_steps": {
-			"type": "boolean"
-		},
-		"platform_editor_offline_conflict_resolution": {
-			"type": "boolean"
-		},
 		"platform_editor_selection_without_left_shift": {
 			"type": "boolean"
 		},
 		"platform_editor_no_telecursor_on_live_doc_init": {
 			"type": "boolean"
+		},
+		"confluence_team_presence_scroll_to_pointer": {
+			"type": "boolean"
 		}
 	}
 }