@atlaskit/editor-core 150.0.0 → 151.0.0

package/dist/esm/plugins/panel/toolbar.js

@@ -1,4 +1,11 @@
-import { defineMessages } from 'react-intl';
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _panelIconMap;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import NoteIcon from '@atlaskit/icon/glyph/editor/note';
@@ -16,44 +23,9 @@ import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
-export var messages = defineMessages({
-  info: {
-    id: 'fabric.editor.info',
-    defaultMessage: 'Info',
-    description: 'Panels provide a way to highlight text. The info panel has a blue background.'
-  },
-  note: {
-    id: 'fabric.editor.note',
-    defaultMessage: 'Note',
-    description: 'Panels provide a way to highlight text. The note panel has a purple background.'
-  },
-  success: {
-    id: 'fabric.editor.success',
-    defaultMessage: 'Success',
-    description: 'Panels provide a way to highlight text. The success panel has a green background.'
-  },
-  warning: {
-    id: 'fabric.editor.warning',
-    defaultMessage: 'Warning',
-    description: 'Panels provide a way to highlight text. The warning panel has a yellow background.'
-  },
-  error: {
-    id: 'fabric.editor.error',
-    defaultMessage: 'Error',
-    description: 'Panels provide a way to highlight text. The error panel has a red background.'
-  },
-  emoji: {
-    id: 'fabric.editor.panel.emoji',
-    defaultMessage: 'Add emoji',
-    description: 'Select the panel icon'
-  },
-  backgroundColor: {
-    id: 'fabric.editor.panel.backgroundColor',
-    defaultMessage: 'Background color',
-    description: 'Select the panel background color.'
-  }
-});
-export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, providerFactory, activePanelType, activePanelColor, activePanelIcon) {
+import { messages } from './message';
+export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, PanelType.INFO, ':info:'), _defineProperty(_panelIconMap, PanelType.NOTE, ':note:'), _defineProperty(_panelIconMap, PanelType.WARNING, ':warning:'), _defineProperty(_panelIconMap, PanelType.ERROR, ':error:'), _defineProperty(_panelIconMap, PanelType.SUCCESS, ':success:'), _defineProperty(_panelIconMap, PanelType.TIP, ':tip:'), _panelIconMap);
+export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) {
   var items = [{
     id: 'editor.panel.info',
     type: 'button',
@@ -101,11 +73,16 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
         }
 
         var previousColor = panelNode.node.attrs.panelColor || getPanelTypeBackground(panelNode.node.attrs.panelType);
+        var emojiInfo = panelNode.node.attrs.panelType;
+        var panelInfo = panelIconMap[emojiInfo];
+        var previousEmoji = panelInfo ? {
+          emoji: panelInfo
+        } : {};
 
         if (previousColor === color) {
-          changePanelType(PanelType.CUSTOM, {
+          changePanelType(PanelType.CUSTOM, _objectSpread({
             color: color
-          }, isCustomPanelEnabled)(state, dispatch);
+          }, previousEmoji), isCustomPanelEnabled)(state, dispatch);
           return false;
         }
 
@@ -119,9 +96,9 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
           },
           eventType: EVENT_TYPE.TRACK
         };
-        withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
+        withAnalytics(payload)(changePanelType(PanelType.CUSTOM, _objectSpread({
           color: color
-        }, isCustomPanelEnabled))(state, dispatch);
+        }, previousEmoji), isCustomPanelEnabled))(state, dispatch);
         return false;
       };
     };
@@ -196,39 +173,42 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
       value: panelColor,
       border: DEFAULT_BORDER_COLOR
     };
-    var colorPicker = {
-      id: 'editor.panel.colorPicker',
-      title: formatMessage(messages.backgroundColor),
-      type: 'select',
-      selectType: 'color',
-      defaultValue: defaultPalette,
-      options: panelBackgroundPalette,
-      onChange: function onChange(option) {
-        return changeColor(option.value);
-      }
-    };
-    var emojiPicker = {
-      id: 'editor.panel.emojiPicker',
-      title: formatMessage(messages.emoji),
-      type: 'select',
-      selectType: 'emoji',
-      options: [],
-      selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
-      onChange: function onChange(emojiShortName) {
-        return changeEmoji(emojiShortName);
-      }
-    };
-    var removeEmojiButton = {
-      id: 'editor.panel.removeEmoji',
-      type: 'button',
-      icon: RemoveEmojiIcon,
-      onClick: removeEmoji(),
-      title: formatMessage(commonMessages.removeEmoji),
-      disabled: activePanelIcon ? false : true
-    };
-    items.push(emojiPicker, removeEmojiButton, {
-      type: 'separator'
-    }, colorPicker);
+
+    if (isCustomPanelEditable) {
+      var colorPicker = {
+        id: 'editor.panel.colorPicker',
+        title: formatMessage(messages.backgroundColor),
+        type: 'select',
+        selectType: 'color',
+        defaultValue: defaultPalette,
+        options: panelBackgroundPalette,
+        onChange: function onChange(option) {
+          return changeColor(option.value);
+        }
+      };
+      var emojiPicker = {
+        id: 'editor.panel.emojiPicker',
+        title: formatMessage(messages.emoji),
+        type: 'select',
+        selectType: 'emoji',
+        options: [],
+        selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
+        onChange: function onChange(emojiShortName) {
+          return changeEmoji(emojiShortName);
+        }
+      };
+      var removeEmojiButton = {
+        id: 'editor.panel.removeEmoji',
+        type: 'button',
+        icon: RemoveEmojiIcon,
+        onClick: removeEmoji(),
+        title: formatMessage(commonMessages.removeEmoji),
+        disabled: activePanelIcon ? false : true
+      };
+      items.push(emojiPicker, removeEmojiButton, {
+        type: 'separator'
+      }, colorPicker);
+    }
   }
 
   items.push({
@@ -260,7 +240,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
         panelColor = _panelObject$node$att.panelColor,
         panelIcon = _panelObject$node$att.panelIcon; // force toolbar to be turned on
 
-    var items = getToolbarItems(formatMessage, nodeType, options.UNSAFE_allowCustomPanel || false, providerFactory, panelType, options.UNSAFE_allowCustomPanel ? panelColor : undefined, options.UNSAFE_allowCustomPanel ? panelIcon : undefined);
+    var items = getToolbarItems(formatMessage, nodeType, options.UNSAFE_allowCustomPanel || false, options.UNSAFE_allowCustomPanel && options.UNSAFE_allowCustomPanelEdit || false, providerFactory, panelType, options.UNSAFE_allowCustomPanel ? panelColor : undefined, options.UNSAFE_allowCustomPanel ? panelIcon : undefined);
 
     var getDomRef = function getDomRef(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);

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

@@ -17,7 +17,7 @@ export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
     'data-panel-type': panelType || PanelType.INFO,
     style: style
   };
-  var iconSpan = ['span', {
+  var iconDiv = ['div', {
     class: PanelSharedCssClassName.icon
   }];
   var contentDiv = ['div', {
@@ -25,7 +25,7 @@ export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   }, 0];
 
   if (hasIcon) {
-    return ['div', panelAttrs, iconSpan, contentDiv];
+    return ['div', panelAttrs, iconDiv, contentDiv];
   } else {
     return ['div', panelAttrs, contentDiv];
   }

package/dist/esm/plugins/paste/linkify-md-plugin.js

@@ -1,5 +1,5 @@
-import LinkifyIt from 'linkify-it';
-import { linkifyMatch } from '../hyperlink/utils'; // modified version of the original Linkify plugin
+import { linkifyMatch } from '@atlaskit/adf-schema';
+import LinkifyIt from 'linkify-it'; // modified version of the original Linkify plugin
 // https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/linkify.js
 
 var arrayReplaceAt = function arrayReplaceAt(src, pos, newElements) {

package/dist/esm/plugins/status/styles.js

@@ -5,4 +5,4 @@ var _templateObject;
 import { css } from 'styled-components';
 import { StatusSharedCssClassName } from '@atlaskit/editor-common';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-export var statusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    > span {\n      display: inline-block;\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);
+export var statusStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline-block;\n\n    > span {\n      display: inline-block;\n      cursor: pointer;\n      line-height: 0; /* Prevent responsive layouts increasing height of container. */\n    }\n\n    &.", "\n      .", "\n      > span {\n      ", "\n    }\n  }\n\n  .danger {\n    .", " > span {\n      background-color: ", ";\n    }\n\n    .", ".", "\n      .", "\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n    }\n  }\n"])), StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, getSelectionStyles([SelectionStyle.BoxShadow]), StatusSharedCssClassName.STATUS_LOZENGE, akEditorDeleteBackgroundWithOpacity, StatusSharedCssClassName.STATUS_CONTAINER, akEditorSelectedNodeClassName, StatusSharedCssClassName.STATUS_LOZENGE, akEditorSelectedBorderSize, akEditorDeleteBorder);

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -497,10 +497,26 @@ export var TableRowNodeView = /*#__PURE__*/function () {
        * so it should be safe to ignore mutations that we cause
        * by updating styles and classnames on this DOM element
        *
-       * Update: should allow mutations for row selection to avoid known issue with table selection highlight in firefox
+       * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
        * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
        * */
-      return !(mutationRecord.type === 'selection' && mutationRecord.target.tagName === 'TR');
+      var isTableSelection = mutationRecord.type === 'selection' && mutationRecord.target.nodeName === 'TR';
+      /**
+       * Update: should not ignore mutations when an node is added, as this interferes with
+       * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
+       *
+       * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
+       * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
+       * selection and insertion.
+       */
+
+      var isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
+
+      if (isTableSelection || isNodeInsertion) {
+        return false;
+      }
+
+      return true;
     }
     /* receive external events */
 

package/dist/esm/plugins/type-ahead/transforms/open-typeahead-at-cursor.js

@@ -15,8 +15,25 @@ export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
       }
     });
     var selection = tr.selection;
-    var isTextRangeSelection = selection instanceof TextSelection && selection.$cursor === null;
-    var nextTr = isTextRangeSelection ? tr.deleteSelection() : tr;
-    return nextTr;
+
+    if (!(selection instanceof TextSelection)) {
+      return tr;
+    }
+
+    if (!selection.$cursor) {
+      tr.deleteSelection();
+      return tr;
+    } // Search & Destroy placeholder
+
+
+    var cursorPos = selection.$cursor.pos;
+    var nodeAtCursor = tr.doc.nodeAt(cursorPos);
+    var isPlaceholderAtCursorPosition = nodeAtCursor && nodeAtCursor.type.name === 'placeholder';
+
+    if (nodeAtCursor && isPlaceholderAtCursorPosition) {
+      tr.delete(cursorPos, cursorPos + nodeAtCursor.nodeSize);
+    }
+
+    return tr;
   };
 };

package/dist/esm/profiler/render-count.js

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import uuid from 'uuid';
+import { useComponentRenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { RenderCountProfiler as RenderCountProfilerClass } from '@atlaskit/editor-common';
+export var ProfiledComponentIds;
+
+(function (ProfiledComponentIds) {
+  ProfiledComponentIds["editor"] = "Editor";
+  ProfiledComponentIds["appearance"] = "FullPageEditor";
+  ProfiledComponentIds["reactEditorView"] = "ReactEditorView";
+  ProfiledComponentIds["contentArea"] = "FullPageContentArea";
+  ProfiledComponentIds["toolbar"] = "FullPageToolbar";
+  ProfiledComponentIds["mention"] = "MentionNodeView";
+})(ProfiledComponentIds || (ProfiledComponentIds = {}));
+
+var CoreRenderCountProfiler = function CoreRenderCountProfiler(_ref) {
+  var componentId = _ref.componentId;
+
+  var _useRef = useRef(uuid()),
+      instanceId = _useRef.current;
+
+  var onRender = function onRender(_ref2) {
+    var renderCount = _ref2.renderCount;
+    var profiler = RenderCountProfilerClass.getInstance({
+      store: window
+    });
+    profiler.setRenderCount({
+      componentId: componentId,
+      instanceId: instanceId,
+      renderCount: renderCount
+    });
+  };
+
+  useComponentRenderTracking({
+    onRender: onRender,
+    propsDiffingOptions: {
+      enabled: false
+    },
+    zeroBasedCount: false
+  });
+  return null;
+};
+
+export var RenderCountProfiler = function RenderCountProfiler(_ref3) {
+  var componentId = _ref3.componentId;
+  var profiler = RenderCountProfilerClass.getInstance({
+    store: window
+  });
+
+  if (profiler.isEnabled()) {
+    return /*#__PURE__*/React.createElement(CoreRenderCountProfiler, {
+      componentId: componentId
+    });
+  }
+
+  return null;
+};

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -38,11 +38,11 @@ import messages from '../../../messages';
 import { TableControlsPadding, MainToolbar, MainToolbarCustomComponentsSlot } from './Toolbar';
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
-var CommentEditor = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  ", " background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, function (props) {
-  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, N40, borderRadius());
+var CommentEditor = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, N40, borderRadius());
 CommentEditor.displayName = 'CommentEditor';
-var ContentArea = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles);
+var ContentArea = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n  ", ";\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), function (props) {
+  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
+}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, CommentEditorMargin - GRID_GUTTER, TableControlsPadding, tableCommentEditorStyles);
 ContentArea.displayName = 'ContentArea';
 var SecondaryToolbar = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
 SecondaryToolbar.displayName = 'SecondaryToolbar';
@@ -135,7 +135,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           },
           className: classnames('ak-editor-content-area', {
             'less-margin': width < akEditorMobileBreakoutPoint
-          })
+          }),
+          maxHeight: maxHeight
         }, customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
           editorView: editorView,
           editorActions: editorActions,

package/dist/esm/utils/react-hooks/use-component-renderer-tracking/index.js

@@ -1,35 +1,68 @@
-import { useEffect, useRef } from 'react';
+import { useMemo, useEffect, useRef } from 'react';
+import debounce from 'lodash/debounce';
 import { getShallowPropsDifference, getPropsDifference } from '../../compare';
 import { EVENT_TYPE } from '../../../plugins/analytics';
-export function useComponentRenderTracking(props, action, actionSubject, handleAnalyticsEvent) {
-  var propsToIgnore = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
-  var useShallow = arguments.length > 5 ? arguments[5] : undefined;
+export function useComponentRenderTracking(_ref) {
+  var onRender = _ref.onRender,
+      propsDiffingOptions = _ref.propsDiffingOptions,
+      _ref$zeroBasedCount = _ref.zeroBasedCount,
+      zeroBasedCount = _ref$zeroBasedCount === void 0 ? true : _ref$zeroBasedCount;
   var propsRef = useRef();
-  var renderCountRef = useRef(0);
+  var renderCountRef = useRef(zeroBasedCount ? 0 : 1);
   useEffect(function () {
     var lastProps = propsRef.current;
     var renderCount = renderCountRef.current;
+    var propsDifference;
 
-    if (lastProps) {
-      var difference = useShallow ? getShallowPropsDifference(lastProps, props) : getPropsDifference(lastProps, props, 0, 2, propsToIgnore);
-      handleAnalyticsEvent({
-        payload: {
-          action: action,
-          actionSubject: actionSubject,
-          attributes: {
-            propsDifference: difference,
-            count: renderCount
-          },
-          eventType: EVENT_TYPE.OPERATIONAL
-        }
-      });
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
+      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? getShallowPropsDifference(lastProps, propsDiffingOptions.props) : getPropsDifference(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
+    }
+
+    var result = {
+      renderCount: renderCount,
+      propsDifference: propsDifference
+    };
+    onRender(result);
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled) {
+      propsRef.current = propsDiffingOptions.props;
     }
 
-    propsRef.current = props;
     renderCountRef.current = renderCountRef.current + 1;
   }); // No dependencies run on each render
 }
 export function RenderTracking(props) {
-  useComponentRenderTracking(props.componentProps, props.action, props.actionSubject, props.handleAnalyticsEvent, props.propsToIgnore, props.useShallow);
+  var debouncedHandleAnalyticsEvent = useMemo(function () {
+    return debounce(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: function onRender(_ref2) {
+      var renderCount = _ref2.renderCount,
+          propsDifference = _ref2.propsDifference;
+
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        payload: {
+          action: props.action,
+          actionSubject: props.actionSubject,
+          attributes: {
+            count: renderCount,
+            propsDifference: propsDifference
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        }
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
   return null;
 }

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "150.0.0";
+export var version = "151.0.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/create-editor/ErrorBoundary.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EditorView } from 'prosemirror-view';
 import { ContextIdentifierProvider, UserBrowserExtensionResults } from '@atlaskit/editor-common';
+import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { FeatureFlags } from '../types/feature-flags';
 export declare type ErrorBoundaryProps = {
@@ -16,13 +17,9 @@ export declare type ErrorBoundaryState = {
 declare type AnalyticsErrorBoundaryErrorInfo = {
     componentStack: string;
 };
-declare type AnalyticsErrorBoundaryAttributes = {
-    error: string;
-    info?: AnalyticsErrorBoundaryErrorInfo;
-    [key: string]: any;
-};
 export declare class ErrorBoundaryWithEditorView extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
     browserExtensions?: UserBrowserExtensionResults;
+    experienceStore?: ExperienceStore;
     static defaultProps: {
         rethrow: boolean;
     };
@@ -31,8 +28,11 @@ export declare class ErrorBoundaryWithEditorView extends React.Component<ErrorBo
     };
     private getFeatureFlags;
     get featureFlags(): FeatureFlags;
-    fireAnalytics: (analyticsErrorPayload: AnalyticsErrorBoundaryAttributes) => void;
+    constructor(props: ErrorBoundaryProps);
+    private sendErrorData;
     private getProductName;
+    private fireAnalyticsEvent;
+    private getExperienceMetadata;
     componentDidCatch(error: Error, errorInfo: AnalyticsErrorBoundaryErrorInfo): void;
     componentDidMount(): Promise<void>;
     render(): React.ReactNode;

package/dist/types/create-editor/ReactEditorView.d.ts

@@ -3,8 +3,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { EditorState } from 'prosemirror-state';
 import { DirectEditorProps, EditorView } from 'prosemirror-view';
+import { Node as PMNode } from 'prosemirror-model';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { ErrorReporter, ProviderFactory, Transformer } from '@atlaskit/editor-common';
+import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { Dispatch, EventDispatcher } from '../event-dispatcher';
 import { AnalyticsEventPayload, DispatchAnalyticsEvent, FULL_WIDTH_MODE } from '../plugins/analytics';
 import { EditorAppearance, EditorConfig, EditorReactContext, EditorPlugin, EditorProps } from '../types';
@@ -19,6 +21,7 @@ export interface EditorViewProps {
     portalProviderAPI: PortalProviderAPI;
     allowAnalyticsGASV3?: boolean;
     disabled?: boolean;
+    experienceStore?: ExperienceStore;
     render?: (props: {
         editor: JSX.Element;
         view?: EditorView;
@@ -52,12 +55,14 @@ export default class ReactEditorView<T = {}> extends React.Component<EditorViewP
     proseMirrorRenderedSeverity?: SEVERITY;
     transactionTracker: TransactionTracker;
     validTransactionCount: number;
+    experienceStore?: ExperienceStore;
     static contextTypes: {
         getAtlaskitAnalyticsEventHandlers: PropTypes.Requireable<any>;
         intl: ReactIntl.IntlShape;
     };
     private canDispatchTransactions;
-    private focusTimeoutId;
+    private focusTimeoutId?;
+    private reliabilityInterval?;
     private pluginPerformanceObserver;
     private featureFlags;
     private onPluginObservation;
@@ -67,6 +72,11 @@ export default class ReactEditorView<T = {}> extends React.Component<EditorViewP
     constructor(props: EditorViewProps & T, context: EditorReactContext);
     UNSAFE_componentWillReceiveProps(nextProps: EditorViewProps): void;
     formatFullWidthAppearance: (appearance: EditorAppearance | undefined) => FULL_WIDTH_MODE;
+    resetEditorState: ({ doc, shouldScrollToBottom, }: {
+        doc: string;
+        shouldScrollToBottom: boolean;
+    }) => void;
+    blur: () => void;
     reconfigureState: (props: EditorViewProps) => void;
     handleAnalyticsEvent: FireAnalyticsCallback;
     componentDidMount(): void;
@@ -78,13 +88,15 @@ export default class ReactEditorView<T = {}> extends React.Component<EditorViewP
     createEditorState: (options: {
         props: EditorViewProps;
         context: EditorReactContext;
-        replaceDoc?: boolean;
+        doc?: string | Object | PMNode<any> | undefined;
+        resetting?: boolean | undefined;
+        selectionAtStart?: boolean | undefined;
     }) => EditorState<any>;
     private onEditorViewStateUpdated;
     private trackValidTransactions;
     private dispatchTransaction;
     getDirectEditorProps: (state?: EditorState<any> | undefined) => DirectEditorProps;
-    createEditorView: (node: HTMLDivElement) => void;
+    private createEditorView;
     handleEditorViewRef: (node: HTMLDivElement) => void;
     dispatchAnalyticsEvent: (payload: AnalyticsEventPayload) => void;
     private editor;

package/dist/types/editor.d.ts

@@ -27,6 +27,8 @@ export default class Editor extends React.Component<EditorProps, State> {
     private editorActions;
     private createAnalyticsEvent?;
     private editorSessionId;
+    private experienceStore?;
+    private startTime?;
     constructor(props: EditorProps, context: Context);
     componentDidMount(): void;
     componentDidUpdate(prevProps: EditorProps): void;
@@ -48,7 +50,7 @@ export default class Editor extends React.Component<EditorProps, State> {
             };
         } | undefined;
     };
-    prepareExtensionProvider: (extensionProviders?: (ExtensionProvider<any> | Promise<ExtensionProvider<any>>)[] | ((editorActions?: EditorActions<any> | undefined) => (ExtensionProvider<any> | Promise<ExtensionProvider<any>>)[]) | undefined) => ExtensionProvider<any> | undefined;
+    prepareExtensionProvider: import("memoize-one").MemoizedFn<(extensionProviders?: (ExtensionProvider<any> | Promise<ExtensionProvider<any>>)[] | ((editorActions?: EditorActions<any> | undefined) => (ExtensionProvider<any> | Promise<ExtensionProvider<any>>)[]) | undefined) => ExtensionProvider<any> | undefined>;
     prepareQuickInsertProvider: (extensionProvider?: ExtensionProvider<any> | undefined, quickInsert?: boolean | {
         provider: Promise<QuickInsertProvider>;
     } | undefined) => Promise<QuickInsertProvider> | undefined;

package/dist/types/plugins/analytics/analytics-queue.d.ts

@@ -1,7 +1,7 @@
 export declare class AnalyticsQueue {
     private readonly tasks;
     private running;
-    static get: () => AnalyticsQueue;
+    static get: import("memoize-one").MemoizedFn<() => AnalyticsQueue>;
     private constructor();
     private request;
     private pending;

package/dist/types/plugins/analytics/index.d.ts

@@ -1,6 +1,6 @@
 import analyticsPlugin from './plugin';
 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 './types';
-export type { AnalyticsDispatch, AnalyticsEventPayload, AnalyticsEventPayloadWithChannel, CommonListAnalyticsAttributes, CreateLinkInlineDialogActionType, CreateLinkInlineDialogEventPayload, ErrorEventPayload, FormatEventPayload, GeneralEventPayload, InputMethodInsertLink, InputMethodInsertMedia, InsertEventPayload, MediaAltTextActionType, MediaEventPayload, MediaLinkAEP, PASTE_ACTION_SUBJECT_ID, PasteContent, PasteEventPayload, PasteSource, PasteType, SubstituteEventPayload, TableEventPayload, } from './types';
+export type { AnalyticsDispatch, AnalyticsEventPayload, AnalyticsEventPayloadWithChannel, CommonListAnalyticsAttributes, CreateLinkInlineDialogActionType, CreateLinkInlineDialogEventPayload, ErrorEventPayload, ErrorEventAttributes, FormatEventPayload, GeneralEventPayload, InputMethodInsertLink, InputMethodInsertMedia, InsertEventPayload, MediaAltTextActionType, MediaEventPayload, MediaLinkAEP, PASTE_ACTION_SUBJECT_ID, PasteContent, PasteEventPayload, PasteSource, PasteType, SubstituteEventPayload, TableEventPayload, } from './types';
 export { withAnalytics, addAnalytics, findInsertLocation, getAnalyticsEventsFromTransaction, getSelectionType, getStateContext, mapActionSubjectIdToAttributes, } from './utils';
 export declare const analyticsPluginKey: import("prosemirror-state").PluginKey<any, any>;
 export default analyticsPlugin;

package/dist/types/plugins/analytics/types/enums.d.ts

@@ -88,7 +88,8 @@ export declare enum ACTION {
     RENDERED = "rendered",
     ON_EDITOR_READY_CALLBACK = "onEditorReadyCallback",
     ON_CHANGE_CALLBACK = "onChangeCalled",
-    REMOVE_ICON = "removedIcon"
+    REMOVE_ICON = "removedIcon",
+    UFO_SESSION_COMPLETE = "ufoSessionComplete"
 }
 export declare enum INPUT_METHOD {
     ASCII = "ascii",
@@ -217,8 +218,9 @@ export declare enum ACTION_SUBJECT_ID {
     LINK = "link",
     LINK_PREVIEW = "linkPreview",
     MEDIA = "media",
-    MEDIA_SINGLE = "mediaSingle",
     MEDIA_GROUP = "mediaGroup",
+    MEDIA_INLINE = "mediaInline",
+    MEDIA_SINGLE = "mediaSingle",
     MEDIA_LINK = "mediaLink",
     MENTION = "mention",
     NESTED_EXPAND = "nestedExpand",