@atlaskit/editor-plugin-card 14.0.0 → 14.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-card
 
+## 14.0.2
+
+### Patch Changes
+
+- [`24dad72901730`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/24dad72901730) -
+  Editor-6083: Fix border no shown when resize embed inside synced block
+- Updated dependencies
+
+## 14.0.1
+
+### Patch Changes
+
+- [`1bd6f56c55358`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1bd6f56c55358) -
+  Add gated analytics for Smart Link go-to-link actions, including extensionKey, status, and
+  statusDetails, with supporting editor/card test updates.
+- Updated dependencies
+
 ## 14.0.0
 
 ### Major Changes

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showLinkToolbar = exports.showDatasourceModal = exports.setProvider = exports.setDatasourceTableRef = exports.setDatasourceStash = exports.setCardLayoutAndDatasourceTableRef = exports.setCardLayout = exports.resolveCard = exports.removeDatasourceStash = exports.removeCard = exports.registerSmartCardEvents = exports.registerRemoveOverlay = exports.registerCard = exports.queueCards = exports.hideLinkToolbar = exports.hideDatasourceModal = exports.clearOverlayCandidate = exports.cardAction = void 0;
+exports.showLinkToolbar = exports.showDatasourceModal = exports.setResolvedToolbarAttributes = exports.setProvider = exports.setDatasourceTableRef = exports.setDatasourceStash = exports.setCardLayoutAndDatasourceTableRef = exports.setCardLayout = exports.resolveCard = exports.removeDatasourceStash = exports.removeCard = exports.registerSmartCardEvents = exports.registerRemoveOverlay = exports.registerCard = exports.queueCards = exports.hideLinkToolbar = exports.hideDatasourceModal = exports.clearOverlayCandidate = exports.cardAction = void 0;
 var _pluginKey = require("./plugin-key");
 var cardAction = exports.cardAction = function cardAction(tr, action) {
   return tr.setMeta(_pluginKey.pluginKey, action);
@@ -73,6 +73,15 @@ var setDatasourceTableRef = exports.setDatasourceTableRef = function setDatasour
     });
   };
 };
+var setResolvedToolbarAttributes = exports.setResolvedToolbarAttributes = function setResolvedToolbarAttributes(url, attributes) {
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'SET_RESOLVED_TOOLBAR_ATTRIBUTES',
+      url: url,
+      attributes: attributes
+    });
+  };
+};
 var setCardLayout = exports.setCardLayout = function setCardLayout(layout) {
   return function (tr) {
     return cardAction(tr, {

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

@@ -82,6 +82,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             provider: null,
             cards: [],
             datasourceStash: {},
+            resolvedToolbarAttributesByUrl: {},
             showLinkingToolbar: false,
             smartLinkEvents: undefined,
             editorAppearance: editorAppearance,

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

@@ -57,6 +57,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), {}, (0, _defineProperty2.default)({}, action.url, action.attributes))
+  });
+};
 var setCardLayoutDatasourceTableRef = function setCardLayoutDatasourceTableRef(state, action) {
   return _objectSpread(_objectSpread({}, state), {}, {
     datasourceTableRef: action.datasourceTableRef,
@@ -131,6 +136,8 @@ var _default = exports.default = function _default(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/cjs/pm-plugins/utils.js

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

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -15,8 +15,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -101,6 +103,19 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         resizedPctWidth: resizedPctWidth
       });
     });
+    (0, _defineProperty2.default)(_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(_state.NodeSelection.create(view.state.doc, pos));
+          tr.setMeta('scrollIntoView', false);
+          view.dispatch(tr);
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "highlights", function (newWidth, snapPoints) {
       var snapWidth = (0, _ui.snapTo)(newWidth, snapPoints);
       var _this$props$view$stat = _this.props.view.state.schema.nodes,
@@ -117,10 +132,10 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
       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 = (0, _ui.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
       var columnWidth = Math.round(columns);
       var highlight = [];
@@ -231,9 +246,9 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
     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((0, _ui.calcPxFromColumns)(i, lineLength, this.gridWidth) - offsetLeft);
@@ -283,9 +298,9 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
      * 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 = {
@@ -329,13 +344,13 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
     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: _editorSharedStyles.akEditorMediaResizeHandlerPadding
@@ -390,6 +405,7 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
         nodeType: "embed",
+        onResizeStart: (0, _experiments.editorExperiment)('platform_synced_block', true) && (0, _platformFeatureFlags.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/cjs/ui/ToolbarViewedEvent.js

@@ -10,32 +10,49 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
 var _linkProvider = require("@atlaskit/link-provider");
+var _actions = require("../pm-plugins/actions");
+var _state = require("../pm-plugins/util/state");
 var _utils = require("../pm-plugins/utils");
 var _EditorAnalyticsContext = require("./EditorAnalyticsContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var store = cardContext === null || cardContext === void 0 ? void 0 : cardContext.store;
   (0, _react.useEffect)(function () {
+    var _getPluginState;
+    var resolvedAttributes = (0, _utils.getResolvedAttributesFromStore)(url, display, store);
     createAnalyticsEvent({
       action: 'viewed',
       actionSubject: 'inlineDialog',
       actionSubjectId: 'editLinkToolbar',
       eventType: 'ui',
-      attributes: _objectSpread(_objectSpread({}, (0, _utils.getResolvedAttributesFromStore)(url, display, store)), {}, {
+      attributes: _objectSpread(_objectSpread({}, resolvedAttributes), {}, {
         display: display
       })
     }).fire('media');
-  }, [createAnalyticsEvent, display, url, store]);
+    if (!editorView) {
+      return;
+    }
+    var currentResolvedAttributes = (_getPluginState = (0, _state.getPluginState)(editorView.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.resolvedToolbarAttributesByUrl[url];
+    if (areResolvedAttributesEqual(currentResolvedAttributes, resolvedAttributes)) {
+      return;
+    }
+    editorView.dispatch((0, _actions.setResolvedToolbarAttributes)(url, resolvedAttributes)(editorView.state.tr));
+  }, [createAnalyticsEvent, display, editorView, url, store]);
   return null;
 };
 
@@ -52,6 +69,7 @@ var ToolbarViewedEvent = exports.ToolbarViewedEvent = function ToolbarViewedEven
   }, url ? /*#__PURE__*/_react.default.createElement(ToolbarViewedEventBase, {
     url: url,
     display: display,
-    cardContext: cardContext
+    cardContext: cardContext,
+    editorView: editorView
   }) : null);
 };

package/dist/cjs/ui/toolbar.js

@@ -28,6 +28,7 @@ var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -85,6 +86,30 @@ var visitCardLinkAnalytics = exports.visitCardLinkAnalytics = function visitCard
     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 ((0, _expValEquals.expValEquals)('cc_integrations_editor_open_link_click_analytics', 'isEnabled', true)) {
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.fireAnalyticsEvent({
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.OPEN_LINK,
+        attributes: {
+          displayCategory: resolvedAttributes.displayCategory,
+          extensionKey: resolvedAttributes.extensionKey,
+          status: resolvedAttributes.status,
+          statusDetails: resolvedAttributes.statusDetails
+        },
+        eventType: _analytics.EVENT_TYPE.UI
+      });
+    }
+    return true;
+  };
+};
 var openLinkSettings = exports.openLinkSettings = function openLinkSettings(editorAnalyticsApi) {
   return function (state, dispatch) {
     if (!(state.selection instanceof _state2.NodeSelection)) {
@@ -261,7 +286,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',
@@ -343,7 +368,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: _linkExternal.default,
@@ -351,10 +377,11 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         metadata: metadata,
         className: 'hyperlink-open-link',
         title: intl.formatMessage(_messages.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'
       }], (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
         type: 'copy-button',
@@ -383,18 +410,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       }]) : [].concat(editButtonItems, (0, _toConsumableArray2.default)([].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
         type: 'separator',
         fullHeight: true
-      }])), openPreviewPanelItems, [{
-        id: 'editor.link.openLink',
-        type: 'button',
-        icon: _linkExternal.default,
-        iconFallback: _linkExternal.default,
-        metadata: metadata,
-        className: 'hyperlink-open-link',
-        title: intl.formatMessage(_messages.linkMessages.openLink),
-        onClick: visitCardLinkAnalytics(editorAnalyticsApi, openLinkInputMethod),
-        href: url,
-        target: '_blank'
-      }], (0, _toConsumableArray2.default)(commentItems.length > 1 ? [{
+      }])), openPreviewPanelItems, [openLinkToolbarItem], (0, _toConsumableArray2.default)(commentItems.length > 1 ? [{
         type: 'separator',
         fullHeight: true
       }, commentItems[0]] : commentItems));
@@ -534,8 +550,9 @@ var getSettingsButton = exports.getSettingsButton = function getSettingsButton(i
   };
 };
 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, (0, _toConsumableArray2.default)(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 = !(0, _toolbarFlagCheck.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
@@ -607,6 +624,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     }
   }
   var openLinkInputMethod = _analytics.INPUT_METHOD.FLOATING_TB;
+  var pluginState = _pluginKey.pluginKey.getState(state);
   toolbarItems.push({
     type: 'custom',
     fallback: [],
@@ -625,7 +643,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',
@@ -634,7 +653,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       metadata: metadata,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(_messages.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/es2019/pm-plugins/actions.js

@@ -35,6 +35,11 @@ export const setDatasourceTableRef = datasourceTableRef => tr => cardAction(tr,
   type: 'SET_DATASOURCE_TABLE_REF',
   datasourceTableRef
 });
+export const setResolvedToolbarAttributes = (url, attributes) => tr => cardAction(tr, {
+  type: 'SET_RESOLVED_TOOLBAR_ATTRIBUTES',
+  url,
+  attributes
+});
 export const setCardLayout = layout => tr => cardAction(tr, {
   type: 'SET_CARD_LAYOUT',
   layout

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

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

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

@@ -46,6 +46,15 @@ const setDatasourceTableRef = (state, action) => {
     datasourceTableRef: action.datasourceTableRef
   };
 };
+const setResolvedToolbarAttributes = (state, action) => {
+  return {
+    ...state,
+    resolvedToolbarAttributesByUrl: {
+      ...state.resolvedToolbarAttributesByUrl,
+      [action.url]: action.attributes
+    }
+  };
+};
 const setCardLayoutDatasourceTableRef = (state, action) => {
   return {
     ...state,
@@ -132,6 +141,8 @@ export default ((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/es2019/pm-plugins/utils.js

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

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -9,8 +9,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
@@ -93,6 +95,20 @@ export default class ResizableEmbedCard extends React.Component {
         resizedPctWidth
       });
     });
+    _defineProperty(this, "handleResizeStart", () => {
+      const {
+        view,
+        getPos
+      } = this.props;
+      if (typeof getPos === 'function') {
+        const pos = getPos();
+        if (typeof pos === 'number') {
+          const tr = view.state.tr.setSelection(NodeSelection.create(view.state.doc, pos));
+          tr.setMeta('scrollIntoView', false);
+          view.dispatch(tr);
+        }
+      }
+    });
     _defineProperty(this, "highlights", (newWidth, snapPoints) => {
       const snapWidth = snapTo(newWidth, snapPoints);
       const {
@@ -371,6 +387,7 @@ export default class ResizableEmbedCard extends 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/es2019/ui/ToolbarViewedEvent.js

@@ -1,32 +1,47 @@
 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';
+const areResolvedAttributesEqual = (current, next) => (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
  */
 const ToolbarViewedEventBase = ({
   url,
   display,
-  cardContext
+  cardContext,
+  editorView
 }) => {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
   const store = cardContext === null || cardContext === void 0 ? void 0 : cardContext.store;
   useEffect(() => {
+    var _getPluginState;
+    const resolvedAttributes = getResolvedAttributesFromStore(url, display, store);
     createAnalyticsEvent({
       action: 'viewed',
       actionSubject: 'inlineDialog',
       actionSubjectId: 'editLinkToolbar',
       eventType: 'ui',
       attributes: {
-        ...getResolvedAttributesFromStore(url, display, store),
+        ...resolvedAttributes,
         display
       }
     }).fire('media');
-  }, [createAnalyticsEvent, display, url, store]);
+    if (!editorView) {
+      return;
+    }
+    const 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;
 };
 
@@ -44,6 +59,7 @@ export const ToolbarViewedEvent = ({
   }, url ? /*#__PURE__*/React.createElement(ToolbarViewedEventBase, {
     url: url,
     display: display,
-    cardContext: cardContext
+    cardContext: cardContext,
+    editorView: editorView
   }) : null);
 };