@atlaskit/editor-core 165.0.0 → 166.0.2

package/dist/cjs/ui/ChromeCollapsed/styles.js

@@ -17,7 +17,9 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var _templateObject;
 
-var inputStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: white;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), _editorSharedStyles.akEditorSubtleAccent, (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N300, _colors.N50);
+var inputStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: white;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), (0, _tokens.token)('color.border.input', _editorSharedStyles.akEditorSubtleAccent), (0, _constants.borderRadius)(), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N300, _colors.N50);
 exports.inputStyle = inputStyle;

package/dist/cjs/ui/ConfigPanel/ConfigPanel.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

package/dist/cjs/ui/ConfigPanel/Fields/CustomSelect.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

package/dist/cjs/ui/ConfigPanel/Fields/UserSelect.js

@@ -9,10 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = UserSelect;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

package/dist/cjs/ui/ConfigPanel/transformers.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.serialize = exports.findDuplicateFields = exports.deserialize = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

package/dist/cjs/ui/ContentStyles/index.js

@@ -86,11 +86,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var contentStyles = function contentStyles(props) {
-  var _props$featureFlags, _props$featureFlags2;
+  var _props$featureFlags;
 
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid #8cf;\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap,\n  .pm-table-cell-content-wrap div.fabric-editor-block-mark {\n    p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, _styles17.placeholderTextStyles, _styles5.placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? (0, _styles7.highlightingCodeBlockStyles)(props) : (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? _styles15.emojiStylesNext : _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, _styles17.placeholderTextStyles, _styles5.placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? (0, _styles7.highlightingCodeBlockStyles)(props) : (0, _styles7.codeBlockStyles)(props), (0, _styles6.blocktypeStyles)(props), (0, _styles16.textFormattingStyles)(props), _styles.textColorStyles, _styles8.listsStyles, (0, _styles9.ruleStyles)(props), _styles10.mediaStyles, _styles11.layoutStyles, _styles3.telepointerStyle, _styles4.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles12.panelStyles)(props), _styles13.fakeCursorStyles, _styles14.mentionsStyles, _styles15.emojiStyles, _styles.tasksAndDecisionsStyles, _styles18.gridStyles, _styles19.linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles20.extensionStyles, (0, _styles21.expandStyles)(props), _styles22.findReplaceStyles, _styles23.taskDecisionStyles, _styles24.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles25.smartCardStyles, _styles.smartCardSharedStyles, _styles26.dateStyles, _styled.embedCardStyles, _styles2.unsupportedStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
 var createEditorContentStyle = function createEditorContentStyle(styles) {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "165.0.0";
+var version = "166.0.2";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "165.0.0",
+	"version": "166.0.2",
 	"sideEffects": false
 }

package/dist/es2019/actions/index.js

@@ -10,6 +10,7 @@ import { analyticsEventKey } from '@atlaskit/editor-common/utils';
 import { findNodePosWithLocalId } from '../plugins/extension/utils';
 import { getFeatureFlags } from '../plugins/feature-flags-context/get-feature-flags';
 import { getCollabProvider } from '../plugins/collab-edit/native-collab-provider-plugin';
+import deprecationWarnings from '../utils/deprecation-warnings';
 export default class EditorActions {
   constructor() {
     _defineProperty(this, "listeners", []);
@@ -196,7 +197,17 @@ export default class EditorActions {
     return isEmptyDocument(this.editorView.state.doc);
   }
 
-  replaceDocument(rawValue, shouldScrollToBottom = true, shouldAddToHistory = true) {
+  replaceDocument(rawValue, shouldScrollToBottom = true,
+  /** @deprecated [ED-14158] shouldAddToHistory is not being used in this function */
+  shouldAddToHistory = true) {
+    deprecationWarnings('EditorActions.replaceDocument', {
+      shouldAddToHistory
+    }, [{
+      property: 'shouldAddToHistory',
+      description: '[ED-14158] EditorActions.replaceDocument does not use the shouldAddToHistory arg',
+      type: 'removed'
+    }]);
+
     if (!this.editorView || rawValue === undefined || rawValue === null) {
       return false;
     }

package/dist/es2019/create-editor/ReactEditorView.js

@@ -534,9 +534,20 @@ export class ReactEditorView extends React.Component {
           config: this.config,
           eventDispatcher: this.eventDispatcher,
           transformer: this.contentTransformer
-        });
+        }); // Allows us to dispatch analytics within the plugin view.destory methods
+
+        const analyticsConnected = this.eventDispatcher.has(analyticsEventKey, this.handleAnalyticsEvent);
+
+        if (!analyticsConnected) {
+          this.eventDispatcher.on(analyticsEventKey, this.handleAnalyticsEvent);
+        }
+
         this.view.destroy(); // Destroys the dom node & all node views
 
+        if (!analyticsConnected) {
+          this.eventDispatcher.off(analyticsEventKey, this.handleAnalyticsEvent);
+        }
+
         this.view = undefined;
       }
     });
@@ -667,7 +678,6 @@ export class ReactEditorView extends React.Component {
     // This serves to avoid potential runtime exceptions which could arise
     // from an async dispatched transaction after it's unmounted.
     this.canDispatchTransactions = false;
-    this.eventDispatcher.destroy();
     clearTimeout(this.focusTimeoutId);
 
     if (this.reliabilityInterval) {
@@ -686,11 +696,9 @@ export class ReactEditorView extends React.Component {
           state.destroy();
         }
       });
-    } // this.view will be destroyed when React unmounts in handleEditorViewRef
-
+    }
 
-    this.eventDispatcher.off(analyticsEventKey, this.handleAnalyticsEvent);
-    this.eventDispatcher.off('resetEditorState', this.resetEditorState);
+    this.eventDispatcher.destroy(); // this.view will be destroyed when React unmounts in handleEditorViewRef
   } // Helper to allow tests to inject plugins directly
 
 

package/dist/es2019/create-editor/create-plugins-list.js

@@ -192,8 +192,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
 
   if (props.emojiProvider) {
     preset.add([emojiPlugin, {
-      createAnalyticsEvent,
-      allowZeroWidthSpaceAfter: !isMobile
+      createAnalyticsEvent
     }]);
   }
 

package/dist/es2019/editor.js

@@ -497,6 +497,7 @@ export default class Editor extends React.Component {
               eventDispatcher: eventDispatcher,
               dispatchAnalyticsEvent: dispatchAnalyticsEvent,
               maxHeight: this.props.maxHeight,
+              minHeight: this.props.minHeight,
               onSave: this.props.onSave ? this.handleSave : undefined,
               onCancel: this.props.onCancel,
               popupsMountPoint: this.props.popupsMountPoint,
@@ -536,6 +537,19 @@ _defineProperty(Editor, "defaultProps", {
   quickInsert: true
 });
 
+_defineProperty(Editor, "propTypes", {
+  minHeight: ({
+    appearance,
+    minHeight
+  }) => {
+    if (minHeight && appearance && !['comment', 'chromeless'].includes(appearance)) {
+      return new Error('minHeight only supports editor appearance chromeless and comment');
+    }
+
+    return null;
+  }
+});
+
 _defineProperty(Editor, "contextTypes", {
   editorActions: PropTypes.object
 });

package/dist/es2019/event-dispatcher/index.js

@@ -12,6 +12,14 @@ export class EventDispatcher {
     this.listeners[event].add(cb);
   }
 
+  has(event, cb) {
+    if (!this.listeners[event]) {
+      return false;
+    }
+
+    return this.listeners[event].has(cb);
+  }
+
   off(event, cb) {
     if (!this.listeners[event]) {
       return;

package/dist/es2019/nodeviews/ReactNodeView.js

@@ -4,7 +4,6 @@ import React from 'react';
 import { createDispatch } from '../event-dispatcher';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../plugins/analytics';
 import { analyticsEventKey } from '../plugins/analytics/consts';
-import { getFeatureFlags } from '../plugins/feature-flags-context';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from './getPerformanceOptions';
 export default class ReactNodeView {
@@ -101,20 +100,12 @@ export default class ReactNodeView {
     this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.hasAnalyticsContext, this.hasIntlContext);
   }
 
-  createDomRef(options) {
+  createDomRef() {
     if (!this.node.isInline) {
       return document.createElement('div');
     }
 
     const htmlElement = document.createElement('span');
-    const state = this.view.state;
-    const featureFlags = getFeatureFlags(state);
-
-    if (featureFlags && featureFlags.displayInlineBlockForInlineNodes && (options === null || options === void 0 ? void 0 : options.displayInlineBlockForInlineNodes) !== false) {
-      htmlElement.style.display = 'inline-block';
-      htmlElement.style.userSelect = 'all';
-    }
-
     return htmlElement;
   }
 

package/dist/es2019/nodeviews/getInlineNodeViewProducer.styles.js

@@ -6,6 +6,15 @@ export const InlineNodeViewSharedStyles = css`
   .inlineNodeView {
     display: inline;
     user-select: all;
+    /* Collapses zero width spaces inside the inline node view
+    to prevent the node from line breaking too early.
+    */
+    white-space: nowrap;
+    /* Then reset to the Editor default so we don't interfere
+    with any component styling. */
+    & > * {
+      white-space: pre-wrap;
+    }
   }
 
   &.ua-chrome .inlineNodeView > span {

package/dist/es2019/plugins/analytics/types/enums.js

@@ -55,6 +55,7 @@ export let ACTION;
   ACTION["INDENTED"] = "indented";
   ACTION["INITIALISED"] = "initialised";
   ACTION["INPUT_PERF_SAMPLING"] = "inputPerfSampling";
+  ACTION["INPUT_PERF_SAMPLING_AVG"] = "inputPerfSamplingAvg";
   ACTION["INSERTED"] = "inserted";
   ACTION["INVALID_DOCUMENT_ENCOUNTERED"] = "invalidDocumentEncountered";
   ACTION["INVOKED"] = "invoked";

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

@@ -7,7 +7,7 @@ import { getParticipantsCount } from '../../collab-edit/get-participants-count';
 import { countNodes } from '../../../utils/count-nodes';
 import { getContextIdentifier } from './context-identifier';
 import { setInteractionType } from '../utils/frozen-editor';
-import { getTimeSince } from '../../../utils/performance/get-performance-timing';
+import InputLatencyTracker from '../utils/input-latency-tracking';
 export const frozenEditorPluginKey = new PluginKey('frozenEditor');
 const DEFAULT_KEYSTROKE_SAMPLING_LIMIT = 100;
 const DEFAULT_SLOW_THRESHOLD = 300;
@@ -18,13 +18,13 @@ const DEFAULT_TRACK_SEVERITY_ENABLED = false;
 export const DEFAULT_TRACK_SEVERITY_THRESHOLD_NORMAL = 100;
 export const DEFAULT_TRACK_SEVERITY_THRESHOLD_DEGRADED = 500;
 
-const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, allowCountNodes, interactionType, severity) => {
+const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, getNodeCount, interactionType, severity) => {
   var _getContextIdentifier;
 
   const {
     state
   } = view;
-  const nodesCount = allowCountNodes ? countNodes(view.state) : {};
+  const nodesCount = getNodeCount(state);
   return dispatchAnalyticsEvent({
     action: ACTION.BROWSER_FREEZE,
     actionSubject: ACTION_SUBJECT.EDITOR,
@@ -42,8 +42,8 @@ const dispatchLongTaskEvent = (dispatchAnalyticsEvent, view, time, allowCountNod
 };
 
 export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, ufo) => {
-  let keystrokeCount = 0;
   let interactionType;
+  let inputLatencyTracker = null;
 
   if (browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType) {
     interactionType = setInteractionType(BROWSER_FREEZE_INTERACTION_TYPE.LOADING);
@@ -53,6 +53,20 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
   const slowThreshold = inputTracking && typeof inputTracking.slowThreshold === 'number' ? inputTracking.slowThreshold : DEFAULT_SLOW_THRESHOLD;
   const freezeThreshold = inputTracking && typeof inputTracking.freezeThreshold === 'number' ? inputTracking.freezeThreshold : DEFAULT_FREEZE_THRESHOLD;
   const allowCountNodes = inputTracking && inputTracking.countNodes;
+  let prevNodeCountState = null;
+  let prevNodeCount = {}; // Cache the result as we were calling this multiple times
+  // and has potential to be expensive
+
+  const getNodeCount = state => {
+    if (state === prevNodeCountState) {
+      return prevNodeCount;
+    }
+
+    prevNodeCount = allowCountNodes ? countNodes(state) : {};
+    prevNodeCountState = state;
+    return prevNodeCount;
+  };
+
   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;
@@ -60,85 +74,18 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
     key: frozenEditorPluginKey,
     props: isPerformanceAPIAvailable() ? {
       handleTextInput(view) {
-        const {
-          state
-        } = view;
-        const now = performance.now();
+        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;
         }
 
-        const experienceStore = ufo ? ExperienceStore.getInstance(view) : undefined;
-        const trackTyping = samplingRate && ++keystrokeCount === samplingRate;
-
-        if (trackTyping) {
-          experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
-        }
-
         requestAnimationFrame(() => {
-          const diff = getTimeSince(now);
-
-          if (diff > slowThreshold) {
-            const nodesCount = allowCountNodes ? countNodes(view.state) : {};
-
-            if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
-              var _getContextIdentifier2;
-
-              dispatchAnalyticsEvent({
-                action: ACTION.SLOW_INPUT,
-                actionSubject: ACTION_SUBJECT.EDITOR,
-                attributes: {
-                  time: diff,
-                  nodeSize: state.doc.nodeSize,
-                  ...nodesCount,
-                  participants: getParticipantsCount(state),
-                  objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.objectId
-                },
-                eventType: EVENT_TYPE.OPERATIONAL
-              });
-            }
-
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.addMetadata(EditorExperience.typing, {
-              slowInput: true
-            });
-          }
-
-          if (trackTyping) {
-            var _getContextIdentifier4;
+          var _inputLatencyTracker2;
 
-            const nodesCount = allowCountNodes ? countNodes(view.state) : {};
-            keystrokeCount = 0;
-            const severity = shouldTrackSeverity ? getAnalyticsEventSeverity(diff, severityThresholdNormal, severityThresholdDegraded) : undefined;
-
-            if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
-              var _getContextIdentifier3;
-
-              const payload = {
-                action: ACTION.INPUT_PERF_SAMPLING,
-                actionSubject: ACTION_SUBJECT.EDITOR,
-                attributes: {
-                  time: diff,
-                  nodeSize: state.doc.nodeSize,
-                  ...nodesCount,
-                  participants: getParticipantsCount(state),
-                  objectId: (_getContextIdentifier3 = getContextIdentifier(state)) === null || _getContextIdentifier3 === void 0 ? void 0 : _getContextIdentifier3.objectId,
-                  severity
-                },
-                eventType: EVENT_TYPE.OPERATIONAL
-              };
-              dispatchAnalyticsEvent(payload);
-            }
-
-            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.success(EditorExperience.typing, {
-              nodeSize: state.doc.nodeSize,
-              ...nodesCount,
-              participants: getParticipantsCount(state),
-              objectId: (_getContextIdentifier4 = getContextIdentifier(state)) === null || _getContextIdentifier4 === void 0 ? void 0 : _getContextIdentifier4.objectId,
-              time: diff,
-              severity
-            });
-          }
+          (_inputLatencyTracker2 = inputLatencyTracker) === null || _inputLatencyTracker2 === void 0 ? void 0 : _inputLatencyTracker2.end();
         });
         return false;
       },
@@ -160,6 +107,116 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
         return {};
       }
 
+      const experienceStore = ufo ? ExperienceStore.getInstance(view) : undefined;
+
+      if (inputTracking !== null && inputTracking !== void 0 && inputTracking.enabled) {
+        inputLatencyTracker = new InputLatencyTracker({
+          samplingRate,
+          slowThreshold,
+          normalThreshold: severityThresholdNormal,
+          degradedThreshold: severityThresholdDegraded,
+          onSampleStart: () => {
+            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.start(EditorExperience.typing);
+          },
+          onSampleEnd: (time, {
+            isSlow,
+            severity
+          }) => {
+            var _getContextIdentifier2;
+
+            const {
+              state
+            } = view;
+            const nodesCount = getNodeCount(state);
+
+            if (isSlow) {
+              experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.addMetadata(EditorExperience.typing, {
+                slowInput: true
+              });
+            }
+
+            experienceStore === null || experienceStore === void 0 ? void 0 : experienceStore.success(EditorExperience.typing, {
+              nodeSize: state.doc.nodeSize,
+              ...nodesCount,
+              participants: getParticipantsCount(state),
+              objectId: (_getContextIdentifier2 = getContextIdentifier(state)) === null || _getContextIdentifier2 === void 0 ? void 0 : _getContextIdentifier2.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);
+          },
+          onSlowInput: time => {
+            var _getContextIdentifier5;
+
+            const {
+              state
+            } = view;
+            const nodesCount = getNodeCount(state);
+            dispatchAnalyticsEvent({
+              action: ACTION.SLOW_INPUT,
+              actionSubject: ACTION_SUBJECT.EDITOR,
+              attributes: {
+                time,
+                nodeSize: state.doc.nodeSize,
+                ...nodesCount,
+                participants: getParticipantsCount(state),
+                objectId: (_getContextIdentifier5 = getContextIdentifier(state)) === null || _getContextIdentifier5 === void 0 ? void 0 : _getContextIdentifier5.objectId
+              },
+              eventType: EVENT_TYPE.OPERATIONAL
+            });
+          }
+        });
+      }
+
       let observer;
 
       try {
@@ -172,7 +229,7 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
             } = perfEntries[i];
 
             if (duration > freezeThreshold) {
-              dispatchLongTaskEvent(dispatchAnalyticsEvent, view, duration, allowCountNodes, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType ? interactionType : undefined, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackSeverity ? getAnalyticsEventSeverity(duration, browserFreezeTracking.severityNormalThreshold || NORMAL_SEVERITY_THRESHOLD, browserFreezeTracking.severityDegradedThreshold || DEGRADED_SEVERITY_THRESHOLD) : undefined);
+              dispatchLongTaskEvent(dispatchAnalyticsEvent, view, duration, getNodeCount, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackInteractionType ? interactionType : undefined, browserFreezeTracking !== null && browserFreezeTracking !== void 0 && browserFreezeTracking.trackSeverity ? getAnalyticsEventSeverity(duration, browserFreezeTracking.severityNormalThreshold || NORMAL_SEVERITY_THRESHOLD, browserFreezeTracking.severityDegradedThreshold || DEGRADED_SEVERITY_THRESHOLD) : undefined);
             }
           }
         }); // register observer for long task notifications
@@ -184,9 +241,10 @@ export default ((dispatchAnalyticsEvent, inputTracking, browserFreezeTracking, u
 
       return {
         destroy: () => {
-          if (observer) {
-            observer.disconnect();
-          }
+          var _inputLatencyTracker3;
+
+          (_inputLatencyTracker3 = inputLatencyTracker) === null || _inputLatencyTracker3 === void 0 ? void 0 : _inputLatencyTracker3.flush();
+          observer === null || observer === void 0 ? void 0 : observer.disconnect();
         }
       };
     }