@atlaskit/editor-core 188.12.0 → 188.12.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-core
 
+## 188.12.2
+
+### Patch Changes
+
+- [#40916](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40916) [`0b80e2e68ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0b80e2e68ea) - [ux] media single node with external type media should not show migration ui. Update external image with natural dimensions accordingly, and fixed whitespace issue in external image.
+
+## 188.12.1
+
+### Patch Changes
+
+- [#41835](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41835) [`94e9da119e9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94e9da119e9) - Decouple plugins from internal deprecated analytics plugin action "withAnalytics".
+- [#41731](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41731) [`8a9ec6c3e8d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a9ec6c3e8d) - ED-20161 Added editor-plugin-selection-toolbar as a dependency behind platform.editor.enable-selection-toolbar_ucdwd feature flag. Also moves toolbar position logic from annotation plugin in to selection toolbar.
+- [#41168](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41168) [`94faad53870`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94faad53870) - [ux] Allows for navigating overlapping inline comments
+- Updated dependencies
+
 ## 188.12.0
 
 ### Minor Changes

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

@@ -29,6 +29,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorPluginSaveOnEnter = require("@atlaskit/editor-plugin-save-on-enter");
 var _editorPluginScrollIntoView = require("@atlaskit/editor-plugin-scroll-into-view");
 var _editorPluginMentions = require("@atlaskit/editor-plugin-mentions");
+var _editorPluginSelectionToolbar = require("@atlaskit/editor-plugin-selection-toolbar");
 var _isFullPage = require("../../../utils/is-full-page");
 var _mediaCommon = require("@atlaskit/media-common");
 var _default = require("./default");
@@ -401,6 +402,16 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
     return builder;
   }).add([_plugins.codeBidiWarningPlugin, {
     appearance: appearance
-  }]);
+  }])
+  /**
+   * Do not use this plugin - it is for AI purposes only.
+   */.maybeAdd(_editorPluginSelectionToolbar.selectionToolbarPlugin, function (plugin, builder) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd')) {
+      return builder.add([plugin, {
+        preferenceToolbarAboveSelection: false
+      }]);
+    }
+    return builder;
+  });
   return finalPreset;
 }

package/dist/cjs/plugins/annotation/index.js

@@ -20,6 +20,7 @@ var _utils = require("./utils");
 var _toolbar = require("./toolbar");
 var _InlineCommentView = require("./ui/InlineCommentView");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var annotationPlugin = function annotationPlugin(_ref) {
   var annotationProviders = _ref.config,
     api = _ref.api;
@@ -66,7 +67,17 @@ var annotationPlugin = function annotationPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
-        if (!annotationProviders) {
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
+          return;
+        }
+        var pluginState = (0, _utils.getPluginState)(state);
+        if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
+          var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
+          return (0, _toolbar.buildToolbar)(state, intl, isToolbarAbove);
+        }
+      },
+      selectionToolbar: function selectionToolbar(state, intl) {
+        if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
           return;
         }
         var pluginState = (0, _utils.getPluginState)(state);

package/dist/cjs/plugins/annotation/pm-plugins/inline-comment.js

@@ -84,7 +84,8 @@ var initialState = function initialState() {
       isSelecting: false
     },
     disallowOnWhitespace: disallowOnWhitespace,
-    isVisible: true
+    isVisible: true,
+    skipSelectionHandling: false
   };
 };
 var hideToolbar = function hideToolbar(state, dispatch) {

package/dist/cjs/plugins/annotation/pm-plugins/plugin-factory.js

@@ -20,6 +20,11 @@ var handleDocChanged = function handleDocChanged(tr, prevPluginState) {
   });
 };
 var handleSelectionChanged = function handleSelectionChanged(tr, pluginState) {
+  if (pluginState.skipSelectionHandling) {
+    return _objectSpread(_objectSpread({}, pluginState), {}, {
+      skipSelectionHandling: false
+    });
+  }
   var selectedAnnotations = (0, _utils.findAnnotationsInSelection)(tr.selection, tr.doc);
   var changed = selectedAnnotations.length !== pluginState.selectedAnnotations.length || selectedAnnotations.some(function (annotationInfo) {
     return !pluginState.selectedAnnotations.some(function (aInfo) {

package/dist/cjs/plugins/annotation/pm-plugins/reducer.js

@@ -50,7 +50,8 @@ var _default = exports.default = function _default(pluginState, action) {
       });
     case _types.ACTIONS.SET_SELECTED_ANNOTATION:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
-        selectedAnnotations: (0, _toConsumableArray2.default)(action.data.selectedAnnotations)
+        selectedAnnotations: (0, _toConsumableArray2.default)(action.data.selectedAnnotations),
+        skipSelectionHandling: true
       });
     default:
       return pluginState;

package/dist/cjs/plugins/annotation/toolbar.js

@@ -12,161 +12,7 @@ var _commands = require("./commands");
 var _types = require("./types");
 var _utils = require("./utils");
 var _messages = require("@atlaskit/editor-common/messages");
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-/**
- * Returns the coordintes at the bottom the selection.
- */
-var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, toolbarRect) {
-  return {
-    top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
-    left: bottomCoords.right - toolbarRect.width / 2
-  };
-};
-
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-
-  Things to consider:
-  - popup is always above the selection
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-var calculateToolbarPositionAboveSelection = function calculateToolbarPositionAboveSelection(toolbarTitle) {
-  return function (editorView, nextPos) {
-    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
-    if (!toolbar) {
-      return nextPos;
-    }
-
-    // scroll wrapper for full page, fall back to document body
-    // TODO: look into using getScrollGutterOptions()
-    var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-    var wrapperBounds = scrollWrapper.getBoundingClientRect();
-    var selection = window && window.getSelection();
-    var range = selection && !selection.isCollapsed && selection.getRangeAt(0);
-    if (!range) {
-      return nextPos;
-    }
-    var toolbarRect = toolbar.getBoundingClientRect();
-    var _editorView$state$sel = editorView.state.selection,
-      head = _editorView$state$sel.head,
-      anchor = _editorView$state$sel.anchor;
-    var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
-    var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
-    var top = (topCoords.top || 0) - toolbarRect.height * 1.5;
-    var left = 0;
-
-    // If not on the same line
-    if (topCoords.top !== bottomCoords.top) {
-      // selecting downwards
-      if (head > anchor) {
-        left = Math.max(topCoords.right, bottomCoords.right);
-      } else {
-        left = Math.min(topCoords.left, bottomCoords.left);
-      }
-
-      /*
-        short selection above a long paragraph
-         eg. short {<}heading
-        The purpose of this text is to show the selection range{>}.
-         The horizontal positioning should center around "heading",
-        not where it ends at "range".
-         Note: if it was "head<b>ing</b>" then it would only center
-        around "head". Undesireable but matches the current renderer.
-      */
-      var cliffPosition = range.getClientRects()[0];
-      if (cliffPosition.right < left) {
-        left = cliffPosition.left + cliffPosition.width / 2;
-      }
-    } else {
-      // Otherwise center on the single line selection
-      left = topCoords.left + (bottomCoords.right - topCoords.left) / 2;
-    }
-    left -= toolbarRect.width / 2;
-
-    // Place toolbar below selection if not sufficient space above
-    if (top < wrapperBounds.top) {
-      var _getCoordsBelowSelect = getCoordsBelowSelection(bottomCoords, toolbarRect);
-      top = _getCoordsBelowSelect.top;
-      left = _getCoordsBelowSelect.left;
-    }
-
-    // remap positions from browser document to wrapperBounds
-    return {
-      top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-      left: Math.max(0, left - wrapperBounds.left)
-    };
-  };
-};
-
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-
-  Things to consider:
-  - stick as close to the head X release coordinates as possible
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
-  return function (editorView, nextPos) {
-    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
-    if (!toolbar) {
-      return nextPos;
-    }
-
-    // scroll wrapper for full page, fall back to document body
-    // TODO: look into using getScrollGutterOptions()
-    var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-    var wrapperBounds = scrollWrapper.getBoundingClientRect();
-    var selection = window && window.getSelection();
-    var range = selection && !selection.isCollapsed && selection.getRangeAt(0);
-    if (!range) {
-      return nextPos;
-    }
-    var toolbarRect = toolbar.getBoundingClientRect();
-    var _editorView$state$sel2 = editorView.state.selection,
-      head = _editorView$state$sel2.head,
-      anchor = _editorView$state$sel2.anchor;
-    var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
-    var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
-    var top;
-    // If not the same line, display toolbar below.
-    if (head > anchor && topCoords.top !== bottomCoords.top) {
-      // We are taking the previous pos to the maxium, so avoid end of line positions
-      // returning the next line's rect.
-      top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
-    } else {
-      top = (topCoords.top || 0) - toolbarRect.height * 1.5;
-    }
-    var left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
-
-    // Place toolbar below selection if not sufficient space above
-    if (top < wrapperBounds.top) {
-      var _getCoordsBelowSelect2 = getCoordsBelowSelection(bottomCoords, toolbarRect);
-      top = _getCoordsBelowSelect2.top;
-      left = _getCoordsBelowSelect2.left;
-    }
-
-    // remap positions from browser document to wrapperBounds
-    return {
-      top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-      left: Math.max(0, left - wrapperBounds.left)
-    };
-  };
-};
+var _utils2 = require("@atlaskit/editor-common/utils");
 var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl) {
   var isToolbarAbove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var schema = state.schema;
@@ -200,7 +46,7 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(state, intl) {
     return acc;
   }, []);
   var toolbarTitle = intl.formatMessage(_messages.annotationMessages.toolbar);
-  var calcToolbarPosition = isToolbarAbove ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
+  var calcToolbarPosition = isToolbarAbove ? _utils2.calculateToolbarPositionAboveSelection : _utils2.calculateToolbarPositionTrackHead;
   var onPositionCalculated = calcToolbarPosition(toolbarTitle);
   return {
     title: toolbarTitle,

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/index.js

@@ -23,7 +23,6 @@ var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButto
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _actions = require("../../../placeholder-text/actions");
-var _actions2 = require("../../../layout/actions");
 var _commands = require("../../../tasks-and-decisions/commands");
 var _commands2 = require("../../../expand/commands");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -215,21 +214,24 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertLayoutColumns", function (inputMethod) {
-      var editorView = _this.props.editorView;
-      (0, _actions2.insertLayoutColumnsWithAnalytics)(inputMethod)(editorView.state, editorView.dispatch);
+      var _pluginInjectionApi$l;
+      var _this$props3 = _this.props,
+        editorView = _this$props3.editorView,
+        pluginInjectionApi = _this$props3.pluginInjectionApi;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 || _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
       return true;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createStatus", function (inputMethod) {
       var _pluginInjectionApi$s, _pluginInjectionApi$s2;
-      var _this$props3 = _this.props,
-        pluginInjectionApi = _this$props3.pluginInjectionApi,
-        editorView = _this$props3.editorView;
+      var _this$props4 = _this.props,
+        pluginInjectionApi = _this$props4.pluginInjectionApi,
+        editorView = _this$props4.editorView;
       return (_pluginInjectionApi$s = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.status) === null || _pluginInjectionApi$s2 === void 0 || (_pluginInjectionApi$s2 = _pluginInjectionApi$s2.actions) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.updateStatus(inputMethod)(editorView.state, editorView.dispatch)) !== null && _pluginInjectionApi$s !== void 0 ? _pluginInjectionApi$s : false;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "openMediaPicker", function (inputMethod) {
-      var _this$props4 = _this.props,
-        onShowMediaPicker = _this$props4.onShowMediaPicker,
-        dispatchAnalyticsEvent = _this$props4.dispatchAnalyticsEvent;
+      var _this$props5 = _this.props,
+        onShowMediaPicker = _this$props5.onShowMediaPicker,
+        dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent;
       if (onShowMediaPicker) {
         onShowMediaPicker();
         if (dispatchAnalyticsEvent) {
@@ -257,11 +259,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertHorizontalRule", function (inputMethod) {
       var _pluginInjectionApi$r, _pluginInjectionApi$r2;
-      var _this$props5 = _this.props,
-        _this$props5$editorVi = _this$props5.editorView,
-        state = _this$props5$editorVi.state,
-        dispatch = _this$props5$editorVi.dispatch,
-        pluginInjectionApi = _this$props5.pluginInjectionApi;
+      var _this$props6 = _this.props,
+        _this$props6$editorVi = _this$props6.editorView,
+        state = _this$props6$editorVi.state,
+        dispatch = _this$props6$editorVi.dispatch,
+        pluginInjectionApi = _this$props6.pluginInjectionApi;
       return (_pluginInjectionApi$r = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$r2 = pluginInjectionApi.rule) === null || _pluginInjectionApi$r2 === void 0 ? void 0 : _pluginInjectionApi$r2.actions.insertHorizontalRule(inputMethod)(state, dispatch)) !== null && _pluginInjectionApi$r !== void 0 ? _pluginInjectionApi$r : false;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertExpand", function () {
@@ -272,9 +274,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertBlockType", function (itemName) {
       return function () {
-        var _this$props6 = _this.props,
-          editorView = _this$props6.editorView,
-          onInsertBlockType = _this$props6.onInsertBlockType;
+        var _this$props7 = _this.props,
+          editorView = _this$props7.editorView,
+          onInsertBlockType = _this$props7.onInsertBlockType;
         var state = editorView.state,
           dispatch = editorView.dispatch;
         onInsertBlockType(itemName)(state, dispatch);
@@ -297,11 +299,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref2) {
       var item = _ref2.item,
         inputMethod = _ref2.inputMethod;
-      var _this$props7 = _this.props,
-        editorView = _this$props7.editorView,
-        editorActions = _this$props7.editorActions,
-        handleImageUpload = _this$props7.handleImageUpload,
-        expandEnabled = _this$props7.expandEnabled;
+      var _this$props8 = _this.props,
+        editorView = _this$props8.editorView,
+        editorActions = _this$props8.editorActions,
+        handleImageUpload = _this$props8.handleImageUpload,
+        expandEnabled = _this$props8.expandEnabled;
 
       // need to do this before inserting nodes so scrollIntoView works properly
       if (!editorView.hasFocus()) {
@@ -417,12 +419,12 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
     key: "renderPopup",
     value: function renderPopup() {
       var emojiPickerOpen = this.state.emojiPickerOpen;
-      var _this$props8 = this.props,
-        popupsMountPoint = _this$props8.popupsMountPoint,
-        popupsBoundariesElement = _this$props8.popupsBoundariesElement,
-        popupsScrollableElement = _this$props8.popupsScrollableElement,
-        emojiProvider = _this$props8.emojiProvider,
-        replacePlusMenuWithElementBrowser = _this$props8.replacePlusMenuWithElementBrowser;
+      var _this$props9 = this.props,
+        popupsMountPoint = _this$props9.popupsMountPoint,
+        popupsBoundariesElement = _this$props9.popupsBoundariesElement,
+        popupsScrollableElement = _this$props9.popupsScrollableElement,
+        emojiProvider = _this$props9.emojiProvider,
+        replacePlusMenuWithElementBrowser = _this$props9.replacePlusMenuWithElementBrowser;
       var dropdownEmoji = this.state.dropdownItems.some(function (_ref4) {
         var name = _ref4.value.name;
         return name === 'emoji';
@@ -459,9 +461,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         buttons = _this$state.buttons,
         dropdownItems = _this$state.dropdownItems,
         emojiPickerOpen = _this$state.emojiPickerOpen;
-      var _this$props9 = this.props,
-        isDisabled = _this$props9.isDisabled,
-        isReducedSpacing = _this$props9.isReducedSpacing;
+      var _this$props10 = this.props,
+        isDisabled = _this$props10.isDisabled,
+        isReducedSpacing = _this$props10.isReducedSpacing;
       if (buttons.length === 0 && dropdownItems.length === 0) {
         return null;
       }

package/dist/cjs/plugins/layout/actions.js

@@ -13,8 +13,9 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _slice = require("../../utils/slice");
 var _utils2 = require("@atlaskit/editor-common/utils");
-var _enums = require("../analytics/types/enums");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils3 = require("../analytics/utils");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _nodeEvents = require("../analytics/types/node-events");
 var _pluginKey = require("./pm-plugins/plugin-key");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -88,16 +89,18 @@ var insertLayoutColumns = exports.insertLayoutColumns = function insertLayoutCol
   }
   return true;
 };
-var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(inputMethod) {
-  return (0, _utils3.withAnalytics)({
-    action: _enums.ACTION.INSERTED,
-    actionSubject: _enums.ACTION_SUBJECT.DOCUMENT,
-    actionSubjectId: _enums.ACTION_SUBJECT_ID.LAYOUT,
-    attributes: {
-      inputMethod: inputMethod
-    },
-    eventType: _enums.EVENT_TYPE.TRACK
-  })(insertLayoutColumns);
+var insertLayoutColumnsWithAnalytics = exports.insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod) {
+    return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,
+      attributes: {
+        inputMethod: inputMethod
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(insertLayoutColumns);
+  };
 };
 
 /**
@@ -222,13 +225,13 @@ var setPresetLayout = exports.setPresetLayout = function setPresetLayout(layout)
     var tr = forceSectionToPresetLayout(state, node, pos, layout);
     if (tr) {
       tr = (0, _utils3.addAnalytics)(state, tr, {
-        action: _enums.ACTION.CHANGED_LAYOUT,
-        actionSubject: _enums.ACTION_SUBJECT.LAYOUT,
+        action: _analytics.ACTION.CHANGED_LAYOUT,
+        actionSubject: _analytics.ACTION_SUBJECT.LAYOUT,
         attributes: {
           previousLayout: formatLayoutName(selectedLayout),
           newLayout: formatLayoutName(layout)
         },
-        eventType: _enums.EVENT_TYPE.TRACK
+        eventType: _analytics.EVENT_TYPE.TRACK
       });
       tr.setMeta('scrollIntoView', false);
       if (dispatch) {
@@ -310,12 +313,12 @@ var deleteActiveLayoutNode = exports.deleteActiveLayoutNode = function deleteAct
     if (dispatch) {
       var tr = state.tr.delete(pos, pos + node.nodeSize);
       tr = (0, _utils3.addAnalytics)(state, tr, {
-        action: _enums.ACTION.DELETED,
-        actionSubject: _enums.ACTION_SUBJECT.LAYOUT,
+        action: _analytics.ACTION.DELETED,
+        actionSubject: _analytics.ACTION_SUBJECT.LAYOUT,
         attributes: {
           layout: formatLayoutName(selectedLayout)
         },
-        eventType: _enums.EVENT_TYPE.TRACK
+        eventType: _analytics.EVENT_TYPE.TRACK
       });
       dispatch(tr);
     }

package/dist/cjs/plugins/layout/index.js

@@ -21,6 +21,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("../insert-block/ui/ToolbarInsertBlock/messages");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var layoutPlugin = function layoutPlugin(_ref) {
+  var _api$analytics;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -43,6 +44,9 @@ var layoutPlugin = function layoutPlugin(_ref) {
         }
       }];
     },
+    actions: {
+      insertLayoutColumns: (0, _actions.insertLayoutColumnsWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+    },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
         var _ref2 = _pluginKey.pluginKey.getState(state),
@@ -68,9 +72,9 @@ var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconLayout, null);
           },
           action: function action(insert, state) {
-            var _api$analytics;
+            var _api$analytics2;
             var tr = insert((0, _actions.createDefaultLayoutSection)(state));
-            api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+            api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || (_api$analytics2 = _api$analytics2.actions) === null || _api$analytics2 === void 0 || _api$analytics2.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.LAYOUT,

package/dist/cjs/plugins/panel/index.js

@@ -164,7 +164,7 @@ var panelPlugin = function panelPlugin(_ref) {
         return quickInsertOptions;
       },
       floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
-        return (0, _toolbar.getToolbarConfig)(state, intl, options, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration);
+        return (0, _toolbar.getToolbarConfig)(state, intl, options, providerFactory, api);
       }
     }
   };

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

@@ -21,7 +21,8 @@ var _utils = require("./utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _adfSchema = require("@atlaskit/adf-schema");
-var _analytics = require("../analytics");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
 var _message = require("./message");
 var _panelIconMap;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -45,7 +46,7 @@ var panelIconMap = exports.panelIconMap = (_panelIconMap = {}, (0, _defineProper
   shortName: ':tip:',
   id: 'atlassian-tip'
 }), _panelIconMap);
-var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, activePanelType, activePanelColor, activePanelIcon, state) {
+var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
@@ -118,7 +119,7 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
           },
           eventType: _analytics.EVENT_TYPE.TRACK
         };
-        (0, _analytics.withAnalytics)(payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, _objectSpread({
+        (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, _objectSpread({
           color: color
         }, previousEmoji), isCustomPanelEnabled))(state, dispatch);
         return false;
@@ -149,7 +150,7 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
           },
           eventType: _analytics.EVENT_TYPE.TRACK
         };
-        (0, _analytics.withAnalytics)(payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
+        (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
           emoji: emoji.shortName,
           emojiId: emoji.id,
           emojiText: emoji.fallback
@@ -175,7 +176,7 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
           },
           eventType: _analytics.EVENT_TYPE.TRACK
         };
-        (0, _analytics.withAnalytics)(payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
+        (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
           emoji: undefined,
           emojiId: undefined,
           emojiText: undefined
@@ -260,10 +261,11 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, intl) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var providerFactory = arguments.length > 3 ? arguments[3] : undefined;
-  var hoverDecoration = arguments.length > 4 ? arguments[4] : undefined;
+  var api = arguments.length > 4 ? arguments[4] : undefined;
   var formatMessage = intl.formatMessage;
   var panelObject = (0, _utils.findPanel)(state);
   if (panelObject) {
+    var _api$analytics;
     var nodeType = state.schema.nodes.panel;
     var _panelObject$node$att = panelObject.node.attrs,
       panelType = _panelObject$node$att.panelType,
@@ -274,7 +276,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     };
 
     // force toolbar to be turned on
-    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, hoverDecoration, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    var items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
     var getDomRef = function getDomRef(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       var element = (0, _utils2.findDomRefAtPos)(panelObject.pos, domAtPos);