@atlaskit/editor-plugin-card 2.0.5 → 2.0.7

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -22,7 +22,7 @@ var _smartCard = require("@atlaskit/smart-card");
 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
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableEmbedCard, _React$Component);

package/dist/cjs/ui/useFetchDatasourceInfo.js

@@ -30,6 +30,10 @@ var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchD
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     ready = _useState6[0],
     setReady = _useState6[1];
+  var _useState7 = (0, _react.useState)(undefined),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    extensionKey = _useState8[0],
+    setExtensionKey = _useState8[1];
   (0, _react.useEffect)(function () {
     var fetchDatasource = /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
@@ -51,24 +55,26 @@ var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchD
             case 6:
               response = _context.sent;
               datasources = response && response.datasources || [];
+              setExtensionKey(response === null || response === void 0 ? void 0 : response.meta.key);
               setDatasourceId((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id);
               setParameters((_datasources$2 = datasources[0]) === null || _datasources$2 === void 0 ? void 0 : _datasources$2.parameters);
               setReady(true);
-              _context.next = 18;
+              _context.next = 20;
               break;
-            case 13:
-              _context.prev = 13;
+            case 14:
+              _context.prev = 14;
               _context.t0 = _context["catch"](0);
               setDatasourceId(undefined);
               setParameters(undefined);
+              setExtensionKey(undefined);
               // If fetch somehow errors, still set ready as true so we don't block the rendering of the modal.
               // It will just open with empty params.
               setReady(true);
-            case 18:
+            case 20:
             case "end":
               return _context.stop();
           }
-        }, _callee, null, [[0, 13]]);
+        }, _callee, null, [[0, 14]]);
       }));
       return function fetchDatasource() {
         return _ref2.apply(this, arguments);
@@ -81,6 +87,7 @@ var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchD
   return {
     datasourceId: datasourceId,
     parameters: parameters,
-    ready: ready
+    ready: ready,
+    extensionKey: extensionKey
   };
 };

package/dist/cjs/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.focusEditorView = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -122,4 +122,14 @@ var isDatasourceNode = exports.isDatasourceNode = function isDatasourceNode(node
     return false;
   }
   return node.type.name === 'blockCard' && isDatasourceAdfAttributes(node.attrs);
+};
+
+/**
+ * Focuses the editorView if it's not already focused.
+ * @param editorView The editor view to focus.
+ */
+var focusEditorView = exports.focusEditorView = function focusEditorView(editorView) {
+  if (!editorView.hasFocus()) {
+    editorView.focus();
+  }
 };

package/dist/es2019/nodeviews/datasource.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';

package/dist/es2019/plugin.js

@@ -5,13 +5,13 @@ import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDataso
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { queueCardsFromChangedTr } from '../src/pm-plugins/doc';
 import { createEventsQueue } from './analytics/create-events-queue';
 import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
-import { getEndingToolbarItems, getStartingToolbarItems, queueCardsFromChangedTr } from './pm-plugins/doc';
 import { cardKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
-import { floatingToolbar } from './toolbar';
+import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
 import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
 import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
 import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';

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

@@ -1,19 +1,13 @@
-import React from 'react';
 import isEqual from 'lodash/isEqual';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
-import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
-import { getDatasourceType, getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
+import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { getHyperlinkToolbarSettingsButton } from '../toolbar';
-import { EditToolbarButton } from '../ui/EditToolbarButton';
-import { HyperlinkToolbarAppearance } from '../ui/HyperlinkToolbarAppearance';
-import { ToolbarViewedEvent } from '../ui/ToolbarViewedEvent';
 import { appearanceForNodeType, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
-import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash, showDatasourceModal } from './actions';
+import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
 
@@ -561,102 +555,4 @@ const updateDatasourceStash = (tr, selectedNode) => {
       }
     }
   }
-};
-export const editDatasource = (datasourceId, editorAnalyticsApi) => (state, dispatch) => {
-  const datasourceType = getDatasourceType(datasourceId);
-  if (dispatch && datasourceType) {
-    const {
-      tr
-    } = state;
-    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;
-};
-export const getStartingToolbarItems = (options, api) => {
-  return (intl, link, providerFactory, onEditLink, metadata) => {
-    const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
-    const editLinkItem = isEditDropdownEnabled ? [{
-      type: 'custom',
-      fallback: [],
-      render: editorView => {
-        var _api$analytics;
-        if (!editorView) {
-          return null;
-        }
-        return /*#__PURE__*/React.createElement(EditToolbarButton, {
-          key: "edit-toolbar-button",
-          intl: intl,
-          editorAnalyticsApi: api === null || api === void 0 ? 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(linkToolbarMessages.editLink),
-      showTitle: true,
-      metadata: metadata
-    }, {
-      type: 'separator'
-    }];
-    return [{
-      type: 'custom',
-      fallback: [],
-      render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
-        key: "edit.link.menu.viewed",
-        url: link,
-        display: "url",
-        editorView: editorView
-      })
-    }, {
-      type: 'custom',
-      fallback: [],
-      render: editorView => {
-        var _api$analytics2;
-        if (!editorView) {
-          return null;
-        }
-        return /*#__PURE__*/React.createElement(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 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
-        });
-      }
-    }, ...editLinkItem];
-  };
-};
-export const getEndingToolbarItems = (options, api) => (intl, link) => {
-  if (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 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
-    }
-  }
-  return [];
 };

package/dist/es2019/toolbar.js

@@ -14,12 +14,13 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { changeSelectedCardToText, editDatasource } from './pm-plugins/doc';
+import { changeSelectedCardToText } from '../src/pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
 import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
-import { EditDatasourceButton } from './ui/EditDatasourceButton';
+import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { EditToolbarButton } from './ui/EditToolbarButton';
+import { HyperlinkToolbarAppearance } from './ui/HyperlinkToolbarAppearance';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
 import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, titleUrlPairFromNode } from './utils';
@@ -229,7 +230,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         intl: intl,
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
-        onLinkEditClick: editLink(editorAnalyticsApi, true)
+        onLinkEditClick: editLink(editorAnalyticsApi, true),
+        currentAppearance: currentAppearance
       })
     }] : [{
       id: 'editor.link.edit',
@@ -337,7 +339,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
           editorAnalyticsApi: editorAnalyticsApi,
           url: url,
           editorView: editorView,
-          editorState: state
+          currentAppearance: currentAppearance
         })
       });
     }
@@ -392,7 +394,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       metadata: metadata,
       className: 'datasource-edit',
       title: intl.formatMessage(linkToolbarMessages.editDatasource),
-      onClick: editDatasource(datasourceId, editorAnalyticsApi),
+      onClick: editDatasource(datasourceId, editorAnalyticsApi, 'datasource'),
       testId: 'datasource-edit-button'
     }, {
       type: 'separator'
@@ -467,7 +469,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
         intl: intl,
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
-        onLinkEditClick: editLink(editorAnalyticsApi, false)
+        onLinkEditClick: editLink(editorAnalyticsApi, false),
+        currentAppearance: "datasource"
       })
     });
   }
@@ -511,4 +514,83 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
 };
 export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDiscoverabilityEnabled) => {
   return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
+};
+export const getStartingToolbarItems = (options, api) => {
+  return (intl, link, providerFactory, onEditLink, metadata) => {
+    const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
+    const editLinkItem = isEditDropdownEnabled ? [{
+      type: 'custom',
+      fallback: [],
+      render: editorView => {
+        var _api$analytics;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(EditToolbarButton, {
+          key: "edit-toolbar-button",
+          intl: intl,
+          editorAnalyticsApi: api === null || api === void 0 ? 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(linkToolbarMessages.editLink),
+      showTitle: true,
+      metadata: metadata
+    }, {
+      type: 'separator'
+    }];
+    return [{
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
+        key: "edit.link.menu.viewed",
+        url: link,
+        display: "url",
+        editorView: editorView
+      })
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: editorView => {
+        var _api$analytics2;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(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 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+        });
+      }
+    }, ...editLinkItem];
+  };
+};
+export const getEndingToolbarItems = (options, api) => (intl, link) => {
+  if (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 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
+    }
+  }
+  return [];
 };

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

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { useCallback, useEffect, useMemo, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';

package/dist/es2019/ui/DatasourceAppearanceButton.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';

package/dist/es2019/ui/EditDatasourceButton.js

@@ -1,10 +1,15 @@
 /** @jsx jsx */
+import { useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
+import { getDatasourceType } from '@atlaskit/editor-common/utils';
 import { Flex } from '@atlaskit/primitives';
-import { editDatasource } from '../pm-plugins/doc';
-import { isDatasourceConfigEditable } from '../utils';
+import { showDatasourceModal } from '../pm-plugins/actions';
+import { focusEditorView, isDatasourceConfigEditable } from '../utils';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const buttonStyles = css({
@@ -19,15 +24,22 @@ const EditDatasourceButtonWithCardContext = ({
   editorAnalyticsApi,
   url,
   editorView,
-  editorState
+  currentAppearance
 }) => {
   const {
-    datasourceId
+    datasourceId,
+    extensionKey
   } = useFetchDatasourceInfo({
     isRegularCardNode: true,
     url,
     cardContext
   });
+  const onEditDatasource = useCallback(() => {
+    if (editorView && datasourceId) {
+      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
+    }
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
   if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
     return null;
   }
@@ -38,18 +50,12 @@ const EditDatasourceButtonWithCardContext = ({
       return null;
     }
   }
-  const dispatchCommand = fn => {
-    fn && fn(editorState, editorView && editorView.dispatch);
-    if (editorView && !editorView.hasFocus()) {
-      editorView.focus();
-    }
-  };
   return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
     icon: jsx(SmallerEditIcon, null),
     selected: false,
-    onClick: () => dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi)),
+    onClick: onEditDatasource,
     testId: 'card-edit-datasource-button'
   }), jsx(Separator, null));
 };
@@ -58,7 +64,7 @@ export const EditDatasourceButton = ({
   editorAnalyticsApi,
   url,
   editorView,
-  editorState
+  currentAppearance
 }) => {
   return jsx(CardContextProvider, null, ({
     cardContext
@@ -67,7 +73,29 @@ export const EditDatasourceButton = ({
     intl: intl,
     editorAnalyticsApi: editorAnalyticsApi,
     editorView: editorView,
-    editorState: editorState,
-    cardContext: cardContext
+    cardContext: cardContext,
+    currentAppearance: currentAppearance
   }));
+};
+export const editDatasource = (datasourceId, editorAnalyticsApi, appearance, extensionKey) => (state, dispatch) => {
+  const datasourceType = getDatasourceType(datasourceId);
+  if (dispatch && datasourceType) {
+    const {
+      tr
+    } = state;
+    showDatasourceModal(datasourceType)(tr);
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+      action: ACTION.CLICKED,
+      actionSubject: ACTION_SUBJECT.BUTTON,
+      actionSubjectId: ACTION_SUBJECT_ID.EDIT_DATASOURCE,
+      eventType: EVENT_TYPE.UI,
+      attributes: {
+        extensionKey,
+        appearance
+      }
+    })(tr);
+    dispatch(tr);
+    return true;
+  }
+  return false;
 };

package/dist/es2019/ui/EditToolbarButton.js

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { useCallback, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
@@ -8,8 +10,8 @@ import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlask
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
 import { Flex } from '@atlaskit/primitives';
-import { editDatasource } from '../pm-plugins/doc';
-import { isDatasourceConfigEditable } from '../utils';
+import { editDatasource } from '../ui/EditDatasourceButton';
+import { focusEditorView, isDatasourceConfigEditable } from '../utils';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const dropdownExpandContainer = css({
@@ -18,14 +20,18 @@ const dropdownExpandContainer = css({
 const EditToolbarButtonWithCardContext = props => {
   var _response$datasourceI;
   const {
-    url,
     cardContext,
-    intl,
+    currentAppearance,
     editorAnalyticsApi,
     editorView,
-    onLinkEditClick
+    intl,
+    onLinkEditClick,
+    url
   } = props;
-  const response = useFetchDatasourceInfo({
+  const {
+    extensionKey,
+    ...response
+  } = useFetchDatasourceInfo({
     isRegularCardNode: true,
     url,
     cardContext
@@ -35,17 +41,12 @@ const EditToolbarButtonWithCardContext = props => {
   const containerRef = useRef();
   const toggleOpen = () => setIsOpen(open => !open);
   const onClose = () => setIsOpen(false);
-  const dispatchCommand = useCallback(fn => {
+  const onEditLink = useCallback(() => {
     if (editorView) {
-      fn === null || fn === void 0 ? void 0 : fn(editorView.state, editorView.dispatch);
-      if (!editorView.hasFocus()) {
-        editorView.focus();
-      }
+      onLinkEditClick(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
     }
-  }, [editorView]);
-  const onEditLink = useCallback(() => {
-    dispatchCommand(onLinkEditClick);
-  }, [dispatchCommand, onLinkEditClick]);
+  }, [editorView, onLinkEditClick]);
   const editVariant = useMemo(() => {
     const hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
@@ -66,10 +67,11 @@ const EditToolbarButtonWithCardContext = props => {
     }
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   const onEditDatasource = useCallback(() => {
-    if (datasourceId) {
-      dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
+    if (editorView && datasourceId) {
+      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
     }
-  }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
   switch (editVariant) {
     case 'edit-link':
       {
@@ -135,12 +137,13 @@ const EditToolbarButtonWithCardContext = props => {
 };
 export const EditToolbarButton = props => {
   const {
+    currentAppearance,
     datasourceId,
-    intl,
     editorAnalyticsApi,
-    url,
     editorView,
-    onLinkEditClick
+    intl,
+    onLinkEditClick,
+    url
   } = props;
   return jsx(CardContextProvider, null, ({
     cardContext
@@ -151,6 +154,7 @@ export const EditToolbarButton = props => {
     editorAnalyticsApi: editorAnalyticsApi,
     editorView: editorView,
     cardContext: cardContext,
-    onLinkEditClick: onLinkEditClick
+    onLinkEditClick: onLinkEditClick,
+    currentAppearance: currentAppearance
   }));
 };

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -79,9 +79,9 @@ export class HyperlinkToolbarAppearance extends Component {
     return /*#__PURE__*/React.createElement(Flex, null, !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
       url: url,
       intl: intl,
-      editorState: editorState,
       editorView: editorView,
-      editorAnalyticsApi: editorAnalyticsApi
+      editorAnalyticsApi: editorAnalyticsApi,
+      currentAppearance: "url"
     }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
       key: "link-appearance",
       url: url,

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

@@ -3,6 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';

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

@@ -1,5 +1,7 @@
 /** @jsx jsx */
 import { useCallback, useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';

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

@@ -3,6 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { useIntl } from 'react-intl-next';

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';