@atlaskit/editor-plugin-card 2.0.3 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @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

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/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/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/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-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -37,7 +37,7 @@
     "@atlaskit/button": "^17.17.1",
     "@atlaskit/custom-steps": "^0.2.0",
     "@atlaskit/dropdown-menu": "^12.10.2",
-    "@atlaskit/editor-common": "^82.1.0",
+    "@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",
@@ -50,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",