@atlaskit/editor-core 183.0.12 → 183.1.0

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

@@ -9,10 +9,8 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
-import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';
 import { linkToolbarMessages, linkMessages } from '../../messages';
 import commonMessages from '../../messages';
-import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { changeSelectedCardToText } from './pm-plugins/doc';
 import { commandWithMetadata } from '@atlaskit/editor-common/card';
 import { pluginKey } from './pm-plugins/main';
@@ -25,56 +23,70 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildOpenedSettingsPayload, buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
-export var removeCard = commandWithMetadata(function (state, dispatch) {
-  if (!(state.selection instanceof NodeSelection)) {
-    return false;
-  }
-  var type = state.selection.node.type.name;
-  var payload = {
-    action: ACTION.DELETED,
-    actionSubject: ACTION_SUBJECT.SMART_LINK,
-    actionSubjectId: type,
-    attributes: {
-      inputMethod: INPUT_METHOD.TOOLBAR,
-      displayMode: type
-    },
-    eventType: EVENT_TYPE.TRACK
-  };
-  if (dispatch) {
-    dispatch(addAnalytics(state, removeSelectedNode(state.tr), payload));
-  }
-  return true;
-}, {
-  action: ACTION.DELETED
-});
-export var visitCardLink = function visitCardLink(state, dispatch) {
-  if (!(state.selection instanceof NodeSelection)) {
-    return false;
-  }
-  var type = state.selection.node.type;
-  var _titleUrlPairFromNode = titleUrlPairFromNode(state.selection.node),
-    url = _titleUrlPairFromNode.url;
-
-  // All card links should open in the same tab per https://product-fabric.atlassian.net/browse/MS-1583.
-  // We are in edit mode here, open the smart card URL in a new window.
-  window.open(url);
-  if (dispatch) {
-    dispatch(addAnalytics(state, state.tr, buildVisitedLinkPayload(type.name)));
-  }
-  return true;
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export var removeCard = function removeCard(editorAnalyticsApi) {
+  return commandWithMetadata(function (state, dispatch) {
+    if (!(state.selection instanceof NodeSelection)) {
+      return false;
+    }
+    var type = state.selection.node.type.name;
+    var payload = {
+      action: ACTION.DELETED,
+      actionSubject: ACTION_SUBJECT.SMART_LINK,
+      actionSubjectId: type,
+      attributes: {
+        inputMethod: INPUT_METHOD.TOOLBAR,
+        displayMode: type
+      },
+      eventType: EVENT_TYPE.TRACK
+    };
+    if (dispatch) {
+      var tr = state.tr;
+      removeSelectedNode(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(payload)(tr);
+      dispatch(tr);
+    }
+    return true;
+  }, {
+    action: ACTION.DELETED
+  });
 };
-export var openLinkSettings = function openLinkSettings(state, dispatch) {
-  if (!(state.selection instanceof NodeSelection)) {
-    return false;
-  }
-  window.open('https://id.atlassian.com/manage-profile/link-preferences');
-  if (dispatch) {
+export var visitCardLink = function visitCardLink(editorAnalyticsApi) {
+  return function (state, dispatch) {
+    if (!(state.selection instanceof NodeSelection)) {
+      return false;
+    }
     var type = state.selection.node.type;
-    dispatch(addAnalytics(state, state.tr, buildOpenedSettingsPayload(type.name)));
-  }
-  return true;
+    var _titleUrlPairFromNode = titleUrlPairFromNode(state.selection.node),
+      url = _titleUrlPairFromNode.url;
+
+    // All card links should open in the same tab per https://product-fabric.atlassian.net/browse/MS-1583.
+    // We are in edit mode here, open the smart card URL in a new window.
+    window.open(url);
+    if (dispatch) {
+      var tr = state.tr;
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildVisitedLinkPayload(type.name))(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+export var openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
+  return function (state, dispatch) {
+    if (!(state.selection instanceof NodeSelection)) {
+      return false;
+    }
+    window.open('https://id.atlassian.com/manage-profile/link-preferences');
+    if (dispatch) {
+      var tr = state.tr,
+        type = state.selection.node.type;
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildOpenedSettingsPayload(type.name))(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
 };
-export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags, platform, linkPickerOptions) {
+export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags, platform, linkPickerOptions, pluginInjectionApi) {
   return function (state, intl, providerFactory) {
     var _state$schema$nodes = state.schema.nodes,
       inlineCard = _state$schema$nodes.inlineCard,
@@ -123,17 +135,17 @@ export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags,
         }
         return element;
       },
-      items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions),
+      items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
       scrollable: pluginState.showLinkingToolbar ? false : true,
       focusTrap: shouldEnableFocusTrap && pluginState.showLinkingToolbar
     }, editLinkToolbarConfig(pluginState.showLinkingToolbar, isLinkPickerEnabled));
   };
 };
-var unlinkCard = function unlinkCard(node, state) {
+var unlinkCard = function unlinkCard(node, state, editorAnalyticsApi) {
   var displayInfo = displayInfoForCard(node, findCardInfo(state));
   var text = displayInfo.title || displayInfo.url;
   if (text) {
-    return commandWithMetadata(changeSelectedCardToText(text), {
+    return commandWithMetadata(changeSelectedCardToText(text, editorAnalyticsApi), {
       action: ACTION.UNLINK
     });
   }
@@ -149,10 +161,13 @@ var withToolbarMetadata = function withToolbarMetadata(command) {
     inputMethod: INPUT_METHOD.FLOATING_TB
   });
 };
-var generateToolbarItems = function generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker) {
+var generateToolbarItems = function generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker, pluginInjectionApi) {
   return function (node) {
+    var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
     var _titleUrlPairFromNode2 = titleUrlPairFromNode(node),
       url = _titleUrlPairFromNode2.url;
+    var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.analytics) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
+      editorAnalyticsApi = _ref.actions;
     var metadata = {};
     if (url && !isSafeUrl(url)) {
       return [];
@@ -166,6 +181,7 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
     }
     var pluginState = pluginKey.getState(state);
     var currentAppearance = appearanceForNodeType(node.type);
+    var hoverDecoration = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d3 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.base) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.actions.hoverDecoration;
 
     /* mobile builds toolbar natively using toolbarItems */
     if (pluginState.showLinkingToolbar && platform !== 'mobile') {
@@ -173,7 +189,8 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         providerFactory: providerFactory,
         linkPicker: linkPicker,
         node: node,
-        featureFlags: featureFlags
+        featureFlags: featureFlags,
+        editorAnalyticsApi: editorAnalyticsApi
       })];
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
@@ -185,7 +202,7 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         title: intl.formatMessage(linkToolbarMessages.editLink),
         showTitle: true,
         testId: 'link-toolbar-edit-link-button',
-        onClick: editLink
+        onClick: editLink(editorAnalyticsApi)
       }, {
         type: 'separator'
       }, {
@@ -195,10 +212,10 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(linkMessages.openLink),
-        onClick: visitCardLink
+        onClick: visitCardLink(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard)), [{
+      }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'copy-button',
         items: [{
           state: state,
@@ -207,18 +224,18 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         }, {
           type: 'separator'
         }]
-      }], _toConsumableArray(getSettingsButtonGroup(state, featureFlags, intl)), [{
+      }], _toConsumableArray(getSettingsButtonGroup(state, featureFlags, intl, editorAnalyticsApi)), [{
         id: 'editor.link.delete',
         focusEditoronEnter: true,
         type: 'button',
         appearance: 'danger',
         icon: RemoveIcon,
-        onMouseEnter: hoverDecoration(node.type, true),
-        onMouseLeave: hoverDecoration(node.type, false),
-        onFocus: hoverDecoration(node.type, true),
-        onBlur: hoverDecoration(node.type, false),
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(commonMessages.remove),
-        onClick: withToolbarMetadata(removeCard)
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
       }]);
       if (currentAppearance === 'embed') {
         var alignmentOptions = buildAlignmentOptions(state, intl, cardOptions);
@@ -248,7 +265,8 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
               editorState: state,
               allowEmbeds: allowEmbeds,
               allowBlockCards: allowBlockCards,
-              platform: platform
+              platform: platform,
+              editorAnalyticsApi: editorAnalyticsApi
             });
           }
         }, {
@@ -259,26 +277,26 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
     }
   };
 };
-var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard) {
+var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi) {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
     focusEditoronEnter: true,
     type: 'button',
     title: intl.formatMessage(linkToolbarMessages.unlink),
     icon: UnlinkIcon,
-    onClick: withToolbarMetadata(unlinkCard(node, state))
+    onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
   }, {
     type: 'separator'
   }] : [];
 };
-var getSettingsButtonGroup = function getSettingsButtonGroup(state, featureFlags, intl) {
+var getSettingsButtonGroup = function getSettingsButtonGroup(state, featureFlags, intl, editorAnalyticsApi) {
   var floatingToolbarLinkSettingsButton = featureFlags.floatingToolbarLinkSettingsButton;
   return floatingToolbarLinkSettingsButton === 'true' ? [{
     id: 'editor.link.settings',
     type: 'button',
     icon: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
-    onClick: openLinkSettings
+    onClick: openLinkSettings(editorAnalyticsApi)
   }, {
     type: 'separator'
   }] : [];

package/dist/esm/plugins/card/ui/EditLinkToolbar.js

@@ -12,7 +12,7 @@ import { withOuterListeners } from '@atlaskit/editor-common/ui';
 import { commandWithMetadata } from '@atlaskit/editor-common/card';
 import HyperlinkToolbar from '../../hyperlink/ui/HyperlinkAddToolbar';
 import { showLinkToolbar, hideLinkToolbar as _hideLinkToolbar } from '../pm-plugins/actions';
-import { addAnalytics, INPUT_METHOD, ACTION } from '../../analytics';
+import { INPUT_METHOD, ACTION } from '@atlaskit/editor-common/analytics';
 import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../../ui/LinkSearch/ToolbarComponents';
 import { changeSelectedCardToLink, updateCard } from '../pm-plugins/doc';
 import { findCardInfo, displayInfoForCard } from '../utils';
@@ -92,22 +92,28 @@ export var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
   }]);
   return EditLinkToolbar;
 }(React.Component);
-export var editLink = function editLink(state, dispatch) {
-  var type = 'hyperlink';
-  if (state.selection instanceof NodeSelection) {
-    type = state.selection.node.type.name;
-  }
-  if (dispatch) {
-    dispatch(addAnalytics(state, showLinkToolbar(state.tr), buildEditLinkPayload(type)));
-    return true;
-  }
-  return false;
+export var editLink = function editLink(editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var type = 'hyperlink';
+    if (state.selection instanceof NodeSelection) {
+      type = state.selection.node.type.name;
+    }
+    if (dispatch) {
+      var tr = state.tr;
+      showLinkToolbar(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
 };
 export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
   var providerFactory = _ref.providerFactory,
     node = _ref.node,
     linkPicker = _ref.linkPicker,
-    featureFlags = _ref.featureFlags;
+    featureFlags = _ref.featureFlags,
+    editorAnalyticsApi = _ref.editorAnalyticsApi;
   return {
     type: 'custom',
     disableArrowNavigation: true,
@@ -133,7 +139,7 @@ export var buildEditLinkToolbar = function buildEditLinkToolbar(_ref) {
           // If the title is changed in a smartlink, convert to standard blue hyperlink
           // (even if the url was also changed) - we don't want to lose the custom title.
           if (titleChanged) {
-            return commandWithMetadata(changeSelectedCardToLink(newText, newHref), {
+            return commandWithMetadata(changeSelectedCardToLink(newText, newHref, undefined, undefined, undefined, editorAnalyticsApi), {
               action: ACTION.UPDATED,
               sourceEvent: analytic
             })(view.state, view.dispatch);

package/dist/esm/plugins/card/ui/EditorSmartCardEventsNext.js

@@ -5,9 +5,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["url", "display"],
-  _excluded2 = ["url", "display", "previousDisplay"],
-  _excluded3 = ["url", "display"];
+var _excluded = ["url", "display", "nodeContext"],
+  _excluded2 = ["url", "display", "previousDisplay", "nodeContext"],
+  _excluded3 = ["url", "display", "nodeContext"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React from 'react';
@@ -118,12 +118,14 @@ export var EventsBinding = function EventsBinding(_ref4) {
       created: function created(_ref5) {
         var url = _ref5.url,
           display = _ref5.display,
+          nodeContext = _ref5.nodeContext,
           metadata = _objectWithoutProperties(_ref5, _excluded);
         linkCreated({
           url: url,
           displayCategory: displayCategoryFromDisplay(display)
         }, getSourceEventFromMetadata(metadata), {
           display: display,
+          nodeContext: nodeContext,
           creationMethod: getMethod(metadata)
         });
       },
@@ -131,6 +133,7 @@ export var EventsBinding = function EventsBinding(_ref4) {
         var url = _ref6.url,
           display = _ref6.display,
           previousDisplay = _ref6.previousDisplay,
+          nodeContext = _ref6.nodeContext,
           metadata = _objectWithoutProperties(_ref6, _excluded2);
         linkUpdated({
           url: url,
@@ -138,6 +141,7 @@ export var EventsBinding = function EventsBinding(_ref4) {
         }, getSourceEventFromMetadata(metadata), {
           display: display,
           previousDisplay: previousDisplay,
+          nodeContext: nodeContext,
           updateMethod: getMethod(metadata),
           updateType: getUpdateType(metadata)
         });
@@ -145,12 +149,14 @@ export var EventsBinding = function EventsBinding(_ref4) {
       deleted: function deleted(_ref7) {
         var url = _ref7.url,
           display = _ref7.display,
+          nodeContext = _ref7.nodeContext,
           metadata = _objectWithoutProperties(_ref7, _excluded3);
         linkDeleted({
           url: url,
           displayCategory: displayCategoryFromDisplay(display)
         }, getSourceEventFromMetadata(metadata), {
           display: display,
+          nodeContext: nodeContext,
           deleteMethod: getMethod(metadata),
           deleteType: getDeleteType(metadata)
         });

package/dist/esm/plugins/card/ui/LinkToolbarAppearance.js

@@ -39,7 +39,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         allowEmbeds = _this$props.allowEmbeds,
         _this$props$allowBloc = _this$props.allowBlockCards,
         allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
-        platform = _this$props.platform;
+        platform = _this$props.platform,
+        editorAnalyticsApi = _this$props.editorAnalyticsApi;
       var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       if (url) {
         var _cardContext$store, _urlState$error;
@@ -53,7 +54,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var embedOption = allowEmbeds && preview && {
         appearance: 'embed',
         title: intl.formatMessage(messages.embed),
-        onClick: setSelectedCardAppearance('embed'),
+        onClick: setSelectedCardAppearance('embed', editorAnalyticsApi),
         selected: currentAppearance === 'embed',
         hidden: false,
         testId: 'embed-appearance',
@@ -63,7 +64,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       var blockCardOption = allowBlockCards && {
         appearance: 'block',
         title: intl.formatMessage(messages.block),
-        onClick: setSelectedCardAppearance('block'),
+        onClick: setSelectedCardAppearance('block', editorAnalyticsApi),
         selected: currentAppearance === 'block',
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
@@ -71,7 +72,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       };
       var options = [{
         title: intl.formatMessage(messages.url),
-        onClick: commandWithMetadata(changeSelectedCardToLink(url, url, true), {
+        onClick: commandWithMetadata(changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi), {
           action: ACTION.CHANGED_TYPE
         }),
         selected: !currentAppearance,
@@ -79,7 +80,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       }, {
         appearance: 'inline',
         title: intl.formatMessage(messages.inline),
-        onClick: setSelectedCardAppearance('inline'),
+        onClick: setSelectedCardAppearance('inline', editorAnalyticsApi),
         selected: currentAppearance === 'inline',
         testId: 'inline-appearance'
       }];

package/dist/esm/plugins/card/ui/LinkToolbarButtonGroup.js

@@ -6,7 +6,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';
-import Button from '../../floating-toolbar/ui/Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 
 /**
  * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed

package/dist/esm/plugins/card/ui/ResizableEmbedCard.js

@@ -20,7 +20,7 @@ import { embedHeaderHeight } from '@atlaskit/smart-card';
 import { wrapperStyle } from '../../../ui/Resizer/styled';
 import Resizer from '../../../ui/Resizer';
 import { handleSides, imageAlignmentMap, snapTo } from '../../../ui/Resizer/utils';
-import { calcMediaPxWidth } from '../../../plugins/media/utils/media-single';
+import { calcMediaPxWidth } from '@atlaskit/editor-common/ui';
 import { embedSpacingStyles } from './styled';
 var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
   _inherits(ResizableEmbedCard, _React$Component);

package/dist/esm/plugins/collab-edit/ui/styles.js

@@ -1,11 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-import { gridSize } from '@atlaskit/theme/constants';
 import { N20 } from '@atlaskit/theme/colors';
 import { akEditorSmallZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var inviteTeamWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", "px;\n  margin-left: -", "px;\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), gridSize() * 4, gridSize() / 2);
-export var avatarContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", "px;\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), gridSize());
+export var inviteTeamWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 50%;\n  min-width: ", ";\n  margin-left: calc(-1 * ", ");\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-space-400, 32px)", "var(--ds-space-050, 4px)");
+export var avatarContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  display: flex;\n  align-items: center;\n\n  // ED-13102: This is to override list styles that come from the\n  // .wiki-content class in Confluence that should not apply within\n  // the toolbar. Has to be extra specific to override.\n  && > ul {\n    list-style-type: none;\n  }\n\n  div:last-child button.invite-to-edit {\n    border-radius: 50%;\n    height: 32px;\n    width: 32px;\n    padding: 2px;\n  }\n"])), "var(--ds-space-100, 8px)");
 export var badge = function badge(color) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: block;\n  position: absolute;\n  right: 1px;\n  bottom: 1px;\n  width: 13px;\n  height: 13px;\n  z-index: ", ";\n  border-radius: 3px;\n  background: ", ";\n  color: ", ";\n  font-size: ", ";\n  line-height: 0;\n  padding-top: 7px;\n  text-align: center;\n  box-shadow: 0 0 1px ", ";\n  box-sizing: border-box;\n"])), akEditorSmallZIndex, color, "var(--ds-text-inverse, #fff)", relativeFontSizeToBase16(9), "var(--ds-border-inverse, #fff)");
 };

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

@@ -6,7 +6,7 @@ import { insertDate, closeDatePicker as _closeDatePicker, closeDatePickerWithAna
 import createDatePlugin from './pm-plugins/main';
 import keymap from './pm-plugins/keymap';
 import { IconDate } from '../quick-insert/assets';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../analytics';
+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 as datePluginKey } from './pm-plugins/plugin-key';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -148,8 +148,9 @@ var datePlugin = function datePlugin(_, api) {
             return /*#__PURE__*/React.createElement(IconDate, null);
           },
           action: function action(insert, state) {
+            var _api$dependencies, _api$dependencies$ana, _api$dependencies$ana2, _api$dependencies$ana3;
             var tr = createDate(true)(insert, state);
-            addAnalytics(state, tr, {
+            api === null || api === void 0 ? void 0 : (_api$dependencies = api.dependencies) === null || _api$dependencies === void 0 ? void 0 : (_api$dependencies$ana = _api$dependencies.analytics) === null || _api$dependencies$ana === void 0 ? void 0 : (_api$dependencies$ana2 = _api$dependencies$ana.actions) === null || _api$dependencies$ana2 === void 0 ? void 0 : (_api$dependencies$ana3 = _api$dependencies$ana2.attachAnalyticsEvent) === null || _api$dependencies$ana3 === void 0 ? void 0 : _api$dependencies$ana3.call(_api$dependencies$ana2, {
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.DATE,
@@ -157,7 +158,7 @@ var datePlugin = function datePlugin(_, api) {
               attributes: {
                 inputMethod: INPUT_METHOD.QUICK_INSERT
               }
-            });
+            })(tr);
             return tr;
           }
         }];

package/dist/esm/plugins/expand/ui/styles.js

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
-import { gridSize } from '@atlaskit/theme/constants';
 import { R50, R300, N40A, N50A, N80A, DN50, R200 } from '@atlaskit/theme/colors';
 import { sharedExpandStyles } from '@atlaskit/editor-common/ui';
 import { SelectionStyle, getSelectionStyles, akLayoutGutterOffset, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
@@ -41,7 +40,7 @@ var DANGER_STATE_BORDER_RADIUS = themed({
   dark: '3px'
 });
 export var expandStyles = function expandStyles(props) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    align-items: center;\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", "px;\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  /* stylelint-disable property-no-unknown, value-keyword-case */\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n  /* stylelint-enable property-no-unknown, value-keyword-case */\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), expandClassNames.icon, expandClassNames.prefix, sharedExpandStyles.containerStyles({
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .", " > div {\n    display: flex;\n  }\n\n  .", " {\n    ", "\n    overflow: hidden;\n    cursor: pointer;\n    box-sizing: border-box;\n\n    td > & {\n      margin-top: 0;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(90deg);\n    }\n\n    &.", ":not(.danger) {\n      ", "\n\n      ::after {\n        // Custom background color and borders (for dark theme).\n        background-color: ", ";\n        border: ", ";\n        border-radius: ", ";\n      }\n    }\n\n    &.danger {\n      background: ", ";\n      border: ", ";\n      border-color: ", ";\n      border-radius: ", ";\n    }\n  }\n\n  .ProseMirror\n    > .", ",\n    .", "\n    > .", " {\n    margin-left: -", "px;\n    margin-right: -", "px;\n  }\n\n  .", " {\n    ", "\n    cursor: text;\n    padding-top: 0px;\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", ";\n    align-items: center;\n    overflow: visible;\n  }\n\n  .", " {\n    background: ", ";\n    border-color: ", ";\n\n    .", " {\n      padding-top: ", ";\n    }\n  }\n\n  .", " {\n    width: 100%;\n  }\n\n  /* stylelint-disable property-no-unknown, value-keyword-case */\n  .", ":(.", ") {\n    .expand-content-wrapper {\n      height: auto;\n    }\n  }\n  /* stylelint-enable property-no-unknown, value-keyword-case */\n\n  .", ":not(.", ") {\n    .ak-editor-expand__content {\n      position: absolute;\n      height: 1px;\n      width: 1px;\n      overflow: hidden;\n      clip: rect(1px, 1px, 1px, 1px);\n      white-space: nowrap;\n    }\n\n    .", " svg {\n      ", ";\n      transform: rotate(0deg);\n    }\n\n    &:not(.", "):not(.danger) {\n      background: transparent;\n      border-color: transparent;\n\n      &:hover {\n        border-color: ", ";\n        background: ", ";\n      }\n    }\n  }\n"])), expandClassNames.icon, expandClassNames.prefix, sharedExpandStyles.containerStyles({
     expanded: false,
     focused: false
   })(props), expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), ACTIVE_STATE_BACKGROUND_COLOR(props), ACTIVE_STATE_BORDER(props), ACTIVE_STATE_BORDER_RADIUS(props), DANGER_STATE_BACKGROUND_COLOR(props), DANGER_STATE_BORDER(props), DANGER_STATE_BORDER_COLOR(props), DANGER_STATE_BORDER_RADIUS(props), expandClassNames.type('expand'), BreakoutCssClassName.BREAKOUT_MARK_DOM, expandClassNames.type('expand'), akLayoutGutterOffset, akLayoutGutterOffset, expandClassNames.content, sharedExpandStyles.contentStyles({
@@ -50,7 +49,7 @@ export var expandStyles = function expandStyles(props) {
   })(props), expandClassNames.titleInput, sharedExpandStyles.titleInputStyles(props), expandClassNames.titleContainer, sharedExpandStyles.titleContainerStyles(props), expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND(props), themed({
     light: "var(--ds-border, ".concat(N40A, ")"),
     dark: "var(--ds-border, ".concat(DN50, ")")
-  })(props), expandClassNames.content, gridSize(), expandClassNames.inputContainer, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), akEditorSelectedNodeClassName, themed({
+  })(props), expandClassNames.content, "var(--ds-space-100, 8px)", expandClassNames.inputContainer, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.iconContainer, EXPAND_ICON_COLOR(props), akEditorSelectedNodeClassName, themed({
     light: "var(--ds-border, ".concat(N50A, ")"),
     dark: "var(--ds-border, ".concat(DN50, ")")
   })(props), EXPAND_SELECTED_BACKGROUND(props));

package/dist/esm/plugins/floating-toolbar/ui/Dropdown.js

@@ -16,7 +16,7 @@ import React, { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import UiDropdown from '../../../ui/Dropdown';
-import Button from './Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
 var dropdownExpandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0px -4px;\n"])));
 var iconGroup = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n"])));

package/dist/esm/plugins/floating-toolbar/ui/DropdownMenu.js

@@ -12,6 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import { useState, useCallback, useEffect, createRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
 import { B400 } from '@atlaskit/theme/colors';
 import { ButtonItem } from '@atlaskit/menu';
@@ -24,8 +25,11 @@ export var menuItemDimensions = {
   height: 32
 };
 var spacer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  padding: 8px;\n"])));
-var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", "px;\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", "px;\n    }\n  }\n"])), menuItemDimensions.width, gridSize() * 4, gridSize() / 2);
+var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", ";\n    padding: 8px 8px 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", ";\n    }\n  }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-050, 4px)");
 var label = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 100%;\n"])));
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
 export var itemSpacing = gridSize() / 2;
 
 // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check

package/dist/esm/plugins/floating-toolbar/ui/ExtensionsPlaceholder.js

@@ -7,7 +7,7 @@ import { getContextualToolbarItemsFromModule } from '@atlaskit/editor-common/ext
 import ButtonGroup from '@atlaskit/button/button-group';
 import { nodeToJSON } from '../../../utils';
 import { createExtensionAPI } from '../../extension/extension-api';
-import Button from './Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import Separator from './Separator';
 var noop = function noop() {
   return null;

package/dist/esm/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -5,14 +5,12 @@ var _templateObject;
 import React, { useEffect, useState, useRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
-import { gridSize } from '@atlaskit/theme/constants';
 import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
 import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
-import Button from './Button';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import messages from './messages';
 import rafSchedule from 'raf-schd';
-var akGridSize = gridSize();
-var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, "var(--ds-border, ".concat(N30, ")"));
+var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", ";\n  padding: ", " ", ";\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N30, ")"));
 var LeftIcon = ChevronLeftLargeIcon;
 var RightIcon = ChevronRightLargeIcon;
 export default (function (_ref) {