@atlaskit/editor-plugin-card 2.0.6 → 2.0.7

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

@@ -2,22 +2,16 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
-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';
 
@@ -567,106 +561,4 @@ var updateDatasourceStash = function updateDatasourceStash(tr, selectedNode) {
       }
     }
   }
-};
-export var editDatasource = function editDatasource(datasourceId, editorAnalyticsApi) {
-  return function (state, dispatch) {
-    var datasourceType = getDatasourceType(datasourceId);
-    if (dispatch && datasourceType) {
-      var tr = state.tr;
-      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 var getStartingToolbarItems = function getStartingToolbarItems(options, api) {
-  return function (intl, link, providerFactory, onEditLink, metadata) {
-    var isEditDropdownEnabled = 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.createElement(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(linkToolbarMessages.editLink),
-      showTitle: true,
-      metadata: metadata
-    }, {
-      type: 'separator'
-    }];
-    return [{
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        return /*#__PURE__*/React.createElement(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.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 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
-        });
-      }
-    }].concat(editLinkItem);
-  };
-};
-export var getEndingToolbarItems = function getEndingToolbarItems(options, api) {
-  return function (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 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
-      }
-    }
-    return [];
-  };
 };

package/dist/esm/toolbar.js

@@ -18,12 +18,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';
@@ -226,7 +227,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             intl: intl,
             editorAnalyticsApi: editorAnalyticsApi,
             editorView: editorView,
-            onLinkEditClick: editLink(editorAnalyticsApi, true)
+            onLinkEditClick: editLink(editorAnalyticsApi, true),
+            currentAppearance: currentAppearance
           });
         }
       }] : [{
@@ -338,7 +340,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               editorAnalyticsApi: editorAnalyticsApi,
               url: url,
               editorView: editorView,
-              editorState: state
+              currentAppearance: currentAppearance
             });
           }
         });
@@ -395,7 +397,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       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'
@@ -469,7 +471,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
           intl: intl,
           editorAnalyticsApi: editorAnalyticsApi,
           editorView: editorView,
-          onLinkEditClick: editLink(editorAnalyticsApi, false)
+          onLinkEditClick: editLink(editorAnalyticsApi, false),
+          currentAppearance: "datasource"
         });
       }
     });
@@ -514,4 +517,87 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
 };
 export var shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
   return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
+};
+export var getStartingToolbarItems = function getStartingToolbarItems(options, api) {
+  return function (intl, link, providerFactory, onEditLink, metadata) {
+    var isEditDropdownEnabled = 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.createElement(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(linkToolbarMessages.editLink),
+      showTitle: true,
+      metadata: metadata
+    }, {
+      type: 'separator'
+    }];
+    return [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__PURE__*/React.createElement(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.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 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+        });
+      }
+    }].concat(editLinkItem);
+  };
+};
+export var getEndingToolbarItems = function getEndingToolbarItems(options, api) {
+  return function (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 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
+      }
+    }
+    return [];
+  };
 };

package/dist/esm/ui/EditDatasourceButton.js

@@ -1,11 +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';
 var buttonStyles = css({
@@ -20,13 +24,20 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     url = _ref.url,
     editorView = _ref.editorView,
-    editorState = _ref.editorState;
+    currentAppearance = _ref.currentAppearance;
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
       cardContext: cardContext
     }),
-    datasourceId = _useFetchDatasourceIn.datasourceId;
+    datasourceId = _useFetchDatasourceIn.datasourceId,
+    extensionKey = _useFetchDatasourceIn.extensionKey;
+  var onEditDatasource = useCallback(function () {
+    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;
   }
@@ -37,20 +48,12 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       return null;
     }
   }
-  var dispatchCommand = function 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: function onClick() {
-      return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
-    },
+    onClick: onEditDatasource,
     testId: 'card-edit-datasource-button'
   }), jsx(Separator, null));
 };
@@ -59,7 +62,7 @@ export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
     editorAnalyticsApi = _ref2.editorAnalyticsApi,
     url = _ref2.url,
     editorView = _ref2.editorView,
-    editorState = _ref2.editorState;
+    currentAppearance = _ref2.currentAppearance;
   return jsx(CardContextProvider, null, function (_ref3) {
     var cardContext = _ref3.cardContext;
     return jsx(EditDatasourceButtonWithCardContext, {
@@ -67,8 +70,30 @@ export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
-      editorState: editorState,
-      cardContext: cardContext
+      cardContext: cardContext,
+      currentAppearance: currentAppearance
     });
   });
+};
+export var editDatasource = function editDatasource(datasourceId, editorAnalyticsApi, appearance, extensionKey) {
+  return function (state, dispatch) {
+    var datasourceType = getDatasourceType(datasourceId);
+    if (dispatch && datasourceType) {
+      var tr = state.tr;
+      showDatasourceModal(datasourceType)(tr);
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.EDIT_DATASOURCE,
+        eventType: EVENT_TYPE.UI,
+        attributes: {
+          extensionKey: extensionKey,
+          appearance: appearance
+        }
+      })(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
 };

package/dist/esm/ui/EditToolbarButton.js

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["extensionKey"];
 /** @jsx jsx */
 import { useCallback, useMemo, useRef, useState } from 'react';
 
@@ -11,8 +13,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';
 var dropdownExpandContainer = css({
@@ -20,17 +22,20 @@ var dropdownExpandContainer = css({
 });
 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 = useFetchDatasourceInfo({
-    isRegularCardNode: true,
-    url: url,
-    cardContext: cardContext
-  });
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
+  var _useFetchDatasourceIn = useFetchDatasourceInfo({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    extensionKey = _useFetchDatasourceIn.extensionKey,
+    response = _objectWithoutProperties(_useFetchDatasourceIn, _excluded);
   var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -45,17 +50,12 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
   var onClose = function onClose() {
     return setIsOpen(false);
   };
-  var dispatchCommand = useCallback(function (fn) {
+  var onEditLink = useCallback(function () {
     if (editorView) {
-      fn === null || fn === void 0 || fn(editorView.state, editorView.dispatch);
-      if (!editorView.hasFocus()) {
-        editorView.focus();
-      }
+      onLinkEditClick(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
     }
-  }, [editorView]);
-  var onEditLink = useCallback(function () {
-    dispatchCommand(onLinkEditClick);
-  }, [dispatchCommand, onLinkEditClick]);
+  }, [editorView, onLinkEditClick]);
   var editVariant = useMemo(function () {
     var hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
@@ -76,10 +76,11 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
     }
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   var onEditDatasource = useCallback(function () {
-    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':
       {
@@ -144,12 +145,13 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
   }
 };
 export var 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 jsx(CardContextProvider, null, function (_ref) {
     var cardContext = _ref.cardContext;
     return jsx(EditToolbarButtonWithCardContext, {
@@ -159,7 +161,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       cardContext: cardContext,
-      onLinkEditClick: onLinkEditClick
+      onLinkEditClick: onLinkEditClick,
+      currentAppearance: currentAppearance
     });
   });
 };

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -154,9 +154,9 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_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/esm/ui/useFetchDatasourceInfo.js

@@ -22,6 +22,10 @@ export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     ready = _useState6[0],
     setReady = _useState6[1];
+  var _useState7 = useState(undefined),
+    _useState8 = _slicedToArray(_useState7, 2),
+    extensionKey = _useState8[0],
+    setExtensionKey = _useState8[1];
   useEffect(function () {
     var fetchDatasource = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -43,24 +47,26 @@ export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
             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);
@@ -73,6 +79,7 @@ export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   return {
     datasourceId: datasourceId,
     parameters: parameters,
-    ready: ready
+    ready: ready,
+    extensionKey: extensionKey
   };
 };

package/dist/esm/utils.js

@@ -115,4 +115,14 @@ export var 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.
+ */
+export var focusEditorView = function focusEditorView(editorView) {
+  if (!editorView.hasFocus()) {
+    editorView.focus();
+  }
 };

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

@@ -1,16 +1,14 @@
-import { type IntlShape } from 'react-intl-next';
 import type { CreateUIAnalyticsEvent, UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ACTION } from '@atlaskit/editor-common/analytics';
 import type { CardReplacementInputMethod } from '@atlaskit/editor-common/card';
-import type { CardAdf, CardAppearance, DatasourceAdf, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import type { Command, ExtractInjectionAPI, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+import type { CardAdf, CardAppearance, DatasourceAdf } from '@atlaskit/editor-common/provider-factory';
+import type { Command } from '@atlaskit/editor-common/types';
 import type { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { InlineCardAdf } from '@atlaskit/smart-card';
-import { type cardPlugin } from '../plugin';
-import type { CardPluginOptions, Request } from '../types';
+import type { Request } from '../types';
 export declare const replaceQueuedUrlWithCard: (url: string, cardData: CardAdf | DatasourceAdf, analyticsAction?: ACTION, editorAnalyticsApi?: EditorAnalyticsAPI, createAnalyticsEvent?: CreateUIAnalyticsEvent) => Command;
 export declare const handleFallbackWithAnalytics: (request: Request, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export declare const queueCardsFromChangedTr: (state: EditorState, tr: Transaction, source: CardReplacementInputMethod, analyticsAction?: ACTION, normalizeLinkText?: boolean, sourceEvent?: UIAnalyticsEvent | null | undefined, appearance?: CardAppearance) => Transaction;
@@ -40,10 +38,4 @@ export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf |
  * Get attributes for new Card Appearance
  */
 export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;
-export declare const editDatasource: (datasourceId: string, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
-export declare const getStartingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string, providerFactory: ProviderFactory, onEditLink: Command, metadata: {
-    url: string;
-    title: string;
-}) => FloatingToolbarItem<Command>[];
-export declare const getEndingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string) => FloatingToolbarItem<Command>[];
 export {};

package/dist/types/toolbar.d.ts

@@ -1,8 +1,10 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { CardOptions } from '@atlaskit/editor-common/card';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { Command, ExtractInjectionAPI, FloatingToolbarHandler, FloatingToolbarItem, LinkPickerOptions } from '@atlaskit/editor-common/types';
 import type { CardPlatform } from '@atlaskit/smart-card';
+import type { CardPluginOptions } from './types';
 import type { cardPlugin } from './index';
 export declare const removeCard: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export declare const visitCardLink: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
@@ -12,3 +14,8 @@ export declare const getHyperlinkToolbarSettingsButton: (intl: IntlShape, editor
 export declare const getSettingsButton: (intl: IntlShape, editorAnalyticsApi: EditorAnalyticsAPI | undefined, userPreferencesLink: string | undefined) => FloatingToolbarItem<Command>;
 export declare const getSettingsButtonGroup: (intl: IntlShape, editorAnalyticsApi: EditorAnalyticsAPI | undefined, userPreferencesLink: string | undefined) => FloatingToolbarItem<Command>[];
 export declare const shouldRenderToolbarPulse: (embedEnabled: boolean, appearance: string, status: string, isDiscoverabilityEnabled: boolean) => boolean;
+export declare const getStartingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string, providerFactory: ProviderFactory, onEditLink: Command, metadata: {
+    url: string;
+    title: string;
+}) => FloatingToolbarItem<Command>[];
+export declare const getEndingToolbarItems: (options: CardPluginOptions, api?: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (intl: IntlShape, link: string) => FloatingToolbarItem<Command>[];

package/dist/types/types.d.ts

@@ -10,6 +10,7 @@ import type { SmartLinkEvents } from '@atlaskit/smart-card';
 import type { EditorCardPluginEvents } from './analytics/create-events-queue';
 import type { CardPluginEvent } from './analytics/types';
 import type { DatasourceTableLayout } from './ui/LayoutButton/types';
+export type CardType = CardAppearance | 'url' | 'datasource';
 export type DatasourceNode = Omit<Node, 'attrs'> & {
     readonly attrs: DatasourceAdf['attrs'] & Partial<RichMediaAttributes>;
 };

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

@@ -1,16 +1,17 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { type EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type Command } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardContext } from '@atlaskit/link-provider';
+import { type CardType } from '../types';
 export interface EditDatasourceButtonProps {
     intl: IntlShape;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     url?: string;
     editorView?: EditorView;
-    editorState: EditorState;
     cardContext?: CardContext;
+    currentAppearance?: CardType;
 }
-export declare const EditDatasourceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: EditDatasourceButtonProps) => jsx.JSX.Element;
+export declare const EditDatasourceButton: ({ intl, editorAnalyticsApi, url, editorView, currentAppearance, }: EditDatasourceButtonProps) => jsx.JSX.Element;
+export declare const editDatasource: (datasourceId: string, editorAnalyticsApi?: EditorAnalyticsAPI, appearance?: CardType, extensionKey?: string) => Command;