@atlaskit/editor-core 183.0.9 → 183.1.0

package/dist/es2019/plugins/card/pm-plugins/doc.js

@@ -2,12 +2,11 @@ import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { closeHistory } from 'prosemirror-history';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, EVENT_TYPE, INPUT_METHOD } from '../../../plugins/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { SMART_LINK_TYPE } from '../../../plugins/analytics/types/node-events';
-import { getLinkCreationAnalyticsEvent } from '../../../plugins/hyperlink/analytics';
 import { nodesBetweenChanged, processRawValue } from '../../../utils';
 import { unlinkPayload } from '../../../utils/linking-utils';
-import { isFromCurrentDomain } from '../../hyperlink/utils';
+import { isFromCurrentDomain, getLinkCreationAnalyticsEvent } from '@atlaskit/editor-common/utils';
 import { appearanceForNodeType, selectedCardAppearance } from '../utils';
 import { queueCards, resolveCard } from './actions';
 import { pluginKey } from './plugin-key';
@@ -47,7 +46,7 @@ function replaceLinksToCards(tr, cardAdf, schema, request) {
   tr.replaceWith(pos, pos + (node.text || url).length, nodes);
   return $pos.node($pos.depth - 1).type.name;
 }
-export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction) => (editorState, dispatch) => {
+export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction, editorAnalyticsApi) => (editorState, dispatch) => {
   const state = pluginKey.getState(editorState);
   if (!state) {
     return false;
@@ -83,7 +82,7 @@ export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction) => (edi
        */
       const inputMethod = requests[0].source;
       const sourceEvent = requests[0].sourceEvent;
-      addAnalytics(editorState, tr, {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
         action: analyticsAction || ACTION.INSERTED,
         actionSubject: ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: ACTION_SUBJECT_ID.SMART_LINK,
@@ -97,7 +96,7 @@ export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction) => (edi
         nonPrivacySafeAttributes: {
           domainName
         }
-      });
+      })(tr);
       addLinkMetadata(editorState.selection, tr, {
         action: analyticsAction,
         inputMethod,
@@ -111,14 +110,14 @@ export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction) => (edi
   }
   return true;
 };
-export const handleFallbackWithAnalytics = request => (state, dispatch) => {
+export const handleFallbackWithAnalytics = (request, editorAnalyticsApi) => (state, dispatch) => {
   const cardState = pluginKey.getState(state);
   if (!cardState) {
     return false;
   }
   const tr = state.tr;
   if (request.source !== INPUT_METHOD.FLOATING_TB) {
-    addAnalytics(state, tr, getLinkCreationAnalyticsEvent(request.source, request.url));
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(getLinkCreationAnalyticsEvent(request.source, request.url))(tr);
   }
   addLinkMetadata(state.selection, tr, {
     action: request.analyticsAction,
@@ -158,9 +157,11 @@ export const queueCardsFromChangedTr = (state, tr, source, analyticsAction, norm
     }
     return false;
   });
-  addLinkMetadata(state.selection, tr, {
-    action: analyticsAction
-  });
+  if (analyticsAction) {
+    addLinkMetadata(state.selection, tr, {
+      action: analyticsAction
+    });
+  }
   return queueCards(requests)(tr);
 };
 export const queueCardFromChangedTr = (state, tr, source, analyticsAction, normalizeLinkText = true, sourceEvent = undefined, previousAppearance) => {
@@ -226,7 +227,7 @@ export const convertHyperlinkToSmartCard = (state, source, appearance, normalize
   });
   return queueCards(requests)(state.tr);
 };
-export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) => (state, dispatch) => {
+export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos, editorAnalyticsApi) => (state, dispatch) => {
   let tr;
   if (node && pos) {
     tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
@@ -236,7 +237,7 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   if (sendAnalytics) {
     if (selectedNode) {
-      addAnalytics(state, tr, {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
         action: ACTION.CHANGED_TYPE,
         actionSubject: ACTION_SUBJECT.SMART_LINK,
         eventType: EVENT_TYPE.TRACK,
@@ -244,7 +245,7 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
           newType: SMART_LINK_TYPE.URL,
           previousType: appearanceForNodeType(selectedNode.type)
         }
-      });
+      })(tr);
     }
   }
   if (dispatch) {
@@ -252,7 +253,7 @@ export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) =
   }
   return true;
 };
-export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node, pos) => (state, dispatch) => {
+export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node, pos, editorAnalyticsApi) => (state, dispatch) => {
   let tr;
   if (node && pos) {
     tr = cardNodeToLinkWithTransaction(state, text, href, node, pos);
@@ -260,14 +261,14 @@ export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node
     tr = cardToLinkWithTransaction(state, text, href);
   }
   if (sendAnalytics) {
-    addAnalytics(state, tr, {
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
       action: ACTION.ERRORED,
       actionSubject: ACTION_SUBJECT.SMART_LINK,
       eventType: EVENT_TYPE.OPERATIONAL,
       attributes: {
         error: 'Smart card falling back to link.'
       }
-    });
+    })(tr);
   }
   if (dispatch) {
     dispatch(tr.scrollIntoView());
@@ -310,7 +311,7 @@ function cardNodeToLinkWithTransaction(state, text, href, node, pos) {
     href: href || url
   })]));
 }
-export const changeSelectedCardToText = text => (state, dispatch) => {
+export const changeSelectedCardToText = (text, editorAnalyticsApi) => (state, dispatch) => {
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   if (!selectedNode) {
     return false;
@@ -320,12 +321,13 @@ export const changeSelectedCardToText = text => (state, dispatch) => {
     addLinkMetadata(state.selection, tr, {
       action: ACTION.UNLINK
     });
-    addAnalytics(state, tr.scrollIntoView(), unlinkPayload(ACTION_SUBJECT_ID.CARD_INLINE));
+    tr.scrollIntoView();
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(unlinkPayload(ACTION_SUBJECT_ID.CARD_INLINE))(tr);
     dispatch(tr);
   }
   return true;
 };
-export const setSelectedCardAppearance = appearance => (state, dispatch) => {
+export const setSelectedCardAppearance = (appearance, editorAnalyticsApi) => (state, dispatch) => {
   var _previousNode$type;
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   if (!selectedNode) {
@@ -365,7 +367,7 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
   if ((previousNode === null || previousNode === void 0 ? void 0 : (_previousNode$type = previousNode.type) === null || _previousNode$type === void 0 ? void 0 : _previousNode$type.name) === 'paragraph') {
     tr.delete(previousNodePos, from);
   }
-  addAnalytics(state, tr, {
+  editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
     action: ACTION.CHANGED_TYPE,
     actionSubject: ACTION_SUBJECT.SMART_LINK,
     eventType: EVENT_TYPE.TRACK,
@@ -373,7 +375,7 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
       newType: appearance,
       previousType: appearanceForNodeType(selectedNode.type)
     }
-  });
+  })(tr);
   addLinkMetadata(state.selection, tr, {
     action: ACTION.CHANGED_TYPE
   });

package/dist/es2019/plugins/card/pm-plugins/main.js

@@ -10,7 +10,7 @@ import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { createAnalyticsQueue, eventsFromTransaction } from './analytics';
 export { pluginKey } from './plugin-key';
-export const createPlugin = options => pmPluginFactoryParams => {
+export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryParams => {
   const {
     lpAnalyticsEventsNext
   } = pmPluginFactoryParams.featureFlags;
@@ -82,7 +82,10 @@ export const createPlugin = options => pmPluginFactoryParams => {
                * By using this approach, the browser is free to schedule the resolution of the promises below in between rendering/network/
                * other tasks as per common implementations of the JavaScript event loop in browsers.
                */
-              const invoke = rafSchedule(() => resolveWithProvider(view, provider, request, options));
+              const invoke = rafSchedule(() => {
+                var _pluginInjectionApi$d;
+                return resolveWithProvider(view, provider, request, options, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions);
+              });
               rafCancellationCallbacks.push(invoke.cancel);
               invoke();
             });
@@ -129,7 +132,8 @@ export const createPlugin = options => pmPluginFactoryParams => {
             allowResizing,
             platform,
             fullWidthMode,
-            dispatchAnalyticsEvent
+            dispatchAnalyticsEvent,
+            pluginInjectionApi
           };
           const hasIntlContext = true;
           return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();

package/dist/es2019/plugins/card/pm-plugins/shouldReplaceLink.js

@@ -1,5 +1,5 @@
 import { normalizeUrl } from '@atlaskit/adf-schema';
-import { md } from '../../paste/md';
+import { md } from '@atlaskit/editor-common/paste';
 export function shouldReplaceLink(node, compareLinkText = true, compareToUrl) {
   const linkMark = node.marks.find(mark => mark.type.name === 'link');
   if (!linkMark) {

package/dist/es2019/plugins/card/pm-plugins/util/resolve.js

@@ -5,14 +5,14 @@ import { replaceQueuedUrlWithCard, handleFallbackWithAnalytics } from '../doc';
 // ============================================================================ //
 // Used for all interactions with the EditorCardProvider.
 // ============================================================================ //
-export const resolveWithProvider = (view, provider, request, options) => {
+export const resolveWithProvider = (view, provider, request, options, editorAnalyticsApi) => {
   // When user manually changes appearance from blue link to smart link, we should respect that,
   let shouldForceAppearance =
   // This flag is set to true only in one place atm:
   // packages/editor/editor-core/src/plugins/card/pm-plugins/doc.ts @ convertHyperlinkToSmartCard
   // Which is used when user switching from URL to smart link appearance.
   !!request.shouldReplaceLink;
-  const handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(handleResolved(view, request, options), handleRejected(view, request));
+  const handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(handleResolved(view, request, editorAnalyticsApi, options), handleRejected(view, request, editorAnalyticsApi));
   return handleResolve;
 };
 const updateCardType = (resolvedCard, options) => {
@@ -24,13 +24,13 @@ const updateCardType = (resolvedCard, options) => {
     resolvedCard.type = 'inlineCard';
   }
 };
-const handleResolved = (view, request, options) => resolvedCard => {
+const handleResolved = (view, request, editorAnalyticsApi, options) => resolvedCard => {
   updateCardType(resolvedCard, options);
-  replaceQueuedUrlWithCard(request.url, resolvedCard, request.analyticsAction)(view.state, view.dispatch);
+  replaceQueuedUrlWithCard(request.url, resolvedCard, request.analyticsAction, editorAnalyticsApi)(view.state, view.dispatch);
   return resolvedCard;
 };
-const handleRejected = (view, request) => () => {
-  handleFallbackWithAnalytics(request)(view.state, view.dispatch);
+const handleRejected = (view, request, editorAnalyticsApi) => () => {
+  handleFallbackWithAnalytics(request, editorAnalyticsApi)(view.state, view.dispatch);
 };
 
 // listen for card provider changes

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

@@ -5,10 +5,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';
@@ -21,7 +19,8 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildOpenedSettingsPayload, buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
-export const removeCard = commandWithMetadata((state, dispatch) => {
+import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
   }
@@ -37,13 +36,18 @@ export const removeCard = commandWithMetadata((state, dispatch) => {
     eventType: EVENT_TYPE.TRACK
   };
   if (dispatch) {
-    dispatch(addAnalytics(state, removeSelectedNode(state.tr), payload));
+    const {
+      tr
+    } = state;
+    removeSelectedNode(tr);
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(payload)(tr);
+    dispatch(tr);
   }
   return true;
 }, {
   action: ACTION.DELETED
 });
-export const visitCardLink = (state, dispatch) => {
+export const visitCardLink = editorAnalyticsApi => (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
   }
@@ -58,24 +62,34 @@ export const visitCardLink = (state, dispatch) => {
   // 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)));
+    const {
+      tr
+    } = state;
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildVisitedLinkPayload(type.name))(tr);
+    dispatch(tr);
   }
   return true;
 };
-export const openLinkSettings = (state, dispatch) => {
+export const openLinkSettings = editorAnalyticsApi => (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
   }
   window.open('https://id.atlassian.com/manage-profile/link-preferences');
   if (dispatch) {
     const {
-      type
-    } = state.selection.node;
-    dispatch(addAnalytics(state, state.tr, buildOpenedSettingsPayload(type.name)));
+      tr,
+      selection: {
+        node: {
+          type
+        }
+      }
+    } = state;
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildOpenedSettingsPayload(type.name))(tr);
+    dispatch(tr);
   }
   return true;
 };
-export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerOptions) => {
+export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerOptions, pluginInjectionApi) => {
   return (state, intl, providerFactory) => {
     const {
       inlineCard,
@@ -127,18 +141,18 @@ export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerO
         }
         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)
     };
   };
 };
-const unlinkCard = (node, state) => {
+const unlinkCard = (node, state, editorAnalyticsApi) => {
   const displayInfo = displayInfoForCard(node, findCardInfo(state));
   const text = displayInfo.title || displayInfo.url;
   if (text) {
-    return commandWithMetadata(changeSelectedCardToText(text), {
+    return commandWithMetadata(changeSelectedCardToText(text, editorAnalyticsApi), {
       action: ACTION.UNLINK
     });
   }
@@ -150,10 +164,14 @@ const buildAlignmentOptions = (state, intl, cardOptions) => {
 const withToolbarMetadata = command => commandWithMetadata(command, {
   inputMethod: INPUT_METHOD.FLOATING_TB
 });
-const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker) => node => {
+const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker, pluginInjectionApi) => node => {
+  var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
   const {
     url
   } = titleUrlPairFromNode(node);
+  const {
+    actions: editorAnalyticsApi
+  } = (_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 : {};
   let metadata = {};
   if (url && !isSafeUrl(url)) {
     return [];
@@ -168,6 +186,7 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
   }
   const pluginState = pluginKey.getState(state);
   const currentAppearance = appearanceForNodeType(node.type);
+  const 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') {
@@ -175,7 +194,8 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       providerFactory,
       linkPicker,
       node,
-      featureFlags
+      featureFlags,
+      editorAnalyticsApi
     })];
   } else {
     const {
@@ -189,7 +209,7 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       title: intl.formatMessage(linkToolbarMessages.editLink),
       showTitle: true,
       testId: 'link-toolbar-edit-link-button',
-      onClick: editLink
+      onClick: editLink(editorAnalyticsApi)
     }, {
       type: 'separator'
     }, {
@@ -199,10 +219,10 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
-      onClick: visitCardLink
+      onClick: visitCardLink(editorAnalyticsApi)
     }, {
       type: 'separator'
-    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard), {
+    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
       type: 'copy-button',
       items: [{
         state,
@@ -211,18 +231,18 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       }, {
         type: 'separator'
       }]
-    }, ...getSettingsButtonGroup(state, featureFlags, intl), {
+    }, ...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') {
       const alignmentOptions = buildAlignmentOptions(state, intl, cardOptions);
@@ -253,7 +273,8 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
           editorState: state,
           allowEmbeds: allowEmbeds,
           allowBlockCards: allowBlockCards,
-          platform: platform
+          platform: platform,
+          editorAnalyticsApi: editorAnalyticsApi
         })
       }, {
         type: 'separator'
@@ -262,19 +283,19 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
     return toolbarItems;
   }
 };
-const getUnlinkButtonGroup = (state, intl, node, inlineCard) => {
+const 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'
   }] : [];
 };
-const getSettingsButtonGroup = (state, featureFlags, intl) => {
+const getSettingsButtonGroup = (state, featureFlags, intl, editorAnalyticsApi) => {
   const {
     floatingToolbarLinkSettingsButton
   } = featureFlags;
@@ -283,7 +304,7 @@ const getSettingsButtonGroup = (state, featureFlags, intl) => {
     type: 'button',
     icon: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
-    onClick: openLinkSettings
+    onClick: openLinkSettings(editorAnalyticsApi)
   }, {
     type: 'separator'
   }] : [];

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

@@ -4,7 +4,7 @@ import { withOuterListeners } from '@atlaskit/editor-common/ui';
 import { commandWithMetadata } from '@atlaskit/editor-common/card';
 import HyperlinkToolbar from '../../hyperlink/ui/HyperlinkAddToolbar';
 import { showLinkToolbar, 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';
@@ -68,13 +68,18 @@ export class EditLinkToolbar extends React.Component {
     });
   }
 }
-export const editLink = (state, dispatch) => {
+export const editLink = editorAnalyticsApi => (state, dispatch) => {
   let type = 'hyperlink';
   if (state.selection instanceof NodeSelection) {
     type = state.selection.node.type.name;
   }
   if (dispatch) {
-    dispatch(addAnalytics(state, showLinkToolbar(state.tr), buildEditLinkPayload(type)));
+    const {
+      tr
+    } = state;
+    showLinkToolbar(tr);
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
+    dispatch(tr);
     return true;
   }
   return false;
@@ -83,7 +88,8 @@ export const buildEditLinkToolbar = ({
   providerFactory,
   node,
   linkPicker,
-  featureFlags
+  featureFlags,
+  editorAnalyticsApi
 }) => {
   return {
     type: 'custom',
@@ -110,7 +116,7 @@ export const buildEditLinkToolbar = ({
           // 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/es2019/plugins/card/ui/EditorSmartCardEventsNext.js

@@ -114,6 +114,7 @@ export const EventsBinding = ({
       created: ({
         url,
         display,
+        nodeContext,
         ...metadata
       }) => {
         linkCreated({
@@ -121,6 +122,7 @@ export const EventsBinding = ({
           displayCategory: displayCategoryFromDisplay(display)
         }, getSourceEventFromMetadata(metadata), {
           display,
+          nodeContext,
           creationMethod: getMethod(metadata)
         });
       },
@@ -128,6 +130,7 @@ export const EventsBinding = ({
         url,
         display,
         previousDisplay,
+        nodeContext,
         ...metadata
       }) => {
         linkUpdated({
@@ -136,6 +139,7 @@ export const EventsBinding = ({
         }, getSourceEventFromMetadata(metadata), {
           display,
           previousDisplay,
+          nodeContext,
           updateMethod: getMethod(metadata),
           updateType: getUpdateType(metadata)
         });
@@ -143,6 +147,7 @@ export const EventsBinding = ({
       deleted: ({
         url,
         display,
+        nodeContext,
         ...metadata
       }) => {
         linkDeleted({
@@ -150,6 +155,7 @@ export const EventsBinding = ({
           displayCategory: displayCategoryFromDisplay(display)
         }, getSourceEventFromMetadata(metadata), {
           display,
+          nodeContext,
           deleteMethod: getMethod(metadata),
           deleteType: getDeleteType(metadata)
         });

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

@@ -21,7 +21,8 @@ export class LinkToolbarAppearance extends React.Component {
         editorState,
         allowEmbeds,
         allowBlockCards = true,
-        platform
+        platform,
+        editorAnalyticsApi
       } = this.props;
       const preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       if (url) {
@@ -36,7 +37,7 @@ export class LinkToolbarAppearance extends React.Component {
       const 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',
@@ -46,7 +47,7 @@ export class LinkToolbarAppearance extends React.Component {
       const blockCardOption = allowBlockCards && {
         appearance: 'block',
         title: intl.formatMessage(messages.block),
-        onClick: setSelectedCardAppearance('block'),
+        onClick: setSelectedCardAppearance('block', editorAnalyticsApi),
         selected: currentAppearance === 'block',
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
@@ -54,7 +55,7 @@ export class LinkToolbarAppearance extends React.Component {
       };
       const 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,
@@ -62,7 +63,7 @@ export class LinkToolbarAppearance extends React.Component {
       }, {
         appearance: 'inline',
         title: intl.formatMessage(messages.inline),
-        onClick: setSelectedCardAppearance('inline'),
+        onClick: setSelectedCardAppearance('inline', editorAnalyticsApi),
         selected: currentAppearance === 'inline',
         testId: 'inline-appearance'
       }];

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

@@ -2,7 +2,7 @@
 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/es2019/plugins/card/ui/ResizableEmbedCard.js

@@ -10,7 +10,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';
 export default class ResizableEmbedCard extends React.Component {
   constructor(...args) {

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

@@ -1,15 +1,14 @@
 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 const inviteTeamWrapper = css`
   background: ${`var(--ds-background-neutral, ${N20})`};
   border-radius: 50%;
-  min-width: ${gridSize() * 4}px;
-  margin-left: -${gridSize() / 2}px;
+  min-width: ${"var(--ds-space-400, 32px)"};
+  margin-left: calc(-1 * ${"var(--ds-space-050, 4px)"});
 `;
 export const avatarContainer = css`
-  margin-right: ${gridSize()}px;
+  margin-right: ${"var(--ds-space-100, 8px)"};
   display: flex;
   align-items: center;