@atlaskit/editor-plugin-collab-edit 3.9.4 → 3.10.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/editor-plugin-collab-edit
 
+## 3.10.0
+
+### Minor Changes
+
+- [#171561](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171561)
+  [`d0c41c462c511`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d0c41c462c511) -
+  [ux] Telepointers now stay expanded even if there are other transactions received which will
+  re-create their DOM elements.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.9.5
+
+### Patch Changes
+
+- [#171054](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/171054)
+  [`46a532280fd7c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/46a532280fd7c) -
+  Filter out AnalyticsSteps from metric
+- [#169039](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/169039)
+  [`d2488752fcad8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2488752fcad8) -
+  EDITOR-508 Part 1 of cleaning up `platform_editor_use_nested_table_pm_nodes`
+- Updated dependencies
+
 ## 3.9.4
 
 ### Patch Changes

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

@@ -33,6 +33,7 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
   function PluginState(decorations, participants, sessionId) {
     var collabInitalised = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var onError = arguments.length > 4 ? arguments[4] : undefined;
+    var nudgeAnimations = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new Map();
     (0, _classCallCheck2.default)(this, PluginState);
     // eslint-disable-next-line no-console
     (0, _defineProperty2.default)(this, "onError", function (error) {
@@ -43,6 +44,7 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
     this.sid = sessionId;
     this.isReady = collabInitalised;
     this.onError = onError || this.onError;
+    this.nudgeAnimations = nudgeAnimations;
   }
   return (0, _createClass2.default)(PluginState, [{
     key: "decorations",
@@ -158,7 +160,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), this.getFullName(sessionId)));
+          add = add.concat((0, _utils.createTelepointers)(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? (0, _utils.hasExistingNudge)(sessionId, this.nudgeAnimations) : false));
         }
       }
       if (tr.docChanged) {
@@ -177,7 +179,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, _this.getFullName(_sessionId)));
+                  add = add.concat((0, _utils.createTelepointers)(pos, pos, _sessionId, false, _this.getInitial(_sessionId), presenceId, _this.getFullName(_sessionId), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? (0, _utils.hasExistingNudge)(_sessionId, _this.nudgeAnimations) : false));
                 }
               }
             }
@@ -239,9 +241,11 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
           var _deco$spec, _deco$spec2;
           if (deco.type.toDOM && participants.get(nudgeSessionId) && ((_deco$spec = deco.spec) === null || _deco$spec === void 0 || (_deco$spec = _deco$spec.pointer) === null || _deco$spec === void 0 ? void 0 : _deco$spec.sessionId) === nudgeSessionId && ((_deco$spec2 = deco.spec) === null || _deco$spec2 === void 0 ? void 0 : _deco$spec2.key) === "telepointer-".concat(nudgeSessionId)) {
             // Restart animation by removing and re-adding the class
+            deco.type.toDOM.classList.remove(_collab.TELEPOINTER_PULSE_DURING_TR_CLASS);
             deco.type.toDOM.classList.remove(_collab.TELEPOINTER_PULSE_CLASS);
             void deco.type.toDOM.offsetWidth; // Force reflow
             deco.type.toDOM.classList.add(_collab.TELEPOINTER_PULSE_CLASS);
+            _this.nudgeAnimations.set(nudgeSessionId, Date.now());
           }
         });
       }
@@ -263,6 +267,10 @@ var PluginState = exports.PluginState = /*#__PURE__*/function () {
           }
         }
       }
+      if ((0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer')) {
+        var _nextState = new PluginState(this.decorationSet, participants, sid, collabInitialised, this.onError, this.nudgeAnimations);
+        return PluginState.eq(_nextState, this) ? this : _nextState;
+      }
       var nextState = new PluginState(this.decorationSet, participants, sid, collabInitialised);
       return PluginState.eq(nextState, this) ? this : nextState;
     }

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

@@ -10,6 +10,7 @@ var _steps = require("@atlaskit/adf-schema/steps");
 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 _trackStepMetrics = require("./track-step-metrics");
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -179,7 +180,9 @@ var track = exports.track = function track(_ref3) {
   if ((0, _platformFeatureFlags.fg)('platform_enable_ncs_step_metrics')) {
     (0, _trackStepMetrics.updateNcsSessionStepMetrics)({
       api: api,
-      steps: newSteps
+      steps: (0, _experiments.editorExperiment)('platform_editor_reduce_noisy_steps_ncs', true) ? newSteps.filter(function (step) {
+        return !(step instanceof _steps.AnalyticsStep);
+      }) : newSteps
     });
   }
   scheduler.postTask(function () {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findPointers = exports.createTelepointers = exports._findPointers = void 0;
 exports.getAvatarColor = getAvatarColor;
-exports.scrollToCollabCursor = exports.replaceDocument = exports.originalTransactionHasMeta = exports.isReplaceStep = exports.isOrganicChange = exports.getPositionOfTelepointer = void 0;
+exports.scrollToCollabCursor = exports.replaceDocument = exports.originalTransactionHasMeta = exports.isReplaceStep = exports.isOrganicChange = exports.hasExistingNudge = exports.getPositionOfTelepointer = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -46,7 +46,7 @@ function getAvatarColor(str) {
     textColor: participantColor.color.textColor
   };
 }
-var createTelepointers = exports.createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId, fullName) {
+var createTelepointers = exports.createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId, fullName, isNudged) {
   var decorations = [];
   var avatarColor = getAvatarColor(presenceId);
   var color = avatarColor.index.toString();
@@ -78,6 +78,12 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
   cursor.setAttribute('data-initial', initial);
   if ((0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer')) {
     cursor.setAttribute(_collab.TELEPOINTER_DATA_SESSION_ID_ATTR, sessionId);
+    // If there is an ongoing expand animation, we'll keep the telepointer expanded
+    // until the keyframe animation is complete. Please note that this will restart the anim timer
+    // from 0 everytime it's re-added.
+    if (isNudged) {
+      cursor.classList.add(_collab.TELEPOINTER_PULSE_DURING_TR_CLASS);
+    }
     var fullNameEl = document.createElement('span');
     fullNameEl.textContent = fullName;
     fullNameEl.className = 'telepointer-fullname';
@@ -121,20 +127,9 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
 var replaceDocument = exports.replaceDocument = function replaceDocument(doc, state, version, options, reserveCursor, editorAnalyticsAPI) {
   var schema = state.schema,
     tr = state.tr;
-  var hasContent;
-  var content;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes')) {
-    var parsedDoc = (0, _processRawValue.processRawValueWithoutValidation)(schema, doc, editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent);
-    hasContent = !!(parsedDoc !== null && parsedDoc !== void 0 && parsedDoc.childCount);
-    content = parsedDoc === null || parsedDoc === void 0 ? void 0 : parsedDoc.content;
-  } else {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    content = (doc.content || []).map(function (child) {
-      return schema.nodeFromJSON(child);
-    });
-    hasContent = Array.isArray(content) && !!content.length;
-  }
+  var parsedDoc = (0, _processRawValue.processRawValueWithoutValidation)(schema, doc, editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent);
+  var hasContent = !!(parsedDoc !== null && parsedDoc !== void 0 && parsedDoc.childCount);
+  var content = parsedDoc === null || parsedDoc === void 0 ? void 0 : parsedDoc.content;
   if (hasContent) {
     tr.setMeta('addToHistory', false);
     // Ignored via go/ees005
@@ -250,4 +245,18 @@ var isOrganicChange = exports.isOrganicChange = function isOrganicChange(tr) {
       }
     }) && !tr.doc.eq(tr.before);
   });
+};
+
+// If we receive a transaction while there is an ongoing CSS expand animation in the telepointer,
+// it will be cut off due to the removal of the element. We'll persist the animation state in the plugin,
+// so we can keep the expanded version showing even when the telepointer element is recreated.
+
+var hasExistingNudge = exports.hasExistingNudge = function hasExistingNudge(sessionId, nudgeAnimations) {
+  var nudgeAnimStartTime = nudgeAnimations.get(sessionId);
+  var hasExistingNudge = false;
+  if (nudgeAnimStartTime) {
+    var timeElapsed = Date.now() - nudgeAnimStartTime;
+    hasExistingNudge = timeElapsed < _collab.TELEPOINTER_PULSE_DURING_TR_DURATION_MS;
+  }
+  return hasExistingNudge;
 };

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

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { browser } from '@atlaskit/editor-common/browser';
-import { TELEPOINTER_DIM_CLASS, TELEPOINTER_PULSE_CLASS } from '@atlaskit/editor-common/collab';
+import { TELEPOINTER_DIM_CLASS, TELEPOINTER_PULSE_CLASS, TELEPOINTER_PULSE_DURING_TR_CLASS } from '@atlaskit/editor-common/collab';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Participants } from '../participants';
-import { createTelepointers, _findPointers, findPointers, getPositionOfTelepointer, isReplaceStep } from '../utils';
+import { createTelepointers, _findPointers, findPointers, getPositionOfTelepointer, isReplaceStep, hasExistingNudge } from '../utils';
 
 /**
  * Returns position where it's possible to place a decoration.
@@ -31,7 +31,7 @@ export class PluginState {
   get sessionId() {
     return this.sid;
   }
-  constructor(decorations, participants, sessionId, collabInitalised = false, onError) {
+  constructor(decorations, participants, sessionId, collabInitalised = false, onError, nudgeAnimations = new Map()) {
     // eslint-disable-next-line no-console
     _defineProperty(this, "onError", error => console.error(error));
     this.decorationSet = decorations;
@@ -39,6 +39,7 @@ export class PluginState {
     this.sid = sessionId;
     this.isReady = collabInitalised;
     this.onError = onError || this.onError;
+    this.nudgeAnimations = nudgeAnimations;
   }
   getFullName(sessionId) {
     const participant = this.participants.get(sessionId);
@@ -132,7 +133,7 @@ export class PluginState {
         } catch (err) {
           this.onError(err);
         }
-        add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId)));
+        add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId), fg('confluence_team_presence_scroll_to_pointer') ? hasExistingNudge(sessionId, this.nudgeAnimations) : false));
       }
     }
     if (tr.docChanged) {
@@ -159,7 +160,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, this.getFullName(sessionId)));
+                add = add.concat(createTelepointers(pos, pos, sessionId, false, this.getInitial(sessionId), presenceId, this.getFullName(sessionId), fg('confluence_team_presence_scroll_to_pointer') ? hasExistingNudge(sessionId, this.nudgeAnimations) : false));
               }
             }
           }
@@ -224,9 +225,11 @@ export class PluginState {
         var _deco$spec, _deco$spec$pointer, _deco$spec2;
         if (deco.type.toDOM && participants.get(nudgeSessionId) && ((_deco$spec = deco.spec) === null || _deco$spec === void 0 ? void 0 : (_deco$spec$pointer = _deco$spec.pointer) === null || _deco$spec$pointer === void 0 ? void 0 : _deco$spec$pointer.sessionId) === nudgeSessionId && ((_deco$spec2 = deco.spec) === null || _deco$spec2 === void 0 ? void 0 : _deco$spec2.key) === `telepointer-${nudgeSessionId}`) {
           // Restart animation by removing and re-adding the class
+          deco.type.toDOM.classList.remove(TELEPOINTER_PULSE_DURING_TR_CLASS);
           deco.type.toDOM.classList.remove(TELEPOINTER_PULSE_CLASS);
           void deco.type.toDOM.offsetWidth; // Force reflow
           deco.type.toDOM.classList.add(TELEPOINTER_PULSE_CLASS);
+          this.nudgeAnimations.set(nudgeSessionId, Date.now());
         }
       });
     }
@@ -250,6 +253,10 @@ export class PluginState {
         }
       }
     }
+    if (fg('confluence_team_presence_scroll_to_pointer')) {
+      const nextState = new PluginState(this.decorationSet, participants, sid, collabInitialised, this.onError, this.nudgeAnimations);
+      return PluginState.eq(nextState, this) ? this : nextState;
+    }
     const nextState = new PluginState(this.decorationSet, participants, sid, collabInitialised);
     return PluginState.eq(nextState, this) ? this : nextState;
   }

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

@@ -1,7 +1,8 @@
-import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { AnalyticsStep, SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AddMarkStep, AddNodeMarkStep, AttrStep, DocAttrStep, RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { sendableSteps } from '@atlaskit/prosemirror-collab';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { updateNcsSessionStepMetrics } from './track-step-metrics';
 function groupBy(array, keyGetter) {
   // Check group by exists, and that it's a function. If so, use the native browser code
@@ -157,7 +158,7 @@ export const track = ({
   if (fg('platform_enable_ncs_step_metrics')) {
     updateNcsSessionStepMetrics({
       api,
-      steps: newSteps
+      steps: editorExperiment('platform_editor_reduce_noisy_steps_ncs', true) ? newSteps.filter(step => !(step instanceof AnalyticsStep)) : newSteps
     });
   }
   scheduler.postTask(() => {

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

@@ -1,6 +1,6 @@
 import { AnalyticsStep, SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { TELEPOINTER_DATA_SESSION_ID_ATTR } from '@atlaskit/editor-common/collab';
+import { TELEPOINTER_DATA_SESSION_ID_ATTR, TELEPOINTER_PULSE_DURING_TR_CLASS, TELEPOINTER_PULSE_DURING_TR_DURATION_MS } from '@atlaskit/editor-common/collab';
 import { processRawValueWithoutValidation } from '@atlaskit/editor-common/process-raw-value';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import { Transaction, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -28,7 +28,7 @@ export function getAvatarColor(str) {
     textColor: participantColor.color.textColor
   };
 }
-export const createTelepointers = (from, to, sessionId, isSelection, initial, presenceId, fullName) => {
+export const createTelepointers = (from, to, sessionId, isSelection, initial, presenceId, fullName, isNudged) => {
   const decorations = [];
   const avatarColor = getAvatarColor(presenceId);
   const color = avatarColor.index.toString();
@@ -60,6 +60,12 @@ export const createTelepointers = (from, to, sessionId, isSelection, initial, pr
   cursor.setAttribute('data-initial', initial);
   if (fg('confluence_team_presence_scroll_to_pointer')) {
     cursor.setAttribute(TELEPOINTER_DATA_SESSION_ID_ATTR, sessionId);
+    // If there is an ongoing expand animation, we'll keep the telepointer expanded
+    // until the keyframe animation is complete. Please note that this will restart the anim timer
+    // from 0 everytime it's re-added.
+    if (isNudged) {
+      cursor.classList.add(TELEPOINTER_PULSE_DURING_TR_CLASS);
+    }
     const fullNameEl = document.createElement('span');
     fullNameEl.textContent = fullName;
     fullNameEl.className = 'telepointer-fullname';
@@ -105,18 +111,9 @@ export const replaceDocument = (doc, state, version, options, reserveCursor, edi
     schema,
     tr
   } = state;
-  let hasContent;
-  let content;
-  if (fg('platform_editor_use_nested_table_pm_nodes')) {
-    const parsedDoc = processRawValueWithoutValidation(schema, doc, editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent);
-    hasContent = !!(parsedDoc !== null && parsedDoc !== void 0 && parsedDoc.childCount);
-    content = parsedDoc === null || parsedDoc === void 0 ? void 0 : parsedDoc.content;
-  } else {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    content = (doc.content || []).map(child => schema.nodeFromJSON(child));
-    hasContent = Array.isArray(content) && !!content.length;
-  }
+  const parsedDoc = processRawValueWithoutValidation(schema, doc, editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent);
+  const hasContent = !!(parsedDoc !== null && parsedDoc !== void 0 && parsedDoc.childCount);
+  const content = parsedDoc === null || parsedDoc === void 0 ? void 0 : parsedDoc.content;
   if (hasContent) {
     tr.setMeta('addToHistory', false);
     // Ignored via go/ees005
@@ -232,4 +229,18 @@ export const isOrganicChange = tr => {
       }
     }) && !tr.doc.eq(tr.before);
   });
+};
+
+// If we receive a transaction while there is an ongoing CSS expand animation in the telepointer,
+// it will be cut off due to the removal of the element. We'll persist the animation state in the plugin,
+// so we can keep the expanded version showing even when the telepointer element is recreated.
+
+export const hasExistingNudge = (sessionId, nudgeAnimations) => {
+  const nudgeAnimStartTime = nudgeAnimations.get(sessionId);
+  let hasExistingNudge = false;
+  if (nudgeAnimStartTime) {
+    const timeElapsed = Date.now() - nudgeAnimStartTime;
+    hasExistingNudge = timeElapsed < TELEPOINTER_PULSE_DURING_TR_DURATION_MS;
+  }
+  return hasExistingNudge;
 };

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

@@ -2,12 +2,12 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { browser } from '@atlaskit/editor-common/browser';
-import { TELEPOINTER_DIM_CLASS, TELEPOINTER_PULSE_CLASS } from '@atlaskit/editor-common/collab';
+import { TELEPOINTER_DIM_CLASS, TELEPOINTER_PULSE_CLASS, TELEPOINTER_PULSE_DURING_TR_CLASS } from '@atlaskit/editor-common/collab';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Participants } from '../participants';
-import { createTelepointers, _findPointers, findPointers, getPositionOfTelepointer, isReplaceStep } from '../utils';
+import { createTelepointers, _findPointers, findPointers, getPositionOfTelepointer, isReplaceStep, hasExistingNudge } from '../utils';
 
 /**
  * Returns position where it's possible to place a decoration.
@@ -27,6 +27,7 @@ export var PluginState = /*#__PURE__*/function () {
   function PluginState(decorations, participants, sessionId) {
     var collabInitalised = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     var onError = arguments.length > 4 ? arguments[4] : undefined;
+    var nudgeAnimations = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new Map();
     _classCallCheck(this, PluginState);
     // eslint-disable-next-line no-console
     _defineProperty(this, "onError", function (error) {
@@ -37,6 +38,7 @@ export var PluginState = /*#__PURE__*/function () {
     this.sid = sessionId;
     this.isReady = collabInitalised;
     this.onError = onError || this.onError;
+    this.nudgeAnimations = nudgeAnimations;
   }
   return _createClass(PluginState, [{
     key: "decorations",
@@ -152,7 +154,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), this.getFullName(sessionId)));
+          add = add.concat(createTelepointers(from, to, sessionId, isSelection, this.getInitial(sessionId), this.getPresenceId(sessionId), this.getFullName(sessionId), fg('confluence_team_presence_scroll_to_pointer') ? hasExistingNudge(sessionId, this.nudgeAnimations) : false));
         }
       }
       if (tr.docChanged) {
@@ -171,7 +173,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, _this.getFullName(_sessionId)));
+                  add = add.concat(createTelepointers(pos, pos, _sessionId, false, _this.getInitial(_sessionId), presenceId, _this.getFullName(_sessionId), fg('confluence_team_presence_scroll_to_pointer') ? hasExistingNudge(_sessionId, _this.nudgeAnimations) : false));
                 }
               }
             }
@@ -233,9 +235,11 @@ export var PluginState = /*#__PURE__*/function () {
           var _deco$spec, _deco$spec2;
           if (deco.type.toDOM && participants.get(nudgeSessionId) && ((_deco$spec = deco.spec) === null || _deco$spec === void 0 || (_deco$spec = _deco$spec.pointer) === null || _deco$spec === void 0 ? void 0 : _deco$spec.sessionId) === nudgeSessionId && ((_deco$spec2 = deco.spec) === null || _deco$spec2 === void 0 ? void 0 : _deco$spec2.key) === "telepointer-".concat(nudgeSessionId)) {
             // Restart animation by removing and re-adding the class
+            deco.type.toDOM.classList.remove(TELEPOINTER_PULSE_DURING_TR_CLASS);
             deco.type.toDOM.classList.remove(TELEPOINTER_PULSE_CLASS);
             void deco.type.toDOM.offsetWidth; // Force reflow
             deco.type.toDOM.classList.add(TELEPOINTER_PULSE_CLASS);
+            _this.nudgeAnimations.set(nudgeSessionId, Date.now());
           }
         });
       }
@@ -257,6 +261,10 @@ export var PluginState = /*#__PURE__*/function () {
           }
         }
       }
+      if (fg('confluence_team_presence_scroll_to_pointer')) {
+        var _nextState = new PluginState(this.decorationSet, participants, sid, collabInitialised, this.onError, this.nudgeAnimations);
+        return PluginState.eq(_nextState, this) ? this : _nextState;
+      }
       var nextState = new PluginState(this.decorationSet, participants, sid, collabInitialised);
       return PluginState.eq(nextState, this) ? this : nextState;
     }

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

@@ -2,10 +2,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { AnalyticsStep, SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { AddMarkStep, AddNodeMarkStep, AttrStep, DocAttrStep, RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { sendableSteps } from '@atlaskit/prosemirror-collab';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { updateNcsSessionStepMetrics } from './track-step-metrics';
 function groupBy(array, keyGetter) {
   // Check group by exists, and that it's a function. If so, use the native browser code
@@ -172,7 +173,9 @@ export var track = function track(_ref3) {
   if (fg('platform_enable_ncs_step_metrics')) {
     updateNcsSessionStepMetrics({
       api: api,
-      steps: newSteps
+      steps: editorExperiment('platform_editor_reduce_noisy_steps_ncs', true) ? newSteps.filter(function (step) {
+        return !(step instanceof AnalyticsStep);
+      }) : newSteps
     });
   }
   scheduler.postTask(function () {

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

@@ -1,7 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import { AnalyticsStep, SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { TELEPOINTER_DATA_SESSION_ID_ATTR } from '@atlaskit/editor-common/collab';
+import { TELEPOINTER_DATA_SESSION_ID_ATTR, TELEPOINTER_PULSE_DURING_TR_CLASS, TELEPOINTER_PULSE_DURING_TR_DURATION_MS } from '@atlaskit/editor-common/collab';
 import { processRawValueWithoutValidation } from '@atlaskit/editor-common/process-raw-value';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import { Transaction, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -37,7 +37,7 @@ export function getAvatarColor(str) {
     textColor: participantColor.color.textColor
   };
 }
-export var createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId, fullName) {
+export var createTelepointers = function createTelepointers(from, to, sessionId, isSelection, initial, presenceId, fullName, isNudged) {
   var decorations = [];
   var avatarColor = getAvatarColor(presenceId);
   var color = avatarColor.index.toString();
@@ -69,6 +69,12 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
   cursor.setAttribute('data-initial', initial);
   if (fg('confluence_team_presence_scroll_to_pointer')) {
     cursor.setAttribute(TELEPOINTER_DATA_SESSION_ID_ATTR, sessionId);
+    // If there is an ongoing expand animation, we'll keep the telepointer expanded
+    // until the keyframe animation is complete. Please note that this will restart the anim timer
+    // from 0 everytime it's re-added.
+    if (isNudged) {
+      cursor.classList.add(TELEPOINTER_PULSE_DURING_TR_CLASS);
+    }
     var fullNameEl = document.createElement('span');
     fullNameEl.textContent = fullName;
     fullNameEl.className = 'telepointer-fullname';
@@ -112,20 +118,9 @@ export var createTelepointers = function createTelepointers(from, to, sessionId,
 export var replaceDocument = function replaceDocument(doc, state, version, options, reserveCursor, editorAnalyticsAPI) {
   var schema = state.schema,
     tr = state.tr;
-  var hasContent;
-  var content;
-  if (fg('platform_editor_use_nested_table_pm_nodes')) {
-    var parsedDoc = processRawValueWithoutValidation(schema, doc, editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent);
-    hasContent = !!(parsedDoc !== null && parsedDoc !== void 0 && parsedDoc.childCount);
-    content = parsedDoc === null || parsedDoc === void 0 ? void 0 : parsedDoc.content;
-  } else {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    content = (doc.content || []).map(function (child) {
-      return schema.nodeFromJSON(child);
-    });
-    hasContent = Array.isArray(content) && !!content.length;
-  }
+  var parsedDoc = processRawValueWithoutValidation(schema, doc, editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.fireAnalyticsEvent);
+  var hasContent = !!(parsedDoc !== null && parsedDoc !== void 0 && parsedDoc.childCount);
+  var content = parsedDoc === null || parsedDoc === void 0 ? void 0 : parsedDoc.content;
   if (hasContent) {
     tr.setMeta('addToHistory', false);
     // Ignored via go/ees005
@@ -242,4 +237,18 @@ export var isOrganicChange = function isOrganicChange(tr) {
       }
     }) && !tr.doc.eq(tr.before);
   });
+};
+
+// If we receive a transaction while there is an ongoing CSS expand animation in the telepointer,
+// it will be cut off due to the removal of the element. We'll persist the animation state in the plugin,
+// so we can keep the expanded version showing even when the telepointer element is recreated.
+
+export var hasExistingNudge = function hasExistingNudge(sessionId, nudgeAnimations) {
+  var nudgeAnimStartTime = nudgeAnimations.get(sessionId);
+  var hasExistingNudge = false;
+  if (nudgeAnimStartTime) {
+    var timeElapsed = Date.now() - nudgeAnimStartTime;
+    hasExistingNudge = timeElapsed < TELEPOINTER_PULSE_DURING_TR_DURATION_MS;
+  }
+  return hasExistingNudge;
 };

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

@@ -2,6 +2,7 @@ import type { ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ReadOnlyParticipants } from '../../types';
 import { Participants } from '../participants';
+import { type NudgeAnimationsMap } from '../utils';
 /**
  * Returns position where it's possible to place a decoration.
  */
@@ -9,13 +10,14 @@ export declare const getValidPos: (tr: ReadonlyTransaction, pos: number) => numb
 export declare class PluginState {
     private decorationSet;
     private participants;
+    private nudgeAnimations;
     private onError;
     private sid?;
     isReady: boolean;
     get decorations(): DecorationSet;
     get activeParticipants(): ReadOnlyParticipants;
     get sessionId(): string | undefined;
-    constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void);
+    constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void, nudgeAnimations?: NudgeAnimationsMap);
     getFullName(sessionId: string): string;
     getInitial(sessionId: string): string;
     getPresenceId(sessionId: string): string;

package/dist/types/pm-plugins/track-step-metrics.d.ts

@@ -1,6 +1,6 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
-import { CollabEditPlugin } from '../collabEditPluginType';
+import type { CollabEditPlugin } from '../collabEditPluginType';
 type StepSessionMetrics = {
     totalStepSize: number;
     numberOfSteps: number;

package/dist/types/pm-plugins/track-steps.d.ts

@@ -1,7 +1,7 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
-import { CollabEditPlugin } from '../collabEditPluginType';
+import type { CollabEditPlugin } from '../collabEditPluginType';
 export type SanitizedStep = {
     stepType: string;
     attr?: string;

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

@@ -11,7 +11,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, fullName: string) => Decoration[];
+export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string, fullName: string, isNudged: boolean) => 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;
@@ -23,3 +23,5 @@ export declare const originalTransactionHasMeta: (transaction: Transaction | Rea
  * @returns boolean
  */
 export declare const isOrganicChange: (tr: ReadonlyTransaction) => boolean;
+export type NudgeAnimationsMap = Map<string, number>;
+export declare const hasExistingNudge: (sessionId: string, nudgeAnimations: NudgeAnimationsMap) => boolean;

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

@@ -2,6 +2,7 @@ import type { ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { ReadOnlyParticipants } from '../../types';
 import { Participants } from '../participants';
+import { type NudgeAnimationsMap } from '../utils';
 /**
  * Returns position where it's possible to place a decoration.
  */
@@ -9,13 +10,14 @@ export declare const getValidPos: (tr: ReadonlyTransaction, pos: number) => numb
 export declare class PluginState {
     private decorationSet;
     private participants;
+    private nudgeAnimations;
     private onError;
     private sid?;
     isReady: boolean;
     get decorations(): DecorationSet;
     get activeParticipants(): ReadOnlyParticipants;
     get sessionId(): string | undefined;
-    constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void);
+    constructor(decorations: DecorationSet, participants: Participants, sessionId?: string, collabInitalised?: boolean, onError?: (err: Error) => void, nudgeAnimations?: NudgeAnimationsMap);
     getFullName(sessionId: string): string;
     getInitial(sessionId: string): string;
     getPresenceId(sessionId: string): string;

package/dist/types-ts4.5/pm-plugins/track-step-metrics.d.ts

@@ -1,6 +1,6 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
-import { CollabEditPlugin } from '../collabEditPluginType';
+import type { CollabEditPlugin } from '../collabEditPluginType';
 type StepSessionMetrics = {
     totalStepSize: number;
     numberOfSteps: number;

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

@@ -1,7 +1,7 @@
-import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Step } from '@atlaskit/editor-prosemirror/transform';
-import { CollabEditPlugin } from '../collabEditPluginType';
+import type { CollabEditPlugin } from '../collabEditPluginType';
 export type SanitizedStep = {
     stepType: string;
     attr?: string;

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

@@ -11,7 +11,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, fullName: string) => Decoration[];
+export declare const createTelepointers: (from: number, to: number, sessionId: string, isSelection: boolean, initial: string, presenceId: string, fullName: string, isNudged: boolean) => 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;
@@ -23,3 +23,5 @@ export declare const originalTransactionHasMeta: (transaction: Transaction | Rea
  * @returns boolean
  */
 export declare const isOrganicChange: (tr: ReadonlyTransaction) => boolean;
+export type NudgeAnimationsMap = Map<string, number>;
+export declare const hasExistingNudge: (sessionId: string, nudgeAnimations: NudgeAnimationsMap) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-collab-edit",
-	"version": "3.9.4",
+	"version": "3.10.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": "^106.6.0",
+		"@atlaskit/editor-common": "^106.8.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -56,7 +56,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/editor-plugin-mentions": "^4.7.0",
-		"@atlaskit/editor-plugin-text-formatting": "^2.2.0",
+		"@atlaskit/editor-plugin-text-formatting": "^2.3.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.7.0",
 		"@atlaskit/editor-plugin-unsupported-content": "^2.1.0",
 		"@atlaskit/editor-test-helpers": "workspace:^",
@@ -105,9 +105,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"platform_editor_use_nested_table_pm_nodes": {
-			"type": "boolean"
-		},
 		"platform_editor_selection_without_left_shift": {
 			"type": "boolean"
 		},