@atlaskit/editor-plugin-card 14.0.0 → 14.0.2

package/dist/es2019/ui/toolbar.js

@@ -18,6 +18,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import CogIcon from '@atlaskit/icon/core/settings';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -74,6 +75,27 @@ export const visitCardLinkAnalytics = (editorAnalyticsApi, inputMethod) => (stat
   }
   return true;
 };
+const fireOpenLinkToolbarAnalytics = (editorAnalyticsApi, inputMethod, resolvedAttributes = {}) => (state, dispatch) => {
+  const linkAnalyticsRecorded = visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(state, dispatch);
+  if (!linkAnalyticsRecorded) {
+    return false;
+  }
+  if (expValEquals('cc_integrations_editor_open_link_click_analytics', 'isEnabled', true)) {
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.fireAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECTID.OPEN_LINK,
+      attributes: {
+        displayCategory: resolvedAttributes.displayCategory,
+        extensionKey: resolvedAttributes.extensionKey,
+        status: resolvedAttributes.status,
+        statusDetails: resolvedAttributes.statusDetails
+      },
+      eventType: EVENT_TYPE.UI
+    });
+  }
+  return true;
+};
 export const openLinkSettings = editorAnalyticsApi => (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -253,7 +275,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
   } else if (shouldRenderDatasourceToolbar) {
     return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
   } else {
-    var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
+    var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3, _pluginState$resolved;
     const {
       inlineCard
     } = state.schema.nodes;
@@ -331,7 +353,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [];
-    const toolbarItems = areAllNewToolbarFlagsDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, {
+    const resolvedToolbarAttributes = url ? (_pluginState$resolved = pluginState === null || pluginState === void 0 ? void 0 : pluginState.resolvedToolbarAttributesByUrl[url]) !== null && _pluginState$resolved !== void 0 ? _pluginState$resolved : {} : {};
+    const openLinkToolbarItem = {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -339,10 +362,11 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
-      onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
+      onClick: fireOpenLinkToolbarAnalytics(editorAnalyticsApi, openLinkInputMethod, resolvedToolbarAttributes),
       href: url,
       target: '_blank'
-    }, {
+    };
+    const toolbarItems = areAllNewToolbarFlagsDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, openLinkToolbarItem, {
       type: 'separator'
     }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled), {
       type: 'copy-button',
@@ -371,18 +395,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     }] : [...editButtonItems, ...[...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled), {
       type: 'separator',
       fullHeight: true
-    }], ...openPreviewPanelItems, {
-      id: 'editor.link.openLink',
-      type: 'button',
-      icon: LinkExternalIcon,
-      iconFallback: LinkExternalIcon,
-      metadata: metadata,
-      className: 'hyperlink-open-link',
-      title: intl.formatMessage(linkMessages.openLink),
-      onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
-      href: url,
-      target: '_blank'
-    }, ...(commentItems.length > 1 ? [{
+    }], ...openPreviewPanelItems, openLinkToolbarItem, ...(commentItems.length > 1 ? [{
       type: 'separator',
       fullHeight: true
     }, commentItems[0]] : commentItems)];
@@ -519,8 +532,9 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
   };
 };
 const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) => {
-  var _node$attrs2;
+  var _node$attrs2, _node$attrs3;
   const toolbarItems = [];
+  toolbarItems.push(...getToolbarViewedItem(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'));
   const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const canShowAppearanceSwitch = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
@@ -594,6 +608,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     }
   }
   const openLinkInputMethod = INPUT_METHOD.FLOATING_TB;
+  const pluginState = pluginKey.getState(state);
   toolbarItems.push({
     type: 'custom',
     fallback: [],
@@ -610,7 +625,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
     })
   });
-  if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
+  if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
+    var _pluginState$resolved2;
     toolbarItems.push({
       id: 'editor.link.openLink',
       type: 'button',
@@ -619,7 +635,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
-      onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
+      onClick: fireOpenLinkToolbarAnalytics(editorAnalyticsApi, openLinkInputMethod, (_pluginState$resolved2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.resolvedToolbarAttributesByUrl[node.attrs.url]) !== null && _pluginState$resolved2 !== void 0 ? _pluginState$resolved2 : {}),
       href: node.attrs.url,
       target: '_blank'
     });

package/dist/esm/pm-plugins/actions.js

@@ -67,6 +67,15 @@ export var setDatasourceTableRef = function setDatasourceTableRef(datasourceTabl
     });
   };
 };
+export var setResolvedToolbarAttributes = function setResolvedToolbarAttributes(url, attributes) {
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'SET_RESOLVED_TOOLBAR_ATTRIBUTES',
+      url: url,
+      attributes: attributes
+    });
+  };
+};
 export var setCardLayout = function setCardLayout(layout) {
   return function (tr) {
     return cardAction(tr, {

package/dist/esm/pm-plugins/main.js

@@ -75,6 +75,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             provider: null,
             cards: [],
             datasourceStash: {},
+            resolvedToolbarAttributesByUrl: {},
             showLinkingToolbar: false,
             smartLinkEvents: undefined,
             editorAppearance: editorAppearance,

package/dist/esm/pm-plugins/reducers.js

@@ -50,6 +50,11 @@ var setDatasourceTableRef = function setDatasourceTableRef(state, action) {
     datasourceTableRef: action.datasourceTableRef
   });
 };
+var setResolvedToolbarAttributes = function setResolvedToolbarAttributes(state, action) {
+  return _objectSpread(_objectSpread({}, state), {}, {
+    resolvedToolbarAttributesByUrl: _objectSpread(_objectSpread({}, state.resolvedToolbarAttributesByUrl), {}, _defineProperty({}, action.url, action.attributes))
+  });
+};
 var setCardLayoutDatasourceTableRef = function setCardLayoutDatasourceTableRef(state, action) {
   return _objectSpread(_objectSpread({}, state), {}, {
     datasourceTableRef: action.datasourceTableRef,
@@ -124,6 +129,8 @@ export default (function (state, action) {
       return registerEvents(state, action);
     case 'SET_DATASOURCE_TABLE_REF':
       return setDatasourceTableRef(state, action);
+    case 'SET_RESOLVED_TOOLBAR_ATTRIBUTES':
+      return setResolvedToolbarAttributes(state, action);
     case 'SET_CARD_LAYOUT':
       return setCardLayout(state, action);
     case 'SET_CARD_LAYOUT_AND_DATASOURCE_TABLE_REF':

package/dist/esm/pm-plugins/utils.js

@@ -61,9 +61,7 @@ export var isEmbedSupportedAtPosition = function isEmbedSupportedAtPosition(curr
 export var isBlockSupportedAtPosition = function isBlockSupportedAtPosition(currentNodePosition, editorState, currentAppearance) {
   return isAppearanceSupportedInParent(currentNodePosition, editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
 };
-export var getResolvedAttributesFromStore = function getResolvedAttributesFromStore(url, display, store
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-) {
+export var getResolvedAttributesFromStore = function getResolvedAttributesFromStore(url, display, store) {
   if (!store) {
     return {};
   }

package/dist/esm/ui/ResizableEmbedCard.js

@@ -18,8 +18,10 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
 import { jsx } from '@emotion/react';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -97,6 +99,19 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         resizedPctWidth: resizedPctWidth
       });
     });
+    _defineProperty(_this, "handleResizeStart", function () {
+      var _this$props3 = _this.props,
+        view = _this$props3.view,
+        getPos = _this$props3.getPos;
+      if (typeof getPos === 'function') {
+        var pos = getPos();
+        if (typeof pos === 'number') {
+          var tr = view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos));
+          tr.setMeta('scrollIntoView', false);
+          view.dispatch(tr);
+        }
+      }
+    });
     _defineProperty(_this, "highlights", function (newWidth, snapPoints) {
       var snapWidth = snapTo(newWidth, snapPoints);
       var _this$props$view$stat = _this.props.view.state.schema.nodes,
@@ -113,10 +128,10 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       if (snapWidth > _this.wideLayoutWidth) {
         return ['full-width'];
       }
-      var _this$props3 = _this.props,
-        layout = _this$props3.layout,
-        lineLength = _this$props3.lineLength,
-        gridSize = _this$props3.gridSize;
+      var _this$props4 = _this.props,
+        layout = _this$props4.layout,
+        lineLength = _this$props4.lineLength,
+        gridSize = _this$props4.gridSize;
       var columns = calcColumnsFromPx(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
@@ -227,9 +242,9 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
     key: "calcSnapPoints",
     value: function calcSnapPoints() {
       var offsetLeft = this.state.offsetLeft;
-      var _this$props4 = this.props,
-        containerWidth = _this$props4.containerWidth,
-        lineLength = _this$props4.lineLength;
+      var _this$props5 = this.props,
+        containerWidth = _this$props5.containerWidth,
+        lineLength = _this$props5.lineLength;
       var snapTargets = [];
       for (var i = 0; i < this.gridWidth; i++) {
         snapTargets.push(calcPxFromColumns(i, lineLength, this.gridWidth) - offsetLeft);
@@ -279,9 +294,9 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
      * and hence we use `style` prop.
      */
     function getHeightDefiningComponent() {
-      var _this$props5 = this.props,
-        height = _this$props5.height,
-        aspectRatio = _this$props5.aspectRatio;
+      var _this$props6 = this.props,
+        height = _this$props6.height,
+        aspectRatio = _this$props6.aspectRatio;
       var heightDefiningStyles;
       if (height) {
         heightDefiningStyles = {
@@ -325,13 +340,13 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props6 = this.props,
-        layout = _this$props6.layout,
-        pctWidth = _this$props6.pctWidth,
-        containerWidth = _this$props6.containerWidth,
-        fullWidthMode = _this$props6.fullWidthMode,
-        isResizeDisabled = _this$props6.isResizeDisabled,
-        children = _this$props6.children;
+      var _this$props7 = this.props,
+        layout = _this$props7.layout,
+        pctWidth = _this$props7.pctWidth,
+        containerWidth = _this$props7.containerWidth,
+        fullWidthMode = _this$props7.fullWidthMode,
+        isResizeDisabled = _this$props7.isResizeDisabled,
+        children = _this$props7.children;
       var resizerProps = {
         width: this.calcPxWidth(),
         innerPadding: akEditorMediaResizeHandlerPadding
@@ -386,6 +401,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
         nodeType: "embed",
+        onResizeStart: editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_9') ? this.handleResizeStart : undefined,
         handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/esm/ui/ToolbarViewedEvent.js

@@ -4,29 +4,46 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useEffect } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { setResolvedToolbarAttributes } from '../pm-plugins/actions';
+import { getPluginState } from '../pm-plugins/util/state';
 import { getResolvedAttributesFromStore } from '../pm-plugins/utils';
 import { EditorAnalyticsContext } from './EditorAnalyticsContext';
+var areResolvedAttributesEqual = function areResolvedAttributesEqual(current, next) {
+  return (current === null || current === void 0 ? void 0 : current.displayCategory) === (next === null || next === void 0 ? void 0 : next.displayCategory) && (current === null || current === void 0 ? void 0 : current.extensionKey) === (next === null || next === void 0 ? void 0 : next.extensionKey) && (current === null || current === void 0 ? void 0 : current.status) === (next === null || next === void 0 ? void 0 : next.status) && (current === null || current === void 0 ? void 0 : current.statusDetails) === (next === null || next === void 0 ? void 0 : next.statusDetails);
+};
+
 /**
  * Handles firing the toolbar viewed event
  */
 var ToolbarViewedEventBase = function ToolbarViewedEventBase(_ref) {
   var url = _ref.url,
     display = _ref.display,
-    cardContext = _ref.cardContext;
+    cardContext = _ref.cardContext,
+    editorView = _ref.editorView;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var store = cardContext === null || cardContext === void 0 ? void 0 : cardContext.store;
   useEffect(function () {
+    var _getPluginState;
+    var resolvedAttributes = getResolvedAttributesFromStore(url, display, store);
     createAnalyticsEvent({
       action: 'viewed',
       actionSubject: 'inlineDialog',
       actionSubjectId: 'editLinkToolbar',
       eventType: 'ui',
-      attributes: _objectSpread(_objectSpread({}, getResolvedAttributesFromStore(url, display, store)), {}, {
+      attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
         display: display
       })
     }).fire('media');
-  }, [createAnalyticsEvent, display, url, store]);
+    if (!editorView) {
+      return;
+    }
+    var currentResolvedAttributes = (_getPluginState = getPluginState(editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.resolvedToolbarAttributesByUrl[url];
+    if (areResolvedAttributesEqual(currentResolvedAttributes, resolvedAttributes)) {
+      return;
+    }
+    editorView.dispatch(setResolvedToolbarAttributes(url, resolvedAttributes)(editorView.state.tr));
+  }, [createAnalyticsEvent, display, editorView, url, store]);
   return null;
 };
 
@@ -43,6 +60,7 @@ export var ToolbarViewedEvent = function ToolbarViewedEvent(_ref2) {
   }, url ? /*#__PURE__*/React.createElement(ToolbarViewedEventBase, {
     url: url,
     display: display,
-    cardContext: cardContext
+    cardContext: cardContext,
+    editorView: editorView
   }) : null);
 };

package/dist/esm/ui/toolbar.js

@@ -22,6 +22,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import CogIcon from '@atlaskit/icon/core/settings';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -76,6 +77,30 @@ export var visitCardLinkAnalytics = function visitCardLinkAnalytics(editorAnalyt
     return true;
   };
 };
+var fireOpenLinkToolbarAnalytics = function fireOpenLinkToolbarAnalytics(editorAnalyticsApi, inputMethod) {
+  var resolvedAttributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  return function (state, dispatch) {
+    var linkAnalyticsRecorded = visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(state, dispatch);
+    if (!linkAnalyticsRecorded) {
+      return false;
+    }
+    if (expValEquals('cc_integrations_editor_open_link_click_analytics', 'isEnabled', true)) {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.fireAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECTID.OPEN_LINK,
+        attributes: {
+          displayCategory: resolvedAttributes.displayCategory,
+          extensionKey: resolvedAttributes.extensionKey,
+          status: resolvedAttributes.status,
+          statusDetails: resolvedAttributes.statusDetails
+        },
+        eventType: EVENT_TYPE.UI
+      });
+    }
+    return true;
+  };
+};
 export var openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
   return function (state, dispatch) {
     if (!(state.selection instanceof NodeSelection)) {
@@ -252,7 +277,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     } else if (shouldRenderDatasourceToolbar) {
       return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
     } else {
-      var _pluginInjectionApi$c;
+      var _pluginInjectionApi$c, _pluginState$resolved;
       var inlineCard = state.schema.nodes.inlineCard;
       var editItems = cardOptions.allowDatasource ? [{
         type: 'custom',
@@ -334,7 +359,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           });
         }
       }] : [];
-      var toolbarItems = areAllNewToolbarFlagsDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [{
+      var resolvedToolbarAttributes = url ? (_pluginState$resolved = pluginState === null || pluginState === void 0 ? void 0 : pluginState.resolvedToolbarAttributesByUrl[url]) !== null && _pluginState$resolved !== void 0 ? _pluginState$resolved : {} : {};
+      var openLinkToolbarItem = {
         id: 'editor.link.openLink',
         type: 'button',
         icon: LinkExternalIcon,
@@ -342,10 +368,11 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(linkMessages.openLink),
-        onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
+        onClick: fireOpenLinkToolbarAnalytics(editorAnalyticsApi, openLinkInputMethod, resolvedToolbarAttributes),
         href: url,
         target: '_blank'
-      }, {
+      };
+      var toolbarItems = areAllNewToolbarFlagsDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [openLinkToolbarItem, {
         type: 'separator'
       }], _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
         type: 'copy-button',
@@ -374,18 +401,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       }]) : [].concat(editButtonItems, _toConsumableArray([].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
         type: 'separator',
         fullHeight: true
-      }])), openPreviewPanelItems, [{
-        id: 'editor.link.openLink',
-        type: 'button',
-        icon: LinkExternalIcon,
-        iconFallback: LinkExternalIcon,
-        metadata: metadata,
-        className: 'hyperlink-open-link',
-        title: intl.formatMessage(linkMessages.openLink),
-        onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
-        href: url,
-        target: '_blank'
-      }], _toConsumableArray(commentItems.length > 1 ? [{
+      }])), openPreviewPanelItems, [openLinkToolbarItem], _toConsumableArray(commentItems.length > 1 ? [{
         type: 'separator',
         fullHeight: true
       }, commentItems[0]] : commentItems));
@@ -525,8 +541,9 @@ export var getSettingsButton = function getSettingsButton(intl, editorAnalyticsA
   };
 };
 var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
-  var _node$attrs2;
+  var _node$attrs2, _node$attrs3;
   var toolbarItems = [];
+  toolbarItems.push.apply(toolbarItems, _toConsumableArray(getToolbarViewedItem(node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url')));
   var areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
@@ -598,6 +615,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     }
   }
   var openLinkInputMethod = INPUT_METHOD.FLOATING_TB;
+  var pluginState = pluginKey.getState(state);
   toolbarItems.push({
     type: 'custom',
     fallback: [],
@@ -616,7 +634,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       });
     }
   });
-  if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
+  if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
+    var _pluginState$resolved2;
     toolbarItems.push({
       id: 'editor.link.openLink',
       type: 'button',
@@ -625,7 +644,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
-      onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
+      onClick: fireOpenLinkToolbarAnalytics(editorAnalyticsApi, openLinkInputMethod, (_pluginState$resolved2 = pluginState === null || pluginState === void 0 ? void 0 : pluginState.resolvedToolbarAttributesByUrl[node.attrs.url]) !== null && _pluginState$resolved2 !== void 0 ? _pluginState$resolved2 : {}),
       href: node.attrs.url,
       target: '_blank'
     });

package/dist/types/pm-plugins/actions.d.ts

@@ -3,7 +3,7 @@ import type { DatasourceModalType } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DatasourceAdfView } from '@atlaskit/linking-common';
 import type { SmartLinkEvents } from '@atlaskit/smart-card';
-import type { CardInfo, CardPluginAction, Request } from '../types';
+import type { CardInfo, CardPluginAction, Request, ToolbarResolvedAttributes } from '../types';
 import type { DatasourceTableLayout } from '../ui/LayoutButton/types';
 export declare const cardAction: (tr: Transaction, action: CardPluginAction) => Transaction;
 export declare const resolveCard: (url: string) => (tr: Transaction) => Transaction;
@@ -14,6 +14,7 @@ export declare const registerRemoveOverlay: (callback: () => void, info?: CardIn
 export declare const registerSmartCardEvents: (smartLinkEvents: SmartLinkEvents) => (tr: Transaction) => Transaction;
 export declare const setProvider: (cardProvider: CardProvider | null) => (tr: Transaction) => Transaction;
 export declare const setDatasourceTableRef: (datasourceTableRef?: HTMLElement) => (tr: Transaction) => Transaction;
+export declare const setResolvedToolbarAttributes: (url: string, attributes: ToolbarResolvedAttributes) => (tr: Transaction) => Transaction;
 export declare const setCardLayout: (layout: DatasourceTableLayout) => (tr: Transaction) => Transaction;
 export declare const setCardLayoutAndDatasourceTableRef: ({ layout, datasourceTableRef, }: {
     datasourceTableRef?: HTMLElement;

package/dist/types/pm-plugins/util/state.d.ts

@@ -6,7 +6,7 @@ import type { DatasourceModalType, EditorAppearance } from '@atlaskit/editor-com
 import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import type { DatasourceAdfView } from '@atlaskit/linking-common';
 import type { SmartLinkEvents } from '@atlaskit/smart-card';
-import type { CardPluginState, Request } from '../../types';
+import type { CardPluginState, Request, ToolbarResolvedAttributes } from '../../types';
 import type { DatasourceTableLayout } from '../../ui/LayoutButton/types';
 export declare const getPluginState: (editorState: EditorState) => CardPluginState | undefined;
 export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState, tr: ReadonlyTransaction) => {
@@ -42,6 +42,7 @@ export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState
         sourceEvent?: UIAnalyticsEvent | null | undefined;
         url: string;
     }[];
+    resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;
     showLinkingToolbar: boolean;

package/dist/types/pm-plugins/utils.d.ts

@@ -4,7 +4,7 @@ import type { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardContext } from '@atlaskit/link-provider';
-import type { CardInfo, DatasourceNode } from '../types';
+import type { CardInfo, DatasourceNode, ToolbarResolvedAttributes } from '../types';
 export declare const appearanceForNodeType: (spec: NodeType) => CardAppearance | undefined;
 export declare const selectedCardAppearance: (state: EditorState) => CardAppearance | undefined;
 export type TitleUrlPair = {
@@ -22,7 +22,7 @@ export declare const displayInfoForCard: (node: Node, info?: CardInfo) => TitleU
 export declare const findCardInfo: (state: EditorState) => CardInfo | undefined;
 export declare const isEmbedSupportedAtPosition: (currentNodePosition: number, editorState: EditorState, currentAppearance?: CardAppearance) => boolean;
 export declare const isBlockSupportedAtPosition: (currentNodePosition: number, editorState: EditorState, currentAppearance?: CardAppearance) => boolean;
-export declare const getResolvedAttributesFromStore: (url: string, display: string | null, store?: CardContext["store"]) => {};
+export declare const getResolvedAttributesFromStore: (url: string, display: string | null, store?: CardContext["store"]) => Partial<ToolbarResolvedAttributes>;
 export declare const isDatasourceConfigEditable: (datasourceId: string) => boolean;
 /**
  * Typeguard that checks node attributes are datasource node attributes

package/dist/types/types/index.d.ts

@@ -20,6 +20,12 @@ export type CardInfo = {
     title?: string;
     url?: string;
 };
+export type ToolbarResolvedAttributes = {
+    displayCategory?: 'smartLink' | 'link';
+    extensionKey?: string | null;
+    status?: string | null;
+    statusDetails?: string | null;
+};
 export type Request = {
     /**
      * Analytics action to be used when disaptching
@@ -95,6 +101,7 @@ export type CardPluginState = {
     provider: CardProvider | null;
     removeOverlay?: () => void;
     requests: Request[];
+    resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;
     showLinkingToolbar: boolean;
@@ -156,6 +163,11 @@ export type SetDatasourceTableRef = {
     datasourceTableRef?: HTMLElement;
     type: 'SET_DATASOURCE_TABLE_REF';
 };
+export type SetResolvedToolbarAttributes = {
+    attributes: ToolbarResolvedAttributes;
+    type: 'SET_RESOLVED_TOOLBAR_ATTRIBUTES';
+    url: string;
+};
 export type SetCardLayout = {
     layout: DatasourceTableLayout;
     type: 'SET_CARD_LAYOUT';
@@ -184,5 +196,5 @@ export type RemoveDatasourceStash = {
     type: 'REMOVE_DATASOURCE_STASH';
     url: string;
 };
-export type CardPluginAction = SetProvider | Queue | Resolve | Register | RemoveCard | ShowLinkToolbar | HideLinkToolbar | ShowDatasourceModal | HideDatasourceModal | RegisterSmartCardEvents | SetDatasourceTableRef | SetCardLayout | SetCardLayoutAndDatasourceTableRef | ClearOverlayCandidate | RegisterRemoveOverlayOnInsertedLink | SetDatasourceStash | RemoveDatasourceStash;
+export type CardPluginAction = SetProvider | Queue | Resolve | Register | RemoveCard | ShowLinkToolbar | HideLinkToolbar | ShowDatasourceModal | HideDatasourceModal | RegisterSmartCardEvents | SetDatasourceTableRef | SetResolvedToolbarAttributes | SetCardLayout | SetCardLayoutAndDatasourceTableRef | ClearOverlayCandidate | RegisterRemoveOverlayOnInsertedLink | SetDatasourceStash | RemoveDatasourceStash;
 export {};

package/dist/types/ui/ResizableEmbedCard.d.ts

@@ -47,6 +47,7 @@ export default class ResizableEmbedCard extends React.Component<Props, State> {
     calcSnapPoints(): number[];
     calcPxWidth: (useLayout?: RichMediaLayout) => number;
     get insideInlineLike(): boolean;
+    private handleResizeStart;
     highlights: (newWidth: number, snapPoints: number[]) => string[] | number[];
     /**
      * Previously height of the box was controlled with paddingTop/paddingBottom trick inside Wrapper.

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -3,7 +3,7 @@ import type { DatasourceModalType } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DatasourceAdfView } from '@atlaskit/linking-common';
 import type { SmartLinkEvents } from '@atlaskit/smart-card';
-import type { CardInfo, CardPluginAction, Request } from '../types';
+import type { CardInfo, CardPluginAction, Request, ToolbarResolvedAttributes } from '../types';
 import type { DatasourceTableLayout } from '../ui/LayoutButton/types';
 export declare const cardAction: (tr: Transaction, action: CardPluginAction) => Transaction;
 export declare const resolveCard: (url: string) => (tr: Transaction) => Transaction;
@@ -14,6 +14,7 @@ export declare const registerRemoveOverlay: (callback: () => void, info?: CardIn
 export declare const registerSmartCardEvents: (smartLinkEvents: SmartLinkEvents) => (tr: Transaction) => Transaction;
 export declare const setProvider: (cardProvider: CardProvider | null) => (tr: Transaction) => Transaction;
 export declare const setDatasourceTableRef: (datasourceTableRef?: HTMLElement) => (tr: Transaction) => Transaction;
+export declare const setResolvedToolbarAttributes: (url: string, attributes: ToolbarResolvedAttributes) => (tr: Transaction) => Transaction;
 export declare const setCardLayout: (layout: DatasourceTableLayout) => (tr: Transaction) => Transaction;
 export declare const setCardLayoutAndDatasourceTableRef: ({ layout, datasourceTableRef, }: {
     datasourceTableRef?: HTMLElement;

package/dist/types-ts4.5/pm-plugins/util/state.d.ts

@@ -6,7 +6,7 @@ import type { DatasourceModalType, EditorAppearance } from '@atlaskit/editor-com
 import type { EditorState, ReadonlyTransaction } from '@atlaskit/editor-prosemirror/state';
 import type { DatasourceAdfView } from '@atlaskit/linking-common';
 import type { SmartLinkEvents } from '@atlaskit/smart-card';
-import type { CardPluginState, Request } from '../../types';
+import type { CardPluginState, Request, ToolbarResolvedAttributes } from '../../types';
 import type { DatasourceTableLayout } from '../../ui/LayoutButton/types';
 export declare const getPluginState: (editorState: EditorState) => CardPluginState | undefined;
 export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState, tr: ReadonlyTransaction) => {
@@ -42,6 +42,7 @@ export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState
         sourceEvent?: UIAnalyticsEvent | null | undefined;
         url: string;
     }[];
+    resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;
     showLinkingToolbar: boolean;

package/dist/types-ts4.5/pm-plugins/utils.d.ts

@@ -4,7 +4,7 @@ import type { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardContext } from '@atlaskit/link-provider';
-import type { CardInfo, DatasourceNode } from '../types';
+import type { CardInfo, DatasourceNode, ToolbarResolvedAttributes } from '../types';
 export declare const appearanceForNodeType: (spec: NodeType) => CardAppearance | undefined;
 export declare const selectedCardAppearance: (state: EditorState) => CardAppearance | undefined;
 export type TitleUrlPair = {
@@ -22,7 +22,7 @@ export declare const displayInfoForCard: (node: Node, info?: CardInfo) => TitleU
 export declare const findCardInfo: (state: EditorState) => CardInfo | undefined;
 export declare const isEmbedSupportedAtPosition: (currentNodePosition: number, editorState: EditorState, currentAppearance?: CardAppearance) => boolean;
 export declare const isBlockSupportedAtPosition: (currentNodePosition: number, editorState: EditorState, currentAppearance?: CardAppearance) => boolean;
-export declare const getResolvedAttributesFromStore: (url: string, display: string | null, store?: CardContext["store"]) => {};
+export declare const getResolvedAttributesFromStore: (url: string, display: string | null, store?: CardContext["store"]) => Partial<ToolbarResolvedAttributes>;
 export declare const isDatasourceConfigEditable: (datasourceId: string) => boolean;
 /**
  * Typeguard that checks node attributes are datasource node attributes