@atlaskit/editor-plugin-card 1.14.5 → 1.15.0

package/LICENSE.md

@@ -1,13 +1,11 @@
 Copyright 2023 Atlassian Pty Ltd
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in
+compliance with the License. You may obtain a copy of the License at
 
     http://www.apache.org/licenses/LICENSE-2.0
 
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
+Unless required by applicable law or agreed to in writing, software distributed under the License is
+distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing permissions and limitations under the
+License.

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateCardViaDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.getAttrsForAppearance = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
+exports.updateCardViaDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.getAttrsForAppearance = exports.editDatasource = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -567,4 +567,24 @@ var updateDatasourceStash = function updateDatasourceStash(tr, selectedNode) {
       }
     }
   }
+};
+var editDatasource = exports.editDatasource = function editDatasource(datasourceId, _editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
+    if (dispatch && datasourceType) {
+      var tr = state.tr;
+      (0, _actions.showDatasourceModal)(datasourceType)(tr);
+      // editorAnalyticsApi?.attachAnalyticsEvent(
+      //   buildEditLinkPayload(
+      //     type as
+      //       | ACTION_SUBJECT_ID.CARD_INLINE
+      //       | ACTION_SUBJECT_ID.CARD_BLOCK
+      //       | ACTION_SUBJECT_ID.EMBEDS,
+      //   ),
+      // )(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
 };

package/dist/cjs/toolbar.js

@@ -29,6 +29,7 @@ var _main = require("./pm-plugins/main");
 var _DatasourceAppearanceButton = require("./ui/DatasourceAppearanceButton");
 var _EditDatasourceButton = require("./ui/EditDatasourceButton");
 var _EditLinkToolbar = require("./ui/EditLinkToolbar");
+var _EditToolbarButton = require("./ui/EditToolbarButton");
 var _LinkToolbarAppearance = require("./ui/LinkToolbarAppearance");
 var _ToolbarViewedEvent = require("./ui/ToolbarViewedEvent");
 var _utils3 = require("./utils");
@@ -225,7 +226,20 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, platform, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
-      var toolbarItems = [{
+      var toolbarItems = [(0, _utils3.isEditDropdownEnabled)(platform) && cardOptions.allowDatasource ? {
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
+            key: "edit-toolbar-item",
+            url: url,
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi,
+            editorView: editorView,
+            onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
+          });
+        }
+      } : {
         id: 'editor.link.edit',
         type: 'button',
         selected: false,
@@ -324,7 +338,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           type: 'separator'
         }]));
       }
-      var shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+      var shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource && !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
       if (shouldShowDatasourceEditButton) {
         toolbarItems.unshift({
           type: 'custom',
@@ -384,7 +398,7 @@ var getSettingsButtonGroup = exports.getSettingsButtonGroup = function getSettin
 var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) {
   var _node$attrs3;
   var toolbarItems = [];
-  if ((0, _utils3.isDatasourceConfigEditable)(datasourceId)) {
+  if ((0, _utils3.isDatasourceConfigEditable)(datasourceId) && !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
     toolbarItems.push({
       id: 'editor.edit.datasource',
       type: 'button',
@@ -392,12 +406,28 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       metadata: metadata,
       className: 'datasource-edit',
       title: intl.formatMessage(_messages.linkToolbarMessages.editDatasource),
-      onClick: (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi),
+      onClick: (0, _doc.editDatasource)(datasourceId, editorAnalyticsApi),
       testId: 'datasource-edit-button'
     }, {
       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() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -417,7 +447,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push({
+    toolbarItems.push.apply(toolbarItems, [{
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
@@ -453,7 +483,7 @@ 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 (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

package/dist/cjs/ui/EditDatasourceButton.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.editDatasource = exports.EditDatasourceButton = void 0;
+exports.EditDatasourceButton = void 0;
 var _react = require("@emotion/react");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
-var _utils = require("@atlaskit/editor-common/utils");
 var _primitives = require("@atlaskit/primitives");
-var _actions = require("../pm-plugins/actions");
-var _utils2 = require("../utils");
+var _doc = require("../pm-plugins/doc");
+var _utils = require("../utils");
 var _CardContextProvider = require("./CardContextProvider");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 /** @jsx jsx */
@@ -34,7 +33,7 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       cardContext: cardContext
     }),
     datasourceId = _useFetchDatasourceIn.datasourceId;
-  if (!datasourceId || !(0, _utils2.isDatasourceConfigEditable)(datasourceId)) {
+  if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
     return null;
   }
   if (url) {
@@ -56,7 +55,7 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
     icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),
     selected: false,
     onClick: function onClick() {
-      return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
+      return dispatchCommand((0, _doc.editDatasource)(datasourceId, editorAnalyticsApi));
     },
     testId: 'card-edit-datasource-button'
   }), (0, _react.jsx)(_ui.FloatingToolbarSeparator, null));
@@ -78,24 +77,4 @@ var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourc
       cardContext: cardContext
     });
   });
-};
-var editDatasource = exports.editDatasource = function editDatasource(datasourceId, editorAnalyticsApi) {
-  return function (state, dispatch) {
-    var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
-    if (dispatch && datasourceType) {
-      var tr = state.tr;
-      (0, _actions.showDatasourceModal)(datasourceType)(tr);
-      // editorAnalyticsApi?.attachAnalyticsEvent(
-      //   buildEditLinkPayload(
-      //     type as
-      //       | ACTION_SUBJECT_ID.CARD_INLINE
-      //       | ACTION_SUBJECT_ID.CARD_BLOCK
-      //       | ACTION_SUBJECT_ID.EMBEDS,
-      //   ),
-      // )(tr);
-      dispatch(tr);
-      return true;
-    }
-    return false;
-  };
 };

package/dist/cjs/ui/EditToolbarButton.js

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditToolbarButton = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _menu = require("@atlaskit/menu");
+var _primitives = require("@atlaskit/primitives");
+var _doc = require("../pm-plugins/doc");
+var _utils = require("../utils");
+var _CardContextProvider = require("./CardContextProvider");
+var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
+/** @jsx jsx */
+
+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 _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var containerRef = (0, _react.useRef)();
+  var toggleOpen = function toggleOpen() {
+    return setIsOpen(function (open) {
+      return !open;
+    });
+  };
+  var onClose = function onClose() {
+    return setIsOpen(false);
+  };
+  var dispatchCommand = (0, _react.useCallback)(function (fn) {
+    if (editorView) {
+      fn === null || fn === void 0 || fn(editorView.state, editorView.dispatch);
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+    }
+  }, [editorView]);
+  var onEditLink = (0, _react.useCallback)(function () {
+    dispatchCommand(onLinkEditClick);
+  }, [dispatchCommand, onLinkEditClick]);
+  var shouldFallbackToEditButton = (0, _react.useMemo)(function () {
+    if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
+      return true;
+    }
+    if (url) {
+      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 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));
+  }
+  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, {
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      cardContext: cardContext,
+      onLinkEditClick: onLinkEditClick
+    });
+  });
+};

package/dist/cjs/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isEditDropdownEnabled = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -87,6 +87,9 @@ var isDatasourceConfigEditable = exports.isDatasourceConfigEditable = function i
   }
   return datasourcesWithConfigModal.includes(datasourceId);
 };
+var isEditDropdownEnabled = exports.isEditDropdownEnabled = function isEditDropdownEnabled(platform) {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile';
+};
 
 /**
  * Typeguard that checks node attributes are datasource node attributes

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

@@ -2,12 +2,12 @@ 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 { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
+import { getDatasourceType, 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 { appearanceForNodeType, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
-import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
+import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash, showDatasourceModal } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
 /**
@@ -554,4 +554,24 @@ const updateDatasourceStash = (tr, selectedNode) => {
       }
     }
   }
+};
+export const editDatasource = (datasourceId, _editorAnalyticsApi) => (state, dispatch) => {
+  const datasourceType = getDatasourceType(datasourceId);
+  if (dispatch && datasourceType) {
+    const {
+      tr
+    } = state;
+    showDatasourceModal(datasourceType)(tr);
+    // editorAnalyticsApi?.attachAnalyticsEvent(
+    //   buildEditLinkPayload(
+    //     type as
+    //       | ACTION_SUBJECT_ID.CARD_INLINE
+    //       | ACTION_SUBJECT_ID.CARD_BLOCK
+    //       | ACTION_SUBJECT_ID.EMBEDS,
+    //   ),
+    // )(tr);
+    dispatch(tr);
+    return true;
+  }
+  return false;
 };

package/dist/es2019/toolbar.js

@@ -14,14 +14,15 @@ 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 } from './pm-plugins/doc';
+import { changeSelectedCardToText, editDatasource } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
 import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
-import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
+import { EditDatasourceButton } from './ui/EditDatasourceButton';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
+import { EditToolbarButton } from './ui/EditToolbarButton';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
-import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, titleUrlPairFromNode } from './utils';
+import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, isEditDropdownEnabled, titleUrlPairFromNode } from './utils';
 export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -219,7 +220,18 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     const {
       inlineCard
     } = state.schema.nodes;
-    const toolbarItems = [{
+    const toolbarItems = [isEditDropdownEnabled(platform) && cardOptions.allowDatasource ? {
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
+        key: "edit-toolbar-item",
+        url: url,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        editorView: editorView,
+        onLinkEditClick: editLink(editorAnalyticsApi)
+      })
+    } : {
       id: 'editor.link.edit',
       type: 'button',
       selected: false,
@@ -318,7 +330,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         type: 'separator'
       });
     }
-    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
     if (shouldShowDatasourceEditButton) {
       toolbarItems.unshift({
         type: 'custom',
@@ -375,7 +387,7 @@ export const getSettingsButtonGroup = (intl, editorAnalyticsApi, userPreferences
 const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) => {
   var _node$attrs3;
   const toolbarItems = [];
-  if (isDatasourceConfigEditable(datasourceId)) {
+  if (isDatasourceConfigEditable(datasourceId) && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
     toolbarItems.push({
       id: 'editor.edit.datasource',
       type: 'button',
@@ -389,6 +401,20 @@ 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 = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -446,7 +472,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       })
     }, {
       type: 'separator'
-    });
+    }, ...(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [...editDropdownWithSeparator] : []));
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

package/dist/es2019/ui/EditDatasourceButton.js

@@ -2,9 +2,8 @@
 import { css, jsx } from '@emotion/react';
 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 { showDatasourceModal } from '../pm-plugins/actions';
+import { editDatasource } from '../pm-plugins/doc';
 import { isDatasourceConfigEditable } from '../utils';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
@@ -71,24 +70,4 @@ export const EditDatasourceButton = ({
     editorState: editorState,
     cardContext: cardContext
   }));
-};
-export const editDatasource = (datasourceId, editorAnalyticsApi) => (state, dispatch) => {
-  const datasourceType = getDatasourceType(datasourceId);
-  if (dispatch && datasourceType) {
-    const {
-      tr
-    } = state;
-    showDatasourceModal(datasourceType)(tr);
-    // editorAnalyticsApi?.attachAnalyticsEvent(
-    //   buildEditLinkPayload(
-    //     type as
-    //       | ACTION_SUBJECT_ID.CARD_INLINE
-    //       | ACTION_SUBJECT_ID.CARD_BLOCK
-    //       | ACTION_SUBJECT_ID.EMBEDS,
-    //   ),
-    // )(tr);
-    dispatch(tr);
-    return true;
-  }
-  return false;
 };

package/dist/es2019/ui/EditToolbarButton.js

@@ -0,0 +1,123 @@
+/** @jsx jsx */
+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 { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
+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 { CardContextProvider } from './CardContextProvider';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+const dropdownExpandContainer = css({
+  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+});
+const EditButtonWithCardContext = ({
+  cardContext,
+  intl,
+  editorAnalyticsApi,
+  url,
+  editorView,
+  onLinkEditClick
+}) => {
+  const {
+    datasourceId
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef();
+  const toggleOpen = () => setIsOpen(open => !open);
+  const onClose = () => setIsOpen(false);
+  const dispatchCommand = useCallback(fn => {
+    if (editorView) {
+      fn === null || fn === void 0 ? void 0 : fn(editorView.state, editorView.dispatch);
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+    }
+  }, [editorView]);
+  const onEditLink = useCallback(() => {
+    dispatchCommand(onLinkEditClick);
+  }, [dispatchCommand, onLinkEditClick]);
+  const shouldFallbackToEditButton = useMemo(() => {
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return true;
+    }
+    if (url) {
+      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 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));
+  }
+  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
+}) => {
+  return jsx(CardContextProvider, null, ({
+    cardContext
+  }) => jsx(EditButtonWithCardContext, {
+    url: url,
+    intl: intl,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editorView: editorView,
+    cardContext: cardContext,
+    onLinkEditClick: onLinkEditClick
+  }));
+};

package/dist/es2019/utils.js

@@ -73,6 +73,9 @@ export const isDatasourceConfigEditable = datasourceId => {
   }
   return datasourcesWithConfigModal.includes(datasourceId);
 };
+export const isEditDropdownEnabled = platform => {
+  return getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile';
+};
 
 /**
  * Typeguard that checks node attributes are datasource node attributes