@atlaskit/editor-plugin-collab-edit 1.8.3 → 1.8.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-collab-edit
 
+## 1.8.5
+
+### Patch Changes
+
+- [#117769](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117769)
+  [`a59c5cd45160c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a59c5cd45160c) -
+  [No Issue] Track how many steps a editorSession is creating
+
+## 1.8.4
+
+### Patch Changes
+
+- [#117973](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117973)
+  [`6e37bac62083f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e37bac62083f) -
+  moved one const, added new entry point for other and deprecated
+- Updated dependencies
+
 ## 1.8.3
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -6,17 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.collabEditPlugin = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _prosemirrorCollab = require("@atlaskit/prosemirror-collab");
-var _analytics = require("./analytics");
+var _analytics2 = require("./analytics");
 var _sendTransaction = require("./events/send-transaction");
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/main/plugin-key");
 var _nativeCollabProviderPlugin = require("./pm-plugins/native-collab-provider-plugin");
 var _trackNcsInitialization = require("./pm-plugins/track-ncs-initialization");
+var _trackSteps = require("./track-steps");
 var _utils = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var providerBuilder = function providerBuilder(collabEditProviderPromise) {
   return /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(codeToExecute, onError) {
@@ -164,7 +169,7 @@ var collabEditPlugin = exports.collabEditPlugin = function collabEditPlugin(_ref
     },
     onEditorViewStateUpdated: function onEditorViewStateUpdated(props) {
       var _api$analytics, _api$editorViewMode, _options$useNativePlu;
-      var addErrorAnalytics = (0, _analytics.addSynchronyErrorAnalytics)(props.newEditorState, props.newEditorState.tr, featureFlags, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      var addErrorAnalytics = (0, _analytics2.addSynchronyErrorAnalytics)(props.newEditorState, props.newEditorState.tr, featureFlags, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
       var viewMode = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode;
       executeProviderCode((0, _sendTransaction.sendTransaction)({
         originalTransaction: props.originalTransaction,
@@ -174,6 +179,19 @@ var collabEditPlugin = exports.collabEditPlugin = function collabEditPlugin(_ref
         useNativePlugin: (_options$useNativePlu = options === null || options === void 0 ? void 0 : options.useNativePlugin) !== null && _options$useNativePlu !== void 0 ? _options$useNativePlu : false,
         viewMode: viewMode
       }), addErrorAnalytics);
+      (0, _trackSteps.track)(_objectSpread(_objectSpread({}, props), {}, {
+        onTrackDataProcessed: function onTrackDataProcessed(steps) {
+          var _api$analytics2;
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+            action: _analytics.ACTION.STEPS_TRACKED,
+            actionSubject: _analytics.ACTION_SUBJECT.COLLAB,
+            attributes: {
+              steps: steps
+            },
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL
+          });
+        }
+      }));
     }
   };
 };

package/dist/cjs/track-steps.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.track = exports.task = exports.sanitizeStep = exports.groupSteps = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _prosemirrorCollab = require("@atlaskit/prosemirror-collab");
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function groupBy(array, keyGetter) {
+  // Check group by exists, and that it's a function. If so, use the native browser code
+  if ('groupBy' in Object && typeof Object.groupBy === 'function') {
+    // @ts-ignore TS2322 - Type 'Partial<Record<string, T[]>>' is not assignable to type 'Record<string, T[]>'.
+    return Object.groupBy(array, keyGetter);
+  }
+
+  // Fallback to custom implementation
+  var map = {};
+  array.forEach(function (item) {
+    var key = keyGetter(item);
+    if (!map[key]) {
+      map[key] = [];
+    }
+    map[key].push(item);
+  });
+  return map;
+}
+/**
+ * Sanitizes a given ProseMirror step by extracting its type and non-UCG relevant attributes.
+ *
+ * @param {Step} step - The ProseMirror step to be sanitized.
+ * @returns {SanitizedStep} - The sanitized step with only necessary information.
+ *
+ * @example
+ * ```
+ * const step = new AttrStep(10, 'colwidth', [123, 451] );
+ * const sanitized = sanitizeStep(step);
+ *
+ * // Output: { stepType: 'attr', attr: 'example' }
+ * ```
+ */
+var sanitizeStep = exports.sanitizeStep = function sanitizeStep(step) {
+  var serializedStep = step.toJSON();
+  var sanitizedStep = {
+    stepType: serializedStep.stepType
+  };
+  if (step instanceof _transform.AttrStep || step instanceof _transform.DocAttrStep) {
+    sanitizedStep.attr = step.attr;
+  } else if (step instanceof _transform.AddMarkStep || step instanceof _transform.RemoveMarkStep || step instanceof _transform.RemoveNodeMarkStep || step instanceof _transform.AddNodeMarkStep) {
+    sanitizedStep.markType = step.mark.type.name;
+  }
+  return sanitizedStep;
+};
+
+/**
+ * Groups sanitized steps by their type and counts their occurrences.
+ *
+ * @param {SanitizedStep[]} sanitizedSteps - An array of sanitized steps.
+ * @returns {Record<string, number>} - An object where keys are step types and values are their counts.
+ *
+ * @example
+ * ```
+ * const input = [
+ *   { stepType: 'attr', attr: 'colwidth' },
+ *   { stepType: 'mark', markType: 'bold' },
+ *   { stepType: 'attr', attr: 'colwidth' }
+ * ];
+ *
+ * const grouped = groupSteps(input);
+ * // Output: { 'attr_example': 2, 'mark_bold': 1 }
+ * ```
+ */
+var groupSteps = exports.groupSteps = function groupSteps(sanitizedSteps) {
+  var grouped = groupBy(sanitizedSteps, function (e) {
+    return Object.values(e).join('_');
+  });
+  return Object.entries(grouped).reduce(function (acc, _ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    acc[key] = Array.isArray(value) ? value.length : 0;
+    return acc;
+  }, {});
+};
+
+/**
+ * Processes the steps metadata from the cache and calls the callback function with the processed data.
+ *
+ * @param {CacheType} cache - A cache containing steps metadata.
+ * @param {(data: StepMetadataAnalytics[]) => void} onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+var task = exports.task = function task(cache, onTrackDataProcessed) {
+  var stepsMetadata = [];
+  var _iterator = _createForOfIteratorHelper(cache.values()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var entry = _step.value;
+      var startedAt = entry.startedAt,
+        endedAt = entry.endedAt,
+        steps = entry.steps;
+      var stepTypesAmount = groupSteps(steps.map(sanitizeStep));
+      stepsMetadata.push({
+        startedAt: startedAt,
+        endedAt: endedAt,
+        stepTypesAmount: stepTypesAmount
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  cache.clear();
+  if (stepsMetadata.length > 0) {
+    onTrackDataProcessed(stepsMetadata);
+  }
+};
+var stepsSentCache = new Map();
+// Every ten seconds we will try to process the step data.
+var LOW_PRIORITY_DELAY = 10000;
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+
+var getScheduler = function getScheduler(obj) {
+  if (!obj) {
+    return null;
+  }
+  if ('scheduler' in obj) {
+    return obj.scheduler;
+  }
+  return null;
+};
+
+/**
+ * Tracks the steps sent by the client by storing them in a cache and scheduling a task to process them. Once the steps are processed, the onTrackDataProcessed callabck will be called.
+ *
+ * This is a non-critical code. If the browser doesn't support the Scheduler API https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+ *
+ * @param {TrackProps} props - The properties required for tracking steps.
+ * @param {EditorState} props.newEditorState - The new editor state.
+ * @param {Readonly<Transaction[]>} props.transactions - The transactions that contain the steps.
+ * @param {(data: StepMetadataAnalytics[]) => void} props.onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+var track = exports.track = function track(_ref3) {
+  var newEditorState = _ref3.newEditorState,
+    transactions = _ref3.transactions,
+    onTrackDataProcessed = _ref3.onTrackDataProcessed;
+  var newSteps = transactions.flatMap(function (t) {
+    return t.steps;
+  });
+  var collabState = (0, _prosemirrorCollab.sendableSteps)(newEditorState);
+  var scheduler = getScheduler(window);
+  if (!newSteps.length || !scheduler || !collabState) {
+    return;
+  }
+  var version = collabState.version;
+  var buffer = stepsSentCache.get(version);
+  var startedAt = (buffer === null || buffer === void 0 ? void 0 : buffer.startedAt) || Date.now();
+  var endedAt = Date.now();
+  var steps = ((buffer === null || buffer === void 0 ? void 0 : buffer.steps) || []).concat(newSteps);
+  stepsSentCache.set(version, {
+    startedAt: startedAt,
+    endedAt: endedAt,
+    steps: steps
+  });
+  scheduler.postTask(function () {
+    return task(stepsSentCache, onTrackDataProcessed);
+  }, {
+    priority: 'background',
+    delay: LOW_PRIORITY_DELAY
+  });
+};

package/dist/cjs/utils.js

@@ -9,7 +9,7 @@ exports.getAvatarColor = getAvatarColor;
 exports.scrollToCollabCursor = exports.replaceDocument = exports.getPositionOfTelepointer = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _utils = require("@atlaskit/editor-common/utils");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
@@ -52,11 +52,11 @@ var createTelepointers = exports.createTelepointers = function createTelepointer
     }));
   }
   var spaceJoinerBefore = document.createElement('span');
-  spaceJoinerBefore.textContent = _utils.ZERO_WIDTH_JOINER;
+  spaceJoinerBefore.textContent = _whitespace.ZERO_WIDTH_JOINER;
   var spaceJoinerAfter = document.createElement('span');
-  spaceJoinerAfter.textContent = _utils.ZERO_WIDTH_JOINER;
+  spaceJoinerAfter.textContent = _whitespace.ZERO_WIDTH_JOINER;
   var cursor = document.createElement('span');
-  cursor.textContent = _utils.ZERO_WIDTH_JOINER;
+  cursor.textContent = _whitespace.ZERO_WIDTH_JOINER;
   cursor.className = "telepointer color-".concat(color, " telepointer-selection-badge");
   cursor.style.cssText = "".concat(style({
     color: avatarColor.color

package/dist/es2019/plugin.js

@@ -1,3 +1,4 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { AddMarkStep, AddNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { collab } from '@atlaskit/prosemirror-collab';
 import { addSynchronyErrorAnalytics } from './analytics';
@@ -6,6 +7,7 @@ import { createPlugin } from './pm-plugins/main';
 import { pluginKey as mainPluginKey } from './pm-plugins/main/plugin-key';
 import { nativeCollabProviderPlugin } from './pm-plugins/native-collab-provider-plugin';
 import { createPlugin as createTrackNCSInitializationPlugin, trackNCSInitializationPluginKey } from './pm-plugins/track-ncs-initialization';
+import { track } from './track-steps';
 import { getAvatarColor } from './utils';
 const providerBuilder = collabEditProviderPromise => async (codeToExecute, onError) => {
   try {
@@ -132,6 +134,20 @@ export const collabEditPlugin = ({
         useNativePlugin: (_options$useNativePlu = options === null || options === void 0 ? void 0 : options.useNativePlugin) !== null && _options$useNativePlu !== void 0 ? _options$useNativePlu : false,
         viewMode
       }), addErrorAnalytics);
+      track({
+        ...props,
+        onTrackDataProcessed: steps => {
+          var _api$analytics2, _api$analytics2$actio;
+          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent({
+            action: ACTION.STEPS_TRACKED,
+            actionSubject: ACTION_SUBJECT.COLLAB,
+            attributes: {
+              steps
+            },
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        }
+      });
     }
   };
 };

package/dist/es2019/track-steps.js

@@ -0,0 +1,153 @@
+import { AddMarkStep, AddNodeMarkStep, AttrStep, DocAttrStep, RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
+import { sendableSteps } from '@atlaskit/prosemirror-collab';
+function groupBy(array, keyGetter) {
+  // Check group by exists, and that it's a function. If so, use the native browser code
+  if ('groupBy' in Object && typeof Object.groupBy === 'function') {
+    // @ts-ignore TS2322 - Type 'Partial<Record<string, T[]>>' is not assignable to type 'Record<string, T[]>'.
+    return Object.groupBy(array, keyGetter);
+  }
+
+  // Fallback to custom implementation
+  const map = {};
+  array.forEach(item => {
+    const key = keyGetter(item);
+    if (!map[key]) {
+      map[key] = [];
+    }
+    map[key].push(item);
+  });
+  return map;
+}
+/**
+ * Sanitizes a given ProseMirror step by extracting its type and non-UCG relevant attributes.
+ *
+ * @param {Step} step - The ProseMirror step to be sanitized.
+ * @returns {SanitizedStep} - The sanitized step with only necessary information.
+ *
+ * @example
+ * ```
+ * const step = new AttrStep(10, 'colwidth', [123, 451] );
+ * const sanitized = sanitizeStep(step);
+ *
+ * // Output: { stepType: 'attr', attr: 'example' }
+ * ```
+ */
+export const sanitizeStep = step => {
+  const serializedStep = step.toJSON();
+  const sanitizedStep = {
+    stepType: serializedStep.stepType
+  };
+  if (step instanceof AttrStep || step instanceof DocAttrStep) {
+    sanitizedStep.attr = step.attr;
+  } else if (step instanceof AddMarkStep || step instanceof RemoveMarkStep || step instanceof RemoveNodeMarkStep || step instanceof AddNodeMarkStep) {
+    sanitizedStep.markType = step.mark.type.name;
+  }
+  return sanitizedStep;
+};
+
+/**
+ * Groups sanitized steps by their type and counts their occurrences.
+ *
+ * @param {SanitizedStep[]} sanitizedSteps - An array of sanitized steps.
+ * @returns {Record<string, number>} - An object where keys are step types and values are their counts.
+ *
+ * @example
+ * ```
+ * const input = [
+ *   { stepType: 'attr', attr: 'colwidth' },
+ *   { stepType: 'mark', markType: 'bold' },
+ *   { stepType: 'attr', attr: 'colwidth' }
+ * ];
+ *
+ * const grouped = groupSteps(input);
+ * // Output: { 'attr_example': 2, 'mark_bold': 1 }
+ * ```
+ */
+export const groupSteps = sanitizedSteps => {
+  const grouped = groupBy(sanitizedSteps, e => Object.values(e).join('_'));
+  return Object.entries(grouped).reduce((acc, [key, value]) => {
+    acc[key] = Array.isArray(value) ? value.length : 0;
+    return acc;
+  }, {});
+};
+
+/**
+ * Processes the steps metadata from the cache and calls the callback function with the processed data.
+ *
+ * @param {CacheType} cache - A cache containing steps metadata.
+ * @param {(data: StepMetadataAnalytics[]) => void} onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export const task = (cache, onTrackDataProcessed) => {
+  const stepsMetadata = [];
+  for (let entry of cache.values()) {
+    const {
+      startedAt,
+      endedAt,
+      steps
+    } = entry;
+    const stepTypesAmount = groupSteps(steps.map(sanitizeStep));
+    stepsMetadata.push({
+      startedAt,
+      endedAt,
+      stepTypesAmount
+    });
+  }
+  cache.clear();
+  if (stepsMetadata.length > 0) {
+    onTrackDataProcessed(stepsMetadata);
+  }
+};
+const stepsSentCache = new Map();
+// Every ten seconds we will try to process the step data.
+const LOW_PRIORITY_DELAY = 10000;
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+
+const getScheduler = obj => {
+  if (!obj) {
+    return null;
+  }
+  if ('scheduler' in obj) {
+    return obj.scheduler;
+  }
+  return null;
+};
+
+/**
+ * Tracks the steps sent by the client by storing them in a cache and scheduling a task to process them. Once the steps are processed, the onTrackDataProcessed callabck will be called.
+ *
+ * This is a non-critical code. If the browser doesn't support the Scheduler API https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+ *
+ * @param {TrackProps} props - The properties required for tracking steps.
+ * @param {EditorState} props.newEditorState - The new editor state.
+ * @param {Readonly<Transaction[]>} props.transactions - The transactions that contain the steps.
+ * @param {(data: StepMetadataAnalytics[]) => void} props.onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export const track = ({
+  newEditorState,
+  transactions,
+  onTrackDataProcessed
+}) => {
+  const newSteps = transactions.flatMap(t => t.steps);
+  const collabState = sendableSteps(newEditorState);
+  const scheduler = getScheduler(window);
+  if (!newSteps.length || !scheduler || !collabState) {
+    return;
+  }
+  const {
+    version
+  } = collabState;
+  const buffer = stepsSentCache.get(version);
+  const startedAt = (buffer === null || buffer === void 0 ? void 0 : buffer.startedAt) || Date.now();
+  const endedAt = Date.now();
+  const steps = ((buffer === null || buffer === void 0 ? void 0 : buffer.steps) || []).concat(newSteps);
+  stepsSentCache.set(version, {
+    startedAt,
+    endedAt,
+    steps
+  });
+  scheduler.postTask(() => task(stepsSentCache, onTrackDataProcessed), {
+    priority: 'background',
+    delay: LOW_PRIORITY_DELAY
+  });
+};

package/dist/es2019/utils.js

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { avatarColors } from '@atlaskit/editor-shared-styles/consts';

package/dist/esm/plugin.js

@@ -1,6 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { AddMarkStep, AddNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
 import { collab } from '@atlaskit/prosemirror-collab';
 import { addSynchronyErrorAnalytics } from './analytics';
@@ -9,6 +13,7 @@ import { createPlugin } from './pm-plugins/main';
 import { pluginKey as mainPluginKey } from './pm-plugins/main/plugin-key';
 import { nativeCollabProviderPlugin } from './pm-plugins/native-collab-provider-plugin';
 import { createPlugin as createTrackNCSInitializationPlugin, trackNCSInitializationPluginKey } from './pm-plugins/track-ncs-initialization';
+import { track } from './track-steps';
 import { getAvatarColor } from './utils';
 var providerBuilder = function providerBuilder(collabEditProviderPromise) {
   return /*#__PURE__*/function () {
@@ -167,6 +172,19 @@ export var collabEditPlugin = function collabEditPlugin(_ref4) {
         useNativePlugin: (_options$useNativePlu = options === null || options === void 0 ? void 0 : options.useNativePlugin) !== null && _options$useNativePlu !== void 0 ? _options$useNativePlu : false,
         viewMode: viewMode
       }), addErrorAnalytics);
+      track(_objectSpread(_objectSpread({}, props), {}, {
+        onTrackDataProcessed: function onTrackDataProcessed(steps) {
+          var _api$analytics2;
+          api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.fireAnalyticsEvent({
+            action: ACTION.STEPS_TRACKED,
+            actionSubject: ACTION_SUBJECT.COLLAB,
+            attributes: {
+              steps: steps
+            },
+            eventType: EVENT_TYPE.OPERATIONAL
+          });
+        }
+      }));
     }
   };
 };

package/dist/esm/track-steps.js

@@ -0,0 +1,170 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+import { AddMarkStep, AddNodeMarkStep, AttrStep, DocAttrStep, RemoveMarkStep, RemoveNodeMarkStep } from '@atlaskit/editor-prosemirror/transform';
+import { sendableSteps } from '@atlaskit/prosemirror-collab';
+function groupBy(array, keyGetter) {
+  // Check group by exists, and that it's a function. If so, use the native browser code
+  if ('groupBy' in Object && typeof Object.groupBy === 'function') {
+    // @ts-ignore TS2322 - Type 'Partial<Record<string, T[]>>' is not assignable to type 'Record<string, T[]>'.
+    return Object.groupBy(array, keyGetter);
+  }
+
+  // Fallback to custom implementation
+  var map = {};
+  array.forEach(function (item) {
+    var key = keyGetter(item);
+    if (!map[key]) {
+      map[key] = [];
+    }
+    map[key].push(item);
+  });
+  return map;
+}
+/**
+ * Sanitizes a given ProseMirror step by extracting its type and non-UCG relevant attributes.
+ *
+ * @param {Step} step - The ProseMirror step to be sanitized.
+ * @returns {SanitizedStep} - The sanitized step with only necessary information.
+ *
+ * @example
+ * ```
+ * const step = new AttrStep(10, 'colwidth', [123, 451] );
+ * const sanitized = sanitizeStep(step);
+ *
+ * // Output: { stepType: 'attr', attr: 'example' }
+ * ```
+ */
+export var sanitizeStep = function sanitizeStep(step) {
+  var serializedStep = step.toJSON();
+  var sanitizedStep = {
+    stepType: serializedStep.stepType
+  };
+  if (step instanceof AttrStep || step instanceof DocAttrStep) {
+    sanitizedStep.attr = step.attr;
+  } else if (step instanceof AddMarkStep || step instanceof RemoveMarkStep || step instanceof RemoveNodeMarkStep || step instanceof AddNodeMarkStep) {
+    sanitizedStep.markType = step.mark.type.name;
+  }
+  return sanitizedStep;
+};
+
+/**
+ * Groups sanitized steps by their type and counts their occurrences.
+ *
+ * @param {SanitizedStep[]} sanitizedSteps - An array of sanitized steps.
+ * @returns {Record<string, number>} - An object where keys are step types and values are their counts.
+ *
+ * @example
+ * ```
+ * const input = [
+ *   { stepType: 'attr', attr: 'colwidth' },
+ *   { stepType: 'mark', markType: 'bold' },
+ *   { stepType: 'attr', attr: 'colwidth' }
+ * ];
+ *
+ * const grouped = groupSteps(input);
+ * // Output: { 'attr_example': 2, 'mark_bold': 1 }
+ * ```
+ */
+export var groupSteps = function groupSteps(sanitizedSteps) {
+  var grouped = groupBy(sanitizedSteps, function (e) {
+    return Object.values(e).join('_');
+  });
+  return Object.entries(grouped).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    acc[key] = Array.isArray(value) ? value.length : 0;
+    return acc;
+  }, {});
+};
+
+/**
+ * Processes the steps metadata from the cache and calls the callback function with the processed data.
+ *
+ * @param {CacheType} cache - A cache containing steps metadata.
+ * @param {(data: StepMetadataAnalytics[]) => void} onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export var task = function task(cache, onTrackDataProcessed) {
+  var stepsMetadata = [];
+  var _iterator = _createForOfIteratorHelper(cache.values()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var entry = _step.value;
+      var startedAt = entry.startedAt,
+        endedAt = entry.endedAt,
+        steps = entry.steps;
+      var stepTypesAmount = groupSteps(steps.map(sanitizeStep));
+      stepsMetadata.push({
+        startedAt: startedAt,
+        endedAt: endedAt,
+        stepTypesAmount: stepTypesAmount
+      });
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  cache.clear();
+  if (stepsMetadata.length > 0) {
+    onTrackDataProcessed(stepsMetadata);
+  }
+};
+var stepsSentCache = new Map();
+// Every ten seconds we will try to process the step data.
+var LOW_PRIORITY_DELAY = 10000;
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+
+var getScheduler = function getScheduler(obj) {
+  if (!obj) {
+    return null;
+  }
+  if ('scheduler' in obj) {
+    return obj.scheduler;
+  }
+  return null;
+};
+
+/**
+ * Tracks the steps sent by the client by storing them in a cache and scheduling a task to process them. Once the steps are processed, the onTrackDataProcessed callabck will be called.
+ *
+ * This is a non-critical code. If the browser doesn't support the Scheduler API https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+ *
+ * @param {TrackProps} props - The properties required for tracking steps.
+ * @param {EditorState} props.newEditorState - The new editor state.
+ * @param {Readonly<Transaction[]>} props.transactions - The transactions that contain the steps.
+ * @param {(data: StepMetadataAnalytics[]) => void} props.onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export var track = function track(_ref3) {
+  var newEditorState = _ref3.newEditorState,
+    transactions = _ref3.transactions,
+    onTrackDataProcessed = _ref3.onTrackDataProcessed;
+  var newSteps = transactions.flatMap(function (t) {
+    return t.steps;
+  });
+  var collabState = sendableSteps(newEditorState);
+  var scheduler = getScheduler(window);
+  if (!newSteps.length || !scheduler || !collabState) {
+    return;
+  }
+  var version = collabState.version;
+  var buffer = stepsSentCache.get(version);
+  var startedAt = (buffer === null || buffer === void 0 ? void 0 : buffer.startedAt) || Date.now();
+  var endedAt = Date.now();
+  var steps = ((buffer === null || buffer === void 0 ? void 0 : buffer.steps) || []).concat(newSteps);
+  stepsSentCache.set(version, {
+    startedAt: startedAt,
+    endedAt: endedAt,
+    steps: steps
+  });
+  scheduler.postTask(function () {
+    return task(stepsSentCache, onTrackDataProcessed);
+  }, {
+    priority: 'background',
+    delay: LOW_PRIORITY_DELAY
+  });
+};

package/dist/esm/utils.js

@@ -1,6 +1,6 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { avatarColors } from '@atlaskit/editor-shared-styles/consts';

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

@@ -0,0 +1,77 @@
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Step } from '@atlaskit/editor-prosemirror/transform';
+export type SanitizedStep = {
+    stepType: string;
+    attr?: string;
+    markType?: string;
+};
+export type StepMetadataAnalytics = {
+    startedAt: number;
+    endedAt: number;
+    stepTypesAmount: {
+        [key: string]: number;
+    };
+};
+/**
+ * Sanitizes a given ProseMirror step by extracting its type and non-UCG relevant attributes.
+ *
+ * @param {Step} step - The ProseMirror step to be sanitized.
+ * @returns {SanitizedStep} - The sanitized step with only necessary information.
+ *
+ * @example
+ * ```
+ * const step = new AttrStep(10, 'colwidth', [123, 451] );
+ * const sanitized = sanitizeStep(step);
+ *
+ * // Output: { stepType: 'attr', attr: 'example' }
+ * ```
+ */
+export declare const sanitizeStep: (step: Step) => SanitizedStep;
+/**
+ * Groups sanitized steps by their type and counts their occurrences.
+ *
+ * @param {SanitizedStep[]} sanitizedSteps - An array of sanitized steps.
+ * @returns {Record<string, number>} - An object where keys are step types and values are their counts.
+ *
+ * @example
+ * ```
+ * const input = [
+ *   { stepType: 'attr', attr: 'colwidth' },
+ *   { stepType: 'mark', markType: 'bold' },
+ *   { stepType: 'attr', attr: 'colwidth' }
+ * ];
+ *
+ * const grouped = groupSteps(input);
+ * // Output: { 'attr_example': 2, 'mark_bold': 1 }
+ * ```
+ */
+export declare const groupSteps: (sanitizedSteps: SanitizedStep[]) => Record<string, number>;
+/**
+ * Processes the steps metadata from the cache and calls the callback function with the processed data.
+ *
+ * @param {CacheType} cache - A cache containing steps metadata.
+ * @param {(data: StepMetadataAnalytics[]) => void} onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export declare const task: (cache: CacheType, onTrackDataProcessed: (data: StepMetadataAnalytics[]) => void) => void;
+export type CacheType = Map<number, {
+    steps: ReadonlyArray<Step>;
+    startedAt: number;
+    endedAt: number;
+}>;
+type TrackProps = {
+    newEditorState: EditorState;
+    transactions: Readonly<Transaction[]>;
+    onTrackDataProcessed: (data: StepMetadataAnalytics[]) => void;
+};
+/**
+ * Tracks the steps sent by the client by storing them in a cache and scheduling a task to process them. Once the steps are processed, the onTrackDataProcessed callabck will be called.
+ *
+ * This is a non-critical code. If the browser doesn't support the Scheduler API https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+ *
+ * @param {TrackProps} props - The properties required for tracking steps.
+ * @param {EditorState} props.newEditorState - The new editor state.
+ * @param {Readonly<Transaction[]>} props.transactions - The transactions that contain the steps.
+ * @param {(data: StepMetadataAnalytics[]) => void} props.onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export declare const track: ({ newEditorState, transactions, onTrackDataProcessed }: TrackProps) => void;
+export {};

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

@@ -0,0 +1,77 @@
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Step } from '@atlaskit/editor-prosemirror/transform';
+export type SanitizedStep = {
+    stepType: string;
+    attr?: string;
+    markType?: string;
+};
+export type StepMetadataAnalytics = {
+    startedAt: number;
+    endedAt: number;
+    stepTypesAmount: {
+        [key: string]: number;
+    };
+};
+/**
+ * Sanitizes a given ProseMirror step by extracting its type and non-UCG relevant attributes.
+ *
+ * @param {Step} step - The ProseMirror step to be sanitized.
+ * @returns {SanitizedStep} - The sanitized step with only necessary information.
+ *
+ * @example
+ * ```
+ * const step = new AttrStep(10, 'colwidth', [123, 451] );
+ * const sanitized = sanitizeStep(step);
+ *
+ * // Output: { stepType: 'attr', attr: 'example' }
+ * ```
+ */
+export declare const sanitizeStep: (step: Step) => SanitizedStep;
+/**
+ * Groups sanitized steps by their type and counts their occurrences.
+ *
+ * @param {SanitizedStep[]} sanitizedSteps - An array of sanitized steps.
+ * @returns {Record<string, number>} - An object where keys are step types and values are their counts.
+ *
+ * @example
+ * ```
+ * const input = [
+ *   { stepType: 'attr', attr: 'colwidth' },
+ *   { stepType: 'mark', markType: 'bold' },
+ *   { stepType: 'attr', attr: 'colwidth' }
+ * ];
+ *
+ * const grouped = groupSteps(input);
+ * // Output: { 'attr_example': 2, 'mark_bold': 1 }
+ * ```
+ */
+export declare const groupSteps: (sanitizedSteps: SanitizedStep[]) => Record<string, number>;
+/**
+ * Processes the steps metadata from the cache and calls the callback function with the processed data.
+ *
+ * @param {CacheType} cache - A cache containing steps metadata.
+ * @param {(data: StepMetadataAnalytics[]) => void} onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export declare const task: (cache: CacheType, onTrackDataProcessed: (data: StepMetadataAnalytics[]) => void) => void;
+export type CacheType = Map<number, {
+    steps: ReadonlyArray<Step>;
+    startedAt: number;
+    endedAt: number;
+}>;
+type TrackProps = {
+    newEditorState: EditorState;
+    transactions: Readonly<Transaction[]>;
+    onTrackDataProcessed: (data: StepMetadataAnalytics[]) => void;
+};
+/**
+ * Tracks the steps sent by the client by storing them in a cache and scheduling a task to process them. Once the steps are processed, the onTrackDataProcessed callabck will be called.
+ *
+ * This is a non-critical code. If the browser doesn't support the Scheduler API https://developer.mozilla.org/en-US/docs/Web/API/Scheduler/
+ *
+ * @param {TrackProps} props - The properties required for tracking steps.
+ * @param {EditorState} props.newEditorState - The new editor state.
+ * @param {Readonly<Transaction[]>} props.transactions - The transactions that contain the steps.
+ * @param {(data: StepMetadataAnalytics[]) => void} props.onTrackDataProcessed - Callback function to be called with the processed data.
+ */
+export declare const track: ({ newEditorState, transactions, onTrackDataProcessed }: TrackProps) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-collab-edit",
-	"version": "1.8.3",
+	"version": "1.8.5",
 	"description": "Collab Edit plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/editor-common": "^84.0.0",
+		"@atlaskit/editor-common": "^84.3.0",
 		"@atlaskit/editor-plugin-analytics": "1.4.2",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.1.0",