@atlaskit/editor-core 182.0.2 → 182.1.0

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

@@ -1,13 +1,14 @@
 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 { 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 { appearanceForNodeType } from '../utils';
+import { appearanceForNodeType, selectedCardAppearance } from '../utils';
 import { queueCards, resolveCard } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
@@ -46,7 +47,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, createAnalyticsEvent) => (editorState, dispatch) => {
+export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction) => (editorState, dispatch) => {
   const state = pluginKey.getState(editorState);
   if (!state) {
     return false;
@@ -73,15 +74,22 @@ export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction, createA
       if (state.smartLinkEvents) {
         state.smartLinkEvents.insertSmartLink(domainName, 'inline', state.createAnalyticsEvent);
       }
+
+      /**
+       * TODO:
+       * What if each request has a different source?
+       * Unlikely, but need to define behaviour.
+       * Ignore analytics event? take first? provide 'mixed' as well?
+       */
+      const inputMethod = requests[0].source;
+      const sourceEvent = requests[0].sourceEvent;
       addAnalytics(editorState, tr, {
         action: analyticsAction || ACTION.INSERTED,
         actionSubject: ACTION_SUBJECT.DOCUMENT,
         actionSubjectId: ACTION_SUBJECT_ID.SMART_LINK,
         eventType: EVENT_TYPE.TRACK,
         attributes: {
-          inputMethod: requests[0].source /* TODO: what if each request has a different source?
-                                           unlikely, but need to define behaviour.
-                                            ignore analytics event? take first? provide 'mixed' as well?*/,
+          inputMethod,
           nodeType,
           nodeContext: nodeContext,
           fromCurrentDomain: isFromCurrentDomain(url)
@@ -90,6 +98,12 @@ export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction, createA
           domainName
         }
       });
+      addLinkMetadata(editorState.selection, tr, {
+        action: analyticsAction,
+        inputMethod,
+        cardAction: 'RESOLVE',
+        sourceEvent
+      });
     }
   }
   if (dispatch) {
@@ -97,19 +111,25 @@ export const replaceQueuedUrlWithCard = (url, cardData, analyticsAction, createA
   }
   return true;
 };
-export const handleFallbackWithAnalytics = (url, source) => (editorState, dispatch) => {
-  const state = pluginKey.getState(editorState);
-  if (!state) {
+export const handleFallbackWithAnalytics = request => (state, dispatch) => {
+  const cardState = pluginKey.getState(state);
+  if (!cardState) {
     return false;
   }
-  const tr = editorState.tr;
-  addAnalytics(editorState, tr, getLinkCreationAnalyticsEvent(source, url));
+  const tr = state.tr;
+  if (request.source !== INPUT_METHOD.FLOATING_TB) {
+    addAnalytics(state, tr, getLinkCreationAnalyticsEvent(request.source, request.url));
+  }
+  addLinkMetadata(state.selection, tr, {
+    action: request.analyticsAction,
+    inputMethod: request.source
+  });
   if (dispatch) {
-    dispatch(resolveCard(url)(tr));
+    dispatch(resolveCard(request.url)(tr));
   }
   return true;
 };
-export const queueCardsFromChangedTr = (state, tr, source, normalizeLinkText = true) => {
+export const queueCardsFromChangedTr = (state, tr, source, analyticsAction, normalizeLinkText = true, sourceEvent = undefined) => {
   const {
     schema
   } = state;
@@ -131,11 +151,51 @@ export const queueCardsFromChangedTr = (state, tr, source, normalizeLinkText = t
         pos,
         appearance: 'inline',
         compareLinkText: normalizeLinkText,
-        source
+        source,
+        analyticsAction,
+        sourceEvent
+      });
+    }
+    return false;
+  });
+  addLinkMetadata(state.selection, tr, {
+    action: analyticsAction
+  });
+  return queueCards(requests)(tr);
+};
+export const queueCardFromChangedTr = (state, tr, source, analyticsAction, normalizeLinkText = true, sourceEvent = undefined, previousAppearance) => {
+  const {
+    schema
+  } = state;
+  const {
+    link
+  } = schema.marks;
+  let requests = [];
+  nodesBetweenChanged(tr, (node, pos) => {
+    if (!node.isText) {
+      return true;
+    }
+    const linkMark = node.marks.find(mark => mark.type === link);
+    if (linkMark) {
+      if (!shouldReplaceLink(node, normalizeLinkText)) {
+        return false;
+      }
+      requests.push({
+        url: linkMark.attrs.href,
+        pos,
+        appearance: 'inline',
+        previousAppearance: previousAppearance,
+        compareLinkText: normalizeLinkText,
+        source,
+        analyticsAction,
+        sourceEvent
       });
     }
     return false;
   });
+  addLinkMetadata(state.selection, tr, {
+    action: analyticsAction
+  });
   return queueCards(requests)(tr);
 };
 export const convertHyperlinkToSmartCard = (state, source, appearance, normalizeLinkText = true) => {
@@ -149,18 +209,21 @@ export const convertHyperlinkToSmartCard = (state, source, appearance, normalize
   state.tr.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
     const linkMark = node.marks.find(mark => mark.type === link);
     if (linkMark) {
-      const request = {
+      requests.push({
         url: linkMark.attrs.href,
         pos,
         appearance,
+        previousAppearance: 'url',
         compareLinkText: normalizeLinkText,
         source,
         analyticsAction: ACTION.CHANGED_TYPE,
         shouldReplaceLink: true
-      };
-      requests.push(request);
+      });
     }
   });
+  addLinkMetadata(state.selection, state.tr, {
+    action: ACTION.CHANGED_TYPE
+  });
   return queueCards(requests)(state.tr);
 };
 export const changeSelectedCardToLink = (text, href, sendAnalytics, node, pos) => (state, dispatch) => {
@@ -211,13 +274,14 @@ export const changeSelectedCardToLinkFallback = (text, href, sendAnalytics, node
   }
   return true;
 };
-export const updateCard = href => (state, dispatch) => {
+export const updateCard = (href, sourceEvent) => (state, dispatch) => {
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
   if (!selectedNode) {
     return false;
   }
+  const cardAppearance = selectedCardAppearance(state);
   const tr = cardToLinkWithTransaction(state, href, href);
-  queueCardsFromChangedTr(state, tr, INPUT_METHOD.MANUAL);
+  queueCardFromChangedTr(state, tr, INPUT_METHOD.MANUAL, ACTION.UPDATED, undefined, sourceEvent, cardAppearance);
   if (dispatch) {
     dispatch(tr.scrollIntoView());
   }
@@ -253,7 +317,11 @@ export const changeSelectedCardToText = text => (state, dispatch) => {
   }
   const tr = state.tr.replaceSelectionWith(state.schema.text(text), false);
   if (dispatch) {
-    dispatch(addAnalytics(state, tr.scrollIntoView(), unlinkPayload(ACTION_SUBJECT_ID.CARD_INLINE)));
+    addLinkMetadata(state.selection, tr, {
+      action: ACTION.UNLINK
+    });
+    addAnalytics(state, tr.scrollIntoView(), unlinkPayload(ACTION_SUBJECT_ID.CARD_INLINE));
+    dispatch(tr);
   }
   return true;
 };
@@ -263,8 +331,11 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
   if (!selectedNode) {
     // When there is no selected node, we insert a new one
     // and replace the existing blue link
-    const tr = convertHyperlinkToSmartCard(state, INPUT_METHOD.MANUAL, appearance);
+    const tr = convertHyperlinkToSmartCard(state, INPUT_METHOD.FLOATING_TB, appearance);
     if (dispatch) {
+      addLinkMetadata(state.selection, tr, {
+        action: ACTION.CHANGED_TYPE
+      });
       dispatch(tr.scrollIntoView());
     }
     return false;
@@ -303,6 +374,9 @@ export const setSelectedCardAppearance = appearance => (state, dispatch) => {
       previousType: appearanceForNodeType(selectedNode.type)
     }
   });
+  addLinkMetadata(state.selection, tr, {
+    action: ACTION.CHANGED_TYPE
+  });
   if (dispatch) {
     dispatch(tr.scrollIntoView());
   }

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

@@ -8,8 +8,13 @@ import { pluginKey } from './plugin-key';
 import reducer from './reducers';
 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 => {
+  const {
+    lpAnalyticsEventsNext
+  } = pmPluginFactoryParams.featureFlags;
+  const analyticsQueue = createAnalyticsQueue(!!lpAnalyticsEventsNext);
   const {
     editorAppearance,
     platform,
@@ -28,25 +33,31 @@ export const createPlugin = options => pmPluginFactoryParams => {
           cards: [],
           showLinkingToolbar: false,
           smartLinkEvents: undefined,
+          smartLinkEventsNext: undefined,
           createAnalyticsEvent,
           editorAppearance
         };
       },
-      apply(tr, pluginState) {
+      apply(tr, pluginState, prevEditorState) {
         // Update all the positions of outstanding requests and
         // cards in the plugin state.
         const pluginStateWithUpdatedPos = getPluginStateWithUpdatedPos(pluginState, tr);
+
         // apply any actions
         const meta = tr.getMeta(pluginKey);
+        const events = eventsFromTransaction(tr, prevEditorState);
+        analyticsQueue.push(...events);
         if (meta) {
-          const nextPluginState = reducer(pluginStateWithUpdatedPos, meta);
-          return nextPluginState;
+          const nextState = reducer(pluginStateWithUpdatedPos, meta);
+          if (!pluginState.smartLinkEventsNext && nextState.smartLinkEventsNext) {
+            analyticsQueue.setCallbacks(nextState.smartLinkEventsNext);
+          }
+          return nextState;
         }
         return pluginStateWithUpdatedPos;
       }
     },
     view(view) {
-      const outstandingRequests = {};
       const subscriptionHandler = (name, provider) => handleProvider(name, provider, view);
       const rafCancellationCallbacks = [];
       pmPluginFactoryParams.providerFactory.subscribe('cardProvider', subscriptionHandler);
@@ -71,16 +82,14 @@ 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, outstandingRequests, provider, request, options));
+              const invoke = rafSchedule(() => resolveWithProvider(view, provider, request, options));
               rafCancellationCallbacks.push(invoke.cancel);
               invoke();
             });
           }
+          analyticsQueue.flush();
         },
         destroy() {
-          // Cancel all outstanding requests
-          Object.keys(outstandingRequests).forEach(url => Promise.reject(outstandingRequests[url]));
-
           // Cancel any outstanding raf callbacks.
           rafCancellationCallbacks.forEach(cancellationCallback => cancellationCallback());
           pmPluginFactoryParams.providerFactory.unsubscribe('cardProvider', subscriptionHandler);

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

@@ -34,6 +34,12 @@ const registerEvents = (state, action) => {
     smartLinkEvents: action.smartLinkEvents
   };
 };
+const registerEventsNext = (state, action) => {
+  return {
+    ...state,
+    smartLinkEventsNext: action.smartLinkEvents
+  };
+};
 const setLinkToolbar = (state, action) => {
   return {
     ...state,
@@ -52,6 +58,8 @@ export default ((state, action) => {
       return register(state, action);
     case 'REGISTER_EVENTS':
       return registerEvents(state, action);
+    case 'REGISTER_EVENTS_NEXT':
+      return registerEventsNext(state, action);
     case 'SHOW_LINK_TOOLBAR':
     case 'HIDE_LINK_TOOLBAR':
       return setLinkToolbar(state, action);

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

@@ -5,18 +5,14 @@ import { replaceQueuedUrlWithCard, handleFallbackWithAnalytics } from '../doc';
 // ============================================================================ //
 // Used for all interactions with the EditorCardProvider.
 // ============================================================================ //
-export const resolveWithProvider = (view, outstandingRequests, provider, request, options) => {
+export const resolveWithProvider = (view, provider, request, options) => {
   // 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(resolvedCard => {
-    delete outstandingRequests[request.url];
-    return resolvedCard;
-  }).then(handleResolved(view, request, options), handleRejected(view, request));
-  outstandingRequests[request.url] = handleResolve;
+  const handleResolve = provider.resolve(request.url, request.appearance, shouldForceAppearance).then(handleResolved(view, request, options), handleRejected(view, request));
   return handleResolve;
 };
 const updateCardType = (resolvedCard, options) => {
@@ -34,7 +30,7 @@ const handleResolved = (view, request, options) => resolvedCard => {
   return resolvedCard;
 };
 const handleRejected = (view, request) => () => {
-  handleFallbackWithAnalytics(request.url, request.source)(view.state, view.dispatch);
+  handleFallbackWithAnalytics(request)(view.state, view.dispatch);
 };
 
 // listen for card provider changes

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

@@ -10,6 +10,7 @@ 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';
 import { richMediaClassName } from '@atlaskit/editor-common/styles';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
@@ -20,7 +21,7 @@ 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 = (state, dispatch) => {
+export const removeCard = commandWithMetadata((state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
   }
@@ -39,7 +40,9 @@ export const removeCard = (state, dispatch) => {
     dispatch(addAnalytics(state, removeSelectedNode(state.tr), payload));
   }
   return true;
-};
+}, {
+  action: ACTION.DELETED
+});
 export const visitCardLink = (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -135,13 +138,18 @@ const unlinkCard = (node, state) => {
   const displayInfo = displayInfoForCard(node, findCardInfo(state));
   const text = displayInfo.title || displayInfo.url;
   if (text) {
-    return changeSelectedCardToText(text);
+    return commandWithMetadata(changeSelectedCardToText(text), {
+      action: ACTION.UNLINK
+    });
   }
   return () => false;
 };
-const buildAlignmentOptions = (state, intl) => {
-  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, true, true);
+const buildAlignmentOptions = (state, intl, cardOptions) => {
+  return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
 };
+const withToolbarMetadata = command => commandWithMetadata(command, {
+  inputMethod: INPUT_METHOD.FLOATING_TB
+});
 const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker) => node => {
   const {
     url
@@ -214,10 +222,10 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       onFocus: hoverDecoration(node.type, true),
       onBlur: hoverDecoration(node.type, false),
       title: intl.formatMessage(commonMessages.remove),
-      onClick: removeCard
+      onClick: withToolbarMetadata(removeCard)
     }];
     if (currentAppearance === 'embed') {
-      const alignmentOptions = buildAlignmentOptions(state, intl);
+      const alignmentOptions = buildAlignmentOptions(state, intl, cardOptions);
       if (alignmentOptions.length) {
         alignmentOptions.push({
           type: 'separator'
@@ -261,7 +269,7 @@ const getUnlinkButtonGroup = (state, intl, node, inlineCard) => {
     type: 'button',
     title: intl.formatMessage(linkToolbarMessages.unlink),
     icon: UnlinkIcon,
-    onClick: unlinkCard(node, state)
+    onClick: withToolbarMetadata(unlinkCard(node, state))
   }, {
     type: 'separator'
   }] : [];

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

@@ -1,15 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+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 } from '../../analytics';
+import { addAnalytics, INPUT_METHOD, ACTION } from '../../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';
 import { NodeSelection } from 'prosemirror-state';
 import { buildEditLinkPayload } from '../../../utils/linking-utils';
 import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
-import { withOuterListeners } from '@atlaskit/editor-common/ui';
 import { linkToolbarMessages } from '../../../messages';
 const HyperLinkToolbarWithListeners = withOuterListeners(HyperlinkToolbar);
 export class EditLinkToolbar extends React.Component {
@@ -60,10 +61,10 @@ export class EditLinkToolbar extends React.Component {
       ,
       invokeMethod: INPUT_METHOD.FLOATING_TB,
       featureFlags: featureFlags,
-      onSubmit: (href, title, displayText) => {
+      onSubmit: (href, title, displayText, _, analytic) => {
         this.hideLinkToolbar();
         if (onSubmit) {
-          onSubmit(href, displayText || title);
+          onSubmit(href, displayText || title, analytic);
         }
       }
     });
@@ -104,19 +105,22 @@ export const buildEditLinkToolbar = ({
         text: displayInfo.title || '',
         node: node,
         featureFlags: featureFlags,
-        onSubmit: (newHref, newText) => {
+        onSubmit: (newHref, newText, analytic) => {
           const urlChanged = newHref !== displayInfo.url;
           const titleChanged = newText !== displayInfo.title;
 
           // 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 changeSelectedCardToLink(newText, newHref)(view.state, view.dispatch);
-          } else if (urlChanged) {
+            return commandWithMetadata(changeSelectedCardToLink(newText, newHref), {
+              action: ACTION.UPDATED,
+              sourceEvent: analytic
+            })(view.state, view.dispatch);
+          }
+          if (urlChanged) {
             // If *only* the url is changed in a smart link, reresolve
-            return updateCard(newHref)(view.state, view.dispatch);
+            return updateCard(newHref, analytic)(view.state, view.dispatch);
           }
-          return;
         }
       });
     }

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

@@ -0,0 +1,180 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useSmartLinkLifecycleAnalytics } from '@atlaskit/link-analytics';
+import { INPUT_METHOD, ACTION } from '@atlaskit/editor-common/analytics';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { registerSmartCardEventsNext } from '../pm-plugins/actions';
+/**
+ * If the metadata is for a history event,
+ * returns undo/redo instead of instead of what fn(metadata) would have otherwise
+ * returned
+ */
+const withHistoryMethod = fn => {
+  return metadata => {
+    const {
+      isUndo,
+      isRedo
+    } = metadata;
+    if (isUndo) {
+      return 'undo';
+    }
+    if (isRedo) {
+      return 'redo';
+    }
+    return fn(metadata);
+  };
+};
+const getMethod = withHistoryMethod(({
+  inputMethod,
+  sourceEvent
+}) => {
+  /**
+   * If sourceEvent is present, don't provide a custom method
+   */
+  if (sourceEvent) {
+    return;
+  }
+  switch (inputMethod) {
+    case INPUT_METHOD.CLIPBOARD:
+      return 'editor_paste';
+    case INPUT_METHOD.FLOATING_TB:
+      return 'editor_floatingToolbar';
+    case INPUT_METHOD.AUTO_DETECT:
+      return 'editor_type';
+    default:
+      return 'unknown';
+  }
+});
+const getUpdateType = withHistoryMethod(({
+  action,
+  sourceEvent
+}) => {
+  /**
+   * If sourceEvent is present, don't provide a custom method
+   */
+  if (sourceEvent) {
+    return;
+  }
+  switch (action) {
+    case ACTION.CHANGED_TYPE:
+      return 'display_update';
+    case ACTION.UPDATED:
+      return 'link_update';
+    default:
+      return 'unknown';
+  }
+});
+const getDeleteType = withHistoryMethod(({
+  action
+}) => {
+  if (action === ACTION.UNLINK) {
+    return 'unlink';
+  }
+  return 'delete';
+});
+const getSourceEventFromMetadata = metadata => {
+  return metadata.sourceEvent instanceof UIAnalyticsEvent ? metadata.sourceEvent : null;
+};
+
+/**
+ * Set display category as `link` if not displaying the link as a smart card
+ */
+const displayCategoryFromDisplay = display => {
+  if (display === 'url') {
+    return 'link';
+  }
+};
+
+/**
+ * Binds the @atlaskit/link-analytics callbacks
+ * to the editor card plugin state events callbacks interfaces
+ */
+export const EventsBinding = ({
+  editorView
+}) => {
+  /**
+   * These callbacks internally use window.requestIdleCallback/requestAnimationFrame
+   * to defer any heavy operations involving network
+   *
+   * The callbacks themselves should not be deferred, they should be called syncronously the moment
+   * the events take place.
+   */
+  const {
+    linkCreated,
+    linkUpdated,
+    linkDeleted
+  } = useSmartLinkLifecycleAnalytics();
+  const events = useMemo(() => {
+    return {
+      created: ({
+        url,
+        display,
+        ...metadata
+      }) => {
+        linkCreated({
+          url,
+          displayCategory: displayCategoryFromDisplay(display)
+        }, getSourceEventFromMetadata(metadata), {
+          display,
+          creationMethod: getMethod(metadata)
+        });
+      },
+      updated: ({
+        url,
+        display,
+        previousDisplay,
+        ...metadata
+      }) => {
+        linkUpdated({
+          url,
+          displayCategory: displayCategoryFromDisplay(display)
+        }, getSourceEventFromMetadata(metadata), {
+          display,
+          previousDisplay,
+          updateMethod: getMethod(metadata),
+          updateType: getUpdateType(metadata)
+        });
+      },
+      deleted: ({
+        url,
+        display,
+        ...metadata
+      }) => {
+        linkDeleted({
+          url,
+          displayCategory: displayCategoryFromDisplay(display)
+        }, getSourceEventFromMetadata(metadata), {
+          display,
+          deleteMethod: getMethod(metadata),
+          deleteType: getDeleteType(metadata)
+        });
+      }
+    };
+  }, [linkCreated, linkUpdated, linkDeleted]);
+  useEffect(() => {
+    editorView.dispatch(registerSmartCardEventsNext(events)(editorView.state.tr));
+  }, [events, editorView]);
+  return null;
+};
+export class EditorSmartCardEventsNext extends React.PureComponent {
+  render() {
+    const cardContext = this.context.contextAdapter.card;
+
+    /**
+     * The analytics hook needs to be able to communicate with the card context
+     * If we can't access it, don't mount the event bindings
+     * This effectively entirely disables all tracking behaviour
+     */
+    if (!cardContext) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(cardContext.Provider, {
+      value: cardContext.value
+    }, /*#__PURE__*/React.createElement(EventsBinding, this.props));
+  }
+}
+_defineProperty(EditorSmartCardEventsNext, "contextTypes", {
+  contextAdapter: PropTypes.object
+});