@atlaskit/editor-common 74.12.0 → 74.14.0

package/dist/es2019/__tests_external__/page-objects/EditorSmartLink.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { InProductTestPageObject } from '@atlaskit/in-product-testing';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { BlockCardPageObject, EmbedCardPageObject, InlineCardPageObject } from '@atlaskit/smart-card/in-product';
 export class EditorSmartLinkPageObject extends InProductTestPageObject {
   constructor(cy, editor) {

package/dist/es2019/card/LinkToolbarButtonGroup.js

@@ -0,0 +1,61 @@
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button } from '../ui';
+
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
+const buttonStyle = css`
+  pointer-events: auto;
+`;
+const buttonStyleNoneEvent = css`
+  pointer-events: none;
+`;
+const DisallowedWrapper = ({
+  disabled,
+  ...props
+}) => {
+  return jsx("div", props);
+};
+
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+const defaultWrapperStyle = css`
+  cursor: pointer;
+`;
+const disallowedWrapperStyle = css`
+  cursor: not-allowed;
+`;
+export const LinkToolbarButtonGroup = ({
+  options
+}) => {
+  return jsx(ButtonGroup, null, options.map(({
+    onClick,
+    selected,
+    disabled,
+    testId,
+    tooltipContent,
+    title,
+    icon: Icon
+  }) => jsx(DisallowedWrapper, {
+    css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
+    key: testId,
+    disabled: disabled
+  }, jsx(Button, {
+    css: disabled ? buttonStyleNoneEvent : buttonStyle,
+    title: title,
+    icon: jsx(Icon, {
+      size: "medium",
+      label: title
+    }),
+    selected: selected,
+    onClick: onClick,
+    testId: testId,
+    disabled: disabled,
+    tooltipContent: tooltipContent
+  }))));
+};

package/dist/es2019/card/index.js

@@ -1,2 +1,5 @@
 export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
-export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
+export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
+export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
+export { getButtonGroupOption } from './link-toolbar-button-group-options';
+export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';

package/dist/es2019/card/link-toolbar-button-group-options.js

@@ -0,0 +1,45 @@
+import { cardMessages as messages } from '../messages';
+import { IconCard } from './ui/assets/card';
+import { IconEmbed } from './ui/assets/embed';
+import { IconInline } from './ui/assets/inline';
+import { IconUrl } from './ui/assets/url';
+const appearancePropsMap = {
+  url: {
+    title: messages.urlTitle,
+    icon: IconUrl
+  },
+  inline: {
+    title: messages.inlineTitle,
+    icon: IconInline
+  },
+  block: {
+    title: messages.blockTitle,
+    icon: IconCard
+  },
+  embed: {
+    title: messages.embedTitle,
+    icon: IconEmbed
+  }
+};
+export const getButtonGroupOption = (intl, dispatchCommand, {
+  disabled,
+  onClick,
+  selected,
+  appearance,
+  testId,
+  tooltip
+}) => {
+  const {
+    title,
+    icon
+  } = appearancePropsMap[appearance !== null && appearance !== void 0 ? appearance : 'url'];
+  return {
+    title: intl.formatMessage(title),
+    icon,
+    onClick: () => dispatchCommand(onClick),
+    disabled: Boolean(disabled),
+    tooltipContent: tooltip || null,
+    testId,
+    selected
+  };
+};

package/dist/es2019/card/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/card/ui/assets/card.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+const IconCardGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 9c-1.10457 0-2 .89543-2 2v10c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V11c0-1.10457-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Zm-4 3c-.55228 0-1 .4477-1 1s.44772 1 1 1h14c.5523 0 1-.4477 1-1s-.4477-1-1-1H9Zm-1 4c0-.5523.44772-1 1-1h6c.5523 0 1 .4477 1 1s-.4477 1-1 1H9c-.55228 0-1-.4477-1-1Z",
+    fill: "currentColor"
+  }));
+};
+export const IconCard = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconCardGlyph
+  }, props));
+};

package/dist/es2019/card/ui/assets/embed.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+const IconEmbedGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 6c-1.10457 0-2 .89543-2 2v16c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2V8c0-1.10457-.8954-2-2-2H8Zm1 2c-.55228 0-1 .44772-1 1v2c0 .5523.44772 1 1 1h2c.5523 0 1-.4477 1-1V9c0-.55228-.4477-1-1-1H9Zm4.5 1.5c-.2761 0-.5.22386-.5.5 0 .2761.2239.5.5.5h10c.2761 0 .5-.2239.5-.5 0-.27614-.2239-.5-.5-.5h-10ZM9 14c-.55228 0-1 .4477-1 1v8c0 .5523.44772 1 1 1h14c.5523 0 1-.4477 1-1v-8c0-.5523-.4477-1-1-1H9Zm6 2.5c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5Zm0 5.5-1-1-2 2h8v-1.8L18 19l-3 3Z",
+    fill: "currentColor"
+  }));
+};
+export const IconEmbed = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconEmbedGlyph
+  }, props));
+};

package/dist/es2019/card/ui/assets/inline.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+const IconInlineGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 12c-1.10457 0-2 .8954-2 2v4c0 1.1046.89543 2 2 2h16c1.1046 0 2-.8954 2-2v-4c0-1.1046-.8954-2-2-2H8Zm0 3c0-.5523.44772-1 1-1h2c.5523 0 1 .4477 1 1v2c0 .5523-.4477 1-1 1H9c-.55228 0-1-.4477-1-1v-2Zm5 1c0-.2761.2239-.5.5-.5h10c.2761 0 .5.2239.5.5s-.2239.5-.5.5h-10c-.2761 0-.5-.2239-.5-.5Z",
+    fill: "currentColor"
+  }));
+};
+export const IconInline = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconInlineGlyph
+  }, props));
+};

package/dist/es2019/card/ui/assets/url.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Icon from '@atlaskit/icon';
+const IconUrlGlyph = props => {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "32",
+    height: "32",
+    viewBox: "0 0 32 32",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("rect", {
+    x: "6",
+    y: "15",
+    width: "20",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  }));
+};
+export const IconUrl = props => {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    glyph: IconUrlGlyph
+  }, props));
+};

package/dist/es2019/messages/card.js

@@ -0,0 +1,83 @@
+import { defineMessages } from 'react-intl-next';
+export const messages = defineMessages({
+  url: {
+    id: 'fabric.editor.url',
+    defaultMessage: 'Display URL',
+    description: 'Convert the card to become a regular text-based hyperlink.'
+  },
+  block: {
+    id: 'fabric.editor.displayBlock',
+    defaultMessage: 'Display card',
+    description: 'Display link as a card with a rich preview similar to in a Facebook feed with page title, description, and potentially an image.'
+  },
+  inline: {
+    id: 'fabric.editor.displayInline',
+    defaultMessage: 'Display inline',
+    description: 'Display link with the title only.'
+  },
+  embed: {
+    id: 'fabric.editor.displayEmbed',
+    defaultMessage: 'Display embed',
+    description: 'Display link as an embedded object'
+  },
+  link: {
+    id: 'fabric.editor.displayLink',
+    defaultMessage: 'Display as text',
+    description: 'Convert the card to become a regular text-based hyperlink.'
+  },
+  card: {
+    id: 'fabric.editor.cardFloatingControls',
+    defaultMessage: 'Card options',
+    description: 'Options to change card type'
+  },
+  blockCardUnavailable: {
+    id: 'fabric.editor.blockCardUnavailable',
+    defaultMessage: 'The inline link is inside {node} and cannot have its view changed',
+    description: 'Warning message to show the user that this node cannot change its view'
+  },
+  displayOptionUnavailableInParentNode: {
+    id: 'fabric.editor.displayOptionUnavailableInParentNode',
+    defaultMessage: "This display option isn't available inside {node}",
+    description: 'Warning message to show the user that this node option is not available inside a parent node type'
+  },
+  urlTitle: {
+    id: 'fabric.editor.urlTitle',
+    defaultMessage: 'URL',
+    description: 'Title for option to convert the card to become a regular text-based hyperlink.'
+  },
+  blockTitle: {
+    id: 'fabric.editor.blockTitle',
+    defaultMessage: 'Card',
+    description: 'Title for option to display link in the card view.'
+  },
+  inlineTitle: {
+    id: 'fabric.editor.inlineTitle',
+    defaultMessage: 'Inline',
+    description: 'Title for option to display link in the inline view.'
+  },
+  embedTitle: {
+    id: 'fabric.editor.embedTitle',
+    defaultMessage: 'Embed',
+    description: 'Title for option to display link as an embedded object.'
+  },
+  urlDescription: {
+    id: 'fabric.editor.urlDescription',
+    defaultMessage: 'Display link as URL',
+    description: 'Description for option to convert the card to become a regular text-based hyperlink.'
+  },
+  blockDescription: {
+    id: 'fabric.editor.blockDescription',
+    defaultMessage: 'Display more information about a link, including a summary and actions',
+    description: 'Description for option to display link in the card view.'
+  },
+  inlineDescription: {
+    id: 'fabric.editor.inlineDescription',
+    defaultMessage: 'Display link as inline text',
+    description: 'Description for option to display link in the inline view.'
+  },
+  embedDescription: {
+    id: 'fabric.editor.ecombedDescription',
+    defaultMessage: 'Display an interactive preview of a link',
+    description: 'Description for option to display link as an embedded object.'
+  }
+});

package/dist/es2019/messages/index.js

@@ -6,6 +6,7 @@ export { unsupportedContentMessages } from './unsupportedContent';
 export { codeBlockButtonMessages } from './codeBlockButton';
 export { toolbarInsertBlockMessages } from './insert-block';
 export { toolbarMessages as mediaAndEmbedToolbarMessages } from './media-and-embed-toolbar';
+export { messages as cardMessages } from './card';
 export default defineMessages({
   layoutFixedWidth: {
     id: 'fabric.editor.layoutFixedWidth',

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.12.0";
+const packageVersion = "74.14.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -70,7 +70,6 @@ function createNodeView({
   trackingEnabled && stopMeasureReactNodeViewRendered({
     nodeTypeName: currentNode.type.name,
     dispatchAnalyticsEvent,
-    editorState: nodeViewParams.view.state,
     samplingRate,
     slowThreshold
   });

package/dist/es2019/react-node-view/index.js

@@ -73,7 +73,6 @@ export default class ReactNodeView {
     trackingEnabled && stopMeasureReactNodeViewRendered({
       nodeTypeName: this.node.type.name,
       dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
-      editorState: this.view.state,
       samplingRate,
       slowThreshold
     });

package/dist/es2019/styles/index.js

@@ -23,4 +23,6 @@ export { CodeBlockSharedCssClassName, codeBlockSharedStyles, codeBlockInListSafa
 export { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from './shared/layout';
 export { EXTENSION_PADDING, BODIED_EXT_PADDING } from './shared/extension';
 export { resizerStyles } from './shared/resizer';
-export { gridStyles, GRID_GUTTER } from './shared/grid';
+export { gridStyles, GRID_GUTTER } from './shared/grid';
+export { smartCardStyles, FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, DATASOURCE_INNER_CONTAINER_CLASSNAME } from './shared/smartCard';
+export { embedCardStyles, embedSpacingStyles, editIconStyles } from './shared/embedCard';

package/dist/es2019/styles/shared/embedCard.js

@@ -0,0 +1,27 @@
+import { css } from '@emotion/react';
+export const embedCardStyles = css`
+  .ProseMirror {
+    .embedCardView-content-wrap[layout^='wrap-'] {
+      max-width: 100%;
+    }
+
+    .embedCardView-content-wrap[layout='wrap-left'] {
+      float: left;
+    }
+
+    .embedCardView-content-wrap[layout='wrap-right'] {
+      float: right;
+    }
+
+    .embedCardView-content-wrap[layout='wrap-right']
+      + .embedCardView-content-wrap[layout='wrap-left'] {
+      clear: both;
+    }
+  }
+`;
+export const embedSpacingStyles = css`
+  margin: 0 10px;
+`;
+export const editIconStyles = css`
+  width: 20px;
+`;

package/dist/es2019/styles/shared/smartCard.js

@@ -0,0 +1,131 @@
+import { css } from '@emotion/react';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorRuleBorderRadius, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { N0, N20, N40 } from '@atlaskit/theme/colors';
+import { SmartCardSharedCssClassName } from './smart-card';
+export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
+export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
+export const smartCardStyles = css`
+  .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
+    max-width: calc(100% - 20px);
+    vertical-align: top;
+    word-break: break-all;
+
+    .card {
+      padding-left: 2px;
+      padding-right: 2px;
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+      margin-bottom: -0.5em;
+
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a:focus {
+        ${getSelectionStyles([SelectionStyle.BoxShadow])}
+      }
+    }
+
+    &.${akEditorSelectedNodeClassName}
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
+      > a {
+      ${getSelectionStyles([SelectionStyle.BoxShadow])}
+    }
+    .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
+      /* EDM-1717: box-shadow Safari fix start */
+      z-index: 1;
+      position: relative;
+      /* EDM-1717: box-shadow Safari fix end */
+    }
+
+    &.danger {
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
+        box-shadow: 0 0 0 1px
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+        /* EDM-1717: box-shadow Safari fix start */
+        z-index: 2;
+        /* EDM-1717: box-shadow Safari fix end */
+      }
+    }
+  }
+
+  .${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
+    .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+      cursor: pointer;
+      &:hover {
+        background-color: ${`var(--ds-background-neutral-subtle-hovered, ${N20})`};
+      }
+    }
+
+    &.${akEditorSelectedNodeClassName}
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
+      > div {
+      ${getSelectionStyles([SelectionStyle.BoxShadow])}
+    }
+
+    &.danger {
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+        box-shadow: 0 0 0 1px
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+      }
+    }
+  }
+
+  .${SmartCardSharedCssClassName.DATASOURCE_CONTAINER}.${SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER} {
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+      cursor: pointer;
+      background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
+      border-radius: ${`var(--ds-border-radius-100, ${akEditorRuleBorderRadius})`};
+      border: 1px solid ${`var(--ds-border, ${N40})`};
+    }
+
+    &.${akEditorSelectedNodeClassName} {
+      .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+        ${getSelectionStyles([SelectionStyle.BoxShadow])}
+      }
+    }
+
+    &.danger {
+      .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+        box-shadow: 0 0 0 1px
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      }
+    }
+  }
+
+  .${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {
+    .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div {
+      cursor: pointer;
+      &::after {
+        transition: box-shadow 0s;
+      }
+    }
+    &.${akEditorSelectedNodeClassName}
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
+      > div {
+      ${getSelectionStyles([SelectionStyle.BoxShadow])}
+    }
+
+    &.${akEditorSelectedNodeClassName}
+      .${SmartCardSharedCssClassName.LOADER_WRAPPER}
+      > div::after {
+      ${getSelectionStyles([SelectionStyle.BoxShadow])}
+    }
+
+    &.danger {
+      .media-card-frame::after {
+        box-shadow: 0 0 0 1px
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`} !important;
+        background: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`} !important;
+      }
+      .richMedia-resize-handle-right::after,
+      .richMedia-resize-handle-left::after {
+        background: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      }
+    }
+  }
+
+  .${FLOATING_TOOLBAR_LINKPICKER_CLASSNAME} {
+    padding: 0;
+  }
+`;

package/dist/es2019/ui/DropList/index.js

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.12.0";
+const packageVersion = "74.14.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/utils/get-performance-options.js

@@ -1,5 +1,4 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
-import { getParticipantsCount } from './collab';
 import { startMeasure, stopMeasure } from './performance/measure';
 
 // This was existing logic when converting from ReactNodeView
@@ -36,7 +35,6 @@ export function startMeasureReactNodeViewRendered({
 export function stopMeasureReactNodeViewRendered({
   nodeTypeName,
   dispatchAnalyticsEvent,
-  editorState,
   samplingRate,
   slowThreshold
 }) {
@@ -48,8 +46,7 @@ export function stopMeasureReactNodeViewRendered({
         eventType: EVENT_TYPE.OPERATIONAL,
         attributes: {
           node: nodeTypeName,
-          duration,
-          participants: getParticipantsCount(editorState)
+          duration
         }
       });
     }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.12.0",
+	"version": "74.14.0",
 	"sideEffects": false
 }

package/dist/es2019/with-plugin-state/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { createDispatch } from '../event-dispatcher';
 import { analyticsEventKey, startMeasure, stopMeasure } from '../utils';
-import { getParticipantsCount } from '../utils/collab';
 const DEFAULT_SAMPLING_RATE = 100;
 const DEFAULT_SLOW_THRESHOLD = 4;
 
@@ -92,15 +91,13 @@ class WithPluginState extends React.Component {
           performanceOptions.trackingEnabled && stopMeasure(measure, duration => {
             // Each WithPluginState component will fire analytics event no more than once every `samplingLimit` times
             if (++this.callsCount % performanceOptions.samplingRate === 0 && duration > performanceOptions.slowThreshold) {
-              const editorView = this.getEditorView();
               this.dispatchAnalyticsEvent({
                 action: ACTION.WITH_PLUGIN_STATE_CALLED,
                 actionSubject: ACTION_SUBJECT.EDITOR,
                 eventType: EVENT_TYPE.OPERATIONAL,
                 attributes: {
                   plugin: pluginName,
-                  duration,
-                  participants: getParticipantsCount(editorView && editorView.state)
+                  duration
                 }
               });
             }

package/dist/esm/__tests_external__/page-objects/EditorSmartLink.js

@@ -8,6 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { InProductTestPageObject } from '@atlaskit/in-product-testing';
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { BlockCardPageObject, EmbedCardPageObject, InlineCardPageObject } from '@atlaskit/smart-card/in-product';
 export var EditorSmartLinkPageObject = /*#__PURE__*/function (_InProductTestPageObj) {
   _inherits(EditorSmartLinkPageObject, _InProductTestPageObj);

package/dist/esm/card/LinkToolbarButtonGroup.js

@@ -0,0 +1,56 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _excluded = ["disabled"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button } from '../ui';
+
+/**
+ * Applying `pointer-events: none;` when disabled allows the Tooltip to be displayed
+ */
+var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  pointer-events: auto;\n"])));
+var buttonStyleNoneEvent = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n"])));
+var DisallowedWrapper = function DisallowedWrapper(_ref) {
+  var disabled = _ref.disabled,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return jsx("div", props);
+};
+
+/**
+ * The button requires `pointer-events: none;` in order to fix the tooltip, hence
+ * leaving us without a disabled cursor, the following fixes this:
+ */
+var defaultWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  cursor: pointer;\n"])));
+var disallowedWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n"])));
+export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
+  var options = _ref2.options;
+  return jsx(ButtonGroup, null, options.map(function (_ref3) {
+    var onClick = _ref3.onClick,
+      selected = _ref3.selected,
+      disabled = _ref3.disabled,
+      testId = _ref3.testId,
+      tooltipContent = _ref3.tooltipContent,
+      title = _ref3.title,
+      Icon = _ref3.icon;
+    return jsx(DisallowedWrapper, {
+      css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
+      key: testId,
+      disabled: disabled
+    }, jsx(Button, {
+      css: disabled ? buttonStyleNoneEvent : buttonStyle,
+      title: title,
+      icon: jsx(Icon, {
+        size: "medium",
+        label: title
+      }),
+      selected: selected,
+      onClick: onClick,
+      testId: testId,
+      disabled: disabled,
+      tooltipContent: tooltipContent
+    }));
+  }));
+};

package/dist/esm/card/index.js

@@ -1,2 +1,5 @@
 export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
-export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
+export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';
+export { LinkToolbarButtonGroup } from './LinkToolbarButtonGroup';
+export { getButtonGroupOption } from './link-toolbar-button-group-options';
+export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';