@atlaskit/editor-common 70.1.3 → 70.2.1

package/dist/es2019/ui/DropList/index.js

@@ -10,7 +10,7 @@ import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "70.1.3";
+const packageVersion = "70.2.1";
 const halfFocusRing = 1;
 const dropOffset = `0, ${gridSize()}px`;
 

package/dist/es2019/ui/Expand/index.js

@@ -117,8 +117,10 @@ const containerStyles = styleProps => {
       border-color 0.3s ${akEditorSwoopCubicBezier};
     padding: ${gridSize()}px;
 
-    // TODO: https://product-fabric.atlassian.net/browse/DSP-4152
     &:hover {
+      // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.
+      // This is because the default state already uses the same token and, as such, the hover style won't change anything.
+      // https://product-fabric.atlassian.net/browse/DSP-4152
       border: 1px solid
         ${themed({
     light: token('color.border', colors.N50A),
@@ -135,20 +137,20 @@ const containerStyles = styleProps => {
 };
 
 const contentStyles = styleProps => themeProps => css`
-  padding-top: ${styleProps.expanded ? gridSize() : 0}px;
-  padding-right: ${gridSize()}px;
-  padding-left: ${gridSize() * 4 - gridSize() / 2}px;
-  display: flow-root;
-
-  // The follow rules inside @supports block are added as a part of ED-8893
-  // The fix is targeting mobile bridge on iOS 12 or below,
-  // We should consider remove this fix when we no longer support iOS 12
-  @supports not (display: flow-root) {
-    width: 100%;
-    box-sizing: border-box;
-  }
+    padding-top: ${styleProps.expanded ? gridSize() : 0}px;
+    padding-right: ${gridSize()}px;
+    padding-left: ${gridSize() * 4 - gridSize() / 2}px;
+    display: flow-root;
+
+    // The follow rules inside @supports block are added as a part of ED-8893
+    // The fix is targeting mobile bridge on iOS 12 or below,
+    // We should consider remove this fix when we no longer support iOS 12
+    @supports not (display: flow-root) {
+      width: 100%;
+      box-sizing: border-box;
+    }
 
-  ${!styleProps.expanded ? `
+    ${!styleProps.expanded ? `
         .expand-content-wrapper, .nestedExpand-content-wrapper {
           /* We visually hide the content here to preserve the content during copy+paste */
           width: 100%;
@@ -160,7 +162,7 @@ const contentStyles = styleProps => themeProps => css`
           user-select: none;
         }
       ` : ''}
-`;
+  `;
 
 const titleInputStyles = props => css`
   outline: none;

package/dist/es2019/ui/IntlProviderIfMissingWrapper/index.js

@@ -0,0 +1,18 @@
+import React, { useContext } from 'react';
+import { IntlContext, IntlProvider } from 'react-intl-next';
+
+const useCheckIntlContext = () => useContext(IntlContext) === null;
+
+export default function IntlProviderIfMissingWrapper({
+  children
+}) {
+  const missingIntlContext = useCheckIntlContext();
+
+  if (missingIntlContext) {
+    return /*#__PURE__*/React.createElement(IntlProvider, {
+      locale: "en"
+    }, children);
+  }
+
+  return children;
+}

package/dist/es2019/ui/Popup/index.js

@@ -205,7 +205,8 @@ export default class Popup extends React.Component {
       style: {
         position: 'absolute',
         zIndex: this.props.zIndex || akEditorFloatingPanelZIndex,
-        ...position
+        ...position,
+        ...this.props.style
       },
       "aria-label": this.props.ariaLabel || 'Popup' // Indicates component is an editor pop. Required for focus handling in Message.tsx
       ,

package/dist/es2019/ui/PortalProvider/index.js

@@ -1,11 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _class;
+
 import React from 'react';
+import PropTypes from 'prop-types';
 import { createPortal, unmountComponentAtNode, unstable_renderSubtreeIntoContainer } from 'react-dom';
 import { injectIntl, RawIntlProvider, useIntl } from 'react-intl-next';
 import { default as AnalyticsReactContext } from '@atlaskit/analytics-next-stable-react-context';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { EventDispatcher } from '../../event-dispatcher';
+import IntlProviderIfMissingWrapper from '../IntlProviderIfMissingWrapper';
 import { PortalProviderThemeProviders } from './PortalProviderThemesProvider';
 export class PortalProviderAPI extends EventDispatcher {
   constructor(intl, onAnalyticsEvent, analyticsContext, themeMode) {
@@ -29,12 +34,10 @@ export class PortalProviderAPI extends EventDispatcher {
       hasAnalyticsContext,
       hasIntlContext
     });
-
-    const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+    const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
       mode: this.themeMode
     }, children());
-
-    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders()) : childrenWithThemeProviders();
+    let wrappedChildren = this.useAnalyticsContext ? /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders) : childrenWithThemeProviders;
 
     if (hasIntlContext) {
       wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
@@ -60,19 +63,18 @@ export class PortalProviderAPI extends EventDispatcher {
       }
 
       let wrappedChildren = portal.children();
-
-      const childrenWithThemeProviders = () => /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
+      const childrenWithThemeProviders = /*#__PURE__*/React.createElement(PortalProviderThemeProviders, {
         mode: themeMode
       }, wrappedChildren);
 
       if (portal.hasAnalyticsContext && this.useAnalyticsContext) {
-        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders());
+        wrappedChildren = /*#__PURE__*/React.createElement(AnalyticsContextWrapper, null, childrenWithThemeProviders);
       }
 
       if (portal.hasIntlContext) {
         wrappedChildren = /*#__PURE__*/React.createElement(RawIntlProvider, {
           value: this.intl
-        }, childrenWithThemeProviders());
+        }, childrenWithThemeProviders);
       }
 
       unstable_renderSubtreeIntoContainer(this.context, wrappedChildren, container);
@@ -135,17 +137,32 @@ class BasePortalProvider extends React.Component {
 _defineProperty(BasePortalProvider, "displayName", 'PortalProvider');
 
 export const PortalProvider = injectIntl(BasePortalProvider);
-export const PortalProviderWithThemeProviders = props => {
+export const PortalProviderWithThemeProviders = ({
+  onAnalyticsEvent,
+  useAnalyticsContext,
+  render
+}) => /*#__PURE__*/React.createElement(IntlProviderIfMissingWrapper, null, /*#__PURE__*/React.createElement(PortalProviderWithThemeAndIntlProviders, {
+  onAnalyticsEvent: onAnalyticsEvent,
+  useAnalyticsContext: useAnalyticsContext,
+  render: render
+}));
+
+const PortalProviderWithThemeAndIntlProviders = ({
+  onAnalyticsEvent,
+  useAnalyticsContext,
+  render
+}) => {
   const intl = useIntl();
   const globalTheme = useGlobalTheme();
   return /*#__PURE__*/React.createElement(BasePortalProvider, {
     intl: intl,
     themeMode: globalTheme.mode,
-    onAnalyticsEvent: props.onAnalyticsEvent,
-    useAnalyticsContext: props.useAnalyticsContext,
-    render: props.render
+    onAnalyticsEvent: onAnalyticsEvent,
+    useAnalyticsContext: useAnalyticsContext,
+    render: render
   });
 };
+
 export class PortalRenderer extends React.Component {
   constructor(props) {
     super(props);
@@ -179,7 +196,7 @@ const dummyAnalyticsContext = {
   getAtlaskitAnalyticsEventHandlers() {}
 
 };
-const AnalyticsContextWrapper = class extends React.Component {
+const AnalyticsContextWrapper = (_class = class AnalyticsContextWrapper extends React.Component {
   render() {
     const {
       value
@@ -191,4 +208,6 @@ const AnalyticsContextWrapper = class extends React.Component {
     }, this.props.children);
   }
 
-};
+}, _defineProperty(_class, "contextTypes", {
+  contextAdapter: PropTypes.object
+}), _class);

package/dist/es2019/ui/index.js

@@ -15,4 +15,5 @@ export { WithCreateAnalyticsEvent } from './WithCreateAnalyticsEvent';
 export { messages as expandMessages, sharedExpandStyles, ExpandIconWrapper, expandLayoutWrapperStyle, ExpandLayoutWrapperWithRef } from './Expand';
 export { ErrorMessage, HelperMessage, ValidMessage } from './Messages';
 export { clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from './clear-next-sibling-margin-top';
-export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
+export { IntlErrorBoundary, REACT_INTL_ERROR_MESSAGE } from './IntlErrorBoundary';
+export { default as IntlProviderIfMissingWrapper } from './IntlProviderIfMissingWrapper';

package/dist/es2019/utils/breakout.js

@@ -1,6 +1,7 @@
 import { akEditorBreakoutPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 import { mapBreakpointToLayoutMaxWidth } from '../ui/BaseTheme';
 import { getBreakpoint } from '../ui/WidthProvider';
+import { parsePx } from './dom';
 /**
  * Variables required to construct a context for breakout ssr inline script.
  *
@@ -15,6 +16,11 @@ const breakoutConsts = {
   wideLayoutWidth: akEditorWideLayoutWidth,
   mapBreakpointToLayoutMaxWidth,
   getBreakpoint,
+
+  /**
+   * Consumers are opinionated that this will always return a string ending in
+   * `px` when called with `full-width` or `wide` as the layout parameter.
+   */
   calcBreakoutWidth: (layout, containerWidth) => {
     const effectiveFullWidth = containerWidth - breakoutConsts.padding;
 
@@ -57,4 +63,44 @@ export const absoluteBreakoutWidth = (layout, containerWidth) => {
 };
 export { breakoutConsts };
 export const calcWideWidth = breakoutConsts.calcWideWidth;
-export const calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
+export const calcBreakoutWidth = breakoutConsts.calcBreakoutWidth;
+export function calculateBreakoutStyles({
+  mode,
+  widthStateLineLength,
+  widthStateWidth
+}) {
+  const breakoutWidth = calcBreakoutWidth(mode, widthStateWidth);
+  const breakoutWidthPx = parsePx(breakoutWidth);
+
+  if (!widthStateLineLength) {
+    // lineLength is not normally undefined when this is run for,
+    // consumers but can be in SSR, initial render or test (jsdom)
+    // environments.
+    //
+    // this approach doesn't work well with position: fixed, so
+    // it breaks things like sticky headers.
+    //
+    // It can also cause bluriness for some child content (such as iframes)
+    return {
+      type: 'line-length-unknown',
+      width: breakoutWidth,
+      transform: 'translateX(-50%)',
+      marginLeft: '50%'
+    };
+  } // NOTE
+  // At time of writing -- when toggling between full-width and
+  // full-page appearance modes. There is a slight delay before
+  // the widthState is updated.
+  // During this period -- the marginLeftPx will be incorrect.
+
+
+  const marginLeftPx = -(breakoutWidthPx - widthStateLineLength) / 2;
+  return {
+    type: 'line-length-known',
+    width: breakoutWidth,
+    marginLeft: `${marginLeftPx}px`
+  };
+}
+export function calcBreakoutWidthPx(mode, widthStateWidth) {
+  return parsePx(calcBreakoutWidth(mode, widthStateWidth));
+}

package/dist/es2019/utils/collab.js

@@ -0,0 +1,13 @@
+export const getParticipantsCount = editorState => {
+  var _collabEditPlugin$$pa, _collabEditPlugin$$pa2;
+
+  // TODO: ED-15663
+  // Please, do not copy or use this kind of code below
+  // @ts-ignore
+  if (!editorState || !editorState['collabEditPlugin$']) {
+    return 1;
+  }
+
+  const participantsCount = (_collabEditPlugin$$pa = (_collabEditPlugin$$pa2 = editorState['collabEditPlugin$'].participants) === null || _collabEditPlugin$$pa2 === void 0 ? void 0 : _collabEditPlugin$$pa2.size()) !== null && _collabEditPlugin$$pa !== void 0 ? _collabEditPlugin$$pa : 1;
+  return participantsCount;
+};

package/dist/es2019/utils/dom.js

@@ -90,6 +90,22 @@ export function closest(node, s) {
 export function closestElement(node, s) {
   return closest(node, s);
 }
+/**
+ * Util for converting a css pixel size value to a number (of pixels).
+ *
+ * ie.
+ * ```ts
+ * const pixels = parsePx('10px')
+ * //    ^$ const pixels: number
+ * ```
+ * * ```ts
+ * const pixels = parsePx('10')
+ * //    ^$ const pixels: number | undefined
+ * ```
+ */
+// At time of writting prettier would strip the extend here.
+// prettier-ignore
+
 export function parsePx(pxStr) {
   if (!pxStr.endsWith('px')) {
     return undefined;

package/dist/es2019/utils/get-performance-options.js

@@ -0,0 +1,57 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { getParticipantsCount } from './collab';
+import { startMeasure, stopMeasure } from './performance/measure'; // This was existing logic when converting from ReactNodeView
+// our current sampling for this event is not bound by node.type
+
+let nodeViewRenderedEventsCounter = 0;
+const DEFAULT_SAMPLING_RATE = 100;
+const DEFAULT_SLOW_THRESHOLD = 7;
+export function getPerformanceOptions(view) {
+  var _nodeViewTracking$sam, _nodeViewTracking$slo;
+
+  // TODO: ED-15663
+  // Please, do not copy or use this kind of code below
+  // @ts-ignore
+  const fakePluginKey = {
+    key: 'analyticsPlugin$',
+    getState: state => {
+      return state['analyticsPlugin$'];
+    }
+  };
+  const pluginState = fakePluginKey.getState(view.state);
+  const nodeViewTracking = pluginState && pluginState.performanceTracking ? pluginState.performanceTracking.nodeViewTracking || {} : {};
+  const samplingRate = (_nodeViewTracking$sam = nodeViewTracking.samplingRate) !== null && _nodeViewTracking$sam !== void 0 ? _nodeViewTracking$sam : DEFAULT_SAMPLING_RATE;
+  const slowThreshold = (_nodeViewTracking$slo = nodeViewTracking.slowThreshold) !== null && _nodeViewTracking$slo !== void 0 ? _nodeViewTracking$slo : DEFAULT_SLOW_THRESHOLD;
+  return {
+    trackingEnabled: !!nodeViewTracking.enabled,
+    samplingRate,
+    slowThreshold
+  };
+}
+export function startMeasureReactNodeViewRendered({
+  nodeTypeName
+}) {
+  startMeasure(`🦉${nodeTypeName}::ReactNodeView`);
+}
+export function stopMeasureReactNodeViewRendered({
+  nodeTypeName,
+  dispatchAnalyticsEvent,
+  editorState,
+  samplingRate,
+  slowThreshold
+}) {
+  stopMeasure(`🦉${nodeTypeName}::ReactNodeView`, duration => {
+    if (++nodeViewRenderedEventsCounter % samplingRate === 0 && duration > slowThreshold) {
+      dispatchAnalyticsEvent({
+        action: ACTION.REACT_NODEVIEW_RENDERED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          node: nodeTypeName,
+          duration,
+          participants: getParticipantsCount(editorState)
+        }
+      });
+    }
+  });
+}

package/dist/es2019/utils/index.js

@@ -5,7 +5,7 @@ export { default as ErrorReporter } from './error-reporter';
 export { isPastDate, timestampToIsoFormat, timestampToString, timestampToTaskContext, timestampToUTCDate, todayTimestampInUTC } from './date';
 export { isElementInTableCell, isTextSelection, isLastItemMediaGroup, setNodeSelection, setTextSelection, nonNullable, stepAddsOneOf, stepHasSlice, extractSliceFromStep, isValidPosition } from './editor-core-utils';
 export { withImageLoader } from './imageLoader';
-export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts } from './breakout';
+export { absoluteBreakoutWidth, calcBreakoutWidth, calcWideWidth, breakoutConsts, calculateBreakoutStyles, calcBreakoutWidthPx } from './breakout';
 export { findChangedNodesFromTransaction, validNode, validateNodes, isType, isParagraph, isText, isLinkMark, SelectedState, isNodeSelectedOrInRange, isSupportedInParent } from './nodes';
 export { pluginFactory } from './plugin-state-factory';
 export { getFragmentBackingArray, mapFragment, mapSlice, flatmap, mapChildren } from './slice';
@@ -26,8 +26,12 @@ export { isTextInput } from './is-text-input';
 export { ZERO_WIDTH_SPACE, ZERO_WIDTH_JOINER } from './whitespace';
 export { shouldForceTracking } from './should-force-tracking';
 export { getModeFromTheme } from './getModeFromTheme';
+export { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from './get-performance-options';
 export { sniffUserBrowserExtensions } from './browser-extensions';
 export { RenderCountProfiler } from './profiler/render-count';
 export { validateADFEntity, validationErrorHandler } from './validate-using-spec';
 export { getShallowPropsDifference, getPropsDifference } from './compare-props';
-export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';
+export { useComponentRenderTracking } from './performance/hooks/use-component-render-tracking';
+export { isOutdatedBrowser } from './outdated-browsers';
+export { isReferencedSource } from './referentiality';
+export { sendLogs } from './sendLogs';

package/dist/es2019/utils/outdated-browsers.js

@@ -0,0 +1,32 @@
+export const isOutdatedBrowser = userAgent => {
+  // Take browsers in both Desktop and Mobile (includes Chrome, Firefox, Edge and Safari) within last 2 years
+  const chrome = /Chrome\//.test(userAgent) && !/OPR\//.test(userAgent);
+  const chromeVersion = chrome ? parseInt((userAgent.match(/Chrome\/(\d+)/) || [])[1], 10) : 0;
+
+  if (chromeVersion >= 84) {
+    return false;
+  }
+
+  const gecko = /gecko\/\d/i.test(userAgent);
+  const geckoVersion = gecko ? parseInt((userAgent.match(/Firefox\/(\d+)/) || [])[1], 10) : 0;
+
+  if (geckoVersion >= 84) {
+    return false;
+  }
+
+  const edge = /Edge\/(\d+)/.exec(userAgent);
+  const edgeVersion = edge ? +edge[1] : 0;
+
+  if (edgeVersion >= 84) {
+    return false;
+  }
+
+  const safari = !chrome && !gecko && /Version\/([0-9\._]+).*Safari/.test(userAgent);
+  const safariVersion = safari ? parseInt((userAgent.match(/Version\/([0-9\._]+).*Safari/) || [])[1], 10) : 0;
+
+  if (safariVersion >= 12) {
+    return false;
+  }
+
+  return true;
+};

package/dist/es2019/utils/referentiality.js

@@ -0,0 +1,34 @@
+export const isReferencedSource = (state, node) => {
+  var _node$attrs, _node$marks, _node$marks$find, _node$marks$find$attr;
+
+  if (!node) {
+    return false;
+  }
+
+  let found = false; // Handle nodes having 2 uuids. They could have a localId or a fragment. Regardless this needs
+  // to check if either id is used by a data consumer.
+
+  const localIds = new Set([(_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId, (_node$marks = node.marks) === null || _node$marks === void 0 ? void 0 : (_node$marks$find = _node$marks.find(mark => mark.type === state.schema.marks.fragment)) === null || _node$marks$find === void 0 ? void 0 : (_node$marks$find$attr = _node$marks$find.attrs) === null || _node$marks$find$attr === void 0 ? void 0 : _node$marks$find$attr.localId].filter(Boolean)); // If there are no uuids on the node then it's not possible for it to be referenced anywhere.
+
+  if (!localIds.size) {
+    return false;
+  }
+
+  state.doc.descendants(node => {
+    var _dataConsumer$attrs$s, _dataConsumer$attrs$s2;
+
+    if (found) {
+      return false;
+    }
+
+    const dataConsumer = node.marks.find(mark => mark.type === state.schema.marks.dataConsumer);
+
+    if (!dataConsumer) {
+      return true;
+    }
+
+    found = (_dataConsumer$attrs$s = (_dataConsumer$attrs$s2 = dataConsumer.attrs.sources) === null || _dataConsumer$attrs$s2 === void 0 ? void 0 : _dataConsumer$attrs$s2.some(src => localIds.has(src))) !== null && _dataConsumer$attrs$s !== void 0 ? _dataConsumer$attrs$s : false;
+    return !found;
+  });
+  return found;
+};

package/dist/es2019/utils/sendLogs.js

@@ -0,0 +1,8 @@
+export const sendLogs = body => fetch('https://analytics.atlassian.com/analytics/events', {
+  method: 'POST',
+  headers: {
+    Accept: 'application/json, */*',
+    'Content-Type': 'application/json'
+  },
+  body: JSON.stringify(body)
+});

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "70.1.3",
+	"version": "70.2.1",
 	"sideEffects": false
 }

package/dist/es2019/with-plugin-state/index.js

@@ -1,6 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import PropTypes from 'prop-types';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
+import { createDispatch } from '../event-dispatcher';
+import { analyticsEventKey, startMeasure, stopMeasure } from '../utils';
+import { getParticipantsCount } from '../utils/collab';
 const DEFAULT_SAMPLING_RATE = 100;
 const DEFAULT_SLOW_THRESHOLD = 4;
 
@@ -32,6 +36,8 @@ class WithPluginState extends React.Component {
 
     _defineProperty(this, "isSubscribed", false);
 
+    _defineProperty(this, "callsCount", 0);
+
     _defineProperty(this, "state", this.getPluginsStates(this.props.plugins, this.getEditorView(this.props, this.context)));
 
     _defineProperty(this, "handlePluginStateChange", (propName, pluginName, performanceOptions, skipEqualityCheck) => pluginState => {
@@ -62,39 +68,42 @@ class WithPluginState extends React.Component {
 
       const debounce = this.props.debounce !== false ? fn => window.setTimeout(fn, 0) : fn => fn();
       this.debounce = debounce(() => {
-        // TODO: ED-15580
-        //const measure = `🦉${pluginName}::WithPluginState`;
-        //performanceOptions.trackingEnabled && startMeasure(measure);
-        //              () => {
-        //  performanceOptions.trackingEnabled &&
-        //    stopMeasure(measure, (duration) => {
-        //      // Each WithPluginState component will fire analytics event no more than once every `samplingLimit` times
-        //      if (
-        //        ++this.callsCount % performanceOptions.samplingRate === 0 &&
-        //        duration > performanceOptions.slowThreshold
-        //      ) {
-        //        const editorView = this.getEditorView();
-        //        this.dispatchAnalyticsEvent({
-        //          action: ACTION.WITH_PLUGIN_STATE_CALLED,
-        //          actionSubject: ACTION_SUBJECT.EDITOR,
-        //          eventType: EVENT_TYPE.OPERATIONAL,
-        //          attributes: {
-        //            plugin: pluginName,
-        //            duration,
-        //            participants: getParticipantsCount(
-        //              editorView && editorView.state,
-        //            ),
-        //          },
-        //        });
-        //      }
-        //    });
-        //}
-        this.setState(this.notAppliedState);
+        const measure = `🦉${pluginName}::WithPluginState`;
+        performanceOptions.trackingEnabled && startMeasure(measure);
+        this.setState(this.notAppliedState, () => {
+          performanceOptions.trackingEnabled && stopMeasure(measure, duration => {
+            // Each WithPluginState component will fire analytics event no more than once every `samplingLimit` times
+            if (++this.callsCount % performanceOptions.samplingRate === 0 && duration > performanceOptions.slowThreshold) {
+              const editorView = this.getEditorView();
+              this.dispatchAnalyticsEvent({
+                action: ACTION.WITH_PLUGIN_STATE_CALLED,
+                actionSubject: ACTION_SUBJECT.EDITOR,
+                eventType: EVENT_TYPE.OPERATIONAL,
+                attributes: {
+                  plugin: pluginName,
+                  duration,
+                  participants: getParticipantsCount(editorView && editorView.state)
+                }
+              });
+            }
+          });
+        });
         this.debounce = null;
         this.notAppliedState = {};
       });
     });
 
+    _defineProperty(this, "dispatchAnalyticsEvent", payload => {
+      const eventDispatcher = this.getEventDispatcher();
+
+      if (eventDispatcher) {
+        const dispatch = createDispatch(eventDispatcher);
+        dispatch(analyticsEventKey, {
+          payload
+        });
+      }
+    });
+
     _defineProperty(this, "onContextUpdate", () => {
       this.subscribe(this.props);
     });
@@ -111,16 +120,6 @@ class WithPluginState extends React.Component {
     return props.eventDispatcher || this.context && this.context.editorActions && this.context.editorActions._privateGetEventDispatcher() || this.context && this.context.editorSharedConfig && this.context.editorSharedConfig.eventDispatcher;
   }
 
-  // TODO: ED-15580
-  //private dispatchAnalyticsEvent = (payload: AnalyticsEventPayload) => {
-  //  const eventDispatcher = this.getEventDispatcher();
-  //  if (eventDispatcher) {
-  //    const dispatch: AnalyticsDispatch = createDispatch(eventDispatcher);
-  //    dispatch(analyticsEventKey, {
-  //      payload,
-  //    });
-  //  }
-  //};
   getPluginsStates(plugins, editorView) {
     if (!editorView || !plugins) {
       return {};
@@ -140,26 +139,30 @@ class WithPluginState extends React.Component {
   }
 
   subscribe(props) {
+    var _uiTracking$samplingR, _uiTracking$slowThres;
+
     const plugins = props.plugins;
     const eventDispatcher = this.getEventDispatcher(props);
     const editorView = this.getEditorView(props);
 
     if (!eventDispatcher || !editorView || this.isSubscribed) {
       return;
-    } // TODO: ED-15580
-    //const analyticsPlugin = analyticsPluginKey.getState(editorView.state);
-    //const uiTracking =
-    //  analyticsPlugin && analyticsPlugin.performanceTracking
-    //    ? analyticsPlugin.performanceTracking.uiTracking || {}
-    //    : {};
-    //const trackingEnabled = uiTracking.enabled === true;
-    //const samplingRate = uiTracking.samplingRate || DEFAULT_SAMPLING_RATE;
-    //const slowThreshold = uiTracking.slowThreshold || DEFAULT_SLOW_THRESHOLD;
-
-
-    const trackingEnabled = false;
-    const samplingRate = DEFAULT_SAMPLING_RATE;
-    const slowThreshold = DEFAULT_SLOW_THRESHOLD;
+    } // TODO: ED-15663
+    // Please, do not copy or use this kind of code below
+    // @ts-ignore
+
+
+    const fakePluginKey = {
+      key: 'analyticsPlugin$',
+      getState: state => {
+        return state['analyticsPlugin$'];
+      }
+    };
+    const analyticsPlugin = fakePluginKey.getState(editorView.state);
+    const uiTracking = analyticsPlugin && analyticsPlugin.performanceTracking ? analyticsPlugin.performanceTracking.uiTracking || {} : {};
+    const trackingEnabled = uiTracking.enabled === true;
+    const samplingRate = (_uiTracking$samplingR = uiTracking.samplingRate) !== null && _uiTracking$samplingR !== void 0 ? _uiTracking$samplingR : DEFAULT_SAMPLING_RATE;
+    const slowThreshold = (_uiTracking$slowThres = uiTracking.slowThreshold) !== null && _uiTracking$slowThres !== void 0 ? _uiTracking$slowThres : DEFAULT_SLOW_THRESHOLD;
     this.isSubscribed = true;
     const pluginsStates = this.getPluginsStates(plugins, editorView);
     this.setState(pluginsStates);