@atlaskit/editor-core 188.11.4 → 188.12.1

package/dist/es2019/plugins/undo-redo/ui/ToolbarUndoRedo/index.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import UndoIcon from '@atlaskit/icon/glyph/undo';
 import RedoIcon from '@atlaskit/icon/glyph/redo';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { undo as undoKeymap, redo as redoKeymap, ToolTipContent, tooltip } from '../../../../keymaps';
 import { separatorStyles, buttonGroupStyle } from '@atlaskit/editor-common/styles';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
@@ -31,65 +31,64 @@ const forceFocus = (editorView, api) => command => {
     editorView.focus();
   }
 };
-export class ToolbarUndoRedo extends PureComponent {
-  render() {
-    const {
-      disabled,
-      isReducedSpacing,
-      historyState,
-      editorView,
-      api,
-      intl: {
-        formatMessage
-      }
-    } = this.props;
-    const handleUndo = () => {
-      forceFocus(editorView, api)(undoFromToolbar);
-    };
-    const handleRedo = () => {
-      forceFocus(editorView, api)(redoFromToolbar);
-    };
-    const labelUndo = formatMessage(undoRedoMessages.undo);
-    const labelRedo = formatMessage(undoRedoMessages.redo);
-    const {
-      canUndo,
-      canRedo
-    } = historyState;
-    return jsx("span", {
-      css: buttonGroupStyle
-    }, jsx(ToolbarButton, {
-      buttonId: TOOLBAR_BUTTON.UNDO,
-      spacing: isReducedSpacing ? 'none' : 'default',
-      onClick: handleUndo,
-      disabled: !canUndo || disabled,
-      "aria-label": tooltip(undoKeymap, labelUndo),
-      "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
-      title: jsx(ToolTipContent, {
-        description: labelUndo,
-        keymap: undoKeymap
-      }),
-      iconBefore: jsx(UndoIcon, {
-        label: ""
-      }),
-      testId: "ak-editor-toolbar-button-undo"
-    }), jsx(ToolbarButton, {
-      spacing: isReducedSpacing ? 'none' : 'default',
-      buttonId: TOOLBAR_BUTTON.REDO,
-      onClick: handleRedo,
-      disabled: !canRedo || disabled,
-      title: jsx(ToolTipContent, {
-        description: labelRedo,
-        keymap: redoKeymap
-      }),
-      iconBefore: jsx(RedoIcon, {
-        label: ""
-      }),
-      testId: "ak-editor-toolbar-button-redo",
-      "aria-label": tooltip(redoKeymap, labelRedo),
-      "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
-    }), jsx("span", {
-      css: separatorStyles
-    }));
+export const ToolbarUndoRedo = ({
+  disabled,
+  isReducedSpacing,
+  editorView,
+  api,
+  intl: {
+    formatMessage
   }
-}
+}) => {
+  const {
+    historyState
+  } = useSharedPluginState(api, ['history']);
+  const handleUndo = () => {
+    forceFocus(editorView, api)(undoFromToolbar);
+  };
+  const handleRedo = () => {
+    forceFocus(editorView, api)(redoFromToolbar);
+  };
+  const labelUndo = formatMessage(undoRedoMessages.undo);
+  const labelRedo = formatMessage(undoRedoMessages.redo);
+  const {
+    canUndo,
+    canRedo
+  } = historyState !== null && historyState !== void 0 ? historyState : {};
+  return jsx("span", {
+    css: buttonGroupStyle
+  }, jsx(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.UNDO,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    onClick: handleUndo,
+    disabled: !canUndo || disabled,
+    "aria-label": tooltip(undoKeymap, labelUndo),
+    "aria-keyshortcuts": getAriaKeyshortcuts(undoKeymap),
+    title: jsx(ToolTipContent, {
+      description: labelUndo,
+      keymap: undoKeymap
+    }),
+    iconBefore: jsx(UndoIcon, {
+      label: ""
+    }),
+    testId: "ak-editor-toolbar-button-undo"
+  }), jsx(ToolbarButton, {
+    spacing: isReducedSpacing ? 'none' : 'default',
+    buttonId: TOOLBAR_BUTTON.REDO,
+    onClick: handleRedo,
+    disabled: !canRedo || disabled,
+    title: jsx(ToolTipContent, {
+      description: labelRedo,
+      keymap: redoKeymap
+    }),
+    iconBefore: jsx(RedoIcon, {
+      label: ""
+    }),
+    testId: "ak-editor-toolbar-button-redo",
+    "aria-label": tooltip(redoKeymap, labelRedo),
+    "aria-keyshortcuts": getAriaKeyshortcuts(redoKeymap)
+  }), jsx("span", {
+    css: separatorStyles
+  }));
+};
 export default injectIntl(ToolbarUndoRedo);

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "188.11.4";
+export const version = "188.12.1";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

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

@@ -2,7 +2,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, extensionPlugin, fragmentMarkPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, panelPlugin, placeholderTextPlugin, tasksAndDecisionsPlugin, textColorPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../../../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, extensionPlugin, fragmentMarkPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, panelPlugin, placeholderTextPlugin, tasksAndDecisionsPlugin, textColorPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, expandPlugin, isExpandInsertionEnabled, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin } from '../../../plugins';
+import { historyPlugin } from '@atlaskit/editor-plugin-history';
 import { statusPlugin } from '@atlaskit/editor-plugin-status';
 import { datePlugin } from '@atlaskit/editor-plugin-date';
 import { captionPlugin } from '@atlaskit/editor-plugin-caption';
@@ -23,6 +24,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { saveOnEnterPlugin } from '@atlaskit/editor-plugin-save-on-enter';
 import { scrollIntoViewPlugin } from '@atlaskit/editor-plugin-scroll-into-view';
 import { mentionsPlugin } from '@atlaskit/editor-plugin-mentions';
+import { selectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
 import { isFullPage as fullPageCheck } from '../../../utils/is-full-page';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import { createDefaultPreset } from './default';
@@ -393,6 +395,16 @@ export default function createUniversalPreset(appearance, props, featureFlags, p
     return builder;
   }).add([codeBidiWarningPlugin, {
     appearance: appearance
-  }]);
+  }])
+  /**
+   * Do not use this plugin - it is for AI purposes only.
+   */.maybeAdd(selectionToolbarPlugin, function (plugin, builder) {
+    if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd')) {
+      return builder.add([plugin, {
+        preferenceToolbarAboveSelection: false
+      }]);
+    }
+    return builder;
+  });
   return finalPreset;
 }

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

@@ -7,6 +7,7 @@ import { getPluginState } from './utils';
 import { buildToolbar } from './toolbar';
 import { InlineCommentView } from './ui/InlineCommentView';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var annotationPlugin = function annotationPlugin(_ref) {
   var annotationProviders = _ref.config,
     api = _ref.api;
@@ -53,7 +54,17 @@ var annotationPlugin = function annotationPlugin(_ref) {
     },
     pluginsOptions: {
       floatingToolbar: function floatingToolbar(state, intl) {
-        if (!annotationProviders) {
+        if (getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
+          return;
+        }
+        var pluginState = getPluginState(state);
+        if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
+          var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
+          return buildToolbar(state, intl, isToolbarAbove);
+        }
+      },
+      selectionToolbar: function selectionToolbar(state, intl) {
+        if (!getBooleanFF('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
           return;
         }
         var pluginState = getPluginState(state);

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

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

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

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

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

@@ -43,7 +43,8 @@ export default (function (pluginState, action) {
       });
     case ACTIONS.SET_SELECTED_ANNOTATION:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
-        selectedAnnotations: _toConsumableArray(action.data.selectedAnnotations)
+        selectedAnnotations: _toConsumableArray(action.data.selectedAnnotations),
+        skipSelectionHandling: true
       });
     default:
       return pluginState;

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

@@ -1,166 +1,11 @@
 import React from 'react';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { addInlineComment, ToolTipContent } from '../../keymaps';
 import { setInlineCommentDraftState } from './commands';
 import { AnnotationTestIds, AnnotationSelectionType } from './types';
 import { isSelectionValid } from './utils';
 import { annotationMessages } from '@atlaskit/editor-common/messages';
-
-/**
- * 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)
-    };
-  };
-};
+import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 export var buildToolbar = function buildToolbar(state, intl) {
   var isToolbarAbove = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var schema = state.schema;

package/dist/esm/plugins/index.js

@@ -24,7 +24,6 @@ export { default as annotationPlugin } from './annotation';
 export { default as analyticsPlugin } from './analytics';
 export { default as customAutoformatPlugin } from './custom-autoformat';
 export { default as feedbackDialogPlugin } from './feedback-dialog';
-export { default as historyPlugin } from './history';
 export { default as expandPlugin, isExpandInsertionEnabled } from './expand';
 export { default as mobileDimensionsPlugin } from './mobile-dimensions';
 export { default as findReplacePlugin } from './find-replace';

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

@@ -21,7 +21,6 @@ import ToolbarButton from '../../../../ui/ToolbarButton';
 import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
-import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
 import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands';
 import { insertExpand } from '../../../expand/commands';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -210,21 +209,24 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       return true;
     });
     _defineProperty(_assertThisInitialized(_this), "insertLayoutColumns", function (inputMethod) {
-      var editorView = _this.props.editorView;
-      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;
     });
     _defineProperty(_assertThisInitialized(_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;
     });
     _defineProperty(_assertThisInitialized(_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) {
@@ -252,11 +254,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_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;
     });
     _defineProperty(_assertThisInitialized(_this), "insertExpand", function () {
@@ -267,9 +269,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_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);
@@ -292,11 +294,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_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()) {
@@ -412,12 +414,12 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     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';
@@ -454,9 +456,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         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/esm/plugins/layout/actions.js

@@ -6,8 +6,9 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { flatmap, mapChildren } from '../../utils/slice';
 import { getStepRange, isEmptyDocument } from '@atlaskit/editor-common/utils';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics/types/enums';
-import { addAnalytics, withAnalytics } from '../analytics/utils';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { addAnalytics } from '../analytics/utils';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { LAYOUT_TYPE } from '../analytics/types/node-events';
 import { pluginKey } from './pm-plugins/plugin-key';
 export var ONE_COL_LAYOUTS = ['single'];
@@ -79,16 +80,18 @@ export var insertLayoutColumns = function insertLayoutColumns(state, dispatch) {
   }
   return true;
 };
-export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(inputMethod) {
-  return withAnalytics({
-    action: ACTION.INSERTED,
-    actionSubject: ACTION_SUBJECT.DOCUMENT,
-    actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
-    attributes: {
-      inputMethod: inputMethod
-    },
-    eventType: EVENT_TYPE.TRACK
-  })(insertLayoutColumns);
+export var insertLayoutColumnsWithAnalytics = function insertLayoutColumnsWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod) {
+    return withAnalytics(editorAnalyticsAPI, {
+      action: ACTION.INSERTED,
+      actionSubject: ACTION_SUBJECT.DOCUMENT,
+      actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
+      attributes: {
+        inputMethod: inputMethod
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(insertLayoutColumns);
+  };
 };
 
 /**

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

@@ -2,13 +2,14 @@ import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { buildToolbar } from './toolbar';
-import { createDefaultLayoutSection } from './actions';
+import { createDefaultLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { IconLayout } from '@atlaskit/editor-common/quick-insert';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { pluginKey } from './pm-plugins/plugin-key';
 export { pluginKey };
 var layoutPlugin = function layoutPlugin(_ref) {
+  var _api$analytics;
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
     api = _ref.api;
@@ -31,6 +32,9 @@ var layoutPlugin = function layoutPlugin(_ref) {
         }
       }];
     },
+    actions: {
+      insertLayoutColumns: 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.getState(state),
@@ -56,9 +60,9 @@ var layoutPlugin = function layoutPlugin(_ref) {
             return /*#__PURE__*/React.createElement(IconLayout, null);
           },
           action: function action(insert, state) {
-            var _api$analytics;
+            var _api$analytics2;
             var tr = insert(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: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,

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

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