@atlaskit/editor-plugin-card 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-card
 
+## 2.0.4
+
+### Patch Changes
+
+- [#108600](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108600)
+  [`ab0ef9cd9d368`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab0ef9cd9d368) -
+  [ux] Fixed the toolbar edit button in the new dropdown button for assets.
+- Updated dependencies
+
+## 2.0.3
+
+### Patch Changes
+
+- [#108480](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108480)
+  [`8552b1dc7f80d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8552b1dc7f80d) -
+  Creating new dropdown component for configuring links
+
 ## 2.0.2
 
 ### Patch Changes

package/dist/cjs/toolbar.js

@@ -226,7 +226,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var isEditDropdownEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
-      var toolbarItems = [isEditDropdownEnabled ? {
+      var editItems = isEditDropdownEnabled ? [{
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
@@ -239,7 +239,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
           });
         }
-      } : {
+      }] : [{
         id: 'editor.link.edit',
         type: 'button',
         selected: false,
@@ -250,7 +250,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }, {
+      }];
+      var toolbarItems = [].concat(editItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: _shortcut.default,
@@ -260,7 +261,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: visitCardLink(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }], (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'copy-button',
         supportsViewMode: true,
         items: [{
@@ -410,23 +411,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
-  var editDropdownWithSeparator = [{
-    type: 'custom',
-    fallback: [],
-    render: function render(editorView) {
-      return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
-        key: "edit-toolbar-item",
-        url: metadata.url,
-        intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi,
-        editorView: editorView,
-        onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
-      });
-    }
-  }, {
-    type: 'separator'
-  }];
-  var canShowMainToolbar = function canShowMainToolbar() {
+  var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
       return false;
@@ -440,12 +425,12 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     // FF to enable additional toolbar buttons based on if the datasource is configurable or not
     return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !(0, _utils3.isDatasourceConfigEditable)(datasourceId);
   };
-  if (canShowMainToolbar()) {
+  if (canShowAppearanceSwitch()) {
     var allowBlockCards = cardOptions.allowBlockCards,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push.apply(toolbarItems, [{
+    toolbarItems.push({
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
@@ -480,7 +465,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       }
     }, {
       type: 'separator'
-    }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [].concat(editDropdownWithSeparator) : [])));
+    });
+  }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+    toolbarItems.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
+          datasourceId: datasourceId,
+          key: "edit-toolbar-item",
+          url: metadata.url,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
+        });
+      }
+    });
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

package/dist/cjs/ui/EditToolbarButton.js

@@ -24,19 +24,20 @@ var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 var dropdownExpandContainer = (0, _react2.css)({
   margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
 });
-var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
-  var cardContext = _ref.cardContext,
-    intl = _ref.intl,
-    editorAnalyticsApi = _ref.editorAnalyticsApi,
-    url = _ref.url,
-    editorView = _ref.editorView,
-    onLinkEditClick = _ref.onLinkEditClick;
-  var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
-      isRegularCardNode: true,
-      url: url,
-      cardContext: cardContext
-    }),
-    datasourceId = _useFetchDatasourceIn.datasourceId;
+var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
+  var _response$datasourceI;
+  var url = props.url,
+    cardContext = props.cardContext,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  var response = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+    isRegularCardNode: true,
+    url: url,
+    cardContext: cardContext
+  });
+  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),
     isOpen = _useState2[0],
@@ -61,73 +62,104 @@ var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
   var onEditLink = (0, _react.useCallback)(function () {
     dispatchCommand(onLinkEditClick);
   }, [dispatchCommand, onLinkEditClick]);
-  var shouldFallbackToEditButton = (0, _react.useMemo)(function () {
+  var editVariant = (0, _react.useMemo)(function () {
+    var hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
-      return true;
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
     }
-    if (url) {
+    if (hasUrl) {
       var _cardContext$store, _urlState$error;
       var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
       if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
-        return true;
+        return 'edit-link';
       }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
     }
-    return false;
   }, [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));
     }
   }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
-  if (shouldFallbackToEditButton) {
-    return (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-      testId: "edit-link",
-      onClick: onEditLink
-    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editLink));
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editLink)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      }
+    case 'edit-datasource':
+      {
+        return (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(_messages.linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editDatasourceStandalone)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      }
+    case 'edit-dropdown':
+      {
+        var trigger = (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: (0, _react2.jsx)("span", {
+            css: dropdownExpandContainer
+          }, (0, _react2.jsx)(_chevronDown.default, {
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownTriggerTitle)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+        return (0, _react2.jsx)(_primitives.Flex, {
+          ref: containerRef
+        }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: _uiMenu.ArrowKeyNavigationType.MENU
+          }
+        }, (0, _react2.jsx)(_menu.ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_menu.ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
   }
-  var trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-    testId: "edit-dropdown-trigger",
-    iconAfter: (0, _react2.jsx)("span", {
-      css: dropdownExpandContainer
-    }, (0, _react2.jsx)(_chevronDown.default, {
-      label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
-    })),
-    onClick: toggleOpen,
-    selected: isOpen,
-    disabled: false,
-    ariaHasPopup: true
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownTriggerTitle));
-  return (0, _react2.jsx)(_primitives.Flex, {
-    ref: containerRef
-  }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
-    mountTo: containerRef.current,
-    isOpen: isOpen,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
-    trigger: trigger,
-    scrollableElement: containerRef.current,
-    arrowKeyNavigationProviderOptions: {
-      type: _uiMenu.ArrowKeyNavigationType.MENU
-    }
-  }, (0, _react2.jsx)(_menu.ButtonItem, {
-    key: "edit.link",
-    onClick: onEditLink,
-    testId: "edit-dropdown-edit-link-item"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_menu.ButtonItem, {
-    key: "edit.datasource",
-    onClick: onEditDatasource,
-    testId: "edit-dropdown-edit-datasource-item"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditDatasourceTitle))));
 };
-var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(_ref2) {
-  var intl = _ref2.intl,
-    editorAnalyticsApi = _ref2.editorAnalyticsApi,
-    url = _ref2.url,
-    editorView = _ref2.editorView,
-    onLinkEditClick = _ref2.onLinkEditClick;
-  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
-    var cardContext = _ref3.cardContext;
-    return (0, _react2.jsx)(EditButtonWithCardContext, {
+var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(props) {
+  var datasourceId = props.datasourceId,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    url = props.url,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref) {
+    var cardContext = _ref.cardContext;
+    return (0, _react2.jsx)(EditToolbarButtonWithCardContext, {
+      datasourceId: datasourceId,
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
+var _excluded = ["triggerRef"];
+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 ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
+  var testId = props.testId;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var configureLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
+  var goToLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
+  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+        props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+      return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, props, {
+        spacing: "none",
+        ref: triggerRef
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          padding: "0 ".concat("var(--ds-space-025, 2px)")
+        }
+      }, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+        label: configureLinkLabel,
+        size: 'small',
+        testId: "".concat(testId, "-icon")
+      })));
+    },
+    spacing: "compact",
+    placement: "bottom-start"
+  }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
+      label: goToLinkLabel,
+      size: "small"
+    })
+  }, goToLinkLabel), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_preferences.default, {
+      label: configureLinkLabel,
+      size: "small"
+    })
+  }, configureLinkLabel)));
+};
+var _default = exports.default = ConfigureLinkDropdown;

package/dist/es2019/toolbar.js

@@ -220,7 +220,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       inlineCard
     } = state.schema.nodes;
     const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
-    const toolbarItems = [isEditDropdownEnabled ? {
+    const editItems = isEditDropdownEnabled ? [{
       type: 'custom',
       fallback: [],
       render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
@@ -231,7 +231,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         editorView: editorView,
         onLinkEditClick: editLink(editorAnalyticsApi)
       })
-    } : {
+    }] : [{
       id: 'editor.link.edit',
       type: 'button',
       selected: false,
@@ -242,7 +242,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       onClick: editLink(editorAnalyticsApi)
     }, {
       type: 'separator'
-    }, {
+    }];
+    const toolbarItems = [...editItems, {
       id: 'editor.link.openLink',
       type: 'button',
       icon: OpenIcon,
@@ -397,21 +398,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       type: 'separator'
     });
   }
-  const editDropdownWithSeparator = [{
-    type: 'custom',
-    fallback: [],
-    render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
-      key: "edit-toolbar-item",
-      url: metadata.url,
-      intl: intl,
-      editorAnalyticsApi: editorAnalyticsApi,
-      editorView: editorView,
-      onLinkEditClick: editLink(editorAnalyticsApi)
-    })
-  }, {
-    type: 'separator'
-  }];
-  const canShowMainToolbar = () => {
+  const canShowAppearanceSwitch = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
       return false;
@@ -425,7 +412,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     // FF to enable additional toolbar buttons based on if the datasource is configurable or not
     return getBooleanFF('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !isDatasourceConfigEditable(datasourceId);
   };
-  if (canShowMainToolbar()) {
+  if (canShowAppearanceSwitch()) {
     const {
       allowBlockCards,
       allowEmbeds,
@@ -467,7 +454,22 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       })
     }, {
       type: 'separator'
-    }, ...(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [...editDropdownWithSeparator] : []));
+    });
+  }
+  if (getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+    toolbarItems.push({
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
+        datasourceId: datasourceId,
+        key: "edit-toolbar-item",
+        url: metadata.url,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        editorView: editorView,
+        onLinkEditClick: editLink(editorAnalyticsApi)
+      })
+    });
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

package/dist/es2019/ui/EditToolbarButton.js

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
@@ -15,21 +15,22 @@ import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const dropdownExpandContainer = css({
   margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
 });
-const EditButtonWithCardContext = ({
-  cardContext,
-  intl,
-  editorAnalyticsApi,
-  url,
-  editorView,
-  onLinkEditClick
-}) => {
+const EditToolbarButtonWithCardContext = props => {
+  var _response$datasourceI;
   const {
-    datasourceId
-  } = useFetchDatasourceInfo({
+    url,
+    cardContext,
+    intl,
+    editorAnalyticsApi,
+    editorView,
+    onLinkEditClick
+  } = props;
+  const response = useFetchDatasourceInfo({
     isRegularCardNode: true,
     url,
     cardContext
   });
+  const datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef();
   const toggleOpen = () => setIsOpen(open => !open);
@@ -45,74 +46,106 @@ const EditButtonWithCardContext = ({
   const onEditLink = useCallback(() => {
     dispatchCommand(onLinkEditClick);
   }, [dispatchCommand, onLinkEditClick]);
-  const shouldFallbackToEditButton = useMemo(() => {
+  const editVariant = useMemo(() => {
+    const hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
-      return true;
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
     }
-    if (url) {
+    if (hasUrl) {
       var _cardContext$store, _urlState$error;
       const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
       if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
-        return true;
+        return 'edit-link';
       }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
     }
-    return false;
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   const onEditDatasource = useCallback(() => {
     if (datasourceId) {
       dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     }
   }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
-  if (shouldFallbackToEditButton) {
-    return jsx(Button, {
-      testId: "edit-link",
-      onClick: onEditLink
-    }, jsx(FormattedMessage, linkToolbarMessages.editLink));
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, jsx(FormattedMessage, linkToolbarMessages.editLink)), jsx(Separator, null));
+      }
+    case 'edit-datasource':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, jsx(FormattedMessage, linkToolbarMessages.editDatasourceStandalone)), jsx(Separator, null));
+      }
+    case 'edit-dropdown':
+      {
+        const trigger = jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: jsx("span", {
+            css: dropdownExpandContainer
+          }, jsx(ExpandIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, jsx(FormattedMessage, messages.editDropdownTriggerTitle)), jsx(Separator, null));
+        return jsx(Flex, {
+          ref: containerRef
+        }, jsx(UiDropdown, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.MENU
+          }
+        }, jsx(ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
   }
-  const trigger = jsx(Button, {
-    testId: "edit-dropdown-trigger",
-    iconAfter: jsx("span", {
-      css: dropdownExpandContainer
-    }, jsx(ExpandIcon, {
-      label: intl.formatMessage(messages.editDropdownTriggerTitle)
-    })),
-    onClick: toggleOpen,
-    selected: isOpen,
-    disabled: false,
-    ariaHasPopup: true
-  }, jsx(FormattedMessage, messages.editDropdownTriggerTitle));
-  return jsx(Flex, {
-    ref: containerRef
-  }, jsx(UiDropdown, {
-    mountTo: containerRef.current,
-    isOpen: isOpen,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
-    trigger: trigger,
-    scrollableElement: containerRef.current,
-    arrowKeyNavigationProviderOptions: {
-      type: ArrowKeyNavigationType.MENU
-    }
-  }, jsx(ButtonItem, {
-    key: "edit.link",
-    onClick: onEditLink,
-    testId: "edit-dropdown-edit-link-item"
-  }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
-    key: "edit.datasource",
-    onClick: onEditDatasource,
-    testId: "edit-dropdown-edit-datasource-item"
-  }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
 };
-export const EditToolbarButton = ({
-  intl,
-  editorAnalyticsApi,
-  url,
-  editorView,
-  onLinkEditClick
-}) => {
+export const EditToolbarButton = props => {
+  const {
+    datasourceId,
+    intl,
+    editorAnalyticsApi,
+    url,
+    editorView,
+    onLinkEditClick
+  } = props;
   return jsx(CardContextProvider, null, ({
     cardContext
-  }) => jsx(EditButtonWithCardContext, {
+  }) => jsx(EditToolbarButtonWithCardContext, {
+    datasourceId: datasourceId,
     url: url,
     intl: intl,
     editorAnalyticsApi: editorAnalyticsApi,

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

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { useIntl } from "react-intl-next";
+import Button from "@atlaskit/button/new";
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";
+import { cardMessages as messages } from "@atlaskit/editor-common/messages";
+import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
+import PreferencesIcon from "@atlaskit/icon/glyph/preferences";
+import ShortcutIcon from "@atlaskit/icon/glyph/shortcut";
+const ConfigureLinkDropdown = props => {
+  const {
+    testId
+  } = props;
+  const intl = useIntl();
+  const configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  const goToLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: ({
+      triggerRef,
+      ...props
+    }) => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+      spacing: "none",
+      ref: triggerRef
+    }), /*#__PURE__*/React.createElement("span", {
+      style: {
+        padding: `0 ${"var(--ds-space-025, 2px)"}`
+      }
+    }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: configureLinkLabel,
+      size: 'small',
+      testId: `${testId}-icon`
+    }))),
+    spacing: "compact",
+    placement: "bottom-start"
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
+      label: goToLinkLabel,
+      size: "small"
+    })
+  }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
+      label: configureLinkLabel,
+      size: "small"
+    })
+  }, configureLinkLabel)));
+};
+export default ConfigureLinkDropdown;

package/dist/esm/toolbar.js

@@ -216,7 +216,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
-      var toolbarItems = [isEditDropdownEnabled ? {
+      var editItems = isEditDropdownEnabled ? [{
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
@@ -229,7 +229,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             onLinkEditClick: editLink(editorAnalyticsApi)
           });
         }
-      } : {
+      }] : [{
         id: 'editor.link.edit',
         type: 'button',
         selected: false,
@@ -240,7 +240,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: editLink(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }, {
+      }];
+      var toolbarItems = [].concat(editItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: OpenIcon,
@@ -250,7 +251,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: visitCardLink(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }], _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'copy-button',
         supportsViewMode: true,
         items: [{
@@ -400,23 +401,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
-  var editDropdownWithSeparator = [{
-    type: 'custom',
-    fallback: [],
-    render: function render(editorView) {
-      return /*#__PURE__*/React.createElement(EditToolbarButton, {
-        key: "edit-toolbar-item",
-        url: metadata.url,
-        intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi,
-        editorView: editorView,
-        onLinkEditClick: editLink(editorAnalyticsApi)
-      });
-    }
-  }, {
-    type: 'separator'
-  }];
-  var canShowMainToolbar = function canShowMainToolbar() {
+  var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
       return false;
@@ -430,12 +415,12 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     // FF to enable additional toolbar buttons based on if the datasource is configurable or not
     return getBooleanFF('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !isDatasourceConfigEditable(datasourceId);
   };
-  if (canShowMainToolbar()) {
+  if (canShowAppearanceSwitch()) {
     var allowBlockCards = cardOptions.allowBlockCards,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push.apply(toolbarItems, [{
+    toolbarItems.push({
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
@@ -470,7 +455,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       }
     }, {
       type: 'separator'
-    }].concat(_toConsumableArray(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [].concat(editDropdownWithSeparator) : [])));
+    });
+  }
+  if (getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+    toolbarItems.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__PURE__*/React.createElement(EditToolbarButton, {
+          datasourceId: datasourceId,
+          key: "edit-toolbar-item",
+          url: metadata.url,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          onLinkEditClick: editLink(editorAnalyticsApi)
+        });
+      }
+    });
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

package/dist/esm/ui/EditToolbarButton.js

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
@@ -16,19 +16,20 @@ import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var dropdownExpandContainer = css({
   margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
 });
-var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
-  var cardContext = _ref.cardContext,
-    intl = _ref.intl,
-    editorAnalyticsApi = _ref.editorAnalyticsApi,
-    url = _ref.url,
-    editorView = _ref.editorView,
-    onLinkEditClick = _ref.onLinkEditClick;
-  var _useFetchDatasourceIn = useFetchDatasourceInfo({
-      isRegularCardNode: true,
-      url: url,
-      cardContext: cardContext
-    }),
-    datasourceId = _useFetchDatasourceIn.datasourceId;
+var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
+  var _response$datasourceI;
+  var url = props.url,
+    cardContext = props.cardContext,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  var response = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url: url,
+    cardContext: cardContext
+  });
+  var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -53,73 +54,104 @@ var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
   var onEditLink = useCallback(function () {
     dispatchCommand(onLinkEditClick);
   }, [dispatchCommand, onLinkEditClick]);
-  var shouldFallbackToEditButton = useMemo(function () {
+  var editVariant = useMemo(function () {
+    var hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
-      return true;
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
     }
-    if (url) {
+    if (hasUrl) {
       var _cardContext$store, _urlState$error;
       var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
       if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
-        return true;
+        return 'edit-link';
       }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
     }
-    return false;
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   var onEditDatasource = useCallback(function () {
     if (datasourceId) {
       dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     }
   }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
-  if (shouldFallbackToEditButton) {
-    return jsx(Button, {
-      testId: "edit-link",
-      onClick: onEditLink
-    }, jsx(FormattedMessage, linkToolbarMessages.editLink));
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, jsx(FormattedMessage, linkToolbarMessages.editLink)), jsx(Separator, null));
+      }
+    case 'edit-datasource':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, jsx(FormattedMessage, linkToolbarMessages.editDatasourceStandalone)), jsx(Separator, null));
+      }
+    case 'edit-dropdown':
+      {
+        var trigger = jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: jsx("span", {
+            css: dropdownExpandContainer
+          }, jsx(ExpandIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, jsx(FormattedMessage, messages.editDropdownTriggerTitle)), jsx(Separator, null));
+        return jsx(Flex, {
+          ref: containerRef
+        }, jsx(UiDropdown, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.MENU
+          }
+        }, jsx(ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
   }
-  var trigger = jsx(Button, {
-    testId: "edit-dropdown-trigger",
-    iconAfter: jsx("span", {
-      css: dropdownExpandContainer
-    }, jsx(ExpandIcon, {
-      label: intl.formatMessage(messages.editDropdownTriggerTitle)
-    })),
-    onClick: toggleOpen,
-    selected: isOpen,
-    disabled: false,
-    ariaHasPopup: true
-  }, jsx(FormattedMessage, messages.editDropdownTriggerTitle));
-  return jsx(Flex, {
-    ref: containerRef
-  }, jsx(UiDropdown, {
-    mountTo: containerRef.current,
-    isOpen: isOpen,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
-    trigger: trigger,
-    scrollableElement: containerRef.current,
-    arrowKeyNavigationProviderOptions: {
-      type: ArrowKeyNavigationType.MENU
-    }
-  }, jsx(ButtonItem, {
-    key: "edit.link",
-    onClick: onEditLink,
-    testId: "edit-dropdown-edit-link-item"
-  }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
-    key: "edit.datasource",
-    onClick: onEditDatasource,
-    testId: "edit-dropdown-edit-datasource-item"
-  }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
 };
-export var EditToolbarButton = function EditToolbarButton(_ref2) {
-  var intl = _ref2.intl,
-    editorAnalyticsApi = _ref2.editorAnalyticsApi,
-    url = _ref2.url,
-    editorView = _ref2.editorView,
-    onLinkEditClick = _ref2.onLinkEditClick;
-  return jsx(CardContextProvider, null, function (_ref3) {
-    var cardContext = _ref3.cardContext;
-    return jsx(EditButtonWithCardContext, {
+export var EditToolbarButton = function EditToolbarButton(props) {
+  var datasourceId = props.datasourceId,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    url = props.url,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  return jsx(CardContextProvider, null, function (_ref) {
+    var cardContext = _ref.cardContext;
+    return jsx(EditToolbarButtonWithCardContext, {
+      datasourceId: datasourceId,
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

package/dist/esm/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["triggerRef"];
+import React from 'react';
+import { useIntl } from "react-intl-next";
+import Button from "@atlaskit/button/new";
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";
+import { cardMessages as messages } from "@atlaskit/editor-common/messages";
+import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
+import PreferencesIcon from "@atlaskit/icon/glyph/preferences";
+import ShortcutIcon from "@atlaskit/icon/glyph/shortcut";
+var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
+  var testId = props.testId;
+  var intl = useIntl();
+  var configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  var goToLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    trigger: function trigger(_ref) {
+      var triggerRef = _ref.triggerRef,
+        props = _objectWithoutProperties(_ref, _excluded);
+      return /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+        spacing: "none",
+        ref: triggerRef
+      }), /*#__PURE__*/React.createElement("span", {
+        style: {
+          padding: "0 ".concat("var(--ds-space-025, 2px)")
+        }
+      }, /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        label: configureLinkLabel,
+        size: 'small',
+        testId: "".concat(testId, "-icon")
+      })));
+    },
+    spacing: "compact",
+    placement: "bottom-start"
+  }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
+      label: goToLinkLabel,
+      size: "small"
+    })
+  }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
+      label: configureLinkLabel,
+      size: "small"
+    })
+  }, configureLinkLabel)));
+};
+export default ConfigureLinkDropdown;

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

@@ -4,7 +4,8 @@ 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';
-export interface EditToolbarButtonProps {
+export interface EditDatasourceToolbarButtonProps {
+    datasourceId?: string;
     intl: IntlShape;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     url?: string;
@@ -12,4 +13,4 @@ export interface EditToolbarButtonProps {
     cardContext?: CardContext;
     onLinkEditClick: Command;
 }
-export declare const EditToolbarButton: ({ intl, editorAnalyticsApi, url, editorView, onLinkEditClick, }: EditToolbarButtonProps) => jsx.JSX.Element;
+export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;

package/dist/types/ui/LeftIconOverlay/ConfigureLinkDropdown/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type SmallLinkDropdownProps = {
+    testId: string;
+};
+declare const ConfigureLinkDropdown: (props: SmallLinkDropdownProps) => JSX.Element;
+export default ConfigureLinkDropdown;

package/dist/types-ts4.5/ui/EditToolbarButton.d.ts

@@ -4,7 +4,8 @@ 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';
-export interface EditToolbarButtonProps {
+export interface EditDatasourceToolbarButtonProps {
+    datasourceId?: string;
     intl: IntlShape;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     url?: string;
@@ -12,4 +13,4 @@ export interface EditToolbarButtonProps {
     cardContext?: CardContext;
     onLinkEditClick: Command;
 }
-export declare const EditToolbarButton: ({ intl, editorAnalyticsApi, url, editorView, onLinkEditClick, }: EditToolbarButtonProps) => jsx.JSX.Element;
+export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;

package/dist/types-ts4.5/ui/LeftIconOverlay/ConfigureLinkDropdown/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type SmallLinkDropdownProps = {
+    testId: string;
+};
+declare const ConfigureLinkDropdown: (props: SmallLinkDropdownProps) => JSX.Element;
+export default ConfigureLinkDropdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,8 +34,10 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/analytics-next": "^9.3.0",
+    "@atlaskit/button": "^17.17.1",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^82.1.0",
+    "@atlaskit/dropdown-menu": "^12.10.2",
+    "@atlaskit/editor-common": "^82.2.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-decorations": "^1.1.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
@@ -48,7 +50,7 @@
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/link-analytics": "^8.3.0",
-    "@atlaskit/link-client-extension": "^1.8.0",
+    "@atlaskit/link-client-extension": "^1.9.0",
     "@atlaskit/link-datasource": "^2.3.0",
     "@atlaskit/linking-common": "^5.7.0",
     "@atlaskit/linking-types": "^8.9.0",