@atlaskit/editor-plugin-card 1.15.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-card
 
+## 2.0.0
+
+### Major Changes
+
+- [#106543](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106543)
+  [`2141b277161c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2141b277161c) -
+  Added API actions to retrieve toolbar items and removed `mountHyperlink` used to inject behavior
+  into hyperlink.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.15.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.15.0
 
 ### Minor Changes

package/dist/cjs/plugin.js

@@ -18,7 +18,6 @@ var _actions = require("./pm-plugins/actions");
 var _doc = require("./pm-plugins/doc");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
-var _mountHyperlink = require("./pm-plugins/mountHyperlink");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var _toolbar = require("./toolbar");
 var _ModalWithState = _interopRequireDefault(require("./ui/DatasourceModal/ModalWithState"));
@@ -28,10 +27,6 @@ var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 var _utils2 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * Card plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
- * from `@atlaskit/editor-core`.
- */
 var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
   var _options$lpLinkPicker;
   var options = _ref.config,
@@ -82,11 +77,6 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
           cardPluginEvents: cardPluginEvents,
           showUpgradeDiscoverability: showUpgradeDiscoverability
         }), api)
-      }, {
-        name: 'cardHyperlink',
-        plugin: function plugin() {
-          return (0, _mountHyperlink.mountHyperlinkPlugin)(api, options);
-        }
       }];
       plugins.push({
         name: 'cardKeymap',
@@ -122,8 +112,8 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
     actions: {
       hideLinkToolbar: _actions.hideLinkToolbar,
       queueCardsFromChangedTr: _doc.queueCardsFromChangedTr,
-      changeSelectedCardToLink: _doc.changeSelectedCardToLink,
-      setSelectedCardAppearance: _doc.setSelectedCardAppearance
+      getStartingToolbarItems: (0, _doc.getStartingToolbarItems)(options, api),
+      getEndingToolbarItems: (0, _doc.getEndingToolbarItems)(options, api)
     },
     pluginsOptions: {
       floatingToolbar: (0, _toolbar.floatingToolbar)(options, (_options$lpLinkPicker = options.lpLinkPicker) !== null && _options$lpLinkPicker !== void 0 ? _options$lpLinkPicker : false, options.platform, options.linkPicker, api, options.disableFloatingToolbar),

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

@@ -4,17 +4,23 @@ 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.editDatasource = 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.getStartingToolbarItems = exports.getLinkNodeType = exports.getEndingToolbarItems = 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 _react = _interopRequireDefault(require("react"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
+var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _toolbar = require("../toolbar");
+var _EditToolbarButton = require("../ui/EditToolbarButton");
+var _HyperlinkToolbarAppearance = require("../ui/HyperlinkToolbarAppearance");
+var _ToolbarViewedEvent = require("../ui/ToolbarViewedEvent");
 var _utils2 = require("../utils");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
@@ -568,7 +574,7 @@ var updateDatasourceStash = function updateDatasourceStash(tr, selectedNode) {
     }
   }
 };
-var editDatasource = exports.editDatasource = function editDatasource(datasourceId, _editorAnalyticsApi) {
+var editDatasource = exports.editDatasource = function editDatasource(datasourceId, editorAnalyticsApi) {
   return function (state, dispatch) {
     var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
     if (dispatch && datasourceType) {
@@ -587,4 +593,84 @@ var editDatasource = exports.editDatasource = function editDatasource(datasource
     }
     return false;
   };
+};
+var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
+  return function (intl, link, providerFactory, onEditLink, metadata) {
+    var isEditDropdownEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
+    var editLinkItem = isEditDropdownEnabled ? [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        var _api$analytics;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
+          key: "edit-toolbar-button",
+          intl: intl,
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+          url: link,
+          editorView: editorView,
+          onLinkEditClick: onEditLink
+        });
+      }
+    }] : [{
+      id: 'editor.link.edit',
+      testId: 'editor.link.edit',
+      type: 'button',
+      onClick: onEditLink,
+      title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
+      showTitle: true,
+      metadata: metadata
+    }];
+    return [{
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__PURE__*/_react.default.createElement(_ToolbarViewedEvent.ToolbarViewedEvent, {
+          key: "edit.link.menu.viewed",
+          url: link,
+          display: "url",
+          editorView: editorView
+        });
+      }
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        var _api$analytics2;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.createElement(_HyperlinkToolbarAppearance.HyperlinkToolbarAppearance, {
+          key: "link-appearance",
+          url: link,
+          intl: intl,
+          editorView: editorView,
+          editorState: editorView.state,
+          cardOptions: options,
+          providerFactory: providerFactory,
+          platform: options === null || options === void 0 ? void 0 : options.platform,
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+        });
+      }
+    }].concat(editLinkItem);
+  };
+};
+var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingToolbarItems(options, api) {
+  return function (intl, link) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.card.inject-settings-button')) {
+      /**
+       * Require either provider to be supplied (controls link preferences)
+       * Or explicit user preferences config in order to enable button
+       */
+      if (options.provider || options.userPreferencesLink) {
+        var _api$analytics3;
+        return [{
+          type: 'separator'
+        }, (0, _toolbar.getHyperlinkToolbarSettingsButton)(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
+      }
+    }
+    return [];
+  };
 };

package/dist/cjs/toolbar.js

@@ -222,11 +222,11 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      var _pluginInjectionApi$c;
-      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);
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, platform);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
-      var toolbarItems = [(0, _utils3.isEditDropdownEnabled)(platform) && cardOptions.allowDatasource ? {
+      var isEditDropdownEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
+      var toolbarItems = [isEditDropdownEnabled ? {
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
@@ -305,7 +305,6 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
-            var _pluginInjectionApi$c2;
             return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
               key: "link-appearance",
               url: url,
@@ -317,7 +316,6 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               allowBlockCards: allowBlockCards,
               platform: platform,
               editorAnalyticsApi: editorAnalyticsApi,
-              cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.card) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions,
               showUpgradeDiscoverability: showUpgradeDiscoverability
             });
           }
@@ -395,7 +393,7 @@ var getSettingsButtonGroup = exports.getSettingsButtonGroup = function getSettin
     type: 'separator'
   }];
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform) {
   var _node$attrs3;
   var toolbarItems = [];
   if ((0, _utils3.isDatasourceConfigEditable)(datasourceId) && !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
@@ -462,7 +460,6 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
           allowBlockCards: allowBlockCards,
           platform: platform,
           editorAnalyticsApi: editorAnalyticsApi,
-          cardActions: cardActions,
           showUpgradeDiscoverability: showUpgradeDiscoverability,
           isDatasourceView: true
         });

package/dist/cjs/ui/EditLinkToolbar.js

@@ -15,7 +15,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
-var _hooks = require("@atlaskit/editor-common/hooks");
 var _link = require("@atlaskit/editor-common/link");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -38,10 +37,7 @@ function HyperlinkAddToolbarWithState(_ref) {
     lpLinkPicker = _ref.lpLinkPicker,
     onClose = _ref.onClose,
     onEscapeCallback = _ref.onEscapeCallback,
-    onClickAwayCallback = _ref.onClickAwayCallback,
-    pluginInjectionApi = _ref.pluginInjectionApi;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['hyperlink']),
-    hyperlinkState = _useSharedPluginState.hyperlinkState;
+    onClickAwayCallback = _ref.onClickAwayCallback;
   return /*#__PURE__*/_react.default.createElement(_link.HyperlinkAddToolbar, {
     linkPickerOptions: linkPickerOptions,
     onSubmit: onSubmit,
@@ -54,8 +50,7 @@ function HyperlinkAddToolbarWithState(_ref) {
     lpLinkPicker: lpLinkPicker,
     onClose: onClose,
     onEscapeCallback: onEscapeCallback,
-    onClickAwayCallback: onClickAwayCallback,
-    hyperlinkPluginState: hyperlinkState
+    onClickAwayCallback: onClickAwayCallback
   });
 }
 
@@ -96,11 +91,9 @@ var EditLinkToolbar = exports.EditLinkToolbar = /*#__PURE__*/function (_React$Co
         text = _this$props.text,
         view = _this$props.view,
         _onSubmit = _this$props.onSubmit,
-        pluginInjectionApi = _this$props.pluginInjectionApi,
         forceFocusSelector = _this$props.forceFocusSelector,
         lpLinkPicker = _this$props.lpLinkPicker;
       return /*#__PURE__*/_react.default.createElement(HyperlinkAddToolbarWithState, {
-        pluginInjectionApi: pluginInjectionApi,
         view: view,
         linkPickerOptions: linkPickerOptions,
         providerFactory: providerFactory,
@@ -118,9 +111,7 @@ var EditLinkToolbar = exports.EditLinkToolbar = /*#__PURE__*/function (_React$Co
           }
         },
         onEscapeCallback: function onEscapeCallback(state, dispatch) {
-          var _pluginInjectionApi$h;
           var tr = state.tr;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 || _pluginInjectionApi$h.actions.hideLinkToolbar(tr);
           (0, _actions.hideLinkToolbar)(tr);
           forceFocusSelector === null || forceFocusSelector === void 0 || forceFocusSelector("[aria-label=\"".concat(_messages.linkToolbarMessages.editLink.defaultMessage, "\"]"))(tr);
           if (dispatch) {
@@ -130,9 +121,7 @@ var EditLinkToolbar = exports.EditLinkToolbar = /*#__PURE__*/function (_React$Co
           return false;
         },
         onClickAwayCallback: function onClickAwayCallback(state, dispatch) {
-          var _pluginInjectionApi$h2;
           var tr = state.tr;
-          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$h2 = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h2 === void 0 || _pluginInjectionApi$h2.actions.hideLinkToolbar(tr);
           if (dispatch) {
             dispatch(tr);
             return true;
@@ -163,8 +152,8 @@ var editLink = exports.editLink = function editLink(editorAnalyticsApi) {
 var buildEditLinkToolbar = exports.buildEditLinkToolbar = function buildEditLinkToolbar(_ref2) {
   var providerFactory = _ref2.providerFactory,
     node = _ref2.node,
-    linkPicker = _ref2.linkPicker,
     pluginInjectionApi = _ref2.pluginInjectionApi,
+    linkPicker = _ref2.linkPicker,
     lpLinkPicker = _ref2.lpLinkPicker;
   return {
     type: 'custom',
@@ -177,7 +166,6 @@ var buildEditLinkToolbar = exports.buildEditLinkToolbar = function buildEditLink
       }
       var displayInfo = (0, _utils.displayInfoForCard)(node, (0, _utils.findCardInfo)(view.state));
       return /*#__PURE__*/_react.default.createElement(EditLinkToolbar, {
-        pluginInjectionApi: pluginInjectionApi,
         key: idx,
         view: view,
         linkPickerOptions: linkPicker,

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -155,13 +155,12 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         editorState = _this$props.editorState,
         cardOptions = _this$props.cardOptions,
         platform = _this$props.platform,
-        editorAnalyticsApi = _this$props.editorAnalyticsApi,
-        cardActions = _this$props.cardActions;
+        editorAnalyticsApi = _this$props.editorAnalyticsApi;
       var supportedUrlsMap = this.state.supportedUrlsMap;
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, !(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
         url: url,
         intl: intl,
         editorState: editorState,
@@ -176,8 +175,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
         allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
         platform: platform,
-        editorAnalyticsApi: editorAnalyticsApi,
-        cardActions: cardActions
+        editorAnalyticsApi: editorAnalyticsApi
       }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
         intl: intl,
         url: url,

package/dist/cjs/ui/LinkToolbarAppearance.js

@@ -22,6 +22,7 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _localStorage = require("../common/local-storage");
+var _doc = require("../pm-plugins/doc");
 var _toolbar = require("../toolbar");
 var _utils2 = require("../utils");
 var _Pulse = require("./Pulse");
@@ -43,7 +44,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDropdown", function (view, cardContext) {
-      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3, _cardContext$store2;
+      var _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3, _cardContext$store2;
       var _this$props = _this.props,
         url = _this$props.url,
         intl = _this$props.intl,
@@ -54,7 +55,6 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
         platform = _this$props.platform,
         editorAnalyticsApi = _this$props.editorAnalyticsApi,
-        cardActions = _this$props.cardActions,
         _this$props$showUpgra = _this$props.showUpgradeDiscoverability,
         showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? true : _this$props$showUpgra,
         isDatasourceView = _this$props.isDatasourceView;
@@ -74,7 +74,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
       var embedOption = allowEmbeds && preview && {
         appearance: 'embed',
         title: intl.formatMessage(_messages.cardMessages.embed),
-        onClick: (_cardActions$setSelec = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _cardActions$setSelec !== void 0 ? _cardActions$setSelec : defaultCommand,
+        onClick: (_setSelectedCardAppea = (0, _doc.setSelectedCardAppearance)('embed', editorAnalyticsApi)) !== null && _setSelectedCardAppea !== void 0 ? _setSelectedCardAppea : defaultCommand,
         selected: currentAppearance === 'embed',
         hidden: false,
         testId: 'embed-appearance',
@@ -84,7 +84,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
       var blockCardOption = allowBlockCards && {
         appearance: 'block',
         title: intl.formatMessage(_messages.cardMessages.block),
-        onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
+        onClick: (_setSelectedCardAppea2 = (0, _doc.setSelectedCardAppearance)('block', editorAnalyticsApi)) !== null && _setSelectedCardAppea2 !== void 0 ? _setSelectedCardAppea2 : defaultCommand,
         selected: currentAppearance === 'block' && !isDatasourceView,
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
@@ -92,7 +92,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
       };
       var options = [{
         title: intl.formatMessage(_messages.cardMessages.url),
-        onClick: (0, _card.commandWithMetadata)((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
+        onClick: (0, _card.commandWithMetadata)((_changeSelectedCardTo = (0, _doc.changeSelectedCardToLink)(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _changeSelectedCardTo !== void 0 ? _changeSelectedCardTo : defaultCommand, {
           action: _analytics.ACTION.CHANGED_TYPE
         }),
         selected: !currentAppearance && !isDatasourceView,
@@ -100,7 +100,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
       }, {
         appearance: 'inline',
         title: intl.formatMessage(_messages.cardMessages.inline),
-        onClick: (_cardActions$setSelec3 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _cardActions$setSelec3 !== void 0 ? _cardActions$setSelec3 : defaultCommand,
+        onClick: (_setSelectedCardAppea3 = (0, _doc.setSelectedCardAppearance)('inline', editorAnalyticsApi)) !== null && _setSelectedCardAppea3 !== void 0 ? _setSelectedCardAppea3 : defaultCommand,
         selected: currentAppearance === 'inline',
         testId: 'inline-appearance'
       }];

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.isEditDropdownEnabled = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.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,9 +87,6 @@ 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/plugin.js

@@ -7,10 +7,9 @@ import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } f
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createEventsQueue } from './analytics/create-events-queue';
 import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
-import { changeSelectedCardToLink, queueCardsFromChangedTr, setSelectedCardAppearance } from './pm-plugins/doc';
+import { getEndingToolbarItems, getStartingToolbarItems, queueCardsFromChangedTr } from './pm-plugins/doc';
 import { cardKeymap } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
-import { mountHyperlinkPlugin } from './pm-plugins/mountHyperlink';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { floatingToolbar } from './toolbar';
 import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
@@ -18,10 +17,6 @@ import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalyt
 import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
 import LayoutButton from './ui/LayoutButton';
 import { isDatasourceConfigEditable } from './utils';
-/**
- * Card plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
- * from `@atlaskit/editor-core`.
- */
 export const cardPlugin = ({
   config: options,
   api
@@ -74,9 +69,6 @@ export const cardPlugin = ({
           cardPluginEvents,
           showUpgradeDiscoverability
         }, api)
-      }, {
-        name: 'cardHyperlink',
-        plugin: () => mountHyperlinkPlugin(api, options)
       }];
       plugins.push({
         name: 'cardKeymap',
@@ -114,8 +106,8 @@ export const cardPlugin = ({
     actions: {
       hideLinkToolbar,
       queueCardsFromChangedTr,
-      changeSelectedCardToLink,
-      setSelectedCardAppearance
+      getStartingToolbarItems: getStartingToolbarItems(options, api),
+      getEndingToolbarItems: getEndingToolbarItems(options, api)
     },
     pluginsOptions: {
       floatingToolbar: floatingToolbar(options, (_options$lpLinkPicker = options.lpLinkPicker) !== null && _options$lpLinkPicker !== void 0 ? _options$lpLinkPicker : false, options.platform, options.linkPicker, api, options.disableFloatingToolbar),

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

@@ -1,15 +1,22 @@
+import React from 'react';
 import isEqual from 'lodash/isEqual';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
+import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { getDatasourceType, getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { getHyperlinkToolbarSettingsButton } from '../toolbar';
+import { EditToolbarButton } from '../ui/EditToolbarButton';
+import { HyperlinkToolbarAppearance } from '../ui/HyperlinkToolbarAppearance';
+import { ToolbarViewedEvent } from '../ui/ToolbarViewedEvent';
 import { appearanceForNodeType, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
 import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash, showDatasourceModal } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
+
 /**
  * Attempt to replace the link into the respective card.
  */
@@ -555,7 +562,7 @@ const updateDatasourceStash = (tr, selectedNode) => {
     }
   }
 };
-export const editDatasource = (datasourceId, _editorAnalyticsApi) => (state, dispatch) => {
+export const editDatasource = (datasourceId, editorAnalyticsApi) => (state, dispatch) => {
   const datasourceType = getDatasourceType(datasourceId);
   if (dispatch && datasourceType) {
     const {
@@ -574,4 +581,80 @@ export const editDatasource = (datasourceId, _editorAnalyticsApi) => (state, dis
     return true;
   }
   return false;
+};
+export const getStartingToolbarItems = (options, api) => {
+  return (intl, link, providerFactory, onEditLink, metadata) => {
+    const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
+    const editLinkItem = isEditDropdownEnabled ? [{
+      type: 'custom',
+      fallback: [],
+      render: editorView => {
+        var _api$analytics;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(EditToolbarButton, {
+          key: "edit-toolbar-button",
+          intl: intl,
+          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
+          url: link,
+          editorView: editorView,
+          onLinkEditClick: onEditLink
+        });
+      }
+    }] : [{
+      id: 'editor.link.edit',
+      testId: 'editor.link.edit',
+      type: 'button',
+      onClick: onEditLink,
+      title: intl.formatMessage(linkToolbarMessages.editLink),
+      showTitle: true,
+      metadata: metadata
+    }];
+    return [{
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
+        key: "edit.link.menu.viewed",
+        url: link,
+        display: "url",
+        editorView: editorView
+      })
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: editorView => {
+        var _api$analytics2;
+        if (!editorView) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearance, {
+          key: "link-appearance",
+          url: link,
+          intl: intl,
+          editorView: editorView,
+          editorState: editorView.state,
+          cardOptions: options,
+          providerFactory: providerFactory,
+          platform: options === null || options === void 0 ? void 0 : options.platform,
+          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
+        });
+      }
+    }, ...editLinkItem];
+  };
+};
+export const getEndingToolbarItems = (options, api) => (intl, link) => {
+  if (getBooleanFF('platform.editor.card.inject-settings-button')) {
+    /**
+     * Require either provider to be supplied (controls link preferences)
+     * Or explicit user preferences config in order to enable button
+     */
+    if (options.provider || options.userPreferencesLink) {
+      var _api$analytics3;
+      return [{
+        type: 'separator'
+      }, getHyperlinkToolbarSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
+    }
+  }
+  return [];
 };