@atlaskit/editor-plugin-card 5.3.1 → 5.3.2

package/dist/es2019/ui/toolbar.js

@@ -393,9 +393,11 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         allowEmbeds,
         allowBlockCards: allowBlockCards,
         editorAnalyticsApi,
+        allowDatasource: cardOptions.allowDatasource,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
-        settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
-      }), ...(showDatasourceAppearance ? [{
+        settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
+        isDatasourceView: isDatasource
+      }), ...(showDatasourceAppearance && editorExperiment('platform_editor_controls', 'control') ? [{
         type: 'custom',
         fallback: [],
         render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
@@ -484,49 +486,57 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     const {
       url
     } = metadata;
-    toolbarItems.push(editorExperiment('platform_editor_controls', 'control') ? {
-      type: 'custom',
-      fallback: [],
-      render: editorView => {
-        return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
-          key: "link-appearance",
-          url: url,
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'custom',
+        fallback: [],
+        render: editorView => {
+          return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+            key: "link-appearance",
+            url: url,
+            intl: intl,
+            currentAppearance: currentAppearance,
+            editorView: editorView,
+            editorState: state,
+            allowEmbeds: allowEmbeds,
+            allowBlockCards: allowBlockCards,
+            editorAnalyticsApi: editorAnalyticsApi,
+            showUpgradeDiscoverability: showUpgradeDiscoverability,
+            isDatasourceView: true
+          });
+        }
+      }, {
+        type: 'custom',
+        fallback: [],
+        render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
           intl: intl,
-          currentAppearance: currentAppearance,
+          editorAnalyticsApi: editorAnalyticsApi,
+          url: url,
           editorView: editorView,
           editorState: state,
-          allowEmbeds: allowEmbeds,
-          allowBlockCards: allowBlockCards,
-          editorAnalyticsApi: editorAnalyticsApi,
-          showUpgradeDiscoverability: showUpgradeDiscoverability,
-          isDatasourceView: true
-        });
-      }
-    } : getLinkAppearanceDropdown({
-      url,
-      intl,
-      currentAppearance,
-      editorState: state,
-      allowEmbeds,
-      allowBlockCards: allowBlockCards,
-      editorAnalyticsApi,
-      showUpgradeDiscoverability: showUpgradeDiscoverability,
-      settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
-    }), {
-      type: 'custom',
-      fallback: [],
-      render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
-        intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi,
-        url: url,
-        editorView: editorView,
+          selected: true,
+          inputMethod: INPUT_METHOD.FLOATING_TB
+        })
+      }, {
+        type: 'separator'
+      });
+    } else {
+      toolbarItems.push(getLinkAppearanceDropdown({
+        url,
+        intl,
+        currentAppearance,
         editorState: state,
-        selected: true,
-        inputMethod: INPUT_METHOD.FLOATING_TB
-      })
-    }, {
-      type: 'separator'
-    });
+        allowEmbeds,
+        allowBlockCards: allowBlockCards,
+        editorAnalyticsApi,
+        allowDatasource: cardOptions.allowDatasource,
+        showUpgradeDiscoverability: showUpgradeDiscoverability,
+        settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
+        isDatasourceView: true
+      }), {
+        type: 'separator'
+      });
+    }
   }
   toolbarItems.push({
     type: 'custom',
@@ -635,27 +645,12 @@ export const getStartingToolbarItems = (options, api) => {
         intl,
         editorState: state,
         editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+        allowDatasource: options.allowDatasource,
         editorPluginApi: api,
         cardOptions: options,
-        settingsConfig: getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)
-      }), ...(options !== null && options !== void 0 && options.allowDatasource ? [{
-        type: 'custom',
-        fallback: [],
-        render: editorView => {
-          var _api$analytics4;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
-            intl: intl,
-            editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
-            url: link,
-            editorView: editorView,
-            editorState: editorView.state,
-            inputMethod: INPUT_METHOD.FLOATING_TB
-          });
-        }
-      }] : []), {
+        settingsConfig: getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
+        isDatasourceView: false
+      }), {
         type: 'separator'
       }, ...editLinkItem];
     }
@@ -672,7 +667,7 @@ export const getStartingToolbarItems = (options, api) => {
       type: 'custom',
       fallback: [],
       render: editorView => {
-        var _api$analytics5;
+        var _api$analytics4;
         if (!editorView) {
           return null;
         }
@@ -683,7 +678,7 @@ export const getStartingToolbarItems = (options, api) => {
           editorView: editorView,
           editorState: editorView.state,
           cardOptions: options,
-          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions,
+          editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
           editorPluginApi: api
         });
       }
@@ -696,10 +691,10 @@ export const getEndingToolbarItems = (options, api) => (intl, link) => {
    * Or explicit user preferences config in order to enable button
    */
   if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
-    var _api$analytics6;
+    var _api$analytics5;
     return [{
       type: 'separator'
-    }, getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, options.userPreferencesLink)];
+    }, getSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
   }
   return [];
 };

package/dist/esm/ui/DatasourceDropdownOption.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import SmartLinkListIcon from '@atlaskit/icon/core/smart-link-list';
+import { buildDatasourceAdf } from '@atlaskit/link-datasource';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { ButtonItem } from '@atlaskit/menu';
+import { updateCardViaDatasource } from '../pm-plugins/doc';
+import { pluginKey } from '../pm-plugins/plugin-key';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+export var datasourceDisplayInformation = {
+  title: messages.datasourceAppearanceTitle,
+  icon: SmartLinkListIcon,
+  // eslint-disable-next-line @atlaskit/editor/no-re-export
+  iconFallback: SmartLinkListIcon
+};
+export var DatasourceDropdownOption = function DatasourceDropdownOption(_ref) {
+  var allowDatasource = _ref.allowDatasource,
+    intl = _ref.intl,
+    url = _ref.url,
+    selected = _ref.selected,
+    inputMethod = _ref.inputMethod,
+    dispatchCommand = _ref.dispatchCommand;
+  var cardContext = useSmartLinkContext();
+  var _useFetchDatasourceIn = useFetchDatasourceInfo({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    datasourceId = _useFetchDatasourceIn.datasourceId,
+    parameters = _useFetchDatasourceIn.parameters;
+  if (!allowDatasource || !datasourceId || !parameters) {
+    return null;
+  }
+  var onChangeAppearance = function onChangeAppearance(editorState, _dispatch, view) {
+    var _state$datasourceStas, _state$datasourceStas2;
+    if (!view || !datasourceId || !parameters) {
+      return false;
+    }
+    var state = pluginKey.getState(editorState);
+    var newAdf = buildDatasourceAdf({
+      id: datasourceId,
+      parameters: parameters,
+      views: (_state$datasourceStas = state === null || state === void 0 || (_state$datasourceStas2 = state.datasourceStash[url]) === null || _state$datasourceStas2 === void 0 ? void 0 : _state$datasourceStas2.views) !== null && _state$datasourceStas !== void 0 ? _state$datasourceStas : [{
+        type: 'table'
+      }]
+    }, url);
+    var selection = editorState.selection;
+    var existingNode;
+    // Check if the selection contains a link mark
+    var $pos = editorState.doc.resolve(selection.from);
+    var isLinkMark = $pos.marks().some(function (mark) {
+      return mark.type === editorState.schema.marks.link;
+    });
+
+    // When selection is a TextNode and a link Mark is present return that node
+    if (selection instanceof NodeSelection) {
+      existingNode = selection.node;
+    } else if (isLinkMark) {
+      var _editorState$doc$node;
+      existingNode = (_editorState$doc$node = editorState.doc.nodeAt(selection.from)) !== null && _editorState$doc$node !== void 0 ? _editorState$doc$node : undefined;
+    }
+    if (existingNode) {
+      updateCardViaDatasource({
+        state: editorState,
+        node: existingNode,
+        newAdf: newAdf,
+        view: view,
+        sourceEvent: undefined,
+        isDeletingConfig: true,
+        inputMethod: inputMethod
+      });
+      return true;
+    }
+    return false;
+  };
+  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 null;
+    }
+  }
+  return /*#__PURE__*/React.createElement(ButtonItem, {
+    key: intl.formatMessage(messages.datasourceAppearanceTitle),
+    iconBefore: SmartLinkListIcon({
+      label: intl.formatMessage(messages.datasourceAppearanceTitle)
+    }),
+    onClick: function onClick() {
+      return dispatchCommand(onChangeAppearance);
+    },
+    isSelected: selected
+  }, intl.formatMessage(messages.datasourceAppearanceTitle));
+};

package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -15,8 +15,9 @@ var HyperlinkDropdown = function HyperlinkDropdown(props) {
     intl = props.intl,
     editorState = props.editorState,
     cardOptions = props.cardOptions,
-    editorAnalyticsApi = props.editorAnalyticsApi;
-
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    allowDatasource = props.allowDatasource,
+    isDatasourceView = props.isDatasourceView;
   // Ignored via go/ees005
   // eslint-disable-next-line require-await
   var getProvider = /*#__PURE__*/function () {
@@ -129,9 +130,11 @@ var HyperlinkDropdown = function HyperlinkDropdown(props) {
     editorState: editorState,
     allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
     allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
+    allowDatasource: allowDatasource,
     editorAnalyticsApi: editorAnalyticsApi,
     dispatchCommand: props.dispatchCommand,
-    settingsConfig: props.settingsConfig
+    settingsConfig: props.settingsConfig,
+    isDatasourceView: isDatasourceView
   });
 };
 export var getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropdown(_ref3) {
@@ -141,7 +144,9 @@ export var getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropd
     editorAnalyticsApi = _ref3.editorAnalyticsApi,
     editorPluginApi = _ref3.editorPluginApi,
     settingsConfig = _ref3.settingsConfig,
-    cardOptions = _ref3.cardOptions;
+    cardOptions = _ref3.cardOptions,
+    allowDatasource = _ref3.allowDatasource,
+    isDatasourceView = _ref3.isDatasourceView;
   var alignmentItemOptions = {
     render: function render(props) {
       if (!editorState) {
@@ -155,7 +160,9 @@ export var getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropd
         editorPluginApi: editorPluginApi,
         dispatchCommand: props.dispatchCommand,
         settingsConfig: settingsConfig,
-        cardOptions: cardOptions
+        cardOptions: cardOptions,
+        allowDatasource: allowDatasource,
+        isDatasourceView: isDatasourceView
       });
     },
     width: 200,

package/dist/esm/ui/LinkToolbarAppearanceDropdown.js

@@ -10,6 +10,7 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { useSmartCardContext } from '@atlaskit/link-provider';
 import { ButtonItem, LinkItem, MenuGroup, Section } from '@atlaskit/menu';
 import { changeSelectedCardToLink, setSelectedCardAppearance } from '../pm-plugins/doc';
+import { DatasourceDropdownOption, datasourceDisplayInformation } from './DatasourceDropdownOption';
 import { getUnavailableMessage } from './LinkToolbarAppearance';
 export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
   var _cardContext$value, _setSelectedCardAppea, _setSelectedCardAppea2, _changeSelectedCardTo, _setSelectedCardAppea3;
@@ -20,6 +21,7 @@ export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
     allowEmbeds = _ref.allowEmbeds,
     _ref$allowBlockCards = _ref.allowBlockCards,
     allowBlockCards = _ref$allowBlockCards === void 0 ? true : _ref$allowBlockCards,
+    allowDatasource = _ref.allowDatasource,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     _ref$showUpgradeDisco = _ref.showUpgradeDiscoverability,
     showUpgradeDiscoverability = _ref$showUpgradeDisco === void 0 ? true : _ref$showUpgradeDisco,
@@ -102,6 +104,13 @@ export var LinkAppearanceMenu = function LinkAppearanceMenu(_ref) {
       },
       isSelected: option.selected
     }, option.title);
+  }), /*#__PURE__*/React.createElement(DatasourceDropdownOption, {
+    allowDatasource: allowDatasource,
+    intl: intl,
+    url: url !== null && url !== void 0 ? url : '',
+    selected: Boolean(isDatasourceView),
+    inputMethod: INPUT_METHOD.FLOATING_TB,
+    dispatchCommand: dispatchCommand
   })), /*#__PURE__*/React.createElement(Section, {
     hasSeparator: true
   }, /*#__PURE__*/React.createElement(LinkItem, {
@@ -120,6 +129,7 @@ export var getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2)
     allowEmbeds = _ref2.allowEmbeds,
     _ref2$allowBlockCards = _ref2.allowBlockCards,
     allowBlockCards = _ref2$allowBlockCards === void 0 ? true : _ref2$allowBlockCards,
+    allowDatasource = _ref2.allowDatasource,
     editorAnalyticsApi = _ref2.editorAnalyticsApi,
     _ref2$showUpgradeDisc = _ref2.showUpgradeDiscoverability,
     showUpgradeDiscoverability = _ref2$showUpgradeDisc === void 0 ? true : _ref2$showUpgradeDisc,
@@ -137,6 +147,7 @@ export var getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2)
         editorAnalyticsApi: editorAnalyticsApi,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         isDatasourceView: isDatasourceView,
+        allowDatasource: allowDatasource,
         dispatchCommand: props.dispatchCommand,
         settingsConfig: settingsConfig
       });
@@ -144,7 +155,7 @@ export var getLinkAppearanceDropdown = function getLinkAppearanceDropdown(_ref2)
     width: 200,
     height: 400
   };
-  var currentAppearanceDisplayInformation = appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
+  var currentAppearanceDisplayInformation = isDatasourceView ? datasourceDisplayInformation : appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
   var alignmentToolbarItem = {
     id: 'card-appearance',
     testId: 'card-appearance-dropdown',

package/dist/esm/ui/toolbar.js

@@ -391,9 +391,11 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           allowEmbeds: allowEmbeds,
           allowBlockCards: allowBlockCards,
           editorAnalyticsApi: editorAnalyticsApi,
+          allowDatasource: cardOptions.allowDatasource,
           showUpgradeDiscoverability: showUpgradeDiscoverability,
-          settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
-        })], _toConsumableArray(showDatasourceAppearance ? [{
+          settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
+          isDatasourceView: isDatasource
+        })], _toConsumableArray(showDatasourceAppearance && editorExperiment('platform_editor_controls', 'control') ? [{
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
@@ -481,51 +483,59 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push(editorExperiment('platform_editor_controls', 'control') ? {
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
-          key: "link-appearance",
-          url: url,
-          intl: intl,
-          currentAppearance: currentAppearance,
-          editorView: editorView,
-          editorState: state,
-          allowEmbeds: allowEmbeds,
-          allowBlockCards: allowBlockCards,
-          editorAnalyticsApi: editorAnalyticsApi,
-          showUpgradeDiscoverability: showUpgradeDiscoverability,
-          isDatasourceView: true
-        });
-      }
-    } : getLinkAppearanceDropdown({
-      url: url,
-      intl: intl,
-      currentAppearance: currentAppearance,
-      editorState: state,
-      allowEmbeds: allowEmbeds,
-      allowBlockCards: allowBlockCards,
-      editorAnalyticsApi: editorAnalyticsApi,
-      showUpgradeDiscoverability: showUpgradeDiscoverability,
-      settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink)
-    }), {
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
-          intl: intl,
-          editorAnalyticsApi: editorAnalyticsApi,
-          url: url,
-          editorView: editorView,
-          editorState: state,
-          selected: true,
-          inputMethod: INPUT_METHOD.FLOATING_TB
-        });
-      }
-    }, {
-      type: 'separator'
-    });
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+            key: "link-appearance",
+            url: url,
+            intl: intl,
+            currentAppearance: currentAppearance,
+            editorView: editorView,
+            editorState: state,
+            allowEmbeds: allowEmbeds,
+            allowBlockCards: allowBlockCards,
+            editorAnalyticsApi: editorAnalyticsApi,
+            showUpgradeDiscoverability: showUpgradeDiscoverability,
+            isDatasourceView: true
+          });
+        }
+      }, {
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi,
+            url: url,
+            editorView: editorView,
+            editorState: state,
+            selected: true,
+            inputMethod: INPUT_METHOD.FLOATING_TB
+          });
+        }
+      }, {
+        type: 'separator'
+      });
+    } else {
+      toolbarItems.push(getLinkAppearanceDropdown({
+        url: url,
+        intl: intl,
+        currentAppearance: currentAppearance,
+        editorState: state,
+        allowEmbeds: allowEmbeds,
+        allowBlockCards: allowBlockCards,
+        editorAnalyticsApi: editorAnalyticsApi,
+        allowDatasource: cardOptions.allowDatasource,
+        showUpgradeDiscoverability: showUpgradeDiscoverability,
+        settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
+        isDatasourceView: true
+      }), {
+        type: 'separator'
+      });
+    }
   }
   toolbarItems.push({
     type: 'custom',
@@ -638,29 +648,14 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
         intl: intl,
         editorState: state,
         editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
+        allowDatasource: options.allowDatasource,
         editorPluginApi: api,
         cardOptions: options,
-        settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)
-      })].concat(_toConsumableArray(options !== null && options !== void 0 && options.allowDatasource ? [{
-        type: 'custom',
-        fallback: [],
-        render: function render(editorView) {
-          var _api$analytics4;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
-            intl: intl,
-            editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
-            url: link,
-            editorView: editorView,
-            editorState: editorView.state,
-            inputMethod: INPUT_METHOD.FLOATING_TB
-          });
-        }
-      }] : []), [{
+        settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
+        isDatasourceView: false
+      }), {
         type: 'separator'
-      }], editLinkItem);
+      }].concat(editLinkItem);
     }
     return [{
       type: 'custom',
@@ -677,7 +672,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
-        var _api$analytics5;
+        var _api$analytics4;
         if (!editorView) {
           return null;
         }
@@ -688,7 +683,7 @@ export var getStartingToolbarItems = function getStartingToolbarItems(options, a
           editorView: editorView,
           editorState: editorView.state,
           cardOptions: options,
-          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions,
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
           editorPluginApi: api
         });
       }
@@ -702,10 +697,10 @@ export var getEndingToolbarItems = function getEndingToolbarItems(options, api)
      * Or explicit user preferences config in order to enable button
      */
     if ((options.provider || options.userPreferencesLink) && editorExperiment('platform_editor_controls', 'control')) {
-      var _api$analytics6;
+      var _api$analytics5;
       return [{
         type: 'separator'
-      }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions, options.userPreferencesLink)];
+      }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
     }
     return [];
   };

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { Command } from '@atlaskit/editor-common/types';
+interface Props {
+    allowDatasource?: boolean;
+    intl: IntlShape;
+    url: string;
+    selected: boolean;
+    inputMethod: string;
+    dispatchCommand: (command: Command) => void;
+}
+export declare const datasourceDisplayInformation: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    icon: {
+        (props: import("@atlaskit/icon").NewCoreIconProps): JSX.Element;
+        displayName: string;
+    };
+    iconFallback: {
+        (props: import("@atlaskit/icon").NewCoreIconProps): JSX.Element;
+        displayName: string;
+    };
+};
+export declare const DatasourceDropdownOption: ({ allowDatasource, intl, url, selected, inputMethod, dispatchCommand, }: Props) => React.JSX.Element | null;
+export {};

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

@@ -1,7 +1,9 @@
 import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { HyperlinkToolbarAppearanceProps } from './HyperlinkToolbarAppearance';
-export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
+export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, allowDatasource, isDatasourceView, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
     settingsConfig: FloatingToolbarItem<Command>;
     editorState?: EditorState | undefined;
+    allowDatasource?: boolean | undefined;
+    isDatasourceView?: boolean | undefined;
 }) => FloatingToolbarDropdown<Command>;

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import { type LinkToolbarAppearanceProps } from './LinkToolbarAppearance';
-export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, dispatchCommand, settingsConfig, }: LinkToolbarAppearanceProps & {
+type Props = LinkToolbarAppearanceProps & {
     dispatchCommand: (command: Command) => void;
     settingsConfig: FloatingToolbarItem<Command>;
-}) => React.JSX.Element | null;
-export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
+    allowDatasource?: boolean;
+};
+export declare const LinkAppearanceMenu: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, dispatchCommand, settingsConfig, }: Props) => React.JSX.Element | null;
+export declare const getLinkAppearanceDropdown: ({ url, intl, currentAppearance, editorState, allowEmbeds, allowBlockCards, allowDatasource, editorAnalyticsApi, showUpgradeDiscoverability, isDatasourceView, settingsConfig, }: LinkToolbarAppearanceProps & {
     settingsConfig: FloatingToolbarItem<Command>;
+    allowDatasource?: boolean | undefined;
 }) => FloatingToolbarDropdown<Command>;
+export {};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { IntlShape } from 'react-intl-next';
+import type { Command } from '@atlaskit/editor-common/types';
+interface Props {
+    allowDatasource?: boolean;
+    intl: IntlShape;
+    url: string;
+    selected: boolean;
+    inputMethod: string;
+    dispatchCommand: (command: Command) => void;
+}
+export declare const datasourceDisplayInformation: {
+    title: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    icon: {
+        (props: import("@atlaskit/icon").NewCoreIconProps): JSX.Element;
+        displayName: string;
+    };
+    iconFallback: {
+        (props: import("@atlaskit/icon").NewCoreIconProps): JSX.Element;
+        displayName: string;
+    };
+};
+export declare const DatasourceDropdownOption: ({ allowDatasource, intl, url, selected, inputMethod, dispatchCommand, }: Props) => React.JSX.Element | null;
+export {};

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

@@ -1,7 +1,9 @@
 import type { Command, FloatingToolbarDropdown, FloatingToolbarItem } from '@atlaskit/editor-common/types';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { HyperlinkToolbarAppearanceProps } from './HyperlinkToolbarAppearance';
-export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
+export declare const getHyperlinkAppearanceDropdown: ({ url, intl, editorState, editorAnalyticsApi, editorPluginApi, settingsConfig, cardOptions, allowDatasource, isDatasourceView, }: Omit<HyperlinkToolbarAppearanceProps, "editorState"> & {
     settingsConfig: FloatingToolbarItem<Command>;
     editorState?: EditorState | undefined;
+    allowDatasource?: boolean | undefined;
+    isDatasourceView?: boolean | undefined;
 }) => FloatingToolbarDropdown<Command>;