@atlaskit/editor-core 180.0.0 → 180.1.0

package/dist/esm/index.js

@@ -61,4 +61,5 @@ export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ui/Co
 export { DEFAULT_BORDER_COLOR } from './ui/ColorPalette/Palettes/common';
 export { default as messages, statusMessages, dateMessages } from './messages';
 export { createTypeAheadTools } from './plugins/type-ahead/api';
-export { createQuickInsertTools } from './plugins/quick-insert/api';
+export { createQuickInsertTools } from './plugins/quick-insert/api';
+export { default as EditorMigrationComponent } from './editor-next/editor-migration-component';

package/dist/esm/labs/next/internal/hooks/use-analytics/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { fireAnalyticsEvent } from '../../../../../plugins/analytics';
-import { analyticsEventKey } from '../../../../../plugins/analytics/consts';
+import { fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { analyticsEventKey } from '@atlaskit/editor-common/utils';
 
 /**
  * Subscribes to analytics events fired from editor components

package/dist/esm/labs/next/internal/hooks/use-editor/create-dispatch-transaction.js

@@ -1,10 +1,9 @@
 import { Node } from 'prosemirror-model';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '../../../../../plugins/analytics';
+import { analyticsEventKey } from '@atlaskit/editor-common/utils';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../../../../../utils/nodes';
 import { compose, toJSON } from '../../../../../utils';
 import { getDocStructure } from '../../../../../utils/document-logger';
-import { analyticsEventKey } from '../../../../../plugins/analytics/consts';
-
 // Helper to assure correct payload when dispatch analytics
 function dispatchAnalytics(dispatch, payload) {
   dispatch(analyticsEventKey, payload);

package/dist/esm/labs/next/presets/create-stub-internal-apis.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { tablesPlugin } from '@atlaskit/editor-plugin-table';
+import { createEditorSelectionAPI } from '../../../selection-api/api';
+import { createInsertNodeAPI } from '../../../insert-api/api';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { attachPayloadIntoTransaction } from '../../../analytics-api/attach-payload-into-transaction';
+import { FabricChannel } from '@atlaskit/analytics-listeners';
+
+/**
+ * DO NOT USE THIS FUNCTION
+ *
+ * IT IS A TEMPORARY PLACEHOLDER UNTIL THOSE TICKETS XX-11111 XX-22222 are done
+ **/
+export var createStubInternalApis = function createStubInternalApis() {
+  var editorViewRef = {
+    current: null
+  };
+  var createAnalyticsEventRef = {
+    current: null
+  };
+
+  // @ts-ignore
+  var createAnalyticsEvent = function createAnalyticsEvent(payload) {
+    // That means the AnalyticsNext context is being used
+    if (createAnalyticsEventRef.current) {
+      return createAnalyticsEventRef.current(payload);
+    }
+
+    // That means, there is no createAnalyticsEvent available at all.
+    // This should not happen, but if it does, we will send a mock function to avoid
+    // regression on SmartLinks (they are the only one using this function directly)
+    // eslint-disable-next-line no-console
+    console.error('This should never be called, if it does we have a problem');
+    return {
+      fire: function fire() {}
+    };
+  };
+  var editorSelectionAPI = createEditorSelectionAPI();
+  var editorAnalyticsAPI = {
+    attachAnalyticsEvent: function attachAnalyticsEvent(payload) {
+      return function (tr) {
+        var editorView = editorViewRef.current;
+        if (!tr || !createAnalyticsEvent || !editorView) {
+          return false;
+        }
+        attachPayloadIntoTransaction({
+          tr: tr,
+          editorState: editorView.state,
+          payload: payload,
+          channel: FabricChannel.editor
+        });
+        return true;
+      };
+    }
+  };
+  var insertNodeAPI = createInsertNodeAPI({
+    getEditorView: function getEditorView() {
+      return editorViewRef.current;
+    },
+    getEditorPlugins: function getEditorPlugins() {
+      var fakeTablePlugin = tablesPlugin();
+      if (!(fakeTablePlugin !== null && fakeTablePlugin !== void 0 && fakeTablePlugin.pluginsOptions)) {
+        return [];
+      }
+      return [fakeTablePlugin];
+    }
+  });
+  var MountCreateAnalyticsEventRef = function MountCreateAnalyticsEventRef() {
+    var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+    React.useLayoutEffect(function () {
+      createAnalyticsEventRef.current = createAnalyticsEvent;
+    }, [createAnalyticsEvent]);
+    return null;
+  };
+  var stubInternalApisPlugin = function stubInternalApisPlugin() {
+    return {
+      name: 'stubInternalApisPlugin',
+      pmPlugins: function pmPlugins() {
+        return [{
+          name: 'stubInternalApisPMPlugin',
+          plugin: function plugin() {
+            return new SafePlugin({
+              view: function view(editorView) {
+                editorViewRef.current = editorView;
+                return {
+                  destroy: function destroy() {
+                    editorViewRef.current = null;
+                    createAnalyticsEventRef.current = null;
+                  }
+                };
+              }
+            });
+          }
+        }];
+      },
+      contentComponent: function contentComponent() {
+        return /*#__PURE__*/React.createElement(MountCreateAnalyticsEventRef);
+      }
+    };
+  };
+  return {
+    editorSelectionAPI: editorSelectionAPI,
+    insertNodeAPI: insertNodeAPI,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    createAnalyticsEvent: createAnalyticsEvent,
+    stubInternalApisPlugin: stubInternalApisPlugin
+  };
+};

package/dist/esm/labs/next/presets/preset.js

@@ -76,11 +76,6 @@ export var Preset = /*#__PURE__*/function () {
       cache.forEach(function (options, fn) {
         plugins.push(fn(options));
       });
-      if (plugins.some(function (plugin) {
-        return typeof plugin === 'function';
-      })) {
-        throw new Error("!!! NextEditorPluginWithDependencies detected in presets. That's an unsupported runtime use case right now.");
-      }
       return plugins;
     }
   }, {

package/dist/esm/labs/next/presets/universal.js

@@ -8,6 +8,7 @@ import { isFullPage as fullPageCheck } from '../../../utils/is-full-page';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { createDefaultPreset } from './default';
 import { shouldForceTracking } from '@atlaskit/editor-common/utils';
+import { createStubInternalApis } from './create-stub-internal-apis';
 /**
  * Creates a preset with all of the available plugins.
  * Basis for create-plugins-list and can be used to migrate from Editor -> EditorNext (Presets project)
@@ -24,7 +25,7 @@ import { shouldForceTracking } from '@atlaskit/editor-common/utils';
  * @param getEditorContainerWidth
  * @returns a full featured preset configured according to the provided props - basis for create-plugins-list
  */
-export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, createAnalyticsEvent, insertNodeAPI, editorAnalyticsAPI, editorSelectionAPI, getEditorContainerWidth) {
+export default function createUniversalPreset(appearance, props, featureFlags, prevAppearance, maybeCreateAnalyticsEvent, _insertNodeAPI, _editorAnalyticsAPI, _editorSelectionAPI, _getEditorContainerWidth) {
   var _props$linking;
   var isMobile = appearance === 'mobile';
   var isComment = appearance === 'comment';
@@ -33,6 +34,13 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
   var getEditorFeatureFlags = function getEditorFeatureFlags() {
     return featureFlags;
   };
+  var stubs = createStubInternalApis();
+  var editorSelectionAPI = stubs.editorSelectionAPI,
+    insertNodeAPI = stubs.insertNodeAPI,
+    editorAnalyticsAPI = stubs.editorAnalyticsAPI,
+    stubInternalApisPlugin = stubs.stubInternalApisPlugin;
+  var createAnalyticsEvent = maybeCreateAnalyticsEvent ? maybeCreateAnalyticsEvent : stubs.createAnalyticsEvent;
+  preset.add(stubInternalApisPlugin);
   if (props.allowAnalyticsGASV3) {
     var performanceTracking = props.performanceTracking;
     preset.add([analyticsPlugin, {
@@ -221,7 +229,8 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
       platform: isMobile ? 'mobile' : 'web',
       fullWidthMode: fullWidthMode,
       createAnalyticsEvent: createAnalyticsEvent,
-      linkPicker: (_props$linking3 = props.linking) === null || _props$linking3 === void 0 ? void 0 : _props$linking3.linkPicker
+      linkPicker: (_props$linking3 = props.linking) === null || _props$linking3 === void 0 ? void 0 : _props$linking3.linkPicker,
+      editorAppearance: appearance
     })]);
   }
   if (props.autoformattingProvider) {

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -5,6 +5,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
@@ -30,7 +32,8 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
     _defineProperty(_assertThisInitialized(_this), "changeAlignment", function (align, togglePopup) {
       if (togglePopup) {
@@ -39,16 +42,20 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
       return _this.props.changeAlignment(align);
     });
     _defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
-      _this.handleOpenChange({
-        isOpen: !_this.state.isOpen
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function (_ref) {
-      var isOpen = _ref.isOpen;
       _this.setState({
-        isOpen: isOpen
+        isOpen: !_this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpen: !_this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "hide", function (attrs) {
       if (_this.state.isOpen) {
         _this.setState({
@@ -71,7 +78,9 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var isOpen = this.state.isOpen;
+      var _this$state = this.state,
+        isOpen = _this$state.isOpen,
+        isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
       var _this$props = this.props,
         popupsMountPoint = _this$props.popupsMountPoint,
         popupsBoundariesElement = _this$props.popupsBoundariesElement,
@@ -88,13 +97,19 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         boundariesElement: popupsBoundariesElement,
         scrollableElement: popupsScrollableElement,
         isOpen: isOpen,
-        onOpenChange: function onOpenChange(_ref2) {
-          var _this2$toolbarItemRef, _this2$toolbarItemRef2;
-          var isOpen = _ref2.isOpen;
+        shouldFocusFirstItem: function shouldFocusFirstItem() {
+          if (isOpenedByKeyboard) {
+            _this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {
+              isOpenedByKeyboard: false
+            }));
+          }
+          return isOpenedByKeyboard;
+        },
+        onOpenChange: function onOpenChange(_ref) {
+          var isOpen = _ref.isOpen;
           _this2.setState({
             isOpen: isOpen
           });
-          (_this2$toolbarItemRef = _this2.toolbarItemRef) === null || _this2$toolbarItemRef === void 0 ? void 0 : (_this2$toolbarItemRef2 = _this2$toolbarItemRef.current) === null || _this2$toolbarItemRef2 === void 0 ? void 0 : _this2$toolbarItemRef2.focus();
         },
         handleClickOutside: function handleClickOutside(event) {
           if (event instanceof MouseEvent) {
@@ -118,6 +133,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
           "aria-expanded": isOpen,
           "aria-haspopup": true,
           onClick: this.toggleOpen,
+          onKeyDown: this.toggleOpenByKeyboard,
           iconBefore: jsx("div", {
             css: triggerWrapper
           }, jsx(IconMap, {
@@ -138,6 +154,25 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
         css: separator
       }));
     }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      if (this.state.isOpen && this.state.isOpenedByKeyboard) {
+        // by triggering the keyboard event with a setTimeout, we ensure that the tooltip
+        // associated with the alignment button doesn't render until the next render cycle
+        // where the popup will be correctly positioned and the relative position of the tooltip
+        // will not overlap with the button.
+        setTimeout(function () {
+          var _this3$toolbarItemRef;
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            bubbles: true,
+            key: 'ArrowDown'
+          });
+          (_this3$toolbarItemRef = _this3.toolbarItemRef.current) === null || _this3$toolbarItemRef === void 0 ? void 0 : _this3$toolbarItemRef.dispatchEvent(keyboardEvent);
+        }, 0);
+      }
+    }
   }]);
   return AlignmentToolbar;
 }(React.Component);

package/dist/esm/plugins/analytics/index.js

@@ -1,7 +1,6 @@
 import analyticsPlugin from './plugin';
 import { analyticsPluginKey as pluginKey } from './plugin-key';
-export { ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION, BROWSER_FREEZE_INTERACTION_TYPE, EVENT_TYPE, FULL_WIDTH_MODE, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, MODE, PasteContents, PasteSources, PasteTypes, PLATFORMS, PUNC, SYMBOL, TABLE_ACTION, TABLE_BREAKOUT, TRIGGER_METHOD, USER_CONTEXT, DELETE_DIRECTION, LIST_TEXT_SCENARIOS } from '@atlaskit/editor-common/analytics';
-export { withAnalytics, addAnalytics, findInsertLocation, getAnalyticsEventsFromTransaction, getSelectionType, getStateContext, mapActionSubjectIdToAttributes } from './utils';
+export { ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION, BROWSER_FREEZE_INTERACTION_TYPE, EVENT_TYPE, FULL_WIDTH_MODE, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, MODE, PasteContents, PasteSources, PasteTypes, PLATFORMS, PUNC, SYMBOL, TABLE_ACTION, TABLE_BREAKOUT, TRIGGER_METHOD, USER_CONTEXT, DELETE_DIRECTION, LIST_TEXT_SCENARIOS, fireAnalyticsEvent, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
+export { withAnalytics, addAnalytics, findInsertLocation, getSelectionType, getStateContext, mapActionSubjectIdToAttributes } from './utils';
 export var analyticsPluginKey = pluginKey;
-export default analyticsPlugin;
-export { fireAnalyticsEvent } from './fire-analytics-event';
+export default analyticsPlugin;

package/dist/esm/plugins/analytics/plugin.js

@@ -8,9 +8,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { isPerformanceAPIAvailable, measureRender } from '@atlaskit/editor-common/utils';
 import { ACTION, EVENT_TYPE } from './types';
-import { getAnalyticsEventsFromTransaction } from './utils';
 import { analyticsPluginKey } from './plugin-key';
-import { fireAnalyticsEvent } from './fire-analytics-event';
+import { fireAnalyticsEvent, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
 import { getFeatureFlags } from '../feature-flags-context';
 import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { generateUndoRedoInputSoucePayload } from '../undo-redo/undo-redo-input-source';

package/dist/esm/plugins/analytics/utils.js

@@ -1,5 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { editorAnalyticsChannel } from './consts';
 import { analyticsPluginKey } from './plugin-key';
 function getCreateUIAnalyticsEvent(editorState) {
@@ -41,11 +39,4 @@ export function withAnalytics(payload, channel) {
       }, view);
     };
   };
-}
-export function getAnalyticsEventsFromTransaction(tr) {
-  return tr.steps.filter(function (step) {
-    return step instanceof AnalyticsStep;
-  }).reduce(function (acc, step) {
-    return [].concat(_toConsumableArray(acc), _toConsumableArray(step.analyticsEvents));
-  }, []);
 }

package/dist/esm/plugins/base/pm-plugins/filter-steps.js

@@ -1,5 +1,5 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { ACTION_SUBJECT, ACTION, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '../../analytics';
+import { ACTION_SUBJECT, ACTION, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
 var hasInvalidSteps = function hasInvalidSteps(tr) {
   return (tr.steps || []).some(function (step) {
     return step.from > step.to;

package/dist/esm/plugins/base/pm-plugins/frozen-editor.js

@@ -42,6 +42,8 @@ var dispatchLongTaskEvent = function dispatchLongTaskEvent(dispatchAnalyticsEven
 export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) {
   var interactionType;
   var inputLatencyTracker = null;
+  var inputLatencySingleKeyTracker = null;
+  var inputLatencyRenderedTracker = null;
   if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
     interactionType = setInteractionType(BROWSER_FREEZE_INTERACTION_TYPE.LOADING);
   }
@@ -65,19 +67,80 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
   var shouldTrackSeverity = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.trackSeverity) || DEFAULT_TRACK_SEVERITY_ENABLED;
   var severityThresholdNormal = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityNormalThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL;
   var severityThresholdDegraded = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityDegradedThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED;
+  var createDispatchSample = function createDispatchSample(action, view) {
+    return function (time, severity) {
+      var _getContextIdentifier2;
+      var state = view.state;
+      var nodesCount = getNodeCount(state);
+      var samplePayload = {
+        action: action,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        attributes: _objectSpread(_objectSpread({
+          time: time,
+          nodeSize: state.doc.nodeSize
+        }, nodesCount), {}, {
+          participants: getParticipantsCount(state),
+          objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.objectId,
+          severity: shouldTrackSeverity ? severity : undefined
+        }),
+        eventType: EVENT_TYPE.OPERATIONAL
+      };
+      dispatchAnalyticsEvent(samplePayload);
+    };
+  };
+  var createDispatchAverage = function createDispatchAverage(action, view) {
+    return function (_ref, severity) {
+      var _getContextIdentifier3;
+      var mean = _ref.mean,
+        median = _ref.median,
+        sampleSize = _ref.sampleSize;
+      var state = view.state;
+      var nodeCount = getNodeCount(state);
+      var averagePayload = {
+        action: action,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        attributes: _objectSpread(_objectSpread({
+          mean: mean,
+          median: median,
+          sampleSize: sampleSize
+        }, nodeCount), {}, {
+          nodeSize: state.doc.nodeSize,
+          severity: shouldTrackSeverity ? severity : undefined,
+          participants: getParticipantsCount(state),
+          objectId: (_getContextIdentifier3 = getContextIdentifier(state)) === null || _getContextIdentifier3 === void 0 ? void 0 : _getContextIdentifier3.objectId
+        }),
+        eventType: EVENT_TYPE.OPERATIONAL
+      };
+      dispatchAnalyticsEvent(averagePayload);
+    };
+  };
   return new SafePlugin({
     key: frozenEditorPluginKey,
     props: isPerformanceAPIAvailable() ? {
       handleTextInput: function handleTextInput(view) {
-        var _inputLatencyTracker;
-        (_inputLatencyTracker = inputLatencyTracker) === null || _inputLatencyTracker === void 0 ? void 0 : _inputLatencyTracker.start();
         if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
           interactionType = BROWSER_FREEZE_INTERACTION_TYPE.TYPING;
         }
-        requestAnimationFrame(function () {
-          var _inputLatencyTracker2;
-          (_inputLatencyTracker2 = inputLatencyTracker) === null || _inputLatencyTracker2 === void 0 ? void 0 : _inputLatencyTracker2.end();
-        });
+        if (inputLatencyTracker) {
+          var end = inputLatencyTracker.start();
+
+          // This is called after all handleTextInput events are executed which means first handleTextInput time incorporates following handleTextInput processing time
+          // Also this is called before browser rendering so it doesn't count it.
+          requestAnimationFrame(end);
+        }
+        if (inputLatencySingleKeyTracker) {
+          var _end = inputLatencySingleKeyTracker.start();
+
+          // This is executed before next handleTextInput when multiple keypress events are in one animation frame
+          // so it tracks individual keypress processing time
+          Promise.resolve().then(_end);
+        }
+        if (inputLatencyRenderedTracker) {
+          var _end2 = inputLatencyRenderedTracker.start();
+
+          // This is called at the next event loop so it counts browser rendering time.
+          setTimeout(_end2);
+        }
         return false;
       },
       handleDOMEvents: browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType ? {
@@ -105,10 +168,10 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
           onSampleStart: function onSampleStart() {
             experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
           },
-          onSampleEnd: function onSampleEnd(time, _ref) {
-            var _getContextIdentifier2;
-            var isSlow = _ref.isSlow,
-              severity = _ref.severity;
+          onSampleEnd: function onSampleEnd(time, _ref2) {
+            var _getContextIdentifier4;
+            var isSlow = _ref2.isSlow,
+              severity = _ref2.severity;
             var state = _view.state;
             var nodesCount = getNodeCount(state);
             if (isSlow) {
@@ -120,54 +183,13 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
               nodeSize: state.doc.nodeSize
             }, nodesCount), {}, {
               participants: getParticipantsCount(state),
-              objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.objectId,
+              objectId: (_getContextIdentifier4 = getContextIdentifier(state)) === null || _getContextIdentifier4 === void 0 ? void 0 : _getContextIdentifier4.objectId,
               time: time,
               severity: shouldTrackSeverity ? severity : undefined
             }));
           },
-          dispatchSample: function dispatchSample(time, severity) {
-            var _getContextIdentifier3;
-            var state = _view.state;
-            var nodesCount = getNodeCount(state);
-            var samplePayload = {
-              action: ACTION.INPUT_PERF_SAMPLING,
-              actionSubject: ACTION_SUBJECT.EDITOR,
-              attributes: _objectSpread(_objectSpread({
-                time: time,
-                nodeSize: state.doc.nodeSize
-              }, nodesCount), {}, {
-                participants: getParticipantsCount(state),
-                objectId: (_getContextIdentifier3 = getContextIdentifier(state)) === null || _getContextIdentifier3 === void 0 ? void 0 : _getContextIdentifier3.objectId,
-                severity: shouldTrackSeverity ? severity : undefined
-              }),
-              eventType: EVENT_TYPE.OPERATIONAL
-            };
-            dispatchAnalyticsEvent(samplePayload);
-          },
-          dispatchAverage: function dispatchAverage(_ref2, severity) {
-            var _getContextIdentifier4;
-            var mean = _ref2.mean,
-              median = _ref2.median,
-              sampleSize = _ref2.sampleSize;
-            var state = _view.state;
-            var nodeCount = getNodeCount(state);
-            var averagePayload = {
-              action: ACTION.INPUT_PERF_SAMPLING_AVG,
-              actionSubject: ACTION_SUBJECT.EDITOR,
-              attributes: _objectSpread(_objectSpread({
-                mean: mean,
-                median: median,
-                sampleSize: sampleSize
-              }, nodeCount), {}, {
-                nodeSize: state.doc.nodeSize,
-                severity: shouldTrackSeverity ? severity : undefined,
-                participants: getParticipantsCount(state),
-                objectId: (_getContextIdentifier4 = getContextIdentifier(state)) === null || _getContextIdentifier4 === void 0 ? void 0 : _getContextIdentifier4.objectId
-              }),
-              eventType: EVENT_TYPE.OPERATIONAL
-            };
-            dispatchAnalyticsEvent(averagePayload);
-          },
+          dispatchSample: createDispatchSample(ACTION.INPUT_PERF_SAMPLING, _view),
+          dispatchAverage: createDispatchAverage(ACTION.INPUT_PERF_SAMPLING_AVG, _view),
           onSlowInput: function onSlowInput(time) {
             var _getContextIdentifier5;
             var state = _view.state;
@@ -187,6 +209,26 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
           }
         });
       }
+      if (inputTracking !== null && inputTracking !== void 0 && inputTracking.trackSingleKeypress) {
+        inputLatencySingleKeyTracker = new InputLatencyTracker({
+          samplingRate: samplingRate,
+          slowThreshold: slowThreshold,
+          normalThreshold: severityThresholdNormal,
+          degradedThreshold: severityThresholdDegraded,
+          dispatchSample: createDispatchSample(ACTION.INPUT_PERF_SAMPLING_SINGLE_KEYPRESS, _view),
+          dispatchAverage: createDispatchAverage(ACTION.INPUT_PERF_SAMPLING_SINGLE_KEYPRESS_AVG, _view)
+        });
+      }
+      if (inputTracking !== null && inputTracking !== void 0 && inputTracking.trackRenderingTime) {
+        inputLatencyRenderedTracker = new InputLatencyTracker({
+          samplingRate: samplingRate,
+          slowThreshold: slowThreshold,
+          normalThreshold: severityThresholdNormal,
+          degradedThreshold: severityThresholdDegraded,
+          dispatchSample: createDispatchSample(ACTION.INPUT_PERF_SAMPLING_RENDERED, _view),
+          dispatchAverage: createDispatchAverage(ACTION.INPUT_PERF_SAMPLING_RENDERED_AVG, _view)
+        });
+      }
       var observer;
       try {
         var _observer = new PerformanceObserver(function (list) {
@@ -206,8 +248,8 @@ export default (function (dispatchAnalyticsEvent, inputTracking, browserFreezeTr
       } catch (e) {}
       return {
         destroy: function destroy() {
-          var _inputLatencyTracker3;
-          (_inputLatencyTracker3 = inputLatencyTracker) === null || _inputLatencyTracker3 === void 0 ? void 0 : _inputLatencyTracker3.flush();
+          var _inputLatencyTracker;
+          (_inputLatencyTracker = inputLatencyTracker) === null || _inputLatencyTracker === void 0 ? void 0 : _inputLatencyTracker.flush();
           observer === null || observer === void 0 ? void 0 : observer.disconnect();
         }
       };

package/dist/esm/plugins/base/utils/input-latency-tracking.js

@@ -17,7 +17,6 @@ var InputLatencyTracker = /*#__PURE__*/function () {
     _classCallCheck(this, InputLatencyTracker);
     _defineProperty(this, "samples", []);
     _defineProperty(this, "total", 0);
-    this.currentStart = null;
     this.samplingRate = samplingRate;
     this.slowThreshold = slowThreshold;
     this.normalThreshold = normalThreshold;
@@ -31,34 +30,34 @@ var InputLatencyTracker = /*#__PURE__*/function () {
   _createClass(InputLatencyTracker, [{
     key: "start",
     value: function start() {
-      this.currentStart = performance.now();
+      var _this = this;
+      var currentStart = performance.now();
       if (this.samples.length + 1 === this.samplingRate) {
         var _this$onSampleStart;
         (_this$onSampleStart = this.onSampleStart) === null || _this$onSampleStart === void 0 ? void 0 : _this$onSampleStart.call(this);
       }
-    }
-  }, {
-    key: "end",
-    value: function end() {
-      if (this.currentStart === null) {
-        return;
-      }
-      var isSlow = false;
-      var time = getTimeSince(this.currentStart);
-      this.push(time);
-      if (time > this.slowThreshold) {
-        var _this$onSlowInput;
-        (_this$onSlowInput = this.onSlowInput) === null || _this$onSlowInput === void 0 ? void 0 : _this$onSlowInput.call(this, time);
-        isSlow = true;
-      }
-      if (this.samples.length === this.samplingRate) {
-        var _this$onSampleEnd;
-        this.flush();
-        (_this$onSampleEnd = this.onSampleEnd) === null || _this$onSampleEnd === void 0 ? void 0 : _this$onSampleEnd.call(this, time, {
-          isSlow: isSlow,
-          severity: this.severity(time)
-        });
-      }
+      var end = function end() {
+        if (currentStart === null) {
+          return;
+        }
+        var isSlow = false;
+        var time = getTimeSince(currentStart);
+        _this.push(time);
+        if (time > _this.slowThreshold) {
+          var _this$onSlowInput;
+          (_this$onSlowInput = _this.onSlowInput) === null || _this$onSlowInput === void 0 ? void 0 : _this$onSlowInput.call(_this, time);
+          isSlow = true;
+        }
+        if (_this.samples.length === _this.samplingRate) {
+          var _this$onSampleEnd;
+          _this.flush();
+          (_this$onSampleEnd = _this.onSampleEnd) === null || _this$onSampleEnd === void 0 ? void 0 : _this$onSampleEnd.call(_this, time, {
+            isSlow: isSlow,
+            severity: _this.severity(time)
+          });
+        }
+      };
+      return end;
     }
   }, {
     key: "flush",

package/dist/esm/plugins/block-type/ui/ToolbarBlockType/blocktype-button.js

@@ -22,6 +22,7 @@ export var BlockTypeButton = function BlockTypeButton(props) {
     className: "block-type-btn",
     disabled: props.disabled,
     onClick: props.onClick,
+    onKeyDown: props.onKeyDown,
     title: labelTextStyles,
     "aria-label": labelTextStyles,
     "aria-haspopup": true,