@atlaskit/editor-core 183.0.12 → 183.1.0

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;
 

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

@@ -6,7 +6,7 @@ import { insertDate, closeDatePicker, closeDatePickerWithAnalytics, createDate,
 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 @@ const datePlugin = (_, api) => ({
       keyshortcut: '//',
       icon: () => /*#__PURE__*/React.createElement(IconDate, null),
       action(insert, state) {
+        var _api$dependencies, _api$dependencies$ana, _api$dependencies$ana2, _api$dependencies$ana3;
         const 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 @@ const datePlugin = (_, api) => ({
           attributes: {
             inputMethod: INPUT_METHOD.QUICK_INSERT
           }
-        });
+        })(tr);
         return tr;
       }
     }]

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

@@ -1,6 +1,5 @@
 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';
@@ -115,7 +114,7 @@ export const expandStyles = props => css`
 })(props)};
 
     .${expandClassNames.content} {
-      padding-top: ${gridSize()}px;
+      padding-top: ${"var(--ds-space-100, 8px)"};
     }
   }
 

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

@@ -4,7 +4,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';
 const dropdownExpandContainer = css`
   margin: 0px -4px;

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

@@ -2,6 +2,7 @@
 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';
@@ -23,11 +24,11 @@ const menuContainer = css`
 
   // temporary solution to retain spacing defined by @atlaskit/Item
   & button {
-    min-height: ${gridSize() * 4}px;
+    min-height: ${"var(--ds-space-400, 32px)"};
     padding: 8px 8px 7px;
 
     & > [data-item-elem-before] {
-      margin-right: ${gridSize() / 2}px;
+      margin-right: ${"var(--ds-space-050, 4px)"};
     }
   }
 `;
@@ -35,6 +36,9 @@ const label = css`
   display: inline-block;
   width: 100%;
 `;
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
 export const itemSpacing = gridSize() / 2;
 
 // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check

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

@@ -4,7 +4,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';
 const noop = () => null;
 const isDefaultExport = mod => {

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

@@ -2,18 +2,16 @@
 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';
-const akGridSize = gridSize();
 const toolbarScrollButtons = css`
   display: grid;
   grid-template-columns: 1fr 1fr;
-  grid-gap: ${akGridSize / 2}px;
-  padding: ${akGridSize / 2}px ${akGridSize}px;
+  grid-gap: ${"var(--ds-space-050, 4px)"};
+  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
   border-left: solid ${`var(--ds-border, ${N30})`} 1px;
   flex-shrink: 0;
   align-items: center;