@atlaskit/editor-plugin-card 2.6.1 → 2.6.3

package/dist/esm/nodeviews/blockCard.js

@@ -14,7 +14,7 @@ import rafSchedule from 'raf-schd';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../utils';
@@ -126,30 +126,48 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(BlockCard, _ReactNodeView);
   var _super2 = _createSuper(BlockCard);
   function BlockCard() {
+    var _this2;
     _classCallCheck(this, BlockCard);
-    return _super2.apply(this, arguments);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "updateContentEditable", function (editorViewModeState, divElement) {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+    return _this2;
   }
   _createClass(BlockCard, [{
     key: "createDomRef",
     value: function createDomRef() {
+      var _this3 = this;
       var domRef = document.createElement('div');
       if (this.reactComponentProps.platform !== 'mobile') {
         // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
         // see also: https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+        if (fg('linking-platform-contenteditable-false-live-view')) {
+          var _this$reactComponentP, _this$reactComponentP2;
+          this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref2) {
+            var nextSharedState = _ref2.nextSharedState;
+            return _this3.updateContentEditable(nextSharedState, domRef);
+          });
+          this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
+        } else {
+          domRef.contentEditable = 'true';
+        }
         domRef.setAttribute('spellcheck', 'false');
       }
       return domRef;
     }
-
+  }, {
+    key: "validUpdate",
+    value:
     // 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) {
+    function validUpdate(currentNode, newNode) {
       var _currentNode$attrs, _newNode$attrs;
-      if (getBooleanFF('platform.linking-platform.editor-datasource-typeguards')) {
+      if (fg('platform.linking-platform.editor-datasource-typeguards')) {
         var _isCurrentNodeBlockCard = !isDatasourceNode(currentNode);
         var _isNewNodeDatasource = isDatasourceNode(newNode);
 
@@ -170,12 +188,12 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-        platform = _this$reactComponentP.platform,
-        actionOptions = _this$reactComponentP.actionOptions,
-        showServerActions = _this$reactComponentP.showServerActions,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        onClickCallback = _this$reactComponentP.onClickCallback;
+      var _this$reactComponentP3 = this.reactComponentProps,
+        platform = _this$reactComponentP3.platform,
+        actionOptions = _this$reactComponentP3.actionOptions,
+        showServerActions = _this$reactComponentP3.showServerActions,
+        pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP3.onClickCallback;
       return /*#__PURE__*/React.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -187,6 +205,12 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         onClickCallback: onClickCallback
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+    }
   }]);
   return BlockCard;
 }(ReactNodeView);

package/dist/esm/nodeviews/embedCard.js

@@ -20,6 +20,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -343,8 +344,16 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(EmbedCard, _ReactNodeView);
   var _super2 = _createSuper(EmbedCard);
   function EmbedCard() {
+    var _this2;
     _classCallCheck(this, EmbedCard);
-    return _super2.apply(this, arguments);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "updateContentEditable", function (editorViewModeState, divElement) {
+      divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
+    });
+    return _this2;
   }
   _createClass(EmbedCard, [{
     key: "viewShouldUpdate",
@@ -357,10 +366,20 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "createDomRef",
     value: function createDomRef() {
+      var _this3 = this;
       var domRef = document.createElement('div');
       if (this.reactComponentProps.platform !== 'mobile') {
         // It is a tradeoff for the bug mentioned that occurs in Chrome: https://product-fabric.atlassian.net/browse/ED-5379, https://github.com/ProseMirror/prosemirror/issues/884
-        domRef.contentEditable = 'true';
+        if (fg('linking-platform-contenteditable-false-live-view')) {
+          var _this$reactComponentP, _this$reactComponentP2;
+          this.unsubscribe = (_this$reactComponentP = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.editorViewMode) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.sharedState.onChange(function (_ref3) {
+            var nextSharedState = _ref3.nextSharedState;
+            return _this3.updateContentEditable(nextSharedState, domRef);
+          });
+          this.updateContentEditable((_this$reactComponentP2 = this.reactComponentProps.pluginInjectionApi) === null || _this$reactComponentP2 === void 0 || (_this$reactComponentP2 = _this$reactComponentP2.editorViewMode) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.sharedState.currentState(), domRef);
+        } else {
+          domRef.contentEditable = 'true';
+        }
         domRef.setAttribute('spellcheck', 'false');
       }
       return domRef;
@@ -368,14 +387,14 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render() {
-      var _this$reactComponentP = this.reactComponentProps,
-        eventDispatcher = _this$reactComponentP.eventDispatcher,
-        allowResizing = _this$reactComponentP.allowResizing,
-        platform = _this$reactComponentP.platform,
-        fullWidthMode = _this$reactComponentP.fullWidthMode,
-        dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
-        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi,
-        onClickCallback = _this$reactComponentP.onClickCallback;
+      var _this$reactComponentP3 = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP3.eventDispatcher,
+        allowResizing = _this$reactComponentP3.allowResizing,
+        platform = _this$reactComponentP3.platform,
+        fullWidthMode = _this$reactComponentP3.fullWidthMode,
+        dispatchAnalyticsEvent = _this$reactComponentP3.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
+        onClickCallback = _this$reactComponentP3.onClickCallback;
       return /*#__PURE__*/React.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -389,6 +408,12 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         onClickCallback: onClickCallback
       });
     }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+    }
   }]);
   return EmbedCard;
 }(ReactNodeView);

package/dist/esm/toolbar.js

@@ -466,6 +466,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       render: function render(editorView) {
         return /*#__PURE__*/React.createElement(EditToolbarButton, {
           datasourceId: datasourceId,
+          node: node,
           key: "edit-toolbar-item",
           url: metadata.url,
           intl: intl,

package/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -0,0 +1,116 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useCallback, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { ButtonItem } from '@atlaskit/menu';
+import { Flex } from '@atlaskit/primitives';
+import { focusEditorView } from '../../utils';
+import { editDatasource } from '../EditDatasourceButton';
+var dropdownExpandContainer = css({
+  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+});
+var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref) {
+  var datasourceId = _ref.datasourceId,
+    currentAppearance = _ref.currentAppearance,
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    editVariant = _ref.editVariant,
+    editorView = _ref.editorView,
+    extensionKey = _ref.extensionKey,
+    onLinkEditClick = _ref.onLinkEditClick,
+    intl = _ref.intl;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var containerRef = useRef();
+  var toggleOpen = function toggleOpen() {
+    return setIsOpen(function (open) {
+      return !open;
+    });
+  };
+  var onClose = function onClose() {
+    return setIsOpen(false);
+  };
+  var onEditLink = useCallback(function () {
+    if (editorView) {
+      onLinkEditClick(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
+    }
+  }, [editorView, onLinkEditClick]);
+  var onEditDatasource = useCallback(function () {
+    if (editorView && datasourceId) {
+      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
+    }
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, jsx(FormattedMessage, linkToolbarMessages.editLink)), jsx(Separator, null));
+      }
+    case 'edit-datasource':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, jsx(FormattedMessage, linkToolbarMessages.editDatasourceStandalone)), jsx(Separator, null));
+      }
+    case 'edit-dropdown':
+      {
+        var trigger = jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: jsx("span", {
+            css: dropdownExpandContainer
+          }, jsx(ExpandIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, jsx(FormattedMessage, messages.editDropdownTriggerTitle)), jsx(Separator, null));
+        return jsx(Flex, {
+          ref: containerRef
+        }, jsx(UiDropdown, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.MENU
+          }
+        }, jsx(ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
+  }
+};
+export default EditToolbarButtonPresentation;

package/dist/esm/ui/{EditToolbarButton.js → EditToolbarButton/index.js}

@@ -12,11 +12,14 @@ import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
-import { editDatasource } from '../ui/EditDatasourceButton';
-import { focusEditorView, isDatasourceConfigEditable } from '../utils';
-import { CardContextProvider } from './CardContextProvider';
-import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+import { editDatasource } from '../../ui/EditDatasourceButton';
+import { focusEditorView, isDatasourceConfigEditable } from '../../utils';
+import { CardContextProvider } from '../CardContextProvider';
+import { useFetchDatasourceDataInfo } from '../useFetchDatasourceDataInfo';
+import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
+import EditToolbarButtonPresentation from './EditToolbarButtonPresentation';
 var dropdownExpandContainer = css({
   margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
 });
@@ -144,6 +147,91 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
       return null;
   }
 };
+var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
+  var cardContext = props.cardContext,
+    currentAppearance = props.currentAppearance,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    url = props.url;
+  var _useFetchDatasourceIn2 = useFetchDatasourceInfo({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    extensionKey = _useFetchDatasourceIn2.extensionKey,
+    datasourceId = _useFetchDatasourceIn2.datasourceId;
+  var editVariant = useMemo(function () {
+    var _cardContext$store2, _urlState$error2;
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return 'edit-link';
+    }
+    var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.getState()[url];
+    if ((urlState === null || urlState === void 0 || (_urlState$error2 = urlState.error) === null || _urlState$error2 === void 0 ? void 0 : _urlState$error2.kind) === 'fatal') {
+      return 'edit-link';
+    }
+    return 'edit-dropdown';
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  return jsx(EditToolbarButtonPresentation, {
+    datasourceId: datasourceId,
+    currentAppearance: currentAppearance,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editVariant: editVariant,
+    editorView: editorView,
+    extensionKey: extensionKey,
+    onLinkEditClick: onLinkEditClick,
+    intl: intl
+  });
+};
+var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasourceId(props) {
+  var currentAppearance = props.currentAppearance,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    intl = props.intl,
+    onLinkEditClick = props.onLinkEditClick,
+    datasourceId = props.datasourceId,
+    node = props.node;
+  var fetchData = useMemo(function () {
+    try {
+      var _attrs$datasource$vie;
+      var attrs = node.attrs;
+      var parameters = attrs.datasource.parameters;
+      var visibleColumnKeys = (_attrs$datasource$vie = attrs.datasource.views[0]) === null || _attrs$datasource$vie === void 0 || (_attrs$datasource$vie = _attrs$datasource$vie.properties) === null || _attrs$datasource$vie === void 0 ? void 0 : _attrs$datasource$vie.columns.map(function (c) {
+        return c.key;
+      });
+      return {
+        parameters: parameters,
+        visibleColumnKeys: visibleColumnKeys
+      };
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }, [node.attrs]);
+  var _useFetchDatasourceDa = useFetchDatasourceDataInfo({
+      datasourceId: datasourceId,
+      parameters: fetchData === null || fetchData === void 0 ? void 0 : fetchData.parameters,
+      visibleColumnKeys: fetchData === null || fetchData === void 0 ? void 0 : fetchData.visibleColumnKeys
+    }),
+    extensionKey = _useFetchDatasourceDa.extensionKey;
+  var editVariant = useMemo(function () {
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return 'none';
+    }
+    return 'edit-datasource';
+  }, [datasourceId]);
+  return jsx(EditToolbarButtonPresentation, {
+    datasourceId: datasourceId,
+    currentAppearance: currentAppearance,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editVariant: editVariant,
+    editorView: editorView,
+    extensionKey: extensionKey,
+    onLinkEditClick: onLinkEditClick,
+    intl: intl
+  });
+};
 export var EditToolbarButton = function EditToolbarButton(props) {
   var currentAppearance = props.currentAppearance,
     datasourceId = props.datasourceId,
@@ -154,6 +242,30 @@ export var EditToolbarButton = function EditToolbarButton(props) {
     url = props.url;
   return jsx(CardContextProvider, null, function (_ref) {
     var cardContext = _ref.cardContext;
+    if (fg('enable_datasource_nourl_edit_dropdown_datafetch')) {
+      if (props.url) {
+        return jsx(EditToolbarButtonWithUrl, {
+          url: props.url,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          cardContext: cardContext,
+          onLinkEditClick: onLinkEditClick,
+          currentAppearance: currentAppearance
+        });
+      }
+      if (props.datasourceId && props.node) {
+        return jsx(EditToolbarButtonWithDatasourceId, {
+          datasourceId: props.datasourceId,
+          node: props.node,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          onLinkEditClick: onLinkEditClick,
+          currentAppearance: currentAppearance
+        });
+      }
+    }
     return jsx(EditToolbarButtonWithCardContext, {
       datasourceId: datasourceId,
       url: url,

package/dist/esm/ui/EditToolbarButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/useFetchDatasourceDataInfo.js

@@ -0,0 +1,67 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } from '@atlaskit/link-client-extension';
+export var useFetchDatasourceDataInfo = function useFetchDatasourceDataInfo(_ref) {
+  var datasourceId = _ref.datasourceId,
+    parameters = _ref.parameters,
+    visibleColumnKeys = _ref.visibleColumnKeys;
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    extensionKey = _useState2[0],
+    setExtensionKey = _useState2[1];
+  var _useDatasourceClientE = useDatasourceClientExtension(),
+    getDatasourceData = _useDatasourceClientE.getDatasourceData;
+  useEffect(function () {
+    var fetchDatasource = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var datasourceDataRequest, _yield$getDatasourceD, meta;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              if (!(!datasourceId || !parameters || !visibleColumnKeys)) {
+                _context.next = 3;
+                break;
+              }
+              return _context.abrupt("return");
+            case 3:
+              datasourceDataRequest = {
+                parameters: parameters,
+                pageSize: DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
+                pageCursor: undefined,
+                fields: visibleColumnKeys,
+                includeSchema: true
+              };
+              _context.next = 6;
+              return getDatasourceData(datasourceId, datasourceDataRequest, false);
+            case 6:
+              _yield$getDatasourceD = _context.sent;
+              meta = _yield$getDatasourceD.meta;
+              setExtensionKey(meta.extensionKey);
+              _context.next = 15;
+              break;
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](0);
+              // eslint-disable-next-line no-console
+              console.error(_context.t0);
+              setExtensionKey(undefined);
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 11]]);
+      }));
+      return function fetchDatasource() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    void fetchDatasource();
+  }, [getDatasourceData, visibleColumnKeys, parameters, datasourceId]);
+  return {
+    extensionKey: extensionKey
+  };
+};

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

@@ -22,8 +22,11 @@ export declare class BlockCardComponent extends React.PureComponent<SmartCardPro
 }
 export type BlockCardNodeViewProps = Pick<SmartCardProps, 'platform' | 'actionOptions' | 'showServerActions' | 'pluginInjectionApi' | 'onClickCallback'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
     render(): JSX.Element;
+    destroy(): void;
 }

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

@@ -40,7 +40,10 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
 }
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'platform' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'showServerActions' | 'onClickCallback'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     viewShouldUpdate(nextNode: PMNode): boolean;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     render(): JSX.Element;
+    destroy(): void;
 }

package/dist/types/ui/EditToolbarButton/EditToolbarButtonPresentation.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { EditDatasourceToolbarButtonWithCommonProps, EditVariant } from './types';
+interface EditToolbarPresentationProps extends EditDatasourceToolbarButtonWithCommonProps {
+    extensionKey?: string;
+    datasourceId?: string;
+    editVariant: EditVariant;
+}
+declare const EditToolbarButtonPresentation: ({ datasourceId, currentAppearance, editorAnalyticsApi, editVariant, editorView, extensionKey, onLinkEditClick, intl, }: EditToolbarPresentationProps) => jsx.JSX.Element | null;
+export default EditToolbarButtonPresentation;

package/dist/types/ui/EditToolbarButton/index.d.ts

@@ -0,0 +1,3 @@
+import { jsx } from '@emotion/react';
+import type { EditDatasourceToolbarButtonProps } from './types';
+export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;

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

@@ -0,0 +1,29 @@
+import { type IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { Node } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardContext } from '@atlaskit/link-provider';
+import { type CardType } from '../../types';
+export type EditVariant = 'none' | 'edit-link' | 'edit-datasource' | 'edit-dropdown';
+export interface EditDatasourceToolbarButtonWithCommonProps {
+    intl: IntlShape;
+    onLinkEditClick: Command;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    editorView?: EditorView;
+    currentAppearance?: CardType;
+}
+export interface EditDatasourceToolbarButtonWithUrlProps extends EditDatasourceToolbarButtonWithCommonProps {
+    cardContext?: CardContext;
+    url: string;
+}
+export interface EditDatasourceToolbarButtonWithDatasourceIdProps extends EditDatasourceToolbarButtonWithCommonProps {
+    datasourceId: string;
+    node: Node;
+}
+export type EditDatasourceToolbarButtonProps = EditDatasourceToolbarButtonWithCommonProps & {
+    cardContext?: CardContext;
+    url?: string;
+    datasourceId?: string;
+    node?: Node;
+};

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

@@ -0,0 +1,10 @@
+import type { JiraIssueDatasourceParameters } from '@atlaskit/link-datasource';
+import type { DatasourceParameters } from '@atlaskit/linking-types';
+export interface useFetchDatasourceDataInfoProps {
+    datasourceId: string;
+    parameters?: DatasourceParameters | JiraIssueDatasourceParameters;
+    visibleColumnKeys?: string[];
+}
+export declare const useFetchDatasourceDataInfo: ({ datasourceId, parameters, visibleColumnKeys, }: useFetchDatasourceDataInfoProps) => {
+    extensionKey: string | undefined;
+};

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

@@ -22,8 +22,11 @@ export declare class BlockCardComponent extends React.PureComponent<SmartCardPro
 }
 export type BlockCardNodeViewProps = Pick<SmartCardProps, 'platform' | 'actionOptions' | 'showServerActions' | 'pluginInjectionApi' | 'onClickCallback'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
     render(): JSX.Element;
+    destroy(): void;
 }

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

@@ -40,7 +40,10 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
 }
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'platform' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'showServerActions' | 'onClickCallback'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
     viewShouldUpdate(nextNode: PMNode): boolean;
     createDomRef(): HTMLElement;
+    private updateContentEditable;
     render(): JSX.Element;
+    destroy(): void;
 }

package/dist/types-ts4.5/ui/EditToolbarButton/EditToolbarButtonPresentation.d.ts

@@ -0,0 +1,9 @@
+import { jsx } from '@emotion/react';
+import type { EditDatasourceToolbarButtonWithCommonProps, EditVariant } from './types';
+interface EditToolbarPresentationProps extends EditDatasourceToolbarButtonWithCommonProps {
+    extensionKey?: string;
+    datasourceId?: string;
+    editVariant: EditVariant;
+}
+declare const EditToolbarButtonPresentation: ({ datasourceId, currentAppearance, editorAnalyticsApi, editVariant, editorView, extensionKey, onLinkEditClick, intl, }: EditToolbarPresentationProps) => jsx.JSX.Element | null;
+export default EditToolbarButtonPresentation;

package/dist/types-ts4.5/ui/EditToolbarButton/index.d.ts

@@ -0,0 +1,3 @@
+import { jsx } from '@emotion/react';
+import type { EditDatasourceToolbarButtonProps } from './types';
+export declare const EditToolbarButton: (props: EditDatasourceToolbarButtonProps) => jsx.JSX.Element;