@atlaskit/editor-plugin-card 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-card
 
+## 0.7.0
+
+### Minor Changes
+
+- [`50b3bf73ed3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50b3bf73ed3) - [ux] Add edit datasource button to toolbar for cards which can resolve into datasources
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.6.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BlockCardComponent = exports.BlockCard = void 0;
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -144,6 +145,25 @@ var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
       }
       return domRef;
     }
+
+    // Need this function to check if the datasource attribute was added or not to a blockCard.
+    // If so, we return false so we can get the node to re-render properly as a datasource node instead.
+    // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
+  }, {
+    key: "validUpdate",
+    value: function validUpdate(currentNode, newNode) {
+      var _currentNode$attrs, _newNode$attrs;
+      var isCurrentNodeBlockCard = !((_currentNode$attrs = currentNode.attrs) !== null && _currentNode$attrs !== void 0 && _currentNode$attrs.datasource);
+      var isNewNodeDatasource = (_newNode$attrs = newNode.attrs) === null || _newNode$attrs === void 0 ? void 0 : _newNode$attrs.datasource;
+
+      // need to return falsy to update node
+      return !(isCurrentNodeBlockCard && isNewNodeDatasource);
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations, _innerDecorations) {
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(BlockCard.prototype), "update", this).call(this, node, decorations, _innerDecorations, this.validUpdate);
+    }
   }, {
     key: "render",
     value: function render() {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateExistingDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
+exports.updateCardFromDatasourceModal = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -428,39 +428,44 @@ var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
   }
 };
 
-// Apply an update to a datasource (aka blockCard) node
+// Apply an update made from the datasource edit modal to a card
 exports.getLinkNodeType = getLinkNodeType;
-var updateExistingDatasource = function updateExistingDatasource(state, node, newAdf, view, sourceEvent) {
+var updateCardFromDatasourceModal = function updateCardFromDatasourceModal(state, node, newAdf, view, sourceEvent) {
   var tr = state.tr,
     from = state.selection.from,
     schemaNodes = state.schema.nodes;
-
-  // datasource to datasource
-  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
-    var _ref3, _ref6, _newViews$properties, _oldViews$properties, _newAdf$attrs, _node$attrs;
-    var _ref = (_ref3 = newAdf.attrs.datasource.views) !== null && _ref3 !== void 0 ? _ref3 : [],
-      _ref2 = (0, _slicedToArray2.default)(_ref, 1),
-      newViews = _ref2[0];
-    var _ref4 = (_ref6 = node.attrs.datasource.views) !== null && _ref6 !== void 0 ? _ref6 : [],
-      _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
-      oldViews = _ref5[0];
-    var newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(function (column) {
-      return column.key;
-    });
-    var oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(function (column) {
-      return column.key;
-    });
-    var isColumnChange = !(0, _isEqual.default)(oldColumnKeys, newColumnKeys);
-    var isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
-    if (isColumnChange || isUrlChange) {
-      tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
-      (0, _card.addLinkMetadata)(state.selection, tr, {
-        action: _analytics.ACTION.UPDATED,
-        sourceEvent: sourceEvent
+  if (newAdf.type === 'blockCard') {
+    var _node$attrs, _newAdf$attrs;
+    if ((_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource && (_newAdf$attrs = newAdf.attrs) !== null && _newAdf$attrs !== void 0 && _newAdf$attrs.datasource) {
+      var _ref3, _ref6, _newViews$properties, _oldViews$properties, _newAdf$attrs2, _node$attrs2;
+      // datasource to datasource
+      var _ref = (_ref3 = newAdf.attrs.datasource.views) !== null && _ref3 !== void 0 ? _ref3 : [],
+        _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+        newViews = _ref2[0];
+      var _ref4 = (_ref6 = node.attrs.datasource.views) !== null && _ref6 !== void 0 ? _ref6 : [],
+        _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
+        oldViews = _ref5[0];
+      var newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(function (column) {
+        return column.key;
       });
+      var oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(function (column) {
+        return column.key;
+      });
+      var isColumnChange = !(0, _isEqual.default)(oldColumnKeys, newColumnKeys);
+      var isUrlChange = ((_newAdf$attrs2 = newAdf.attrs) === null || _newAdf$attrs2 === void 0 ? void 0 : _newAdf$attrs2.url) !== ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url);
+      if (isColumnChange || isUrlChange) {
+        tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
+        (0, _card.addLinkMetadata)(state.selection, tr, {
+          action: _analytics.ACTION.UPDATED,
+          sourceEvent: sourceEvent
+        });
+      }
+    } else {
+      // inline or blockCard to datasource
+      tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);
     }
   } else if (newAdf.type === 'inlineCard') {
-    // datasource to inline
+    // card type to inlineCard
     tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
     (0, _card.addLinkMetadata)(state.selection, tr, {
       action: _analytics.ACTION.UPDATED,
@@ -470,7 +475,7 @@ var updateExistingDatasource = function updateExistingDatasource(state, node, ne
   (0, _actions.hideDatasourceModal)(tr);
   view.dispatch(tr.scrollIntoView());
 };
-exports.updateExistingDatasource = updateExistingDatasource;
+exports.updateCardFromDatasourceModal = updateCardFromDatasourceModal;
 var insertDatasource = function insertDatasource(state, adf, view, sourceEvent) {
   var tr = state.tr,
     from = state.selection.from,

package/dist/cjs/toolbar.js

@@ -14,6 +14,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -24,9 +25,9 @@ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"))
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _doc = require("./pm-plugins/doc");
 var _main = require("./pm-plugins/main");
+var _EditDatasourceButton = require("./ui/EditDatasourceButton");
 var _EditLinkToolbar = require("./ui/EditLinkToolbar");
 var _LinkToolbarAppearance = require("./ui/LinkToolbarAppearance");
-var _SmallerEditIcon = require("./ui/SmallerEditIcon");
 var _ToolbarViewedEvent = require("./ui/ToolbarViewedEvent");
 var _utils3 = require("./utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -231,7 +232,7 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         pluginInjectionApi: pluginInjectionApi
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration);
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var toolbarItems = [{
@@ -288,7 +289,8 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(alignmentOptions));
       }
       var allowBlockCards = cardOptions.allowBlockCards,
-        allowEmbeds = cardOptions.allowEmbeds;
+        allowEmbeds = cardOptions.allowEmbeds,
+        allowDatasource = cardOptions.allowDatasource;
 
       // This code will be executed only for appearances such as "inline", "block" & "embed"
       // For url appearance, please see HyperlinkToolbarAppearanceProps
@@ -315,6 +317,22 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
           type: 'separator'
         }]));
       }
+      var shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+      if (shouldShowDatasourceEditButton) {
+        toolbarItems.unshift({
+          type: 'custom',
+          fallback: [],
+          render: function render(editorView) {
+            return /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
+              intl: intl,
+              editorAnalyticsApi: editorAnalyticsApi,
+              url: url,
+              editorView: editorView,
+              editorState: state
+            });
+          }
+        });
+      }
       return toolbarItems;
     }
   };
@@ -343,16 +361,16 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(state, featureFlags
     type: 'separator'
   }] : [];
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId) {
   var _node$attrs3;
   var toolbarItems = [{
     id: 'editor.edit.datasource',
     type: 'button',
-    icon: _SmallerEditIcon.SmallerEditIcon,
+    icon: _ui.SmallerEditIcon,
     metadata: metadata,
     className: 'datasource-edit',
     title: intl.formatMessage(_messages.linkToolbarMessages.editDatasource),
-    onClick: (0, _EditLinkToolbar.editDatasource)(node, editorAnalyticsApi),
+    onClick: (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi),
     testId: 'datasource-edit-button'
   }];
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {

package/dist/cjs/ui/DatasourceModal/index.js

@@ -26,7 +26,7 @@ var DatasourceModal = function DatasourceModal(_ref) {
   }, [dispatch, state.tr]);
   var onInsert = (0, _react.useCallback)(function (newAdf) {
     if (existingNode) {
-      (0, _doc.updateExistingDatasource)(state, existingNode, newAdf, view);
+      (0, _doc.updateCardFromDatasourceModal)(state, existingNode, newAdf, view);
     } else {
       (0, _doc.insertDatasource)(state, newAdf, view);
     }

package/dist/cjs/ui/EditDatasourceButton.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.editDatasource = exports.EditDatasourceButton = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _messages = require("@atlaskit/editor-common/messages");
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-common/utils");
+var _actions = require("../pm-plugins/actions");
+var _CardContextProvider = require("./CardContextProvider");
+/** @jsx jsx */
+
+var buttonStyles = (0, _react2.css)({
+  pointerEvents: 'auto'
+});
+var buttonWrapperStyles = (0, _react2.css)({
+  display: 'flex'
+});
+var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardContext(_ref) {
+  var cardContext = _ref.cardContext,
+    intl = _ref.intl,
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    url = _ref.url,
+    editorView = _ref.editorView,
+    editorState = _ref.editorState;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    datasourceId = _useState2[0],
+    setDatasourceId = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var fetchDatasource = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var _cardContext$connecti, _cardContext$connecti2, _datasources$, response, datasources;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              _context.t0 = url && cardContext;
+              if (!_context.t0) {
+                _context.next = 6;
+                break;
+              }
+              _context.next = 5;
+              return cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$connecti = cardContext.connections) === null || _cardContext$connecti === void 0 ? void 0 : (_cardContext$connecti2 = _cardContext$connecti.client) === null || _cardContext$connecti2 === void 0 ? void 0 : _cardContext$connecti2.fetchData(url);
+            case 5:
+              _context.t0 = _context.sent;
+            case 6:
+              response = _context.t0;
+              datasources = response && response.datasources || [];
+              setDatasourceId(((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id) || null);
+              _context.next = 14;
+              break;
+            case 11:
+              _context.prev = 11;
+              _context.t1 = _context["catch"](0);
+              setDatasourceId(null);
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 11]]);
+      }));
+      return function fetchDatasource() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    void fetchDatasource();
+  }, [cardContext, url]);
+  if (!datasourceId || !(0, _utils.canRenderDatasource)(datasourceId, false)) {
+    return null;
+  }
+  if (url) {
+    var _cardContext$store, _urlState$error;
+    var 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;
+    }
+  }
+  var dispatchCommand = function dispatchCommand(fn) {
+    fn && fn(editorState, editorView && editorView.dispatch);
+    if (editorView && !editorView.hasFocus()) {
+      editorView.focus();
+    }
+  };
+  return (0, _react2.jsx)("div", {
+    css: buttonWrapperStyles
+  }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    css: buttonStyles,
+    title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
+    icon: (0, _react2.jsx)(_ui.SmallerEditIcon, null),
+    selected: false,
+    onClick: function onClick() {
+      return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
+    },
+    testId: 'card-edit-datasource-button'
+  }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+};
+var EditDatasourceButton = function EditDatasourceButton(_ref3) {
+  var intl = _ref3.intl,
+    editorAnalyticsApi = _ref3.editorAnalyticsApi,
+    url = _ref3.url,
+    editorView = _ref3.editorView,
+    editorState = _ref3.editorState;
+  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref4) {
+    var cardContext = _ref4.cardContext;
+    return (0, _react2.jsx)(EditDatasourceButtonWithCardContext, {
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      editorState: editorState,
+      cardContext: cardContext
+    });
+  });
+};
+exports.EditDatasourceButton = EditDatasourceButton;
+var editDatasource = function editDatasource(datasourceId, editorAnalyticsApi) {
+  return function (state, dispatch) {
+    var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
+    if (dispatch && datasourceType) {
+      var tr = state.tr;
+      (0, _actions.showDatasourceModal)(datasourceType)(tr);
+      // editorAnalyticsApi?.attachAnalyticsEvent(
+      //   buildEditLinkPayload(
+      //     type as
+      //       | ACTION_SUBJECT_ID.CARD_INLINE
+      //       | ACTION_SUBJECT_ID.CARD_BLOCK
+      //       | ACTION_SUBJECT_ID.EMBEDS,
+      //   ),
+      // )(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
+};
+exports.editDatasource = editDatasource;

package/dist/cjs/ui/EditLinkToolbar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EditLinkToolbar = void 0;
 exports.HyperlinkAddToolbarWithState = HyperlinkAddToolbarWithState;
-exports.editLinkToolbarConfig = exports.editLink = exports.editDatasource = exports.buildEditLinkToolbar = void 0;
+exports.editLinkToolbarConfig = exports.editLink = exports.buildEditLinkToolbar = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
@@ -19,11 +19,10 @@ 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");
-var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _actions = require("../pm-plugins/actions");
 var _doc = require("../pm-plugins/doc");
-var _utils2 = require("../utils");
+var _utils = require("../utils");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function HyperlinkAddToolbarWithState(_ref) {
@@ -176,7 +175,7 @@ var buildEditLinkToolbar = function buildEditLinkToolbar(_ref2) {
       if (!view || !providerFactory) {
         return null;
       }
-      var displayInfo = (0, _utils2.displayInfoForCard)(node, (0, _utils2.findCardInfo)(view.state));
+      var displayInfo = (0, _utils.displayInfoForCard)(node, (0, _utils.findCardInfo)(view.state));
       return /*#__PURE__*/_react.default.createElement(EditLinkToolbar, {
         pluginInjectionApi: pluginInjectionApi,
         key: idx,
@@ -219,26 +218,4 @@ var editLinkToolbarConfig = function editLinkToolbarConfig(showLinkingToolbar, l
     forcePlacement: true
   } : {};
 };
-exports.editLinkToolbarConfig = editLinkToolbarConfig;
-var editDatasource = function editDatasource(node, editorAnalyticsApi) {
-  return function (state, dispatch) {
-    var _node$attrs;
-    var modalType = (0, _utils.getDatasourceType)((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource.id);
-    if (dispatch && modalType) {
-      var tr = state.tr;
-      (0, _actions.showDatasourceModal)(modalType)(tr);
-      // editorAnalyticsApi?.attachAnalyticsEvent(
-      //   buildEditLinkPayload(
-      //     type as
-      //       | ACTION_SUBJECT_ID.CARD_INLINE
-      //       | ACTION_SUBJECT_ID.CARD_BLOCK
-      //       | ACTION_SUBJECT_ID.EMBEDS,
-      //   ),
-      // )(tr);
-      dispatch(tr);
-      return true;
-    }
-    return false;
-  };
-};
-exports.editDatasource = editDatasource;
+exports.editLinkToolbarConfig = editLinkToolbarConfig;

package/dist/es2019/nodeviews/blockCard.js

@@ -115,6 +115,21 @@ export class BlockCard extends ReactNodeView {
     }
     return domRef;
   }
+
+  // Need this function to check if the datasource attribute was added or not to a blockCard.
+  // If so, we return false so we can get the node to re-render properly as a datasource node instead.
+  // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
+  validUpdate(currentNode, newNode) {
+    var _currentNode$attrs, _newNode$attrs;
+    const isCurrentNodeBlockCard = !((_currentNode$attrs = currentNode.attrs) !== null && _currentNode$attrs !== void 0 && _currentNode$attrs.datasource);
+    const isNewNodeDatasource = (_newNode$attrs = newNode.attrs) === null || _newNode$attrs === void 0 ? void 0 : _newNode$attrs.datasource;
+
+    // need to return falsy to update node
+    return !(isCurrentNodeBlockCard && isNewNodeDatasource);
+  }
+  update(node, decorations, _innerDecorations) {
+    return super.update(node, decorations, _innerDecorations, this.validUpdate);
+  }
   render() {
     const {
       platform,

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

@@ -393,8 +393,8 @@ export const getLinkNodeType = (appearance, linkNodes) => {
   }
 };
 
-// Apply an update to a datasource (aka blockCard) node
-export const updateExistingDatasource = (state, node, newAdf, view, sourceEvent) => {
+// Apply an update made from the datasource edit modal to a card
+export const updateCardFromDatasourceModal = (state, node, newAdf, view, sourceEvent) => {
   const {
     tr,
     selection: {
@@ -404,28 +404,33 @@ export const updateExistingDatasource = (state, node, newAdf, view, sourceEvent)
       nodes: schemaNodes
     }
   } = state;
-
-  // datasource to datasource
-  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
-    var _ref, _ref2, _newViews$properties, _oldViews$properties, _newAdf$attrs, _node$attrs;
-    const [newViews] = (_ref = newAdf.attrs.datasource.views) !== null && _ref !== void 0 ? _ref : [];
-    const [oldViews] = (_ref2 = node.attrs.datasource.views) !== null && _ref2 !== void 0 ? _ref2 : [];
-    const newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(column => column.key);
-    const oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(column => column.key);
-    const isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
-    const isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
-    if (isColumnChange || isUrlChange) {
-      tr.setNodeMarkup(from, schemaNodes.blockCard, {
-        ...node.attrs,
-        ...newAdf.attrs
-      });
-      addLinkMetadata(state.selection, tr, {
-        action: ACTION.UPDATED,
-        sourceEvent
-      });
+  if (newAdf.type === 'blockCard') {
+    var _node$attrs, _newAdf$attrs;
+    if ((_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource && (_newAdf$attrs = newAdf.attrs) !== null && _newAdf$attrs !== void 0 && _newAdf$attrs.datasource) {
+      var _ref, _ref2, _newViews$properties, _oldViews$properties, _newAdf$attrs2, _node$attrs2;
+      // datasource to datasource
+      const [newViews] = (_ref = newAdf.attrs.datasource.views) !== null && _ref !== void 0 ? _ref : [];
+      const [oldViews] = (_ref2 = node.attrs.datasource.views) !== null && _ref2 !== void 0 ? _ref2 : [];
+      const newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(column => column.key);
+      const oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(column => column.key);
+      const isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
+      const isUrlChange = ((_newAdf$attrs2 = newAdf.attrs) === null || _newAdf$attrs2 === void 0 ? void 0 : _newAdf$attrs2.url) !== ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url);
+      if (isColumnChange || isUrlChange) {
+        tr.setNodeMarkup(from, schemaNodes.blockCard, {
+          ...node.attrs,
+          ...newAdf.attrs
+        });
+        addLinkMetadata(state.selection, tr, {
+          action: ACTION.UPDATED,
+          sourceEvent
+        });
+      }
+    } else {
+      // inline or blockCard to datasource
+      tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);
     }
   } else if (newAdf.type === 'inlineCard') {
-    // datasource to inline
+    // card type to inlineCard
     tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
     addLinkMetadata(state.selection, tr, {
       action: ACTION.UPDATED,

package/dist/es2019/toolbar.js

@@ -4,6 +4,7 @@ import { ACTION, ACTION_SUBJECT, buildOpenedSettingsPayload, buildVisitedLinkPay
 import { buildLayoutButtons, commandWithMetadata } from '@atlaskit/editor-common/card';
 import commonMessages, { linkMessages, linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, richMediaClassName } from '@atlaskit/editor-common/styles';
+import { SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
@@ -14,9 +15,9 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeSelectedCardToText } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
-import { buildEditLinkToolbar, editDatasource, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
+import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
+import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
-import { SmallerEditIcon } from './ui/SmallerEditIcon';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
 import { appearanceForNodeType, displayInfoForCard, findCardInfo, titleUrlPairFromNode } from './utils';
 export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
@@ -221,7 +222,7 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       pluginInjectionApi
     })];
   } else if (shouldRenderDatasourceToolbar) {
-    return getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration);
+    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id);
   } else {
     const {
       inlineCard
@@ -281,7 +282,8 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
     }
     const {
       allowBlockCards,
-      allowEmbeds
+      allowEmbeds,
+      allowDatasource
     } = cardOptions;
 
     // This code will be executed only for appearances such as "inline", "block" & "embed"
@@ -307,6 +309,20 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
         type: 'separator'
       });
     }
+    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+    if (shouldShowDatasourceEditButton) {
+      toolbarItems.unshift({
+        type: 'custom',
+        fallback: [],
+        render: editorView => /*#__PURE__*/React.createElement(EditDatasourceButton, {
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          url: url,
+          editorView: editorView,
+          editorState: state
+        })
+      });
+    }
     return toolbarItems;
   }
 };
@@ -336,7 +352,7 @@ const getSettingsButtonGroup = (state, featureFlags, intl, editorAnalyticsApi) =
     type: 'separator'
   }] : [];
 };
-const getDatasourceButtonGroup = (state, metadata, intl, editorAnalyticsApi, node, hoverDecoration) => {
+const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId) => {
   var _node$attrs3;
   const toolbarItems = [{
     id: 'editor.edit.datasource',
@@ -345,7 +361,7 @@ const getDatasourceButtonGroup = (state, metadata, intl, editorAnalyticsApi, nod
     metadata: metadata,
     className: 'datasource-edit',
     title: intl.formatMessage(linkToolbarMessages.editDatasource),
-    onClick: editDatasource(node, editorAnalyticsApi),
+    onClick: editDatasource(datasourceId, editorAnalyticsApi),
     testId: 'datasource-edit-button'
   }];
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {

package/dist/es2019/ui/DatasourceModal/index.js

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { hideDatasourceModal } from '../../pm-plugins/actions';
-import { insertDatasource, updateExistingDatasource } from '../../pm-plugins/doc';
+import { insertDatasource, updateCardFromDatasourceModal } from '../../pm-plugins/doc';
 export const DatasourceModal = ({
   view,
   modalType
@@ -20,7 +20,7 @@ export const DatasourceModal = ({
   }, [dispatch, state.tr]);
   const onInsert = useCallback(newAdf => {
     if (existingNode) {
-      updateExistingDatasource(state, existingNode, newAdf, view);
+      updateCardFromDatasourceModal(state, existingNode, newAdf, view);
     } else {
       insertDatasource(state, newAdf, view);
     }