@atlaskit/editor-core 179.1.2 → 180.1.0

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

@@ -0,0 +1,105 @@
+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 const createStubInternalApis = () => {
+  const editorViewRef = {
+    current: null
+  };
+  const createAnalyticsEventRef = {
+    current: null
+  };
+
+  // @ts-ignore
+  const 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: () => {}
+    };
+  };
+  const editorSelectionAPI = createEditorSelectionAPI();
+  const editorAnalyticsAPI = {
+    attachAnalyticsEvent: payload => tr => {
+      const editorView = editorViewRef.current;
+      if (!tr || !createAnalyticsEvent || !editorView) {
+        return false;
+      }
+      attachPayloadIntoTransaction({
+        tr,
+        editorState: editorView.state,
+        payload,
+        channel: FabricChannel.editor
+      });
+      return true;
+    }
+  };
+  const insertNodeAPI = createInsertNodeAPI({
+    getEditorView: () => {
+      return editorViewRef.current;
+    },
+    getEditorPlugins: () => {
+      const fakeTablePlugin = tablesPlugin();
+      if (!(fakeTablePlugin !== null && fakeTablePlugin !== void 0 && fakeTablePlugin.pluginsOptions)) {
+        return [];
+      }
+      return [fakeTablePlugin];
+    }
+  });
+  const MountCreateAnalyticsEventRef = () => {
+    const {
+      createAnalyticsEvent
+    } = useAnalyticsEvents();
+    React.useLayoutEffect(() => {
+      createAnalyticsEventRef.current = createAnalyticsEvent;
+    }, [createAnalyticsEvent]);
+    return null;
+  };
+  const stubInternalApisPlugin = () => ({
+    name: 'stubInternalApisPlugin',
+    pmPlugins() {
+      return [{
+        name: 'stubInternalApisPMPlugin',
+        plugin: () => new SafePlugin({
+          view: editorView => {
+            editorViewRef.current = editorView;
+            return {
+              destroy() {
+                editorViewRef.current = null;
+                createAnalyticsEventRef.current = null;
+              }
+            };
+          }
+        })
+      }];
+    },
+    contentComponent: () => {
+      return /*#__PURE__*/React.createElement(MountCreateAnalyticsEventRef);
+    }
+  });
+  return {
+    editorSelectionAPI,
+    insertNodeAPI,
+    editorAnalyticsAPI,
+    createAnalyticsEvent,
+    stubInternalApisPlugin
+  };
+};

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

@@ -57,9 +57,6 @@ export class Preset {
     cache.forEach((options, fn) => {
       plugins.push(fn(options));
     });
-    if (plugins.some(plugin => typeof plugin === 'function')) {
-      throw new Error("!!! NextEditorPluginWithDependencies detected in presets. That's an unsupported runtime use case right now.");
-    }
     return plugins;
   }
   removeExcludedPlugins(plugins, excludes) {

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

@@ -4,6 +4,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)
@@ -20,13 +21,22 @@ 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;
   const isMobile = appearance === 'mobile';
   const isComment = appearance === 'comment';
   const isFullPage = fullPageCheck(appearance);
   const preset = createDefaultPreset(props);
   const getEditorFeatureFlags = () => featureFlags;
+  const stubs = createStubInternalApis();
+  const {
+    editorSelectionAPI,
+    insertNodeAPI,
+    editorAnalyticsAPI,
+    stubInternalApisPlugin
+  } = stubs;
+  const createAnalyticsEvent = maybeCreateAnalyticsEvent ? maybeCreateAnalyticsEvent : stubs.createAnalyticsEvent;
+  preset.add(stubInternalApisPlugin);
   if (props.allowAnalyticsGASV3) {
     const {
       performanceTracking
@@ -226,7 +236,8 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
       platform: isMobile ? 'mobile' : 'web',
       fullWidthMode,
       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/es2019/plugins/alignment/ui/ToolbarAlignment/index.js

@@ -15,7 +15,8 @@ export class AlignmentToolbar extends React.Component {
     super(...args);
     _defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "state", {
-      isOpen: false
+      isOpen: false,
+      isOpenedByKeyboard: false
     });
     _defineProperty(this, "changeAlignment", (align, togglePopup) => {
       if (togglePopup) {
@@ -24,17 +25,20 @@ export class AlignmentToolbar extends React.Component {
       return this.props.changeAlignment(align);
     });
     _defineProperty(this, "toggleOpen", () => {
-      this.handleOpenChange({
-        isOpen: !this.state.isOpen
-      });
-    });
-    _defineProperty(this, "handleOpenChange", ({
-      isOpen
-    }) => {
       this.setState({
-        isOpen
+        isOpen: !this.state.isOpen,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(this, "toggleOpenByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isOpen: !this.state.isOpen,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(this, "hide", attrs => {
       if (this.state.isOpen) {
         this.setState({
@@ -54,7 +58,8 @@ export class AlignmentToolbar extends React.Component {
   }
   render() {
     const {
-      isOpen
+      isOpen,
+      isOpenedByKeyboard
     } = this.state;
     const {
       popupsMountPoint,
@@ -73,14 +78,21 @@ export class AlignmentToolbar extends React.Component {
       boundariesElement: popupsBoundariesElement,
       scrollableElement: popupsScrollableElement,
       isOpen: isOpen,
+      shouldFocusFirstItem: () => {
+        if (isOpenedByKeyboard) {
+          this.setState({
+            ...this.state,
+            isOpenedByKeyboard: false
+          });
+        }
+        return isOpenedByKeyboard;
+      },
       onOpenChange: ({
         isOpen
       }) => {
-        var _this$toolbarItemRef4, _this$toolbarItemRef5;
         this.setState({
           isOpen
         });
-        (_this$toolbarItemRef4 = this.toolbarItemRef) === null || _this$toolbarItemRef4 === void 0 ? void 0 : (_this$toolbarItemRef5 = _this$toolbarItemRef4.current) === null || _this$toolbarItemRef5 === void 0 ? void 0 : _this$toolbarItemRef5.focus();
       },
       handleClickOutside: event => {
         if (event instanceof MouseEvent) {
@@ -104,6 +116,7 @@ export class AlignmentToolbar extends React.Component {
         "aria-expanded": isOpen,
         "aria-haspopup": true,
         onClick: this.toggleOpen,
+        onKeyDown: this.toggleOpenByKeyboard,
         iconBefore: jsx("div", {
           css: triggerWrapper
         }, jsx(IconMap, {
@@ -122,6 +135,22 @@ export class AlignmentToolbar extends React.Component {
       css: separator
     }));
   }
+  componentDidUpdate(prevProps) {
+    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(() => {
+        var _this$toolbarItemRef$2;
+        const keyboardEvent = new KeyboardEvent('keydown', {
+          bubbles: true,
+          key: 'ArrowDown'
+        });
+        (_this$toolbarItemRef$2 = this.toolbarItemRef.current) === null || _this$toolbarItemRef$2 === void 0 ? void 0 : _this$toolbarItemRef$2.dispatchEvent(keyboardEvent);
+      }, 0);
+    }
+  }
 }
 _defineProperty(AlignmentToolbar, "displayName", 'AlignmentToolbar');
 export default injectIntl(AlignmentToolbar);

package/dist/es2019/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 const analyticsPluginKey = pluginKey;
-export default analyticsPlugin;
-export { fireAnalyticsEvent } from './fire-analytics-event';
+export default analyticsPlugin;

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

@@ -1,9 +1,8 @@
 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/es2019/plugins/analytics/utils.js

@@ -1,4 +1,3 @@
-import { AnalyticsStep } from '@atlaskit/adf-schema/steps';
 import { editorAnalyticsChannel } from './consts';
 import { analyticsPluginKey } from './plugin-key';
 function getCreateUIAnalyticsEvent(editorState) {
@@ -35,7 +34,4 @@ export function withAnalytics(payload, channel) {
       }
     }
   }, view);
-}
-export function getAnalyticsEventsFromTransaction(tr) {
-  return tr.steps.filter(step => step instanceof AnalyticsStep).reduce((acc, step) => [...acc, ...step.analyticsEvents], []);
 }

package/dist/es2019/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';
 const hasInvalidSteps = tr => (tr.steps || []).some(step => step.from > step.to);
 export default (dispatchAnalyticsEvent => {
   return new SafePlugin({

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

@@ -41,6 +41,8 @@ const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, getNodeCount,
 export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) => {
   let interactionType;
   let inputLatencyTracker = null;
+  let inputLatencySingleKeyTracker = null;
+  let inputLatencyRenderedTracker = null;
   if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
     interactionType = setInteractionType(BROWSER_FREEZE_INTERACTION_TYPE.LOADING);
   }
@@ -64,19 +66,81 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
   const shouldTrackSeverity = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.trackSeverity) || DEFAULT_TRACK_SEVERITY_ENABLED;
   const severityThresholdNormal = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityNormalThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL;
   const severityThresholdDegraded = (inputTracking === null || inputTracking === void 0 ? void 0 : inputTracking.severityDegradedThreshold) || DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED;
+  const createDispatchSample = (action, view) => (time, severity) => {
+    var _getContextIdentifier2;
+    const {
+      state
+    } = view;
+    const nodesCount = getNodeCount(state);
+    const samplePayload = {
+      action,
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      attributes: {
+        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);
+  };
+  const createDispatchAverage = (action, view) => ({
+    mean,
+    median,
+    sampleSize
+  }, severity) => {
+    var _getContextIdentifier3;
+    const {
+      state
+    } = view;
+    const nodeCount = getNodeCount(state);
+    const averagePayload = {
+      action,
+      actionSubject: ACTION_SUBJECT.EDITOR,
+      attributes: {
+        mean,
+        median,
+        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(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(() => {
-          var _inputLatencyTracker2;
-          (_inputLatencyTracker2 = inputLatencyTracker) === null || _inputLatencyTracker2 === void 0 ? void 0 : _inputLatencyTracker2.end();
-        });
+        if (inputLatencyTracker) {
+          const 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) {
+          const 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) {
+          const end = inputLatencyRenderedTracker.start();
+
+          // This is called at the next event loop so it counts browser rendering time.
+          setTimeout(end);
+        }
         return false;
       },
       handleDOMEvents: browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType ? {
@@ -108,7 +172,7 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
             isSlow,
             severity
           }) => {
-            var _getContextIdentifier2;
+            var _getContextIdentifier4;
             const {
               state
             } = view;
@@ -122,59 +186,13 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
               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,
               severity: shouldTrackSeverity ? severity : undefined
             });
           },
-          dispatchSample: (time, severity) => {
-            var _getContextIdentifier3;
-            const {
-              state
-            } = view;
-            const nodesCount = getNodeCount(state);
-            const samplePayload = {
-              action: ACTION.INPUT_PERF_SAMPLING,
-              actionSubject: ACTION_SUBJECT.EDITOR,
-              attributes: {
-                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: ({
-            mean,
-            median,
-            sampleSize
-          }, severity) => {
-            var _getContextIdentifier4;
-            const {
-              state
-            } = view;
-            const nodeCount = getNodeCount(state);
-            const averagePayload = {
-              action: ACTION.INPUT_PERF_SAMPLING_AVG,
-              actionSubject: ACTION_SUBJECT.EDITOR,
-              attributes: {
-                mean,
-                median,
-                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: time => {
             var _getContextIdentifier5;
             const {
@@ -196,6 +214,26 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
           }
         });
       }
+      if (inputTracking !== null && inputTracking !== void 0 && inputTracking.trackSingleKeypress) {
+        inputLatencySingleKeyTracker = new InputLatencyTracker({
+          samplingRate,
+          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,
+          slowThreshold,
+          normalThreshold: severityThresholdNormal,
+          degradedThreshold: severityThresholdDegraded,
+          dispatchSample: createDispatchSample(ACTION.INPUT_PERF_SAMPLING_RENDERED, view),
+          dispatchAverage: createDispatchAverage(ACTION.INPUT_PERF_SAMPLING_RENDERED_AVG, view)
+        });
+      }
       let observer;
       try {
         const observer = new PerformanceObserver(list => {
@@ -217,8 +255,8 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
       } catch (e) {}
       return {
         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/es2019/plugins/base/utils/input-latency-tracking.js

@@ -15,7 +15,6 @@ export default class InputLatencyTracker {
   }) {
     _defineProperty(this, "samples", []);
     _defineProperty(this, "total", 0);
-    this.currentStart = null;
     this.samplingRate = samplingRate;
     this.slowThreshold = slowThreshold;
     this.normalThreshold = normalThreshold;
@@ -27,32 +26,33 @@ export default class InputLatencyTracker {
     this.onSlowInput = onSlowInput;
   }
   start() {
-    this.currentStart = performance.now();
+    const 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);
     }
-  }
-  end() {
-    if (this.currentStart === null) {
-      return;
-    }
-    let isSlow = false;
-    const 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,
-        severity: this.severity(time)
-      });
-    }
+    const end = () => {
+      if (currentStart === null) {
+        return;
+      }
+      let isSlow = false;
+      const 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,
+          severity: this.severity(time)
+        });
+      }
+    };
+    return end;
   }
   flush() {
     if (this.samples.length === 0) {

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

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

package/dist/es2019/plugins/block-type/ui/ToolbarBlockType/index.js

@@ -15,18 +15,31 @@ class ToolbarBlockType extends React.PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "state", {
-      active: false
+      active: false,
+      isOpenedByKeyboard: false
     });
     _defineProperty(this, "onOpenChange", attrs => {
       this.setState({
-        active: attrs.isOpen
+        ...this.state,
+        active: attrs.isOpen,
+        isOpenedByKeyboard: attrs.isOpenedByKeyboard
       });
     });
     _defineProperty(this, "handleTriggerClick", () => {
       this.onOpenChange({
-        isOpen: !this.state.active
+        isOpen: !this.state.active,
+        isOpenedByKeyboard: false
       });
     });
+    _defineProperty(this, "handleTriggerByKeyboard", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.onOpenChange({
+          isOpen: !this.state.active,
+          isOpenedByKeyboard: true
+        });
+      }
+    });
     _defineProperty(this, "createItems", () => {
       const {
         intl: {
@@ -69,6 +82,7 @@ class ToolbarBlockType extends React.PureComponent {
       this.props.setBlockType(blockType.name);
       if (shouldCloseMenu) {
         this.setState({
+          ...this.state,
           active: false
         });
       }
@@ -76,7 +90,8 @@ class ToolbarBlockType extends React.PureComponent {
   }
   render() {
     const {
-      active
+      active,
+      isOpenedByKeyboard
     } = this.state;
     const {
       popupsMountPoint,
@@ -117,7 +132,16 @@ class ToolbarBlockType extends React.PureComponent {
         zIndex: akEditorMenuZIndex,
         fitHeight: 360,
         fitWidth: 106,
-        shouldUseDefaultRole: true
+        shouldUseDefaultRole: true,
+        shouldFocusFirstItem: () => {
+          if (isOpenedByKeyboard) {
+            this.setState({
+              ...this.state,
+              isOpenedByKeyboard: false
+            });
+          }
+          return isOpenedByKeyboard;
+        }
       }, jsx(BlockTypeButton, {
         isSmall: isSmall,
         isReducedSpacing: isReducedSpacing,
@@ -125,6 +149,7 @@ class ToolbarBlockType extends React.PureComponent {
         disabled: false,
         title: blockTypeTitles[0],
         onClick: this.handleTriggerClick,
+        onKeyDown: this.handleTriggerByKeyboard,
         formatMessage: formatMessage,
         "aria-expanded": active
       }, longestDropdownMenuItem)), jsx("span", {
@@ -140,6 +165,7 @@ class ToolbarBlockType extends React.PureComponent {
       disabled: true,
       title: blockTypeTitles[0],
       onClick: this.handleTriggerClick,
+      onKeyDown: this.handleTriggerByKeyboard,
       formatMessage: formatMessage,
       "aria-expanded": active
     }, longestDropdownMenuItem), jsx("span", {