@atlaskit/editor-plugin-card 5.3.0 → 5.3.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-card
 
+## 5.3.2
+
+### Patch Changes
+
+- [#127208](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127208)
+  [`c2951b65d3aac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c2951b65d3aac) -
+  [ux] ED-26896 Move list option to link dropdown
+- Updated dependencies
+
+## 5.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.3.0
 
 ### Minor Changes

package/dist/cjs/ui/DatasourceDropdownOption.js

@@ -0,0 +1,101 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.datasourceDisplayInformation = exports.DatasourceDropdownOption = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _smartLinkList = _interopRequireDefault(require("@atlaskit/icon/core/smart-link-list"));
+var _linkDatasource = require("@atlaskit/link-datasource");
+var _linkProvider = require("@atlaskit/link-provider");
+var _menu = require("@atlaskit/menu");
+var _doc = require("../pm-plugins/doc");
+var _pluginKey = require("../pm-plugins/plugin-key");
+var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
+var datasourceDisplayInformation = exports.datasourceDisplayInformation = {
+  title: _messages.cardMessages.datasourceAppearanceTitle,
+  icon: _smartLinkList.default,
+  // eslint-disable-next-line @atlaskit/editor/no-re-export
+  iconFallback: _smartLinkList.default
+};
+var DatasourceDropdownOption = exports.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 = (0, _linkProvider.useSmartLinkContext)();
+  var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.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.pluginKey.getState(editorState);
+    var newAdf = (0, _linkDatasource.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 _state.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) {
+      (0, _doc.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.default.createElement(_menu.ButtonItem, {
+    key: intl.formatMessage(_messages.cardMessages.datasourceAppearanceTitle),
+    iconBefore: (0, _smartLinkList.default)({
+      label: intl.formatMessage(_messages.cardMessages.datasourceAppearanceTitle)
+    }),
+    onClick: function onClick() {
+      return dispatchCommand(onChangeAppearance);
+    },
+    isSelected: selected
+  }, intl.formatMessage(_messages.cardMessages.datasourceAppearanceTitle));
+};

package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -25,8 +25,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 () {
@@ -139,9 +140,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
   });
 };
 var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropdown(_ref3) {
@@ -151,7 +154,9 @@ var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = fu
     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) {
@@ -165,7 +170,9 @@ var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = fu
         editorPluginApi: editorPluginApi,
         dispatchCommand: props.dispatchCommand,
         settingsConfig: settingsConfig,
-        cardOptions: cardOptions
+        cardOptions: cardOptions,
+        allowDatasource: allowDatasource,
+        isDatasourceView: isDatasourceView
       });
     },
     width: 200,

package/dist/cjs/ui/LinkToolbarAppearanceDropdown.js

@@ -15,6 +15,7 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _linkProvider = require("@atlaskit/link-provider");
 var _menu = require("@atlaskit/menu");
 var _doc = require("../pm-plugins/doc");
+var _DatasourceDropdownOption = require("./DatasourceDropdownOption");
 var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
 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; }
@@ -27,6 +28,7 @@ var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMen
     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,
@@ -109,6 +111,13 @@ var LinkAppearanceMenu = exports.LinkAppearanceMenu = function LinkAppearanceMen
       },
       isSelected: option.selected
     }, option.title);
+  }), /*#__PURE__*/_react.default.createElement(_DatasourceDropdownOption.DatasourceDropdownOption, {
+    allowDatasource: allowDatasource,
+    intl: intl,
+    url: url !== null && url !== void 0 ? url : '',
+    selected: Boolean(isDatasourceView),
+    inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
+    dispatchCommand: dispatchCommand
   })), /*#__PURE__*/_react.default.createElement(_menu.Section, {
     hasSeparator: true
   }, /*#__PURE__*/_react.default.createElement(_menu.LinkItem, {
@@ -127,6 +136,7 @@ var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function get
     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,
@@ -144,6 +154,7 @@ var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function get
         editorAnalyticsApi: editorAnalyticsApi,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         isDatasourceView: isDatasourceView,
+        allowDatasource: allowDatasource,
         dispatchCommand: props.dispatchCommand,
         settingsConfig: settingsConfig
       });
@@ -151,7 +162,7 @@ var getLinkAppearanceDropdown = exports.getLinkAppearanceDropdown = function get
     width: 200,
     height: 400
   };
-  var currentAppearanceDisplayInformation = _card.appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
+  var currentAppearanceDisplayInformation = isDatasourceView ? _DatasourceDropdownOption.datasourceDisplayInformation : _card.appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
   var alignmentToolbarItem = {
     id: 'card-appearance',
     testId: 'card-appearance-dropdown',

package/dist/cjs/ui/toolbar.js

@@ -401,9 +401,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)
-        })], (0, _toConsumableArray2.default)(showDatasourceAppearance ? [{
+          settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
+          isDatasourceView: isDatasource
+        })], (0, _toConsumableArray2.default)(showDatasourceAppearance && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
@@ -491,51 +493,59 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? {
-      type: 'custom',
-      fallback: [],
-      render: function render(editorView) {
-        return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
-          key: "link-appearance",
-          url: url,
-          intl: intl,
-          currentAppearance: currentAppearance,
-          editorView: editorView,
-          editorState: state,
-          allowEmbeds: allowEmbeds,
-          allowBlockCards: allowBlockCards,
-          editorAnalyticsApi: editorAnalyticsApi,
-          showUpgradeDiscoverability: showUpgradeDiscoverability,
-          isDatasourceView: true
-        });
-      }
-    } : (0, _LinkToolbarAppearanceDropdown.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.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
-          intl: intl,
-          editorAnalyticsApi: editorAnalyticsApi,
-          url: url,
-          editorView: editorView,
-          editorState: state,
-          selected: true,
-          inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
-        });
-      }
-    }, {
-      type: 'separator'
-    });
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'custom',
+        fallback: [],
+        render: function render(editorView) {
+          return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.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.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi,
+            url: url,
+            editorView: editorView,
+            editorState: state,
+            selected: true,
+            inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
+          });
+        }
+      }, {
+        type: 'separator'
+      });
+    } else {
+      toolbarItems.push((0, _LinkToolbarAppearanceDropdown.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',
@@ -648,29 +658,14 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
         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((0, _toConsumableArray2.default)(options !== null && options !== void 0 && options.allowDatasource ? [{
-        type: 'custom',
-        fallback: [],
-        render: function render(editorView) {
-          var _api$analytics4;
-          if (!editorView) {
-            return null;
-          }
-          return /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.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: _analytics.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',
@@ -687,7 +682,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
-        var _api$analytics5;
+        var _api$analytics4;
         if (!editorView) {
           return null;
         }
@@ -698,7 +693,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
           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
         });
       }
@@ -712,10 +707,10 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
      * Or explicit user preferences config in order to enable button
      */
     if ((options.provider || options.userPreferencesLink) && (0, _experiments.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/es2019/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 const datasourceDisplayInformation = {
+  title: messages.datasourceAppearanceTitle,
+  icon: SmartLinkListIcon,
+  // eslint-disable-next-line @atlaskit/editor/no-re-export
+  iconFallback: SmartLinkListIcon
+};
+export const DatasourceDropdownOption = ({
+  allowDatasource,
+  intl,
+  url,
+  selected,
+  inputMethod,
+  dispatchCommand
+}) => {
+  const cardContext = useSmartLinkContext();
+  const {
+    datasourceId,
+    parameters
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
+  if (!allowDatasource || !datasourceId || !parameters) {
+    return null;
+  }
+  const onChangeAppearance = (editorState, _dispatch, view) => {
+    var _state$datasourceStas, _state$datasourceStas2;
+    if (!view || !datasourceId || !parameters) {
+      return false;
+    }
+    const state = pluginKey.getState(editorState);
+    const newAdf = buildDatasourceAdf({
+      id: datasourceId,
+      parameters,
+      views: (_state$datasourceStas = state === null || state === void 0 ? 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);
+    const {
+      selection
+    } = editorState;
+    let existingNode;
+    // Check if the selection contains a link mark
+    const $pos = editorState.doc.resolve(selection.from);
+    const isLinkMark = $pos.marks().some(mark => 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,
+        view,
+        sourceEvent: undefined,
+        isDeletingConfig: true,
+        inputMethod
+      });
+      return true;
+    }
+    return false;
+  };
+  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 null;
+    }
+  }
+  return /*#__PURE__*/React.createElement(ButtonItem, {
+    key: intl.formatMessage(messages.datasourceAppearanceTitle),
+    iconBefore: SmartLinkListIcon({
+      label: intl.formatMessage(messages.datasourceAppearanceTitle)
+    }),
+    onClick: () => dispatchCommand(onChangeAppearance),
+    isSelected: selected
+  }, intl.formatMessage(messages.datasourceAppearanceTitle));
+};

package/dist/es2019/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -10,9 +10,10 @@ const HyperlinkDropdown = props => {
     intl,
     editorState,
     cardOptions,
-    editorAnalyticsApi
+    editorAnalyticsApi,
+    allowDatasource,
+    isDatasourceView
   } = props;
-
   // Ignored via go/ees005
   // eslint-disable-next-line require-await
   const getProvider = async () => {
@@ -62,9 +63,11 @@ const 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 const getHyperlinkAppearanceDropdown = ({
@@ -74,7 +77,9 @@ export const getHyperlinkAppearanceDropdown = ({
   editorAnalyticsApi,
   editorPluginApi,
   settingsConfig,
-  cardOptions
+  cardOptions,
+  allowDatasource,
+  isDatasourceView
 }) => {
   const alignmentItemOptions = {
     render: props => {
@@ -89,7 +94,9 @@ export const getHyperlinkAppearanceDropdown = ({
         editorPluginApi: editorPluginApi,
         dispatchCommand: props.dispatchCommand,
         settingsConfig: settingsConfig,
-        cardOptions: cardOptions
+        cardOptions: cardOptions,
+        allowDatasource: allowDatasource,
+        isDatasourceView: isDatasourceView
       });
     },
     width: 200,

package/dist/es2019/ui/LinkToolbarAppearanceDropdown.js

@@ -7,6 +7,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 const LinkAppearanceMenu = ({
   url,
@@ -15,6 +16,7 @@ export const LinkAppearanceMenu = ({
   editorState,
   allowEmbeds,
   allowBlockCards = true,
+  allowDatasource,
   editorAnalyticsApi,
   showUpgradeDiscoverability = true,
   isDatasourceView,
@@ -93,6 +95,13 @@ export const LinkAppearanceMenu = ({
       onClick: () => option.onClick(),
       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, {
@@ -110,6 +119,7 @@ export const getLinkAppearanceDropdown = ({
   editorState,
   allowEmbeds,
   allowBlockCards = true,
+  allowDatasource,
   editorAnalyticsApi,
   showUpgradeDiscoverability = true,
   isDatasourceView,
@@ -127,6 +137,7 @@ export const getLinkAppearanceDropdown = ({
         editorAnalyticsApi: editorAnalyticsApi,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         isDatasourceView: isDatasourceView,
+        allowDatasource: allowDatasource,
         dispatchCommand: props.dispatchCommand,
         settingsConfig: settingsConfig
       });
@@ -134,7 +145,7 @@ export const getLinkAppearanceDropdown = ({
     width: 200,
     height: 400
   };
-  const currentAppearanceDisplayInformation = appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
+  const currentAppearanceDisplayInformation = isDatasourceView ? datasourceDisplayInformation : appearancePropsMap[currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : 'url'];
   const alignmentToolbarItem = {
     id: 'card-appearance',
     testId: 'card-appearance-dropdown',