@atlaskit/editor-plugin-interactivity 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-interactivity
 
+## 0.3.0
+
+### Minor Changes
+
+- [`355d6f13eb8b4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/355d6f13eb8b4) -
+  Report the `editorTyping`, `editorPointer` and `editorOther` interaction histograms in the
+  `editor interactivity` event, so a responsiveness regression in the editor can be told apart from
+  one elsewhere on the page.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

@@ -19,6 +19,10 @@ interactions were slow, so this plugin keeps bucketed counts instead.
   `buckets` and `percentilesMs`. `totalCount` comes from `performance.interactionCount` and includes
   interactions below the 16 ms Event Timing reporting threshold, so `totalCount - observedCount` is
   the sub-threshold count.
+- `editorTyping`, `editorPointer` and `editorOther` — the interactions with the editor, in the same
+  shape as `page`. Event Timing observes the whole document, so `page` alone cannot say whether a
+  regression is in the editor or elsewhere on the page; these can. Every interaction with the editor
+  is in exactly one of them, and in `page` as well.
 - `percentilesMs` is temporary. It holds percentiles of the same interactions, keyed by percentile
   and exact to the 8 ms Event Timing reports durations at, to confirm that a percentile read off
   `buckets` lands where the latencies actually are.
@@ -28,6 +32,33 @@ interactions were slow, so this plugin keeps bucketed counts instead.
 - Snapshots are session-to-date, so a cohort query takes the highest `seq` per
   `interactivitySessionId` and then sums bucket counts.
 
+## The editor groups
+
+An interaction is the editor's when it happened inside the element the editor renders itself into,
+which editor-core hands to the plugin's hook as `wrapperElement`. A second observer reports the
+events of those interactions from that element, alongside the Event Timing observer that reports the
+latencies, and the tracker makes interactions out of both.
+
+The editor's events are what count the interactions, because there is no
+`performance.interactionCount` per group and the 16 ms reporting threshold is the lowest the spec
+allows. An interaction is several events, so it is counted on one of them: typing on `keydown`,
+because a held key repeats and the browser counts every repeat; pointing on `pointerup`, because a
+press taken over by a scroll never gets one — and the browser counts no interaction for it either.
+The group comes from the same events, and the one table in `interaction-events.ts` is read for both
+counting and grouping, so the two cannot disagree.
+
+An entry lands in the group of the event it measured, matched by that event's type and timestamp. An
+interaction whose events the editor never reported stays in `page` only.
+
+Known gaps, all of which only move interactions out of the editor groups and never between them:
+
+- What the editor renders outside that element — a dropdown or a dialog in a portal — is counted in
+  `page` only, as is everything before the element arrives, a render after the editor first paints.
+- `editorOther` is the remainder slot: the browser counts only keyboard and pointer interactions
+  today, so it reads zero until that changes.
+- While an IME composes, the browser can group key presses into fewer interactions than we count, so
+  `editorTyping.totalCount` can run ahead of it.
+
 ## Cadence
 
 Snapshots are taken 10 s, 30 s and 60 s after the session starts, then every 60 s, plus on every

package/dist/cjs/collector/editor-event-observer.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditorEventObserver = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _bindEventListener = require("bind-event-listener");
+var _interactionEvents = require("./interaction-events");
+/**
+ * Reports the events the interactions with the editor are made of, as the browser dispatched
+ * them. What they mean is the tracker's business.
+ *
+ * Event Timing cannot answer which interactions were with the editor, because it observes the
+ * whole document, nor how many there were, because it reports none below 16 ms.
+ */
+var EditorEventObserver = exports.EditorEventObserver = /*#__PURE__*/function () {
+  function EditorEventObserver(onEvent) {
+    (0, _classCallCheck2.default)(this, EditorEventObserver);
+    this.onEvent = onEvent;
+  }
+
+  /**
+   * Called as the element the editor renders itself into changes: the editor only knows it after
+   * its first render, and can replace it.
+   */
+  return (0, _createClass2.default)(EditorEventObserver, [{
+    key: "observe",
+    value: function observe(root) {
+      var _this = this;
+      var next = root !== null && root !== void 0 ? root : undefined;
+      if (next === this.root) {
+        return;
+      }
+      this.stop();
+      this.root = next;
+      if (!next) {
+        return;
+      }
+      this.unbind = (0, _bindEventListener.bindAll)(next, _interactionEvents.INTERACTION_EVENT_TYPES.map(function (type) {
+        return {
+          type: type,
+          listener: _this.onEvent
+        };
+      }),
+      // Capture, so a handler in the editor cannot stop an interaction from being reported.
+      {
+        capture: true,
+        passive: true
+      });
+    }
+  }, {
+    key: "stop",
+    value: function stop() {
+      var _this$unbind;
+      (_this$unbind = this.unbind) === null || _this$unbind === void 0 || _this$unbind.call(this);
+      this.unbind = undefined;
+      this.root = undefined;
+    }
+  }]);
+}();

package/dist/cjs/collector/interaction-events.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.INTERACTION_EVENT_TYPES = void 0;
+exports.interactionEventKind = interactionEventKind;
+/**
+ * The editor group an interaction belongs to, which is also the field the event reports it in.
+ *
+ * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
+ * pointing — so the three groups together cover whatever the browser calls an interaction.
+ */
+
+/**
+ * The events an interaction is made of, and the group they belong to. Both sides of the collector
+ * read this, so counting and grouping cannot disagree.
+ *
+ * These are the events Event Timing can report with a non-zero `interactionId`, so any of them can
+ * be the one an entry measured — and it is usually not the one the interaction is counted on: for a
+ * pointer press the slow part is normally the `click` handler.
+ *
+ * The counted event is at a different end of the interaction in each group, because what can go
+ * wrong differs. Typing is counted on `keydown`, since the browser opens a new interaction for
+ * every repeat of a held key, and nothing cancels a key press. Pointing is counted on `pointerup`,
+ * since a press cannot repeat but can be taken over by a scroll — which the browser does not count
+ * either, and in that case `pointerup` never arrives.
+ */
+var INTERACTION_EVENTS = {
+  keydown: {
+    group: 'editorTyping',
+    counts: true
+  },
+  keyup: {
+    group: 'editorTyping'
+  },
+  // Only while an IME composes: the browser counts the text it commits in the interaction of the
+  // key that caused it.
+  input: {
+    group: 'editorTyping'
+  },
+  pointerdown: {
+    group: 'editorPointer'
+  },
+  pointerup: {
+    group: 'editorPointer',
+    counts: true
+  },
+  click: {
+    group: 'editorPointer'
+  },
+  // Ends a pointer press the way `pointerup` does, so the browser counts it as an interaction.
+  contextmenu: {
+    group: 'editorPointer'
+  }
+};
+
+/** Derived, so the types listened for cannot drift from the table. */
+var INTERACTION_EVENT_TYPES = exports.INTERACTION_EVENT_TYPES = Object.keys(INTERACTION_EVENTS);
+function interactionEventKind(type) {
+  return INTERACTION_EVENTS[type];
+}

package/dist/cjs/collector/interaction-group.js

@@ -30,17 +30,33 @@ var REPORTED_QUANTILES = [0.9, 0.98];
  * whatever its latency was, and everything the event carries — the reported buckets, the
  * count, the sum, the maximum and the percentiles — is derived from that map when a snapshot
  * is taken. Nothing is computed while interactions arrive.
+ *
+ * The two counters count different populations: `add` takes the interactions Event Timing
+ * measured, `countTotal` takes all of them, including the ones below the 16 ms reporting threshold
+ * it never delivers. So `totalCount >= observedCount`, and the difference is how many were too
+ * fast to be measured.
  */
 var InteractionGroup = exports.InteractionGroup = /*#__PURE__*/function () {
   function InteractionGroup() {
     (0, _classCallCheck2.default)(this, InteractionGroup);
     (0, _defineProperty2.default)(this, "countByLatency", new Map());
+    (0, _defineProperty2.default)(this, "totalCount", 0);
   }
   return (0, _createClass2.default)(InteractionGroup, [{
     key: "add",
     value: function add(latencyMs) {
       this.increment(latencyMs);
     }
+
+    /**
+     * Counts an interaction towards the group's total, measured or not. `page` has no use for it:
+     * `performance.interactionCount` counts the page's interactions.
+     */
+  }, {
+    key: "countTotal",
+    value: function countTotal() {
+      this.totalCount += 1;
+    }
   }, {
     key: "remeasure",
     value: function remeasure(previousLatencyMs, latencyMs) {
@@ -51,12 +67,14 @@ var InteractionGroup = exports.InteractionGroup = /*#__PURE__*/function () {
 
     /**
      * @param totalCount every interaction of the group, including those below the Event Timing
-     * reporting threshold, which this group never sees.
+     * reporting threshold. Defaults to what `countTotal` was told, which is where an editor
+     * group's total comes from; `page` passes `performance.interactionCount` instead.
      */
   }, {
     key: "snapshot",
-    value: function snapshot(totalCount) {
+    value: function snapshot() {
       var _latencies;
+      var totalCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.totalCount;
       // Ascending, so the reported buckets come out in order and the last latency is the
       // maximum. Sorted once for everything below.
       var latencies = Array.from(this.countByLatency.keys()).sort(function (a, b) {

package/dist/cjs/collector/interaction-tracker.js

@@ -8,6 +8,7 @@ exports.InteractionTracker = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _interactionEvents = require("./interaction-events");
 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; }
@@ -20,12 +21,13 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 /**
  * What an entry did to the interaction it belongs to: either it is the first entry of a new
  * interaction, or it measured an interaction that was already counted as slower than it was
- * known to be.
+ * known to be. Both carry the editor group of the interaction, if it is one of the editor's.
  */
 
 /**
- * How many interactions are remembered, so their growth can still be applied. Entries of one
- * interaction arrive within the interaction itself, so anything older is not needed.
+ * How many interactions are remembered, so their growth can still be applied, and how many of
+ * the editor's events. Entries of one interaction arrive within the interaction itself, so
+ * anything older than the last few hundred is not needed.
  */
 var MAX_TRACKED = 256;
 /**
@@ -35,7 +37,17 @@ var MAX_TRACKED = 256;
 var PRUNE_BATCH = 64;
 
 /**
- * Groups Event Timing entries into interactions.
+ * Identifies the event an entry measured: an entry's `startTime` is that event's timestamp and its
+ * `name` is its type. The type is in the key because browsers coarsen the timestamp, so two events
+ * of one task can share it — and events of one type are always of one group, so a collision cannot
+ * move an interaction into another group.
+ */
+function eventKey(type, timeStamp) {
+  return "".concat(type, "|").concat(timeStamp);
+}
+
+/**
+ * Makes interactions out of what the two observers report, for one session.
  *
  * Entries sharing a non-zero `interactionId` are one interaction whose latency is the
  * maximum `duration` among them. Entries arrive incrementally, so an interaction's latency
@@ -45,6 +57,9 @@ var PRUNE_BATCH = 64;
  * A non-zero `interactionId` is the browser's own definition of an interaction, which is
  * also what INP filters on: it is assigned to the pointer and keyboard events that make one
  * up, and never to scrolling or pointer movement.
+ *
+ * The editor's events answer what an entry cannot: which interactions were with the editor, and
+ * how many there were, including the ones below the Event Timing reporting threshold.
  */
 var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
   /**
@@ -57,7 +72,8 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
   function InteractionTracker() {
     var startsAfterInteractionId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     (0, _classCallCheck2.default)(this, InteractionTracker);
-    (0, _defineProperty2.default)(this, "latencies", new Map());
+    (0, _defineProperty2.default)(this, "interactions", new Map());
+    (0, _defineProperty2.default)(this, "groupByEvent", new Map());
     (0, _defineProperty2.default)(this, "highestInteractionId", 0);
     this.startsAfterInteractionId = startsAfterInteractionId;
   }
@@ -94,41 +110,66 @@ var InteractionTracker = exports.InteractionTracker = /*#__PURE__*/function () {
       if (!Number.isFinite(entry.duration) || entry.duration < 0) {
         return undefined;
       }
-      var previousLatencyMs = this.latencies.get(interactionId);
-      if (previousLatencyMs === undefined) {
-        this.latencies.set(interactionId, entry.duration);
-        this.prune();
+      var tracked = this.interactions.get(interactionId);
+      if (tracked === undefined) {
+        // Taken once: an entry that only makes the interaction slower has to move its count
+        // within the group it was counted in, not into another one.
+        var group = this.groupByEvent.get(eventKey(entry.name, entry.startTime));
+        this.interactions.set(interactionId, {
+          latencyMs: entry.duration,
+          group: group
+        });
+        this.prune(this.interactions);
         return {
           type: 'new',
-          latencyMs: entry.duration
+          latencyMs: entry.duration,
+          group: group
         };
       }
-      if (entry.duration <= previousLatencyMs) {
+      if (entry.duration <= tracked.latencyMs) {
         return undefined;
       }
-      this.latencies.set(interactionId, entry.duration);
+      var fromMs = tracked.latencyMs;
+      tracked.latencyMs = entry.duration;
       return {
         type: 'remeasured',
-        fromMs: previousLatencyMs,
-        toMs: entry.duration
+        fromMs: fromMs,
+        toMs: entry.duration,
+        group: tracked.group
       };
     }
+
+    /** @returns the group of an interaction to count, when this is the event its group counts on. */
+  }, {
+    key: "recordEditorEvent",
+    value: function recordEditorEvent(event) {
+      var kind = (0, _interactionEvents.interactionEventKind)(event.type);
+      if (!kind) {
+        return undefined;
+      }
+
+      // Every event of the interaction, because any of them can be the one Event Timing reports
+      // as the slowest: for a pointer press that is usually the click.
+      this.groupByEvent.set(eventKey(event.type, event.timeStamp), kind.group);
+      this.prune(this.groupByEvent);
+      return kind.counts ? kind.group : undefined;
+    }
   }, {
     key: "prune",
-    value: function prune() {
-      if (this.latencies.size <= MAX_TRACKED) {
+    value: function prune(entries) {
+      if (entries.size <= MAX_TRACKED) {
         return;
       }
 
-      // `Map` preserves insertion order and `interactionId` increases monotonically,
-      // so the entries inserted first are the least likely to see another entry.
+      // `Map` preserves insertion order, so the entries inserted first are the least likely to
+      // see another entry or another event.
       var remaining = PRUNE_BATCH;
-      var _iterator = _createForOfIteratorHelper(this.latencies.keys()),
+      var _iterator = _createForOfIteratorHelper(entries.keys()),
         _step;
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var interactionId = _step.value;
-          this.latencies.delete(interactionId);
+          var key = _step.value;
+          entries.delete(key);
           remaining -= 1;
           if (remaining === 0) {
             return;

package/dist/cjs/collector/interactivity-collector.js

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _browserApis = require("@atlaskit/browser-apis");
+var _editorEventObserver = require("./editor-event-observer");
 var _interactionObserver = require("./interaction-observer");
 var _interactivitySession = require("./interactivity-session");
 var _bucketBoundaries = require("./bucket-boundaries");
@@ -20,6 +21,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 /**
  * Collects interaction latencies for one editor mount and emits session-to-date snapshots.
  *
+ * Every interaction is counted in `page`, and the ones with the editor again in one of the editor
+ * groups, which is what tells a slow editor apart from a slow page around it.
+ *
  * `start` and `stop` bound the collecting, which happens once. Within it there can be several
  * sessions, because a session covers one document in one mode: a Confluence live page
  * navigates and switches between reading and editing without ever remounting the editor, and
@@ -39,6 +43,9 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
     this.interactionObserver = new _interactionObserver.InteractionObserver(function (entries) {
       return _this.recordEntries(entries);
     });
+    this.editorEvents = new _editorEventObserver.EditorEventObserver(function (event) {
+      return _this.recordEditorEvent(event);
+    });
     this.snapshotScheduler = new _snapshotScheduler.SnapshotScheduler(function () {
       return _this.onTimer();
     });
@@ -83,6 +90,7 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
       // this object was constructed.
       this.session = this.createSession(0);
       this.interactionObserver.start();
+      this.editorEvents.observe(this.editorRoot);
       this.snapshotScheduler.start();
       this.lifecycleObserver.start();
       this.started = true;
@@ -99,10 +107,24 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
       this.takeSnapshot('unmount');
       this.stopped = true;
       this.interactionObserver.stop();
+      this.editorEvents.stop();
       this.snapshotScheduler.stop();
       this.lifecycleObserver.stop();
     }
 
+    /**
+     * The element the editor renders itself into is what makes an interaction one of the editor's.
+     * The session is not tied to it: interactions from before it arrives are counted in `page`.
+     */
+  }, {
+    key: "setEditorRoot",
+    value: function setEditorRoot(root) {
+      this.editorRoot = root !== null && root !== void 0 ? root : undefined;
+      if (this.started && !this.stopped) {
+        this.editorEvents.observe(this.editorRoot);
+      }
+    }
+
     /**
      * Rotates the session when the editor is pointed at different content.
      *
@@ -212,6 +234,26 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
     value: function onPageShow() {
       this.session.lifecycleSnapshotEmitted = false;
     }
+
+    /**
+     * Counts an interaction with the editor, including the ones Event Timing never reports because
+     * they were faster than its threshold — which is why a count alone moves the session on.
+     */
+  }, {
+    key: "recordEditorEvent",
+    value: function recordEditorEvent(event) {
+      if (this.stopped) {
+        return;
+      }
+      var group = this.session.tracker.recordEditorEvent(event);
+      if (!group) {
+        return;
+      }
+
+      // The session names its editor groups after the fields they are reported in.
+      this.session[group].countTotal();
+      this.session.revision += 1;
+    }
   }, {
     key: "recordEntries",
     value: function recordEntries(entries) {
@@ -229,8 +271,14 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
           }
           if (update.type === 'new') {
             page.add(update.latencyMs);
+            if (update.group) {
+              this.session[update.group].add(update.latencyMs);
+            }
           } else {
             page.remeasure(update.fromMs, update.toMs);
+            if (update.group) {
+              this.session[update.group].remeasure(update.fromMs, update.toMs);
+            }
           }
           this.session.revision += 1;
         }
@@ -270,7 +318,7 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
       session.emittedRevision = session.revision;
       var now = performance.now();
       var hiddenMs = session.hiddenMs + (session.hiddenSince === undefined ? 0 : now - session.hiddenSince);
-      var totalCount = _interactionObserver.InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
+      var pageTotalCount = _interactionObserver.InteractionObserver.readPageInteractionCount() - session.interactionCountAtStart;
       this.emit({
         schema: _bucketBoundaries.SCHEMA_VERSION,
         interactivitySessionId: session.id,
@@ -282,7 +330,11 @@ var InteractivityCollector = exports.InteractivityCollector = /*#__PURE__*/funct
         hiddenMs: Math.round(hiddenMs),
         nodeSize: this.getNodeSize(),
         editorDomSize: this.getEditorDomSize(),
-        page: session.page.snapshot(totalCount)
+        // Only `page` is told its total; each editor group has counted its own.
+        page: session.page.snapshot(pageTotalCount),
+        editorTyping: session.editorTyping.snapshot(),
+        editorPointer: session.editorPointer.snapshot(),
+        editorOther: session.editorOther.snapshot()
       });
     }
   }]);

package/dist/cjs/collector/interactivity-session.js

@@ -34,6 +34,9 @@ var InteractivitySession = exports.InteractivitySession = /*#__PURE__*/(0, _crea
   /** Page interaction count when the session opened, subtracted to get its own total. */
   (0, _defineProperty2.default)(this, "interactionCountAtStart", _interactionObserver.InteractionObserver.readPageInteractionCount());
   (0, _defineProperty2.default)(this, "page", new _interactionGroup.InteractionGroup());
+  (0, _defineProperty2.default)(this, "editorTyping", new _interactionGroup.InteractionGroup());
+  (0, _defineProperty2.default)(this, "editorPointer", new _interactionGroup.InteractionGroup());
+  (0, _defineProperty2.default)(this, "editorOther", new _interactionGroup.InteractionGroup());
   /** Increments per snapshot; a query takes the highest one per session. */
   (0, _defineProperty2.default)(this, "seq", 0);
   (0, _defineProperty2.default)(this, "hiddenMs", 0);

package/dist/cjs/interactivityPlugin.js

@@ -22,11 +22,10 @@ var interactivityPlugin = exports.interactivityPlugin = function interactivityPl
   return {
     name: 'interactivity',
     usePluginHook: function usePluginHook(_ref2) {
-      var editorView = _ref2.editorView;
+      var editorView = _ref2.editorView,
+        wrapperElement = _ref2.wrapperElement;
+      var collectorRef = (0, _react.useRef)(undefined);
       (0, _react.useEffect)(function () {
-        // Nothing measured here is worth an editor. This effect runs inside the plugin slot's
-        // error boundary, which also renders every plugin's content components, so a throw
-        // from instrumentation would take that UI down with it.
         try {
           var _api$contextIdentifie2, _api$editorViewMode2;
           var collector = new _interactivityCollector.InteractivityCollector({
@@ -57,6 +56,9 @@ var interactivityPlugin = exports.interactivityPlugin = function interactivityPl
               return editorView.isDestroyed ? undefined : editorView.dom.getElementsByTagName('*').length;
             }
           });
+
+          // Effects run in declaration order, so the one below always finds it.
+          collectorRef.current = collector;
           if (!collector.start()) {
             return;
           }
@@ -88,6 +90,16 @@ var interactivityPlugin = exports.interactivityPlugin = function interactivityPl
         // live registry, and restarting the session on a reconfigure would split one
         // editor session in two.
       }, [editorView]);
+      (0, _react.useEffect)(function () {
+        try {
+          var _collectorRef$current;
+          (_collectorRef$current = collectorRef.current) === null || _collectorRef$current === void 0 || _collectorRef$current.setEditorRoot(wrapperElement);
+        } catch (error) {
+          void (0, _monitoring.logException)(error, {
+            location: 'editor-plugin-interactivity/observe'
+          });
+        }
+      }, [wrapperElement]);
     }
   };
 };

package/dist/es2019/collector/editor-event-observer.js

@@ -0,0 +1,46 @@
+import { bindAll } from 'bind-event-listener';
+import { INTERACTION_EVENT_TYPES } from './interaction-events';
+
+/**
+ * Reports the events the interactions with the editor are made of, as the browser dispatched
+ * them. What they mean is the tracker's business.
+ *
+ * Event Timing cannot answer which interactions were with the editor, because it observes the
+ * whole document, nor how many there were, because it reports none below 16 ms.
+ */
+export class EditorEventObserver {
+  constructor(onEvent) {
+    this.onEvent = onEvent;
+  }
+
+  /**
+   * Called as the element the editor renders itself into changes: the editor only knows it after
+   * its first render, and can replace it.
+   */
+  observe(root) {
+    const next = root !== null && root !== void 0 ? root : undefined;
+    if (next === this.root) {
+      return;
+    }
+    this.stop();
+    this.root = next;
+    if (!next) {
+      return;
+    }
+    this.unbind = bindAll(next, INTERACTION_EVENT_TYPES.map(type => ({
+      type,
+      listener: this.onEvent
+    })),
+    // Capture, so a handler in the editor cannot stop an interaction from being reported.
+    {
+      capture: true,
+      passive: true
+    });
+  }
+  stop() {
+    var _this$unbind;
+    (_this$unbind = this.unbind) === null || _this$unbind === void 0 ? void 0 : _this$unbind.call(this);
+    this.unbind = undefined;
+    this.root = undefined;
+  }
+}

package/dist/es2019/collector/interaction-events.js

@@ -0,0 +1,55 @@
+/**
+ * The editor group an interaction belongs to, which is also the field the event reports it in.
+ *
+ * `editorOther` is the remainder — an interaction the browser counts that is neither typing nor
+ * pointing — so the three groups together cover whatever the browser calls an interaction.
+ */
+
+/**
+ * The events an interaction is made of, and the group they belong to. Both sides of the collector
+ * read this, so counting and grouping cannot disagree.
+ *
+ * These are the events Event Timing can report with a non-zero `interactionId`, so any of them can
+ * be the one an entry measured — and it is usually not the one the interaction is counted on: for a
+ * pointer press the slow part is normally the `click` handler.
+ *
+ * The counted event is at a different end of the interaction in each group, because what can go
+ * wrong differs. Typing is counted on `keydown`, since the browser opens a new interaction for
+ * every repeat of a held key, and nothing cancels a key press. Pointing is counted on `pointerup`,
+ * since a press cannot repeat but can be taken over by a scroll — which the browser does not count
+ * either, and in that case `pointerup` never arrives.
+ */
+const INTERACTION_EVENTS = {
+  keydown: {
+    group: 'editorTyping',
+    counts: true
+  },
+  keyup: {
+    group: 'editorTyping'
+  },
+  // Only while an IME composes: the browser counts the text it commits in the interaction of the
+  // key that caused it.
+  input: {
+    group: 'editorTyping'
+  },
+  pointerdown: {
+    group: 'editorPointer'
+  },
+  pointerup: {
+    group: 'editorPointer',
+    counts: true
+  },
+  click: {
+    group: 'editorPointer'
+  },
+  // Ends a pointer press the way `pointerup` does, so the browser counts it as an interaction.
+  contextmenu: {
+    group: 'editorPointer'
+  }
+};
+
+/** Derived, so the types listened for cannot drift from the table. */
+export const INTERACTION_EVENT_TYPES = Object.keys(INTERACTION_EVENTS);
+export function interactionEventKind(type) {
+  return INTERACTION_EVENTS[type];
+}