@atlaskit/editor-plugin-card 1.14.4 → 1.15.0

package/dist/esm/ui/EditDatasourceButton.js

@@ -2,9 +2,8 @@
 import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
-import { getDatasourceType } from '@atlaskit/editor-common/utils';
 import { Flex } from '@atlaskit/primitives';
-import { showDatasourceModal } from '../pm-plugins/actions';
+import { editDatasource } from '../pm-plugins/doc';
 import { isDatasourceConfigEditable } from '../utils';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
@@ -71,24 +70,4 @@ export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
       cardContext: cardContext
     });
   });
-};
-export var editDatasource = function editDatasource(datasourceId, editorAnalyticsApi) {
-  return function (state, dispatch) {
-    var datasourceType = getDatasourceType(datasourceId);
-    if (dispatch && datasourceType) {
-      var tr = state.tr;
-      showDatasourceModal(datasourceType)(tr);
-      // editorAnalyticsApi?.attachAnalyticsEvent(
-      //   buildEditLinkPayload(
-      //     type as
-      //       | ACTION_SUBJECT_ID.CARD_INLINE
-      //       | ACTION_SUBJECT_ID.CARD_BLOCK
-      //       | ACTION_SUBJECT_ID.EMBEDS,
-      //   ),
-      // )(tr);
-      dispatch(tr);
-      return true;
-    }
-    return false;
-  };
 };

package/dist/esm/ui/EditToolbarButton.js

@@ -0,0 +1,131 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useCallback, useMemo, useRef, useState } from 'react';
+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 } 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 { editDatasource } from '../pm-plugins/doc';
+import { isDatasourceConfigEditable } from '../utils';
+import { CardContextProvider } from './CardContextProvider';
+import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+var dropdownExpandContainer = css({
+  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+});
+var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
+  var cardContext = _ref.cardContext,
+    intl = _ref.intl,
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    url = _ref.url,
+    editorView = _ref.editorView,
+    onLinkEditClick = _ref.onLinkEditClick;
+  var _useFetchDatasourceIn = useFetchDatasourceInfo({
+      isRegularCardNode: true,
+      url: url,
+      cardContext: cardContext
+    }),
+    datasourceId = _useFetchDatasourceIn.datasourceId;
+  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 dispatchCommand = useCallback(function (fn) {
+    if (editorView) {
+      fn === null || fn === void 0 || fn(editorView.state, editorView.dispatch);
+      if (!editorView.hasFocus()) {
+        editorView.focus();
+      }
+    }
+  }, [editorView]);
+  var onEditLink = useCallback(function () {
+    dispatchCommand(onLinkEditClick);
+  }, [dispatchCommand, onLinkEditClick]);
+  var shouldFallbackToEditButton = useMemo(function () {
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return true;
+    }
+    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 true;
+      }
+    }
+    return false;
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  var onEditDatasource = useCallback(function () {
+    if (datasourceId) {
+      dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
+    }
+  }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
+  if (shouldFallbackToEditButton) {
+    return jsx(Button, {
+      testId: "edit-link",
+      onClick: onEditLink
+    }, jsx(FormattedMessage, linkToolbarMessages.editLink));
+  }
+  var trigger = 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));
+  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))));
+};
+export var EditToolbarButton = function EditToolbarButton(_ref2) {
+  var intl = _ref2.intl,
+    editorAnalyticsApi = _ref2.editorAnalyticsApi,
+    url = _ref2.url,
+    editorView = _ref2.editorView,
+    onLinkEditClick = _ref2.onLinkEditClick;
+  return jsx(CardContextProvider, null, function (_ref3) {
+    var cardContext = _ref3.cardContext;
+    return jsx(EditButtonWithCardContext, {
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      cardContext: cardContext,
+      onLinkEditClick: onLinkEditClick
+    });
+  });
+};

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

@@ -231,7 +231,9 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
   }, jsx("span", {
     css: overflowingContainerStyles
   }, jsx("span", {
-    css: iconAndLabelStyles,
+    css: iconAndLabelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: ICON_AND_LABEL_CLASSNAME
   }, jsx("span", {
     css: iconStyles
@@ -240,11 +242,15 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     size: iconSize.current,
     testId: "".concat(testId, "-icon")
   })), showLabel && jsx("span", {
-    css: labelStyles,
+    css: labelStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: OVERLAY_LABEL_CLASSNAME,
     "data-testid": "".concat(testId, "-label")
   }, label)), jsx("span", {
-    css: gradientStyles,
+    css: gradientStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: OVERLAY_GRADIENT_CLASSNAME,
     "data-testid": "".concat(testId, "-gradient")
   })))));

package/dist/esm/ui/{NewInlineCardOverlay → LeftIconOverlay}/index.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
+var _excluded = ["children", "isSelected", "isVisible", "testId"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
@@ -13,72 +12,69 @@ import { useIntl } from 'react-intl-next';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
-import { B100, N0, N700 } from '@atlaskit/theme/colors';
-import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from '../InlineCardOverlay/utils';
+import { N0, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { getChildElement, getInlineCardAvailableWidth, isOneLine } from '../InlineCardOverlay/utils';
 var DEBOUNCE_IN_MS = 5;
-var ESTIMATED_MIN_WIDTH_IN_PX = 16;
 var PADDING_IN_PX = 4;
-var ICON_WIDTH_IN_PX = 14;
+var ICON_WIDTH_IN_PX = 16;
 var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
-var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
 var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
 var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
 var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(N0, ")");
-// TODO: This should be lighter to match the rest of the button
-var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(B100, ")");
+var CONFIGURE_ICON_BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(N30A, ")");
+var CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR = "var(--ds-background-neutral-hovered, ".concat(N40A, ")");
+var CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR = "var(--ds-background-neutral-pressed, ".concat(N60A, ")");
 var containerStyles = css({
   position: 'relative',
-  lineHeight: 'normal',
-  ':active': _defineProperty({}, ".".concat(ICON_AND_LABEL_CLASSNAME), {
-    background: SMART_LINK_ACTIVE_COLOR
-  })
+  lineHeight: 'normal'
 });
 var overlayStyles = css({
+  position: 'absolute',
+  // Vertically align. Required for overlay to be centered inside the inline link (the inline lozenge is slightly larger than the designs)
+  transform: 'translate(0%, -50%)',
+  top: '50%',
   // Set default styling to be invisible but available in dom for width calculation.
   visibility: 'hidden',
-  marginTop: "var(--ds-space-050, 4px)",
-  position: 'absolute',
-  verticalAlign: 'text-top',
-  height: '1lh',
-  '@supports not (height: 1lh)': {
-    height: '1.2em'
-  },
   overflow: 'hidden',
   // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
-  zIndex: 2,
-  pointerEvents: 'none'
+  zIndex: 2
 });
 var showOverlayStyles = css({
   visibility: 'visible'
 });
 var iconStyles = css({
-  // Position icon in the middle
+  background: CONFIGURE_ICON_BACKGROUND_COLOR,
+  ':hover': {
+    background: CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR
+  },
+  ':active': {
+    background: CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR
+  },
   span: {
-    display: 'flex'
-  }
-});
-var labelStyles = css({
-  fontSize: '0.875em',
-  fontWeight: '600',
-  width: 'max-content'
+    // If PreferencesIcon left as inline-block (default), height is incorrect and border radius is clipped when parent element
+    // uses 1lh height (rather than 100%)
+    display: 'block'
+  },
+  // Note: The spec recomends 3px, but the icon doesn't fit left of the lozenge text if this size
+  padding: "var(--ds-space-025, 2px)",
+  borderRadius: '3px'
 });
 var iconAndLabelStyles = css({
   display: 'flex',
   alignItems: 'center',
   height: '100%',
-  marginLeft: "var(--ds-space-050, 4px)",
-  marginRight: "var(--ds-space-025, 2px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '2.5px',
+  // Margin from very left of entire card (inclusive of blue)
+
+  // This exists so if we set a semi-transparent background above, the provider icon doesn't show
   background: SMART_LINK_BACKGROUND_COLOR,
+  // Ensure we don't have a white gap when the inline-card is in an active state
+  borderRadius: '3px',
   color: "var(--ds-text-subtlest, ".concat(N700, ")")
 });
-var overflowingContainerStyles = css({
-  display: 'flex',
-  flexDirection: 'row-reverse',
-  alignItems: 'center',
-  width: 'max-content',
-  height: '100%'
-});
-var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
+var LeftIconOverlay = function LeftIconOverlay(_ref) {
   var children = _ref.children,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
@@ -86,7 +82,6 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
-    url = _ref.url,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -96,16 +91,13 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     availableWidth = _useState4[0],
     setAvailableWidth = _useState4[1];
-  var maxOverlayWidth = useRef(0);
-  var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
-  var parentWidth = useRef(0);
-  var iconSize = useRef('small');
   var containerRef = useRef(null);
 
-  // TODO EDM-9843: Use availableWidth for small link edge case
+  // TODO EDM-9853: Use availableWidth for small link edge case
+  // Calculation logic will need to updated.
   availableWidth;
   var setVisibility = useCallback(function () {
-    if (!containerRef.current || !maxOverlayWidth.current) {
+    if (!containerRef.current) {
       return;
     }
     var marker = getChildElement(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
@@ -130,29 +122,9 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     }
   }, [isSelected]);
   useLayoutEffect(function () {
-    // Using useLayoutEffect here.
-    // 1) We want all to be able to determine whether to display label before
-    //    the overlay becomes visible.
-    // 2) We need to wait for the refs to be assigned to be able to do determine
-    //    the width of the overlay.
     if (!containerRef.current) {
       return;
     }
-
-    // This should run only once
-    if (!maxOverlayWidth.current) {
-      var iconAndLabel = getChildElement(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
-      var _label = getChildElement(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
-      if (iconAndLabel && _label) {
-        // Set overlay max (label + icon) and min (icon only) width.
-        var _getOverlayWidths = getOverlayWidths(iconAndLabel, _label),
-          max = _getOverlayWidths.max,
-          min = _getOverlayWidths.min;
-        maxOverlayWidth.current = max;
-        minOverlayWidth.current = min;
-        iconSize.current = getIconSize(_label);
-      }
-    }
     if (isVisible) {
       setVisibility();
     }
@@ -173,13 +145,6 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
       if (!size) {
         return;
       }
-      if (!parentWidth.current) {
-        parentWidth.current = size;
-      }
-      if (parentWidth.current === size) {
-        return;
-      }
-      parentWidth.current = size;
       setVisibility();
     }, DEBOUNCE_IN_MS);
     var observer = new ResizeObserver(updateOverlay);
@@ -189,36 +154,30 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     };
   }, [isVisible, setVisibility]);
   var intl = useIntl();
-  var label = intl.formatMessage(messages.inlineOverlay);
+  var configureLinkLabel = intl.formatMessage(messages.inlineConfigureLink);
   return jsx("span", _extends({}, props, {
     css: containerStyles,
     ref: containerRef
-  }), isVisible && jsx(React.Fragment, null, jsx("span", {
-    "aria-hidden": "true",
-    className: OVERLAY_MARKER_CLASSNAME
-  }, ZERO_WIDTH_JOINER), jsx("a", {
-    css: [overlayStyles, showOverlay && showOverlayStyles],
-    "data-testid": testId,
-    href: url,
-    onClick: function onClick(e) {
-      return e.preventDefault();
-    },
-    tabIndex: -1
-  }, jsx("span", {
-    css: overflowingContainerStyles
-  }, jsx("span", {
-    css: iconAndLabelStyles,
-    className: ICON_AND_LABEL_CLASSNAME
-  }, jsx("span", {
-    css: iconStyles
-  }, jsx(PreferencesIcon, {
-    label: label,
-    size: iconSize.current,
-    testId: "".concat(testId, "-icon")
-  })), jsx("span", {
-    css: labelStyles,
-    className: OVERLAY_LABEL_CLASSNAME,
-    "data-testid": "".concat(testId, "-label")
-  }))))), children);
+  }), isVisible && jsx(Tooltip, {
+    content: configureLinkLabel
+  }, function (tooltipProps) {
+    return jsx(React.Fragment, null, jsx("span", {
+      "aria-hidden": "true",
+      className: OVERLAY_MARKER_CLASSNAME
+    }, ZERO_WIDTH_JOINER), jsx("span", {
+      css: [overlayStyles, showOverlay && showOverlayStyles],
+      tabIndex: -1,
+      "data-testid": testId
+    }, jsx("span", _extends({}, tooltipProps, {
+      css: iconAndLabelStyles,
+      className: ICON_AND_LABEL_CLASSNAME
+    }), jsx("span", {
+      css: iconStyles
+    }, jsx(PreferencesIcon, {
+      label: configureLinkLabel,
+      size: 'small',
+      testId: "".concat(testId, "-icon")
+    })))));
+  }), children);
 };
-export default NarrowInlineCardOverlay;
+export default LeftIconOverlay;

package/dist/esm/ui/ResizableEmbedCard.js

@@ -308,9 +308,12 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
       return jsx("span", {
         "data-testid": 'resizable-embed-card-height-definer',
         style: _objectSpread({
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'block',
           /* Fixes extra padding problem in Firefox */
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           fontSize: 0,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           lineHeight: 0
         }, heightDefiningStyles)
       });

package/dist/esm/utils.js

@@ -80,6 +80,9 @@ export var isDatasourceConfigEditable = function isDatasourceConfigEditable(data
   }
   return datasourcesWithConfigModal.includes(datasourceId);
 };
+export var isEditDropdownEnabled = function isEditDropdownEnabled(platform) {
+  return getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile';
+};
 
 /**
  * Typeguard that checks node attributes are datasource node attributes

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

@@ -38,4 +38,5 @@ export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf |
  * Get attributes for new Card Appearance
  */
 export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;
+export declare const editDatasource: (datasourceId: string, _editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export {};

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

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 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 { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardContext } from '@atlaskit/link-provider';
@@ -15,4 +14,3 @@ export interface EditDatasourceButtonProps {
     cardContext?: CardContext;
 }
 export declare const EditDatasourceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: EditDatasourceButtonProps) => jsx.JSX.Element;
-export declare const editDatasource: (datasourceId: string, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;

package/dist/types/ui/EditToolbarButton.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 { Command } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardContext } from '@atlaskit/link-provider';
+export interface EditToolbarButtonProps {
+    intl: IntlShape;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    url?: string;
+    editorView?: EditorView;
+    cardContext?: CardContext;
+    onLinkEditClick: Command;
+}
+export declare const EditToolbarButton: ({ intl, editorAnalyticsApi, url, editorView, onLinkEditClick, }: EditToolbarButtonProps) => jsx.JSX.Element;

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

@@ -7,4 +7,4 @@ export type EditorAnalyticsContextProps = {
 /**
  * Provides location attribute to child events
  */
-export declare const EditorAnalyticsContext: ({ editorView, children, }: EditorAnalyticsContextProps) => JSX.Element;
+export declare const EditorAnalyticsContext: ({ editorView, children }: EditorAnalyticsContextProps) => JSX.Element;

package/dist/types/ui/EditorLinkingPlatformAnalytics/DatasourceEvents.d.ts

@@ -3,4 +3,4 @@ import type { AnalyticsBindingsProps } from './common';
  * Subscribes to the events occuring in the card
  * plugin and fires analytics events accordingly
  */
-export declare const DatasourceEventsBinding: ({ cardPluginEvents, }: AnalyticsBindingsProps) => null;
+export declare const DatasourceEventsBinding: ({ cardPluginEvents }: AnalyticsBindingsProps) => null;

package/dist/types/ui/EditorLinkingPlatformAnalytics/LinkEvents.d.ts

@@ -3,4 +3,4 @@ import type { AnalyticsBindingsProps } from './common';
  * Subscribes to the events occuring in the card
  * plugin and fires analytics events accordingly
  */
-export declare const LinkEventsBinding: ({ cardPluginEvents, }: AnalyticsBindingsProps) => null;
+export declare const LinkEventsBinding: ({ cardPluginEvents }: AnalyticsBindingsProps) => null;

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

@@ -1,4 +1,4 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const EditorSmartCardEvents: ({ editorView, }: {
+export declare const EditorSmartCardEvents: ({ editorView }: {
     editorView: EditorView;
 }) => null;

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+export type LeftIconOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isSelected?: boolean;
+    isVisible?: boolean;
+    testId?: string;
+};
+declare const LeftIconOverlay: ({ children, isSelected, isVisible, testId, ...props }: React.PropsWithChildren<LeftIconOverlayProps>) => jsx.JSX.Element;
+export default LeftIconOverlay;

package/dist/types/utils.d.ts

@@ -2,6 +2,7 @@ import type { CardAppearance } from '@atlaskit/editor-common/provider-factory';
 import type { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { CardContext } from '@atlaskit/link-provider';
+import type { CardPlatform } from '@atlaskit/smart-card';
 import type { CardInfo, DatasourceNode } from './types';
 export declare const appearanceForNodeType: (spec: NodeType) => CardAppearance | undefined;
 export declare const selectedCardAppearance: (state: EditorState) => CardAppearance | undefined;
@@ -22,6 +23,7 @@ export declare const isEmbedSupportedAtPosition: (currentNodePosition: number, e
 export declare const isBlockSupportedAtPosition: (currentNodePosition: number, editorState: EditorState, currentAppearance?: CardAppearance) => boolean;
 export declare const getResolvedAttributesFromStore: (url: string, display: string | null, store?: CardContext['store']) => {};
 export declare const isDatasourceConfigEditable: (datasourceId: string) => boolean;
+export declare const isEditDropdownEnabled: (platform?: CardPlatform) => boolean;
 /**
  * Typeguard that checks node attributes are datasource node attributes
  * ** WARNING ** Typeguards are not a guarantee, if the asserted type changes

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

@@ -38,4 +38,5 @@ export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf |
  * Get attributes for new Card Appearance
  */
 export declare const getAttrsForAppearance: (appearance: CardAppearance, selectedNode: Node) => import("prosemirror-model").Attrs;
+export declare const editDatasource: (datasourceId: string, _editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export {};

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

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/react';
 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 { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardContext } from '@atlaskit/link-provider';
@@ -15,4 +14,3 @@ export interface EditDatasourceButtonProps {
     cardContext?: CardContext;
 }
 export declare const EditDatasourceButton: ({ intl, editorAnalyticsApi, url, editorView, editorState, }: EditDatasourceButtonProps) => jsx.JSX.Element;
-export declare const editDatasource: (datasourceId: string, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;

package/dist/types-ts4.5/ui/EditToolbarButton.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 { Command } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardContext } from '@atlaskit/link-provider';
+export interface EditToolbarButtonProps {
+    intl: IntlShape;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    url?: string;
+    editorView?: EditorView;
+    cardContext?: CardContext;
+    onLinkEditClick: Command;
+}
+export declare const EditToolbarButton: ({ intl, editorAnalyticsApi, url, editorView, onLinkEditClick, }: EditToolbarButtonProps) => jsx.JSX.Element;

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

@@ -7,4 +7,4 @@ export type EditorAnalyticsContextProps = {
 /**
  * Provides location attribute to child events
  */
-export declare const EditorAnalyticsContext: ({ editorView, children, }: EditorAnalyticsContextProps) => JSX.Element;
+export declare const EditorAnalyticsContext: ({ editorView, children }: EditorAnalyticsContextProps) => JSX.Element;

package/dist/types-ts4.5/ui/EditorLinkingPlatformAnalytics/DatasourceEvents.d.ts

@@ -3,4 +3,4 @@ import type { AnalyticsBindingsProps } from './common';
  * Subscribes to the events occuring in the card
  * plugin and fires analytics events accordingly
  */
-export declare const DatasourceEventsBinding: ({ cardPluginEvents, }: AnalyticsBindingsProps) => null;
+export declare const DatasourceEventsBinding: ({ cardPluginEvents }: AnalyticsBindingsProps) => null;

package/dist/types-ts4.5/ui/EditorLinkingPlatformAnalytics/LinkEvents.d.ts

@@ -3,4 +3,4 @@ import type { AnalyticsBindingsProps } from './common';
  * Subscribes to the events occuring in the card
  * plugin and fires analytics events accordingly
  */
-export declare const LinkEventsBinding: ({ cardPluginEvents, }: AnalyticsBindingsProps) => null;
+export declare const LinkEventsBinding: ({ cardPluginEvents }: AnalyticsBindingsProps) => null;

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

@@ -1,4 +1,4 @@
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export declare const EditorSmartCardEvents: ({ editorView, }: {
+export declare const EditorSmartCardEvents: ({ editorView }: {
     editorView: EditorView;
 }) => null;

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

@@ -0,0 +1,10 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+export type LeftIconOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isSelected?: boolean;
+    isVisible?: boolean;
+    testId?: string;
+};
+declare const LeftIconOverlay: ({ children, isSelected, isVisible, testId, ...props }: React.PropsWithChildren<LeftIconOverlayProps>) => jsx.JSX.Element;
+export default LeftIconOverlay;