@atlaskit/editor-plugin-card 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-card
 
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.0.1
+
+### Patch Changes
+
+- [#71504](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71504) [`8beedb8b48db`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8beedb8b48db) - [ux] Enable switch view from Datasource to back smart links behind ff platform.linking-platform.enable-datasource-appearance-toolbar
+- Updated dependencies
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/nodeviews/datasource.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DatasourceComponent = exports.Datasource = 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"));
@@ -20,6 +21,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkDatasource = require("@atlaskit/link-datasource");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _datasourceErrorBoundary = require("../datasourceErrorBoundary");
 var _EditorAnalyticsContext = require("../ui/EditorAnalyticsContext");
 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; }
@@ -193,7 +195,31 @@ var Datasource = exports.Datasource = /*#__PURE__*/function (_ReactNodeView) {
     });
     return _this2;
   }
+
+  // Need this function to check if the datasource attribute was added or not to a blockCard.
+  // If not, we return false so we can get the node to re-render properly as a block node instead.
+  // Otherwise, the node view will still consider the node as a Datasource and render a such.
   (0, _createClass2.default)(Datasource, [{
+    key: "validUpdate",
+    value: function validUpdate(currentNode, newNode) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+        var _newNode$attrs;
+        return !!((_newNode$attrs = newNode.attrs) !== null && _newNode$attrs !== void 0 && _newNode$attrs.datasource);
+      }
+      return true;
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations, _innerDecorations) {
+      var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+        return true;
+      };
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+        return (0, _get2.default)((0, _getPrototypeOf2.default)(Datasource.prototype), "update", this).call(this, node, decorations, _innerDecorations, this.validUpdate);
+      }
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(Datasource.prototype), "update", this).call(this, node, decorations, _innerDecorations, validUpdate);
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateCardViaDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
+exports.updateCardViaDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.getAttrsForAppearance = exports.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"));
@@ -14,6 +14,7 @@ var _card = require("@atlaskit/editor-common/card");
 var _utils = require("@atlaskit/editor-common/utils");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils2 = require("../utils");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
@@ -368,13 +369,21 @@ var setSelectedCardAppearance = exports.setSelectedCardAppearance = function set
       }
       return false;
     }
-    if ((0, _utils2.appearanceForNodeType)(selectedNode.type) === appearance) {
-      return false;
+    var attrs;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      if ((0, _utils2.appearanceForNodeType)(selectedNode.type) === appearance && !selectedNode.attrs.datasource) {
+        return false;
+      }
+      attrs = getAttrsForAppearance(appearance, selectedNode);
+    } else {
+      if ((0, _utils2.appearanceForNodeType)(selectedNode.type) === appearance) {
+        return false;
+      }
+      var isEmbed = appearance === 'embed';
+      attrs = isEmbed ? _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
+        layout: 'center'
+      }) : selectedNode.attrs;
     }
-    var isEmbed = appearance === 'embed';
-    var attrs = isEmbed ? _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
-      layout: 'center'
-    }) : selectedNode.attrs;
     var _state$selection = state.selection,
       from = _state$selection.from,
       to = _state$selection.to;
@@ -479,4 +488,21 @@ var insertDatasource = exports.insertDatasource = function insertDatasource(stat
     sourceEvent: sourceEvent
   });
   view.dispatch(tr.scrollIntoView());
+};
+
+/**
+ * Get attributes for new Card Appearance
+ */
+var getAttrsForAppearance = exports.getAttrsForAppearance = function getAttrsForAppearance(appearance, selectedNode) {
+  if (appearance === 'embed') {
+    return _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
+      layout: 'center'
+    });
+  }
+  if (selectedNode.attrs.datasource) {
+    return {
+      url: selectedNode.attrs.url
+    };
+  }
+  return selectedNode.attrs;
 };

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

@@ -103,6 +103,16 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             var events = (0, _eventsFromTr.eventsFromTransaction)(tr, prevEditorState);
             cardPluginEvents.push.apply(cardPluginEvents, (0, _toConsumableArray2.default)(events));
           }
+          if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && !meta) {
+            if (pluginState.datasourceTableRef) {
+              if (!(tr.selection instanceof _state.NodeSelection) || !tr.selection.node.attrs.datasource) {
+                // disable resize button when switching from datasource to block card
+                return _objectSpread(_objectSpread({}, pluginStateWithUpdatedPos), {}, {
+                  datasourceTableRef: undefined
+                });
+              }
+            }
+          }
           if (!meta) {
             return pluginStateWithUpdatedPos;
           }

package/dist/cjs/toolbar.js

@@ -217,7 +217,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state);
+      var _pluginInjectionApi$c;
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, platform, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var toolbarItems = [{
@@ -285,7 +286,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
-            var _pluginInjectionApi$c;
+            var _pluginInjectionApi$c2;
             return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
               key: "link-appearance",
               url: url,
@@ -297,7 +298,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               allowBlockCards: allowBlockCards,
               platform: platform,
               editorAnalyticsApi: editorAnalyticsApi,
-              cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions,
+              cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.card) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions,
               showUpgradeDiscoverability: showUpgradeDiscoverability
             });
           }
@@ -360,7 +361,7 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(intl, editorAnalyti
     type: 'separator'
   }];
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) {
   var _node$attrs3;
   var toolbarItems = [];
   if ((0, _utils3.isDatasourceConfigEditable)(datasourceId)) {
@@ -377,6 +378,50 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
+
+  // Smart card view buttons only allowed for non-config datasources
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && !(0, _utils3.isDatasourceConfigEditable)(datasourceId) && cardOptions) {
+    var allowBlockCards = cardOptions.allowBlockCards,
+      allowEmbeds = cardOptions.allowEmbeds,
+      showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
+    var url = metadata.url;
+    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,
+          platform: platform,
+          editorAnalyticsApi: editorAnalyticsApi,
+          cardActions: cardActions,
+          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
+        });
+      }
+    }, {
+      type: 'separator'
+    });
+  }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({
       id: 'editor.link.openLink',

package/dist/cjs/ui/DatasourceAppearanceButton.js

@@ -27,7 +27,8 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     intl = _ref.intl,
     url = _ref.url,
     editorView = _ref.editorView,
-    editorState = _ref.editorState;
+    editorState = _ref.editorState,
+    selected = _ref.selected;
   var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
       isRegularCardNode: true,
       url: url,
@@ -69,7 +70,7 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     icon: (0, _react2.jsx)(_table.default, {
       label: buttonLabel
     }),
-    selected: false,
+    selected: selected,
     onClick: onChangeAppearance,
     testId: 'card-datasource-appearance-button'
   }));
@@ -79,7 +80,8 @@ var DatasourceAppearanceButton = exports.DatasourceAppearanceButton = function D
     editorAnalyticsApi = _ref2.editorAnalyticsApi,
     url = _ref2.url,
     editorView = _ref2.editorView,
-    editorState = _ref2.editorState;
+    editorState = _ref2.editorState,
+    selected = _ref2.selected;
   return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
     var cardContext = _ref3.cardContext;
     return (0, _react2.jsx)(DatasourceAppearanceButtonWithCardContext, {
@@ -88,7 +90,8 @@ var DatasourceAppearanceButton = exports.DatasourceAppearanceButton = function D
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       editorState: editorState,
-      cardContext: cardContext
+      cardContext: cardContext,
+      selected: selected
     });
   });
 };

package/dist/cjs/ui/LinkToolbarAppearance.js

@@ -56,7 +56,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         editorAnalyticsApi = _this$props.editorAnalyticsApi,
         cardActions = _this$props.cardActions,
         _this$props$showUpgra = _this$props.showUpgradeDiscoverability,
-        showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? true : _this$props$showUpgra;
+        showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? true : _this$props$showUpgra,
+        isDatasourceView = _this$props.isDatasourceView;
       var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       var defaultCommand = function defaultCommand() {
         return false;
@@ -84,7 +85,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         appearance: 'block',
         title: intl.formatMessage(_messages.cardMessages.block),
         onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
-        selected: currentAppearance === 'block',
+        selected: currentAppearance === 'block' && !isDatasourceView,
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
         tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
@@ -94,7 +95,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         onClick: (0, _card.commandWithMetadata)((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
           action: _analytics.ACTION.CHANGED_TYPE
         }),
-        selected: !currentAppearance,
+        selected: !currentAppearance && !isDatasourceView,
         testId: 'url-appearance'
       }, {
         appearance: 'inline',

package/dist/es2019/nodeviews/datasource.js

@@ -8,6 +8,7 @@ import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } fro
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
 import { EditorAnalyticsContext } from '../ui/EditorAnalyticsContext';
 const getPosSafely = pos => {
@@ -161,6 +162,22 @@ export class Datasource extends ReactNodeView {
     });
   }
 
+  // Need this function to check if the datasource attribute was added or not to a blockCard.
+  // If not, we return false so we can get the node to re-render properly as a block node instead.
+  // Otherwise, the node view will still consider the node as a Datasource and render a such.
+  validUpdate(currentNode, newNode) {
+    if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      var _newNode$attrs;
+      return !!((_newNode$attrs = newNode.attrs) !== null && _newNode$attrs !== void 0 && _newNode$attrs.datasource);
+    }
+    return true;
+  }
+  update(node, decorations, _innerDecorations, validUpdate = () => true) {
+    if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      return super.update(node, decorations, _innerDecorations, this.validUpdate);
+    }
+    return super.update(node, decorations, _innerDecorations, validUpdate);
+  }
   createDomRef() {
     const domRef = document.createElement('div');
     domRef.setAttribute('contenteditable', 'true');

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

@@ -5,6 +5,7 @@ import { addLinkMetadata } from '@atlaskit/editor-common/card';
 import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { appearanceForNodeType, selectedCardAppearance } from '../utils';
 import { hideDatasourceModal, queueCards, resolveCard } from './actions';
 import { pluginKey } from './plugin-key';
@@ -341,14 +342,22 @@ export const setSelectedCardAppearance = (appearance, editorAnalyticsApi) => (st
     }
     return false;
   }
-  if (appearanceForNodeType(selectedNode.type) === appearance) {
-    return false;
+  let attrs;
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    if (appearanceForNodeType(selectedNode.type) === appearance && !selectedNode.attrs.datasource) {
+      return false;
+    }
+    attrs = getAttrsForAppearance(appearance, selectedNode);
+  } else {
+    if (appearanceForNodeType(selectedNode.type) === appearance) {
+      return false;
+    }
+    const isEmbed = appearance === 'embed';
+    attrs = isEmbed ? {
+      ...selectedNode.attrs,
+      layout: 'center'
+    } : selectedNode.attrs;
   }
-  const isEmbed = appearance === 'embed';
-  const attrs = isEmbed ? {
-    ...selectedNode.attrs,
-    layout: 'center'
-  } : selectedNode.attrs;
   const {
     from,
     to
@@ -462,4 +471,22 @@ export const insertDatasource = (state, adf, view, sourceEvent) => {
     sourceEvent
   });
   view.dispatch(tr.scrollIntoView());
+};
+
+/**
+ * Get attributes for new Card Appearance
+ */
+export const getAttrsForAppearance = (appearance, selectedNode) => {
+  if (appearance === 'embed') {
+    return {
+      ...selectedNode.attrs,
+      layout: 'center'
+    };
+  }
+  if (selectedNode.attrs.datasource) {
+    return {
+      url: selectedNode.attrs.url
+    };
+  }
+  return selectedNode.attrs;
 };

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

@@ -88,6 +88,17 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           const events = eventsFromTransaction(tr, prevEditorState);
           cardPluginEvents.push(...events);
         }
+        if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && !meta) {
+          if (pluginState.datasourceTableRef) {
+            if (!(tr.selection instanceof NodeSelection) || !tr.selection.node.attrs.datasource) {
+              // disable resize button when switching from datasource to block card
+              return {
+                ...pluginStateWithUpdatedPos,
+                datasourceTableRef: undefined
+              };
+            }
+          }
+        }
         if (!meta) {
           return pluginStateWithUpdatedPos;
         }

package/dist/es2019/toolbar.js

@@ -209,7 +209,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       lpLinkPicker
     })];
   } else if (shouldRenderDatasourceToolbar) {
-    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state);
+    var _pluginInjectionApi$c;
+    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, platform, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions);
   } else {
     const {
       inlineCard
@@ -281,7 +282,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         type: 'custom',
         fallback: [],
         render: editorView => {
-          var _pluginInjectionApi$c;
+          var _pluginInjectionApi$c2;
           return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
             key: "link-appearance",
             url: url,
@@ -293,7 +294,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
             allowBlockCards: allowBlockCards,
             platform: platform,
             editorAnalyticsApi: editorAnalyticsApi,
-            cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions,
+            cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.card) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions,
             showUpgradeDiscoverability: showUpgradeDiscoverability
           });
         }
@@ -351,7 +352,7 @@ const getSettingsButtonGroup = (intl, editorAnalyticsApi) => {
     type: 'separator'
   }];
 };
-const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state) => {
+const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) => {
   var _node$attrs3;
   const toolbarItems = [];
   if (isDatasourceConfigEditable(datasourceId)) {
@@ -368,6 +369,52 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       type: 'separator'
     });
   }
+
+  // Smart card view buttons only allowed for non-config datasources
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && !isDatasourceConfigEditable(datasourceId) && cardOptions) {
+    const {
+      allowBlockCards,
+      allowEmbeds,
+      showUpgradeDiscoverability
+    } = cardOptions;
+    const {
+      url
+    } = metadata;
+    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,
+          platform: platform,
+          editorAnalyticsApi: editorAnalyticsApi,
+          cardActions: cardActions,
+          showUpgradeDiscoverability: showUpgradeDiscoverability,
+          isDatasourceView: true
+        });
+      }
+    }, {
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        url: url,
+        editorView: editorView,
+        editorState: state,
+        selected: true
+      })
+    }, {
+      type: 'separator'
+    });
+  }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({
       id: 'editor.link.openLink',

package/dist/es2019/ui/DatasourceAppearanceButton.js

@@ -19,7 +19,8 @@ const DatasourceAppearanceButtonWithCardContext = ({
   intl,
   url,
   editorView,
-  editorState
+  editorState,
+  selected
 }) => {
   const {
     datasourceId,
@@ -65,7 +66,7 @@ const DatasourceAppearanceButtonWithCardContext = ({
     icon: jsx(TableIcon, {
       label: buttonLabel
     }),
-    selected: false,
+    selected: selected,
     onClick: onChangeAppearance,
     testId: 'card-datasource-appearance-button'
   }));
@@ -75,7 +76,8 @@ export const DatasourceAppearanceButton = ({
   editorAnalyticsApi,
   url,
   editorView,
-  editorState
+  editorState,
+  selected
 }) => {
   return jsx(CardContextProvider, null, ({
     cardContext
@@ -85,6 +87,7 @@ export const DatasourceAppearanceButton = ({
     editorAnalyticsApi: editorAnalyticsApi,
     editorView: editorView,
     editorState: editorState,
-    cardContext: cardContext
+    cardContext: cardContext,
+    selected: selected
   }));
 };

package/dist/es2019/ui/LinkToolbarAppearance.js

@@ -27,7 +27,8 @@ export class LinkToolbarAppearance extends React.Component {
         platform,
         editorAnalyticsApi,
         cardActions,
-        showUpgradeDiscoverability = true
+        showUpgradeDiscoverability = true,
+        isDatasourceView
       } = this.props;
       const preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       const defaultCommand = () => false;
@@ -54,7 +55,7 @@ export class LinkToolbarAppearance extends React.Component {
         appearance: 'block',
         title: intl.formatMessage(messages.block),
         onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
-        selected: currentAppearance === 'block',
+        selected: currentAppearance === 'block' && !isDatasourceView,
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
         tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
@@ -64,7 +65,7 @@ export class LinkToolbarAppearance extends React.Component {
         onClick: commandWithMetadata((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
           action: ACTION.CHANGED_TYPE
         }),
-        selected: !currentAppearance,
+        selected: !currentAppearance && !isDatasourceView,
         testId: 'url-appearance'
       }, {
         appearance: 'inline',

package/dist/esm/nodeviews/datasource.js

@@ -1,3 +1,4 @@
+import _get from "@babel/runtime/helpers/get";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -18,6 +19,7 @@ import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } fro
 import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
 import { EditorAnalyticsContext } from '../ui/EditorAnalyticsContext';
 var getPosSafely = function getPosSafely(pos) {
@@ -187,7 +189,31 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     });
     return _this2;
   }
+
+  // Need this function to check if the datasource attribute was added or not to a blockCard.
+  // If not, we return false so we can get the node to re-render properly as a block node instead.
+  // Otherwise, the node view will still consider the node as a Datasource and render a such.
   _createClass(Datasource, [{
+    key: "validUpdate",
+    value: function validUpdate(currentNode, newNode) {
+      if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+        var _newNode$attrs;
+        return !!((_newNode$attrs = newNode.attrs) !== null && _newNode$attrs !== void 0 && _newNode$attrs.datasource);
+      }
+      return true;
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations, _innerDecorations) {
+      var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+        return true;
+      };
+      if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+        return _get(_getPrototypeOf(Datasource.prototype), "update", this).call(this, node, decorations, _innerDecorations, this.validUpdate);
+      }
+      return _get(_getPrototypeOf(Datasource.prototype), "update", this).call(this, node, decorations, _innerDecorations, validUpdate);
+    }
+  }, {
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');

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

@@ -9,6 +9,7 @@ import { addLinkMetadata } from '@atlaskit/editor-common/card';
 import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { appearanceForNodeType, selectedCardAppearance } from '../utils';
 import { hideDatasourceModal, queueCards, resolveCard } from './actions';
 import { pluginKey } from './plugin-key';
@@ -361,13 +362,21 @@ export var setSelectedCardAppearance = function setSelectedCardAppearance(appear
       }
       return false;
     }
-    if (appearanceForNodeType(selectedNode.type) === appearance) {
-      return false;
+    var attrs;
+    if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      if (appearanceForNodeType(selectedNode.type) === appearance && !selectedNode.attrs.datasource) {
+        return false;
+      }
+      attrs = getAttrsForAppearance(appearance, selectedNode);
+    } else {
+      if (appearanceForNodeType(selectedNode.type) === appearance) {
+        return false;
+      }
+      var isEmbed = appearance === 'embed';
+      attrs = isEmbed ? _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
+        layout: 'center'
+      }) : selectedNode.attrs;
     }
-    var isEmbed = appearance === 'embed';
-    var attrs = isEmbed ? _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
-      layout: 'center'
-    }) : selectedNode.attrs;
     var _state$selection = state.selection,
       from = _state$selection.from,
       to = _state$selection.to;
@@ -472,4 +481,21 @@ export var insertDatasource = function insertDatasource(state, adf, view, source
     sourceEvent: sourceEvent
   });
   view.dispatch(tr.scrollIntoView());
+};
+
+/**
+ * Get attributes for new Card Appearance
+ */
+export var getAttrsForAppearance = function getAttrsForAppearance(appearance, selectedNode) {
+  if (appearance === 'embed') {
+    return _objectSpread(_objectSpread({}, selectedNode.attrs), {}, {
+      layout: 'center'
+    });
+  }
+  if (selectedNode.attrs.datasource) {
+    return {
+      url: selectedNode.attrs.url
+    };
+  }
+  return selectedNode.attrs;
 };

package/dist/esm/pm-plugins/main.js

@@ -91,6 +91,16 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             var events = eventsFromTransaction(tr, prevEditorState);
             cardPluginEvents.push.apply(cardPluginEvents, _toConsumableArray(events));
           }
+          if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && !meta) {
+            if (pluginState.datasourceTableRef) {
+              if (!(tr.selection instanceof NodeSelection) || !tr.selection.node.attrs.datasource) {
+                // disable resize button when switching from datasource to block card
+                return _objectSpread(_objectSpread({}, pluginStateWithUpdatedPos), {}, {
+                  datasourceTableRef: undefined
+                });
+              }
+            }
+          }
           if (!meta) {
             return pluginStateWithUpdatedPos;
           }

package/dist/esm/toolbar.js

@@ -207,7 +207,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state);
+      var _pluginInjectionApi$c;
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, platform, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var toolbarItems = [{
@@ -275,7 +276,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
-            var _pluginInjectionApi$c;
+            var _pluginInjectionApi$c2;
             return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
               key: "link-appearance",
               url: url,
@@ -287,7 +288,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               allowBlockCards: allowBlockCards,
               platform: platform,
               editorAnalyticsApi: editorAnalyticsApi,
-              cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions,
+              cardActions: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.card) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions,
               showUpgradeDiscoverability: showUpgradeDiscoverability
             });
           }
@@ -350,7 +351,7 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(intl, editorAnalyti
     type: 'separator'
   }];
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) {
   var _node$attrs3;
   var toolbarItems = [];
   if (isDatasourceConfigEditable(datasourceId)) {
@@ -367,6 +368,50 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
+
+  // Smart card view buttons only allowed for non-config datasources
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && !isDatasourceConfigEditable(datasourceId) && cardOptions) {
+    var allowBlockCards = cardOptions.allowBlockCards,
+      allowEmbeds = cardOptions.allowEmbeds,
+      showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
+    var url = metadata.url;
+    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,
+          platform: platform,
+          editorAnalyticsApi: editorAnalyticsApi,
+          cardActions: cardActions,
+          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
+        });
+      }
+    }, {
+      type: 'separator'
+    });
+  }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({
       id: 'editor.link.openLink',

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -19,7 +19,8 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     intl = _ref.intl,
     url = _ref.url,
     editorView = _ref.editorView,
-    editorState = _ref.editorState;
+    editorState = _ref.editorState,
+    selected = _ref.selected;
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -61,7 +62,7 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     icon: jsx(TableIcon, {
       label: buttonLabel
     }),
-    selected: false,
+    selected: selected,
     onClick: onChangeAppearance,
     testId: 'card-datasource-appearance-button'
   }));
@@ -71,7 +72,8 @@ export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref
     editorAnalyticsApi = _ref2.editorAnalyticsApi,
     url = _ref2.url,
     editorView = _ref2.editorView,
-    editorState = _ref2.editorState;
+    editorState = _ref2.editorState,
+    selected = _ref2.selected;
   return jsx(CardContextProvider, null, function (_ref3) {
     var cardContext = _ref3.cardContext;
     return jsx(DatasourceAppearanceButtonWithCardContext, {
@@ -80,7 +82,8 @@ export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       editorState: editorState,
-      cardContext: cardContext
+      cardContext: cardContext,
+      selected: selected
     });
   });
 };

package/dist/esm/ui/LinkToolbarAppearance.js

@@ -46,7 +46,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         editorAnalyticsApi = _this$props.editorAnalyticsApi,
         cardActions = _this$props.cardActions,
         _this$props$showUpgra = _this$props.showUpgradeDiscoverability,
-        showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? true : _this$props$showUpgra;
+        showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? true : _this$props$showUpgra,
+        isDatasourceView = _this$props.isDatasourceView;
       var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       var defaultCommand = function defaultCommand() {
         return false;
@@ -74,7 +75,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         appearance: 'block',
         title: intl.formatMessage(messages.block),
         onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
-        selected: currentAppearance === 'block',
+        selected: currentAppearance === 'block' && !isDatasourceView,
         testId: 'block-appearance',
         disabled: !isBlockCardLinkSupportedInParent,
         tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
@@ -84,7 +85,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         onClick: commandWithMetadata((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
           action: ACTION.CHANGED_TYPE
         }),
-        selected: !currentAppearance,
+        selected: !currentAppearance && !isDatasourceView,
         testId: 'url-appearance'
       }, {
         appearance: 'inline',

package/dist/types/nodeviews/datasource.d.ts

@@ -8,7 +8,7 @@ import type { getPosHandler, ReactComponentProps } from '@atlaskit/editor-common
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../index';
 export interface DatasourceProps extends ReactComponentProps {
     node: PMNode;
@@ -42,6 +42,8 @@ export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
     private isNodeNested;
     constructor(props: DatasourceProps);
+    validUpdate(currentNode: PMNode, newNode: PMNode): boolean;
+    update(node: PMNode, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource, validUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;
 }

package/dist/types/pm-plugins/doc.d.ts

@@ -25,3 +25,7 @@ export type LinkNodes = {
 export declare const getLinkNodeType: (appearance: CardAppearance, linkNodes: LinkNodes) => NodeType;
 export declare const updateCardViaDatasource: (state: EditorState, node: Node, newAdf: DatasourceAdf | InlineCardAdf, view: EditorView, sourceEvent?: UIAnalyticsEvent) => void;
 export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf | InlineCardAdf, view: EditorView, sourceEvent?: UIAnalyticsEvent) => void;
+/**
+ * Get attributes for new Card Appearance
+ */
+export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;

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

@@ -11,5 +11,6 @@ export interface DatasourceAppearanceButtonProps {
     editorView?: EditorView;
     editorState: EditorState;
     cardContext?: CardContext;
+    selected?: boolean;
 }
-export declare const DatasourceAppearanceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: DatasourceAppearanceButtonProps) => jsx.JSX.Element;
+export declare const DatasourceAppearanceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, selected, }: DatasourceAppearanceButtonProps) => jsx.JSX.Element;

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

@@ -20,6 +20,7 @@ export interface LinkToolbarAppearanceProps {
     platform?: CardPlatform;
     cardActions: CardPluginActions | undefined;
     showUpgradeDiscoverability?: boolean;
+    isDatasourceView?: boolean;
 }
 export declare class LinkToolbarAppearance extends React.Component<LinkToolbarAppearanceProps, {}> {
     static contextTypes: {

package/dist/types-ts4.5/nodeviews/datasource.d.ts

@@ -8,7 +8,7 @@ import type { getPosHandler, ReactComponentProps } from '@atlaskit/editor-common
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../index';
 export interface DatasourceProps extends ReactComponentProps {
     node: PMNode;
@@ -42,6 +42,8 @@ export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
     private isNodeNested;
     constructor(props: DatasourceProps);
+    validUpdate(currentNode: PMNode, newNode: PMNode): boolean;
+    update(node: PMNode, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource, validUpdate?: (currentNode: PMNode, newNode: PMNode) => boolean): boolean;
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;
 }

package/dist/types-ts4.5/pm-plugins/doc.d.ts

@@ -25,3 +25,7 @@ export type LinkNodes = {
 export declare const getLinkNodeType: (appearance: CardAppearance, linkNodes: LinkNodes) => NodeType;
 export declare const updateCardViaDatasource: (state: EditorState, node: Node, newAdf: DatasourceAdf | InlineCardAdf, view: EditorView, sourceEvent?: UIAnalyticsEvent) => void;
 export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf | InlineCardAdf, view: EditorView, sourceEvent?: UIAnalyticsEvent) => void;
+/**
+ * Get attributes for new Card Appearance
+ */
+export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;

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

@@ -11,5 +11,6 @@ export interface DatasourceAppearanceButtonProps {
     editorView?: EditorView;
     editorState: EditorState;
     cardContext?: CardContext;
+    selected?: boolean;
 }
-export declare const DatasourceAppearanceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: DatasourceAppearanceButtonProps) => jsx.JSX.Element;
+export declare const DatasourceAppearanceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, selected, }: DatasourceAppearanceButtonProps) => jsx.JSX.Element;

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

@@ -20,6 +20,7 @@ export interface LinkToolbarAppearanceProps {
     platform?: CardPlatform;
     cardActions: CardPluginActions | undefined;
     showUpgradeDiscoverability?: boolean;
+    isDatasourceView?: boolean;
 }
 export declare class LinkToolbarAppearance extends React.Component<LinkToolbarAppearanceProps, {}> {
     static contextTypes: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,11 +35,11 @@
     "@atlaskit/adf-schema": "^35.5.1",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/custom-steps": "^0.0.13",
-    "@atlaskit/editor-common": "^77.4.0",
+    "@atlaskit/editor-common": "^78.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
-    "@atlaskit/editor-plugin-floating-toolbar": "^1.0.0",
+    "@atlaskit/editor-plugin-floating-toolbar": "^1.1.0",
     "@atlaskit/editor-plugin-grid": "^1.0.0",
     "@atlaskit/editor-plugin-hyperlink": "^1.0.0",
     "@atlaskit/editor-plugin-width": "^1.0.0",
@@ -56,7 +56,7 @@
     "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/smart-card": "^26.47.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.36.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",