@atlaskit/editor-plugin-card 2.0.5 → 2.0.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-card
 
+## 2.0.7
+
+### Patch Changes
+
+- [#111799](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111799)
+  [`8da4e04d627d5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8da4e04d627d5) -
+  Adds analytic events for toolbar edit dropdown for datasources
+
+## 2.0.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/datasource.js

@@ -29,7 +29,7 @@ var _EditorAnalyticsContext = require("../ui/EditorAnalyticsContext");
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var getPosSafely = function getPosSafely(pos) {
   if (!pos || typeof pos === 'boolean') {
     return;

package/dist/cjs/plugin.js

@@ -13,9 +13,9 @@ var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _doc = require("../src/pm-plugins/doc");
 var _createEventsQueue = require("./analytics/create-events-queue");
 var _actions = require("./pm-plugins/actions");
-var _doc = require("./pm-plugins/doc");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
@@ -112,8 +112,8 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
     actions: {
       hideLinkToolbar: _actions.hideLinkToolbar,
       queueCardsFromChangedTr: _doc.queueCardsFromChangedTr,
-      getStartingToolbarItems: (0, _doc.getStartingToolbarItems)(options, api),
-      getEndingToolbarItems: (0, _doc.getEndingToolbarItems)(options, api)
+      getStartingToolbarItems: (0, _toolbar.getStartingToolbarItems)(options, api),
+      getEndingToolbarItems: (0, _toolbar.getEndingToolbarItems)(options, api)
     },
     pluginsOptions: {
       floatingToolbar: (0, _toolbar.floatingToolbar)(options, (_options$lpLinkPicker = options.lpLinkPicker) !== null && _options$lpLinkPicker !== void 0 ? _options$lpLinkPicker : false, options.platform, options.linkPicker, api, options.disableFloatingToolbar),

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

@@ -4,23 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateCardViaDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getStartingToolbarItems = exports.getLinkNodeType = exports.getEndingToolbarItems = exports.getAttrsForAppearance = exports.editDatasource = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
+exports.updateCardViaDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.getAttrsForAppearance = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireDefault(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
-var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _toolbar = require("../toolbar");
-var _EditToolbarButton = require("../ui/EditToolbarButton");
-var _HyperlinkToolbarAppearance = require("../ui/HyperlinkToolbarAppearance");
-var _ToolbarViewedEvent = require("../ui/ToolbarViewedEvent");
 var _utils2 = require("../utils");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
@@ -573,106 +567,4 @@ var updateDatasourceStash = function updateDatasourceStash(tr, selectedNode) {
       }
     }
   }
-};
-var editDatasource = exports.editDatasource = function editDatasource(datasourceId, editorAnalyticsApi) {
-  return function (state, dispatch) {
-    var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
-    if (dispatch && datasourceType) {
-      var tr = state.tr;
-      (0, _actions.showDatasourceModal)(datasourceType)(tr);
-      // editorAnalyticsApi?.attachAnalyticsEvent(
-      //   buildEditLinkPayload(
-      //     type as
-      //       | ACTION_SUBJECT_ID.CARD_INLINE
-      //       | ACTION_SUBJECT_ID.CARD_BLOCK
-      //       | ACTION_SUBJECT_ID.EMBEDS,
-      //   ),
-      // )(tr);
-      dispatch(tr);
-      return true;
-    }
-    return false;
-  };
-};
-var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
-  return function (intl, link, providerFactory, onEditLink, metadata) {
-    var isEditDropdownEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
-    var editLinkItem = isEditDropdownEnabled ? [{
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        var _api$analytics;
-        if (!editorView) {
-          return null;
-        }
-        return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
-          key: "edit-toolbar-button",
-          intl: intl,
-          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
-          url: link,
-          editorView: editorView,
-          onLinkEditClick: onEditLink
-        });
-      }
-    }] : [{
-      id: 'editor.link.edit',
-      testId: 'editor.link.edit',
-      type: 'button',
-      onClick: onEditLink,
-      title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
-      showTitle: true,
-      metadata: metadata
-    }, {
-      type: 'separator'
-    }];
-    return [{
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
-          key: "edit.link.menu.viewed",
-          url: link,
-          display: "url",
-          editorView: editorView
-        });
-      }
-    }, {
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        var _api$analytics2;
-        if (!editorView) {
-          return null;
-        }
-        return /*#__PURE__*/_react.default.createElement(_HyperlinkToolbarAppearance.HyperlinkToolbarAppearance, {
-          key: "link-appearance",
-          url: link,
-          intl: intl,
-          editorView: editorView,
-          editorState: editorView.state,
-          cardOptions: options,
-          providerFactory: providerFactory,
-          platform: options === null || options === void 0 ? void 0 : options.platform,
-          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
-        });
-      }
-    }].concat(editLinkItem);
-  };
-};
-var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingToolbarItems(options, api) {
-  return function (intl, link) {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button')) {
-      /**
-       * Require either provider to be supplied (controls link preferences)
-       * Or explicit user preferences config in order to enable button
-       */
-      if (options.provider || options.userPreferencesLink) {
-        var _api$analytics3;
-        return [{
-          type: 'separator'
-        }, (0, _toolbar.getHyperlinkToolbarSettingsButton)(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
-      }
-    }
-    return [];
-  };
 };

package/dist/cjs/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visitCardLink = exports.shouldRenderToolbarPulse = exports.removeCard = exports.openLinkSettings = exports.getSettingsButtonGroup = exports.getSettingsButton = exports.getHyperlinkToolbarSettingsButton = exports.floatingToolbar = void 0;
+exports.visitCardLink = exports.shouldRenderToolbarPulse = exports.removeCard = exports.openLinkSettings = exports.getStartingToolbarItems = exports.getSettingsButtonGroup = exports.getSettingsButton = exports.getHyperlinkToolbarSettingsButton = exports.getEndingToolbarItems = exports.floatingToolbar = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -24,12 +24,13 @@ var _settings = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/sett
 var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _doc = require("./pm-plugins/doc");
+var _doc = require("../src/pm-plugins/doc");
 var _main = require("./pm-plugins/main");
 var _DatasourceAppearanceButton = require("./ui/DatasourceAppearanceButton");
 var _EditDatasourceButton = require("./ui/EditDatasourceButton");
 var _EditLinkToolbar = require("./ui/EditLinkToolbar");
 var _EditToolbarButton = require("./ui/EditToolbarButton");
+var _HyperlinkToolbarAppearance = require("./ui/HyperlinkToolbarAppearance");
 var _LinkToolbarAppearance = require("./ui/LinkToolbarAppearance");
 var _ToolbarViewedEvent = require("./ui/ToolbarViewedEvent");
 var _utils3 = require("./utils");
@@ -236,7 +237,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             intl: intl,
             editorAnalyticsApi: editorAnalyticsApi,
             editorView: editorView,
-            onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, true)
+            onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, true),
+            currentAppearance: currentAppearance
           });
         }
       }] : [{
@@ -348,7 +350,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               editorAnalyticsApi: editorAnalyticsApi,
               url: url,
               editorView: editorView,
-              editorState: state
+              currentAppearance: currentAppearance
             });
           }
         });
@@ -405,7 +407,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       metadata: metadata,
       className: 'datasource-edit',
       title: intl.formatMessage(_messages.linkToolbarMessages.editDatasource),
-      onClick: (0, _doc.editDatasource)(datasourceId, editorAnalyticsApi),
+      onClick: (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi, 'datasource'),
       testId: 'datasource-edit-button'
     }, {
       type: 'separator'
@@ -479,7 +481,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
           intl: intl,
           editorAnalyticsApi: editorAnalyticsApi,
           editorView: editorView,
-          onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, false)
+          onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, false),
+          currentAppearance: "datasource"
         });
       }
     });
@@ -524,4 +527,87 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
 };
 var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
   return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
+};
+var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
+  return function (intl, link, providerFactory, onEditLink, metadata) {
+    var isEditDropdownEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
+    var editLinkItem = isEditDropdownEnabled ? [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        var _api$analytics;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
+          key: "edit-toolbar-button",
+          intl: intl,
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+          url: link,
+          editorView: editorView,
+          onLinkEditClick: onEditLink,
+          currentAppearance: "url"
+        });
+      }
+    }] : [{
+      id: 'editor.link.edit',
+      testId: 'editor.link.edit',
+      type: 'button',
+      onClick: onEditLink,
+      title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
+      showTitle: true,
+      metadata: metadata
+    }, {
+      type: 'separator'
+    }];
+    return [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
+          key: "edit.link.menu.viewed",
+          url: link,
+          display: "url",
+          editorView: editorView
+        });
+      }
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        var _api$analytics2;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.createElement(_HyperlinkToolbarAppearance.HyperlinkToolbarAppearance, {
+          key: "link-appearance",
+          url: link,
+          intl: intl,
+          editorView: editorView,
+          editorState: editorView.state,
+          cardOptions: options,
+          providerFactory: providerFactory,
+          platform: options === null || options === void 0 ? void 0 : options.platform,
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+        });
+      }
+    }].concat(editLinkItem);
+  };
+};
+var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingToolbarItems(options, api) {
+  return function (intl, link) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button')) {
+      /**
+       * Require either provider to be supplied (controls link preferences)
+       * Or explicit user preferences config in order to enable button
+       */
+      if (options.provider || options.userPreferencesLink) {
+        var _api$analytics3;
+        return [{
+          type: 'separator'
+        }, getHyperlinkToolbarSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
+      }
+    }
+    return [];
+  };
 };

package/dist/cjs/ui/AwarenessWrapper/index.js

@@ -18,6 +18,8 @@ var _LeftIconOverlay = _interopRequireDefault(require("../LeftIconOverlay"));
 var _Pulse = require("../Pulse");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 // editor adds a standard line-height that is bigger than an inline smart link
 // due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
 var loaderWrapperStyles = (0, _react2.css)({

package/dist/cjs/ui/DatasourceAppearanceButton.js

@@ -20,6 +20,8 @@ var _DatasourceIcon = require("./DatasourceIcon");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var buttonStyles = (0, _react2.css)({
   pointerEvents: 'auto'
 });

package/dist/cjs/ui/EditDatasourceButton.js

@@ -3,18 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditDatasourceButton = void 0;
-var _react = require("@emotion/react");
+exports.editDatasource = exports.EditDatasourceButton = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-common/utils");
 var _primitives = require("@atlaskit/primitives");
-var _doc = require("../pm-plugins/doc");
-var _utils = require("../utils");
+var _actions = require("../pm-plugins/actions");
+var _utils2 = require("../utils");
 var _CardContextProvider = require("./CardContextProvider");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 /** @jsx jsx */
 
-var buttonStyles = (0, _react.css)({
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var buttonStyles = (0, _react2.css)({
   pointerEvents: 'auto'
 });
 
@@ -26,14 +31,21 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     url = _ref.url,
     editorView = _ref.editorView,
-    editorState = _ref.editorState;
+    currentAppearance = _ref.currentAppearance;
   var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
       isRegularCardNode: true,
       url: url,
       cardContext: cardContext
     }),
-    datasourceId = _useFetchDatasourceIn.datasourceId;
-  if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
+    datasourceId = _useFetchDatasourceIn.datasourceId,
+    extensionKey = _useFetchDatasourceIn.extensionKey;
+  var onEditDatasource = (0, _react.useCallback)(function () {
+    if (editorView && datasourceId) {
+      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      (0, _utils2.focusEditorView)(editorView);
+    }
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
+  if (!datasourceId || !(0, _utils2.isDatasourceConfigEditable)(datasourceId)) {
     return null;
   }
   if (url) {
@@ -43,38 +55,52 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       return null;
     }
   }
-  var dispatchCommand = function dispatchCommand(fn) {
-    fn && fn(editorState, editorView && editorView.dispatch);
-    if (editorView && !editorView.hasFocus()) {
-      editorView.focus();
-    }
-  };
-  return (0, _react.jsx)(_primitives.Flex, null, (0, _react.jsx)(_ui.FloatingToolbarButton, {
+  return (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
-    icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),
+    icon: (0, _react2.jsx)(_ui.SmallerEditIcon, null),
     selected: false,
-    onClick: function onClick() {
-      return dispatchCommand((0, _doc.editDatasource)(datasourceId, editorAnalyticsApi));
-    },
+    onClick: onEditDatasource,
     testId: 'card-edit-datasource-button'
-  }), (0, _react.jsx)(_ui.FloatingToolbarSeparator, null));
+  }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
 };
 var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourceButton(_ref2) {
   var intl = _ref2.intl,
     editorAnalyticsApi = _ref2.editorAnalyticsApi,
     url = _ref2.url,
     editorView = _ref2.editorView,
-    editorState = _ref2.editorState;
-  return (0, _react.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
+    currentAppearance = _ref2.currentAppearance;
+  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
     var cardContext = _ref3.cardContext;
-    return (0, _react.jsx)(EditDatasourceButtonWithCardContext, {
+    return (0, _react2.jsx)(EditDatasourceButtonWithCardContext, {
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
-      editorState: editorState,
-      cardContext: cardContext
+      cardContext: cardContext,
+      currentAppearance: currentAppearance
     });
   });
+};
+var editDatasource = exports.editDatasource = function editDatasource(datasourceId, editorAnalyticsApi, appearance, extensionKey) {
+  return function (state, dispatch) {
+    var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
+    if (dispatch && datasourceType) {
+      var tr = state.tr;
+      (0, _actions.showDatasourceModal)(datasourceType)(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDIT_DATASOURCE,
+        eventType: _analytics.EVENT_TYPE.UI,
+        attributes: {
+          extensionKey: extensionKey,
+          appearance: appearance
+        }
+      })(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
 };

package/dist/cjs/ui/EditToolbarButton.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EditToolbarButton = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -15,28 +16,32 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _menu = require("@atlaskit/menu");
 var _primitives = require("@atlaskit/primitives");
-var _doc = require("../pm-plugins/doc");
+var _EditDatasourceButton = require("../ui/EditDatasourceButton");
 var _utils = require("../utils");
 var _CardContextProvider = require("./CardContextProvider");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
+var _excluded = ["extensionKey"];
 /** @jsx jsx */
-
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var dropdownExpandContainer = (0, _react2.css)({
   margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
 });
 var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
   var _response$datasourceI;
-  var url = props.url,
-    cardContext = props.cardContext,
-    intl = props.intl,
+  var cardContext = props.cardContext,
+    currentAppearance = props.currentAppearance,
     editorAnalyticsApi = props.editorAnalyticsApi,
     editorView = props.editorView,
-    onLinkEditClick = props.onLinkEditClick;
-  var response = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
-    isRegularCardNode: true,
-    url: url,
-    cardContext: cardContext
-  });
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
+  var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    extensionKey = _useFetchDatasourceIn.extensionKey,
+    response = (0, _objectWithoutProperties2.default)(_useFetchDatasourceIn, _excluded);
   var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -51,17 +56,12 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
   var onClose = function onClose() {
     return setIsOpen(false);
   };
-  var dispatchCommand = (0, _react.useCallback)(function (fn) {
+  var onEditLink = (0, _react.useCallback)(function () {
     if (editorView) {
-      fn === null || fn === void 0 || fn(editorView.state, editorView.dispatch);
-      if (!editorView.hasFocus()) {
-        editorView.focus();
-      }
+      onLinkEditClick(editorView.state, editorView.dispatch);
+      (0, _utils.focusEditorView)(editorView);
     }
-  }, [editorView]);
-  var onEditLink = (0, _react.useCallback)(function () {
-    dispatchCommand(onLinkEditClick);
-  }, [dispatchCommand, onLinkEditClick]);
+  }, [editorView, onLinkEditClick]);
   var editVariant = (0, _react.useMemo)(function () {
     var hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
@@ -82,10 +82,11 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
     }
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   var onEditDatasource = (0, _react.useCallback)(function () {
-    if (datasourceId) {
-      dispatchCommand((0, _doc.editDatasource)(datasourceId, editorAnalyticsApi));
+    if (editorView && datasourceId) {
+      (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      (0, _utils.focusEditorView)(editorView);
     }
-  }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
   switch (editVariant) {
     case 'edit-link':
       {
@@ -150,12 +151,13 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
   }
 };
 var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(props) {
-  var datasourceId = props.datasourceId,
-    intl = props.intl,
+  var currentAppearance = props.currentAppearance,
+    datasourceId = props.datasourceId,
     editorAnalyticsApi = props.editorAnalyticsApi,
-    url = props.url,
     editorView = props.editorView,
-    onLinkEditClick = props.onLinkEditClick;
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
   return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref) {
     var cardContext = _ref.cardContext;
     return (0, _react2.jsx)(EditToolbarButtonWithCardContext, {
@@ -165,7 +167,8 @@ var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(p
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       cardContext: cardContext,
-      onLinkEditClick: onLinkEditClick
+      onLinkEditClick: onLinkEditClick,
+      currentAppearance: currentAppearance
     });
   });
 };

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -164,9 +164,9 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
       return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
         url: url,
         intl: intl,
-        editorState: editorState,
         editorView: editorView,
-        editorAnalyticsApi: editorAnalyticsApi
+        editorAnalyticsApi: editorAnalyticsApi,
+        currentAppearance: "url"
       }), /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
         key: "link-appearance",
         url: url,

package/dist/cjs/ui/InlineCardOverlay/index.js

@@ -24,6 +24,7 @@ var _active;
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var DEBOUNCE_IN_MS = 5;

package/dist/cjs/ui/LayoutButton/index.js

@@ -22,7 +22,7 @@ var _actions = require("../../pm-plugins/actions");
 var _utils2 = require("../../utils");
 var _utils3 = require("./utils");
 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; } /** @jsx jsx */
+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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var toolbarButtonWrapperStyles = (0, _react2.css)({
   background: "".concat("var(--ds-background-neutral, ".concat(_colors.N20A, ")")),
   color: "".concat("var(--ds-icon, ".concat(_colors.N300, ")")),

package/dist/cjs/ui/LeftIconOverlay/index.js

@@ -23,6 +23,7 @@ var _excluded = ["children", "isSelected", "isVisible", "testId"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var DEBOUNCE_IN_MS = 5;