@atlaskit/editor-plugin-card 0.16.7 → 0.16.8

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-card
 
+## 0.16.8
+
+### Patch Changes
+
+- [#70612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70612) [`87457cd97d6b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/87457cd97d6b) - Added a "datasource appearance" button to the toolbar and renamed an internal export.
+- Updated dependencies
+
 ## 0.16.7
 
 ### Patch Changes

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.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;
+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;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -420,8 +420,8 @@ var getLinkNodeType = exports.getLinkNodeType = function getLinkNodeType(appeara
   }
 };
 
-// Apply an update made from the datasource edit modal to a card
-var updateCardFromDatasourceModal = exports.updateCardFromDatasourceModal = function updateCardFromDatasourceModal(state, node, newAdf, view, sourceEvent) {
+// Apply an update made from a datasource ui interaction
+var updateCardViaDatasource = exports.updateCardViaDatasource = function updateCardViaDatasource(state, node, newAdf, view, sourceEvent) {
   var tr = state.tr,
     from = state.selection.from,
     schemaNodes = state.schema.nodes;

package/dist/cjs/toolbar.js

@@ -25,6 +25,7 @@ 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 _DatasourceAppearanceButton = require("./ui/DatasourceAppearanceButton");
 var _EditDatasourceButton = require("./ui/EditDatasourceButton");
 var _EditLinkToolbar = require("./ui/EditLinkToolbar");
 var _LinkToolbarAppearance = require("./ui/LinkToolbarAppearance");
@@ -279,6 +280,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       // This code will be executed only for appearances such as "inline", "block" & "embed"
       // For url appearance, please see HyperlinkToolbarAppearanceProps
       if (currentAppearance) {
+        var showDatasourceAppearance = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && allowDatasource && url;
         toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(url, currentAppearance)).concat([{
           type: 'custom',
           fallback: [],
@@ -299,7 +301,19 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               showUpgradeDiscoverability: showUpgradeDiscoverability
             });
           }
-        }, {
+        }], (0, _toConsumableArray2.default)(showDatasourceAppearance ? [{
+          type: 'custom',
+          fallback: [],
+          render: function render(editorView) {
+            return /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
+              intl: intl,
+              editorAnalyticsApi: editorAnalyticsApi,
+              url: url,
+              editorView: editorView,
+              editorState: state
+            });
+          }
+        }] : []), [{
           type: 'separator'
         }]));
       }

package/dist/cjs/ui/DatasourceAppearanceButton.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceAppearanceButton = void 0;
+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 _state = require("@atlaskit/editor-prosemirror/state");
+var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/table"));
+var _linkDatasource = require("@atlaskit/link-datasource");
+var _primitives = require("@atlaskit/primitives");
+var _doc = require("../pm-plugins/doc");
+var _CardContextProvider = require("./CardContextProvider");
+var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
+/** @jsx jsx */
+
+var buttonStyles = (0, _react2.css)({
+  pointerEvents: 'auto'
+});
+var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceButtonWithCardContext(_ref) {
+  var cardContext = _ref.cardContext,
+    intl = _ref.intl,
+    url = _ref.url,
+    editorView = _ref.editorView,
+    editorState = _ref.editorState;
+  var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    datasourceId = _useFetchDatasourceIn.datasourceId,
+    parameters = _useFetchDatasourceIn.parameters;
+  var onChangeAppearance = (0, _react.useCallback)(function () {
+    if (!editorView || !datasourceId || !parameters) {
+      return;
+    }
+    var newAdf = (0, _linkDatasource.buildDatasourceAdf)({
+      id: datasourceId,
+      parameters: parameters,
+      views: [{
+        type: 'table'
+      }]
+    }, url);
+    var selection = editorState.selection;
+    var existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
+    if (existingNode) {
+      (0, _doc.updateCardViaDatasource)(editorState, existingNode, newAdf, editorView, undefined);
+    }
+  }, [parameters, datasourceId, editorState, editorView, url]);
+  if (!parameters || !datasourceId || !(0, _utils.canRenderDatasource)(datasourceId)) {
+    return null;
+  }
+  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;
+    }
+  }
+  var buttonLabel = intl.formatMessage(_messages.cardMessages.datasourceAppearanceTitle);
+  return (0, _react2.jsx)(_primitives.Flex, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    css: buttonStyles,
+    title: buttonLabel,
+    icon: (0, _react2.jsx)(_table.default, {
+      label: buttonLabel
+    }),
+    selected: false,
+    onClick: onChangeAppearance,
+    testId: 'card-datasource-appearance-button'
+  }));
+};
+var DatasourceAppearanceButton = exports.DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref2) {
+  var intl = _ref2.intl,
+    editorAnalyticsApi = _ref2.editorAnalyticsApi,
+    url = _ref2.url,
+    editorView = _ref2.editorView,
+    editorState = _ref2.editorState;
+  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
+    var cardContext = _ref3.cardContext;
+    return (0, _react2.jsx)(DatasourceAppearanceButtonWithCardContext, {
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      editorState: editorState,
+      cardContext: cardContext
+    });
+  });
+};

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

@@ -50,7 +50,7 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
       });
     }
     if (existingNode) {
-      (0, _doc.updateCardFromDatasourceModal)(view.state, existingNode, newAdf, view, analyticEvent);
+      (0, _doc.updateCardViaDatasource)(view.state, existingNode, newAdf, view, analyticEvent);
     } else {
       (0, _doc.insertDatasource)(view.state, newAdf, view, analyticEvent);
     }

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

@@ -394,8 +394,8 @@ export const getLinkNodeType = (appearance, linkNodes) => {
   }
 };
 
-// Apply an update made from the datasource edit modal to a card
-export const updateCardFromDatasourceModal = (state, node, newAdf, view, sourceEvent) => {
+// Apply an update made from a datasource ui interaction
+export const updateCardViaDatasource = (state, node, newAdf, view, sourceEvent) => {
   const {
     tr,
     selection: {

package/dist/es2019/toolbar.js

@@ -15,6 +15,7 @@ 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 { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
 import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
@@ -275,6 +276,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     // This code will be executed only for appearances such as "inline", "block" & "embed"
     // For url appearance, please see HyperlinkToolbarAppearanceProps
     if (currentAppearance) {
+      const showDatasourceAppearance = getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && allowDatasource && url;
       toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), {
         type: 'custom',
         fallback: [],
@@ -295,7 +297,17 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
             showUpgradeDiscoverability: showUpgradeDiscoverability
           });
         }
-      }, {
+      }, ...(showDatasourceAppearance ? [{
+        type: 'custom',
+        fallback: [],
+        render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          url: url,
+          editorView: editorView,
+          editorState: state
+        })
+      }] : []), {
         type: 'separator'
       });
     }

package/dist/es2019/ui/DatasourceAppearanceButton.js

@@ -0,0 +1,90 @@
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import TableIcon from '@atlaskit/icon/glyph/table';
+import { buildDatasourceAdf } from '@atlaskit/link-datasource';
+import { Flex } from '@atlaskit/primitives';
+import { updateCardViaDatasource } from '../pm-plugins/doc';
+import { CardContextProvider } from './CardContextProvider';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+const buttonStyles = css({
+  pointerEvents: 'auto'
+});
+const DatasourceAppearanceButtonWithCardContext = ({
+  cardContext,
+  intl,
+  url,
+  editorView,
+  editorState
+}) => {
+  const {
+    datasourceId,
+    parameters
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
+  const onChangeAppearance = useCallback(() => {
+    if (!editorView || !datasourceId || !parameters) {
+      return;
+    }
+    const newAdf = buildDatasourceAdf({
+      id: datasourceId,
+      parameters,
+      views: [{
+        type: 'table'
+      }]
+    }, url);
+    const {
+      selection
+    } = editorState;
+    const existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+    if (existingNode) {
+      updateCardViaDatasource(editorState, existingNode, newAdf, editorView, undefined);
+    }
+  }, [parameters, datasourceId, editorState, editorView, url]);
+  if (!parameters || !datasourceId || !canRenderDatasource(datasourceId)) {
+    return null;
+  }
+  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;
+    }
+  }
+  const buttonLabel = intl.formatMessage(messages.datasourceAppearanceTitle);
+  return jsx(Flex, null, jsx(Button, {
+    css: buttonStyles,
+    title: buttonLabel,
+    icon: jsx(TableIcon, {
+      label: buttonLabel
+    }),
+    selected: false,
+    onClick: onChangeAppearance,
+    testId: 'card-datasource-appearance-button'
+  }));
+};
+export const DatasourceAppearanceButton = ({
+  intl,
+  editorAnalyticsApi,
+  url,
+  editorView,
+  editorState
+}) => {
+  return jsx(CardContextProvider, null, ({
+    cardContext
+  }) => jsx(DatasourceAppearanceButtonWithCardContext, {
+    url: url,
+    intl: intl,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editorView: editorView,
+    editorState: editorState,
+    cardContext: cardContext
+  }));
+};

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, updateCardFromDatasourceModal } from '../../pm-plugins/doc';
+import { insertDatasource, updateCardViaDatasource } from '../../pm-plugins/doc';
 import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
 export const DatasourceModal = ({
   view,
@@ -42,7 +42,7 @@ export const DatasourceModal = ({
       }));
     }
     if (existingNode) {
-      updateCardFromDatasourceModal(view.state, existingNode, newAdf, view, analyticEvent);
+      updateCardViaDatasource(view.state, existingNode, newAdf, view, analyticEvent);
     } else {
       insertDatasource(view.state, newAdf, view, analyticEvent);
     }

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

@@ -413,8 +413,8 @@ export var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
   }
 };
 
-// Apply an update made from the datasource edit modal to a card
-export var updateCardFromDatasourceModal = function updateCardFromDatasourceModal(state, node, newAdf, view, sourceEvent) {
+// Apply an update made from a datasource ui interaction
+export var updateCardViaDatasource = function updateCardViaDatasource(state, node, newAdf, view, sourceEvent) {
   var tr = state.tr,
     from = state.selection.from,
     schemaNodes = state.schema.nodes;

package/dist/esm/toolbar.js

@@ -19,6 +19,7 @@ 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 { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
 import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
@@ -269,6 +270,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       // This code will be executed only for appearances such as "inline", "block" & "embed"
       // For url appearance, please see HyperlinkToolbarAppearanceProps
       if (currentAppearance) {
+        var showDatasourceAppearance = getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && allowDatasource && url;
         toolbarItems.unshift.apply(toolbarItems, _toConsumableArray(getToolbarViewedItem(url, currentAppearance)).concat([{
           type: 'custom',
           fallback: [],
@@ -289,7 +291,19 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               showUpgradeDiscoverability: showUpgradeDiscoverability
             });
           }
-        }, {
+        }], _toConsumableArray(showDatasourceAppearance ? [{
+          type: 'custom',
+          fallback: [],
+          render: function render(editorView) {
+            return /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+              intl: intl,
+              editorAnalyticsApi: editorAnalyticsApi,
+              url: url,
+              editorView: editorView,
+              editorState: state
+            });
+          }
+        }] : []), [{
           type: 'separator'
         }]));
       }

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -0,0 +1,86 @@
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import TableIcon from '@atlaskit/icon/glyph/table';
+import { buildDatasourceAdf } from '@atlaskit/link-datasource';
+import { Flex } from '@atlaskit/primitives';
+import { updateCardViaDatasource } from '../pm-plugins/doc';
+import { CardContextProvider } from './CardContextProvider';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+var buttonStyles = css({
+  pointerEvents: 'auto'
+});
+var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceButtonWithCardContext(_ref) {
+  var cardContext = _ref.cardContext,
+    intl = _ref.intl,
+    url = _ref.url,
+    editorView = _ref.editorView,
+    editorState = _ref.editorState;
+  var _useFetchDatasourceIn = useFetchDatasourceInfo({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    datasourceId = _useFetchDatasourceIn.datasourceId,
+    parameters = _useFetchDatasourceIn.parameters;
+  var onChangeAppearance = useCallback(function () {
+    if (!editorView || !datasourceId || !parameters) {
+      return;
+    }
+    var newAdf = buildDatasourceAdf({
+      id: datasourceId,
+      parameters: parameters,
+      views: [{
+        type: 'table'
+      }]
+    }, url);
+    var selection = editorState.selection;
+    var existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+    if (existingNode) {
+      updateCardViaDatasource(editorState, existingNode, newAdf, editorView, undefined);
+    }
+  }, [parameters, datasourceId, editorState, editorView, url]);
+  if (!parameters || !datasourceId || !canRenderDatasource(datasourceId)) {
+    return null;
+  }
+  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;
+    }
+  }
+  var buttonLabel = intl.formatMessage(messages.datasourceAppearanceTitle);
+  return jsx(Flex, null, jsx(Button, {
+    css: buttonStyles,
+    title: buttonLabel,
+    icon: jsx(TableIcon, {
+      label: buttonLabel
+    }),
+    selected: false,
+    onClick: onChangeAppearance,
+    testId: 'card-datasource-appearance-button'
+  }));
+};
+export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref2) {
+  var intl = _ref2.intl,
+    editorAnalyticsApi = _ref2.editorAnalyticsApi,
+    url = _ref2.url,
+    editorView = _ref2.editorView,
+    editorState = _ref2.editorState;
+  return jsx(CardContextProvider, null, function (_ref3) {
+    var cardContext = _ref3.cardContext;
+    return jsx(DatasourceAppearanceButtonWithCardContext, {
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      editorState: editorState,
+      cardContext: cardContext
+    });
+  });
+};

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

@@ -6,7 +6,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, updateCardFromDatasourceModal } from '../../pm-plugins/doc';
+import { insertDatasource, updateCardViaDatasource } from '../../pm-plugins/doc';
 import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
 export var DatasourceModal = function DatasourceModal(_ref) {
   var _existingNode$attrs, _existingNode$attrs2;
@@ -40,7 +40,7 @@ export var DatasourceModal = function DatasourceModal(_ref) {
       });
     }
     if (existingNode) {
-      updateCardFromDatasourceModal(view.state, existingNode, newAdf, view, analyticEvent);
+      updateCardViaDatasource(view.state, existingNode, newAdf, view, analyticEvent);
     } else {
       insertDatasource(view.state, newAdf, view, analyticEvent);
     }

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

@@ -23,5 +23,5 @@ export type LinkNodes = {
     [key in 'inlineCard' | 'blockCard' | 'embedCard']: NodeType;
 };
 export declare const getLinkNodeType: (appearance: CardAppearance, linkNodes: LinkNodes) => NodeType;
-export declare const updateCardFromDatasourceModal: (state: EditorState, node: Node, newAdf: DatasourceAdf | InlineCardAdf, view: EditorView, sourceEvent?: UIAnalyticsEvent) => void;
+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;

package/dist/types/pm-plugins/util/resolve.d.ts

@@ -4,5 +4,5 @@ import type { CardOptions } from '@atlaskit/editor-common/card';
 import type { CardProvider, DatasourceAdf } from '@atlaskit/editor-common/provider-factory';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Request } from '../../types';
-export declare const resolveWithProvider: (view: EditorView, provider: CardProvider, request: Request, options: CardOptions, editorAnalyticsApi: EditorAnalyticsAPI | undefined, createAnalyticsEvent: CreateUIAnalyticsEvent | undefined) => Promise<void | import("@atlaskit/linking-common").InlineCardAdf | import("@atlaskit/linking-common").BlockCardAdf | import("@atlaskit/linking-common").EmbedCardAdf | DatasourceAdf>;
+export declare const resolveWithProvider: (view: EditorView, provider: CardProvider, request: Request, options: CardOptions, editorAnalyticsApi: EditorAnalyticsAPI | undefined, createAnalyticsEvent: CreateUIAnalyticsEvent | undefined) => Promise<void | import("@atlaskit/linking-common").InlineCardAdf | import("@atlaskit/linking-common").BlockCardAdf | import("@atlaskit/linking-common").EmbedCardAdf | DatasourceAdf<Record<string, unknown>>>;
 export declare const handleProvider: (_: 'cardProvider', provider: Promise<CardProvider> | undefined, view: EditorView) => void;

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

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardContext } from '@atlaskit/link-provider';
+export interface DatasourceAppearanceButtonProps {
+    intl: IntlShape;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    url: string;
+    editorView?: EditorView;
+    editorState: EditorState;
+    cardContext?: CardContext;
+}
+export declare const DatasourceAppearanceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: DatasourceAppearanceButtonProps) => jsx.JSX.Element;

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

@@ -23,5 +23,5 @@ export type LinkNodes = {
     [key in 'inlineCard' | 'blockCard' | 'embedCard']: NodeType;
 };
 export declare const getLinkNodeType: (appearance: CardAppearance, linkNodes: LinkNodes) => NodeType;
-export declare const updateCardFromDatasourceModal: (state: EditorState, node: Node, newAdf: DatasourceAdf | InlineCardAdf, view: EditorView, sourceEvent?: UIAnalyticsEvent) => void;
+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;

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

@@ -4,5 +4,5 @@ import type { CardOptions } from '@atlaskit/editor-common/card';
 import type { CardProvider, DatasourceAdf } from '@atlaskit/editor-common/provider-factory';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Request } from '../../types';
-export declare const resolveWithProvider: (view: EditorView, provider: CardProvider, request: Request, options: CardOptions, editorAnalyticsApi: EditorAnalyticsAPI | undefined, createAnalyticsEvent: CreateUIAnalyticsEvent | undefined) => Promise<void | import("@atlaskit/linking-common").InlineCardAdf | import("@atlaskit/linking-common").BlockCardAdf | import("@atlaskit/linking-common").EmbedCardAdf | DatasourceAdf>;
+export declare const resolveWithProvider: (view: EditorView, provider: CardProvider, request: Request, options: CardOptions, editorAnalyticsApi: EditorAnalyticsAPI | undefined, createAnalyticsEvent: CreateUIAnalyticsEvent | undefined) => Promise<void | import("@atlaskit/linking-common").InlineCardAdf | import("@atlaskit/linking-common").BlockCardAdf | import("@atlaskit/linking-common").EmbedCardAdf | DatasourceAdf<Record<string, unknown>>>;
 export declare const handleProvider: (_: 'cardProvider', provider: Promise<CardProvider> | undefined, view: EditorView) => void;

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

@@ -0,0 +1,15 @@
+import { jsx } from '@emotion/react';
+import type { IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardContext } from '@atlaskit/link-provider';
+export interface DatasourceAppearanceButtonProps {
+    intl: IntlShape;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    url: string;
+    editorView?: EditorView;
+    editorState: EditorState;
+    cardContext?: CardContext;
+}
+export declare const DatasourceAppearanceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: DatasourceAppearanceButtonProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.16.7",
+  "version": "0.16.8",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.3.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/custom-steps": "^0.0.11",
-    "@atlaskit/editor-common": "^77.1.0",
+    "@atlaskit/editor-common": "^77.2.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -49,7 +49,7 @@
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
-    "@atlaskit/link-datasource": "^1.19.0",
+    "@atlaskit/link-datasource": "^1.22.0",
     "@atlaskit/linking-common": "^5.3.0",
     "@atlaskit/linking-types": "^8.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
@@ -115,6 +115,9 @@
     },
     "platform.editor.show-embed-card-frame-renderer": {
       "type": "boolean"
+    },
+    "platform.linking-platform.enable-datasource-appearance-toolbar": {
+      "type": "boolean"
     }
   },
   "stricter": {