@atlaskit/editor-plugin-card 1.14.4 → 1.15.0

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

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -18,77 +17,74 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
 var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _utils2 = require("../InlineCardOverlay/utils");
-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 */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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(_colors.N0, ")");
-// TODO: This should be lighter to match the rest of the button
-var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(_colors.B100, ")");
+var CONFIGURE_ICON_BACKGROUND_COLOR = "var(--ds-background-neutral, ".concat(_colors.N30A, ")");
+var CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR = "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")");
+var CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR = "var(--ds-background-neutral-pressed, ".concat(_colors.N60A, ")");
 var containerStyles = (0, _react2.css)({
   position: 'relative',
-  lineHeight: 'normal',
-  ':active': (0, _defineProperty2.default)({}, ".".concat(ICON_AND_LABEL_CLASSNAME), {
-    background: SMART_LINK_ACTIVE_COLOR
-  })
+  lineHeight: 'normal'
 });
 var overlayStyles = (0, _react2.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 = (0, _react2.css)({
   visibility: 'visible'
 });
 var iconStyles = (0, _react2.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 = (0, _react2.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 = (0, _react2.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(_colors.N700, ")")
 });
-var overflowingContainerStyles = (0, _react2.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,
@@ -96,7 +92,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -106,16 +101,13 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     availableWidth = _useState4[0],
     setAvailableWidth = _useState4[1];
-  var maxOverlayWidth = (0, _react.useRef)(0);
-  var minOverlayWidth = (0, _react.useRef)(ESTIMATED_MIN_WIDTH_IN_PX);
-  var parentWidth = (0, _react.useRef)(0);
-  var iconSize = (0, _react.useRef)('small');
   var containerRef = (0, _react.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 = (0, _react.useCallback)(function () {
-    if (!containerRef.current || !maxOverlayWidth.current) {
+    if (!containerRef.current) {
       return;
     }
     var marker = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
@@ -140,29 +132,9 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     }
   }, [isSelected]);
   (0, _react.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 = (0, _utils2.getChildElement)(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
-      var _label = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
-      if (iconAndLabel && _label) {
-        // Set overlay max (label + icon) and min (icon only) width.
-        var _getOverlayWidths = (0, _utils2.getOverlayWidths)(iconAndLabel, _label),
-          max = _getOverlayWidths.max,
-          min = _getOverlayWidths.min;
-        maxOverlayWidth.current = max;
-        minOverlayWidth.current = min;
-        iconSize.current = (0, _utils2.getIconSize)(_label);
-      }
-    }
     if (isVisible) {
       setVisibility();
     }
@@ -183,13 +155,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);
@@ -199,36 +164,30 @@ var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
     };
   }, [isVisible, setVisibility]);
   var intl = (0, _reactIntlNext.useIntl)();
-  var label = intl.formatMessage(_messages.cardMessages.inlineOverlay);
+  var configureLinkLabel = intl.formatMessage(_messages.cardMessages.inlineConfigureLink);
   return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
     css: containerStyles,
     ref: containerRef
-  }), isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
-    "aria-hidden": "true",
-    className: OVERLAY_MARKER_CLASSNAME
-  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
-    css: [overlayStyles, showOverlay && showOverlayStyles],
-    "data-testid": testId,
-    href: url,
-    onClick: function onClick(e) {
-      return e.preventDefault();
-    },
-    tabIndex: -1
-  }, (0, _react2.jsx)("span", {
-    css: overflowingContainerStyles
-  }, (0, _react2.jsx)("span", {
-    css: iconAndLabelStyles,
-    className: ICON_AND_LABEL_CLASSNAME
-  }, (0, _react2.jsx)("span", {
-    css: iconStyles
-  }, (0, _react2.jsx)(_preferences.default, {
-    label: label,
-    size: iconSize.current,
-    testId: "".concat(testId, "-icon")
-  })), (0, _react2.jsx)("span", {
-    css: labelStyles,
-    className: OVERLAY_LABEL_CLASSNAME,
-    "data-testid": "".concat(testId, "-label")
-  }))))), children);
+  }), isVisible && (0, _react2.jsx)(_tooltip.default, {
+    content: configureLinkLabel
+  }, function (tooltipProps) {
+    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+      "aria-hidden": "true",
+      className: OVERLAY_MARKER_CLASSNAME
+    }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("span", {
+      css: [overlayStyles, showOverlay && showOverlayStyles],
+      tabIndex: -1,
+      "data-testid": testId
+    }, (0, _react2.jsx)("span", (0, _extends2.default)({}, tooltipProps, {
+      css: iconAndLabelStyles,
+      className: ICON_AND_LABEL_CLASSNAME
+    }), (0, _react2.jsx)("span", {
+      css: iconStyles
+    }, (0, _react2.jsx)(_preferences.default, {
+      label: configureLinkLabel,
+      size: 'small',
+      testId: "".concat(testId, "-icon")
+    })))));
+  }), children);
 };
-var _default = exports.default = NarrowInlineCardOverlay;
+var _default = exports.default = LeftIconOverlay;

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -314,9 +314,12 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
       return (0, _react2.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/cjs/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isEditDropdownEnabled = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -87,6 +87,9 @@ var isDatasourceConfigEditable = exports.isDatasourceConfigEditable = function i
   }
   return datasourcesWithConfigModal.includes(datasourceId);
 };
+var isEditDropdownEnabled = exports.isEditDropdownEnabled = function isEditDropdownEnabled(platform) {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile';
+};
 
 /**
  * Typeguard that checks node attributes are datasource node attributes

package/dist/es2019/nodeviews/datasource.js

@@ -229,6 +229,7 @@ export class Datasource extends ReactNodeView {
       url: attrs.url,
       datasourceId: attrs === null || attrs === void 0 ? void 0 : (_attrs$datasource = attrs.datasource) === null || _attrs$datasource === void 0 ? void 0 : _attrs$datasource.id
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
       style: {
         minWidth: this.isNodeNested ? '100%' : calcBreakoutWidth(attrs.layout || DATASOURCE_DEFAULT_LAYOUT, this.tableWidth)

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -109,7 +109,10 @@ const InlineCard = ({
       markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
       pluginInjectionApi: pluginInjectionApi,
       setOverlayHoveredStyles: setOverlayHoveredStyles
-    }, innerCard) : /*#__PURE__*/React.createElement("span", {
+    }, innerCard) :
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("span", {
       className: "card"
     }, innerCard);
   }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url]);

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

@@ -2,12 +2,12 @@ import isEqual from 'lodash/isEqual';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
-import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
+import { getDatasourceType, 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, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
-import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
+import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash, showDatasourceModal } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
 /**
@@ -554,4 +554,24 @@ const updateDatasourceStash = (tr, selectedNode) => {
       }
     }
   }
+};
+export const editDatasource = (datasourceId, _editorAnalyticsApi) => (state, dispatch) => {
+  const datasourceType = getDatasourceType(datasourceId);
+  if (dispatch && datasourceType) {
+    const {
+      tr
+    } = state;
+    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/es2019/toolbar.js

@@ -14,14 +14,15 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { changeSelectedCardToText } from './pm-plugins/doc';
+import { changeSelectedCardToText, editDatasource } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
 import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
-import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
+import { EditDatasourceButton } from './ui/EditDatasourceButton';
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
+import { EditToolbarButton } from './ui/EditToolbarButton';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
-import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, titleUrlPairFromNode } from './utils';
+import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, isEditDropdownEnabled, titleUrlPairFromNode } from './utils';
 export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -219,7 +220,18 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     const {
       inlineCard
     } = state.schema.nodes;
-    const toolbarItems = [{
+    const toolbarItems = [isEditDropdownEnabled(platform) && cardOptions.allowDatasource ? {
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
+        key: "edit-toolbar-item",
+        url: url,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        editorView: editorView,
+        onLinkEditClick: editLink(editorAnalyticsApi)
+      })
+    } : {
       id: 'editor.link.edit',
       type: 'button',
       selected: false,
@@ -318,7 +330,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         type: 'separator'
       });
     }
-    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
     if (shouldShowDatasourceEditButton) {
       toolbarItems.unshift({
         type: 'custom',
@@ -375,7 +387,7 @@ export const getSettingsButtonGroup = (intl, editorAnalyticsApi, userPreferences
 const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform, cardActions) => {
   var _node$attrs3;
   const toolbarItems = [];
-  if (isDatasourceConfigEditable(datasourceId)) {
+  if (isDatasourceConfigEditable(datasourceId) && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
     toolbarItems.push({
       id: 'editor.edit.datasource',
       type: 'button',
@@ -389,6 +401,20 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       type: 'separator'
     });
   }
+  const editDropdownWithSeparator = [{
+    type: 'custom',
+    fallback: [],
+    render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
+      key: "edit-toolbar-item",
+      url: metadata.url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      onLinkEditClick: editLink(editorAnalyticsApi)
+    })
+  }, {
+    type: 'separator'
+  }];
   const canShowMainToolbar = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -446,7 +472,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       })
     }, {
       type: 'separator'
-    });
+    }, ...(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [...editDropdownWithSeparator] : []));
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

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

@@ -7,7 +7,7 @@ import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDisc
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
 import InlineCardOverlay from '../InlineCardOverlay';
-import NewInlineCardOverlay from '../NewInlineCardOverlay';
+import LeftIconOverlay from '../LeftIconOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // editor adds a standard line-height that is bigger than an inline smart link
 // due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
@@ -71,12 +71,11 @@ export const AwarenessWrapper = ({
   const cardWithOverlay = useMemo(() => {
     if (shouldShowLinkOverlay) {
       if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
-        return jsx(NewInlineCardOverlay, {
+        return jsx(LeftIconOverlay, {
           isSelected: isSelected,
           isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
           onMouseEnter: () => handleOverlayChange(true),
-          onMouseLeave: () => handleOverlayChange(false),
-          url: url
+          onMouseLeave: () => handleOverlayChange(false)
         }, children);
       }
       return jsx(InlineCardOverlay, {
@@ -91,19 +90,22 @@ export const AwarenessWrapper = ({
   }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
-    return jsx("span", {
-      css: shouldShowLinkPulse && loaderWrapperStyles,
-      className: "card"
-    }, jsx(AnalyticsContext, {
-      data: {
-        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
-      }
-    }, jsx(DiscoveryPulse, {
-      localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
-      localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
-      discoveryMode: "start",
-      shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
-      testId: "link-discovery-pulse"
-    }, cardWithOverlay)));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        css: shouldShowLinkPulse && loaderWrapperStyles,
+        className: "card"
+      }, jsx(AnalyticsContext, {
+        data: {
+          attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
+        }
+      }, jsx(DiscoveryPulse, {
+        localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
+        localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
+        discoveryMode: "start",
+        shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
+        testId: "link-discovery-pulse"
+      }, cardWithOverlay)))
+    );
   }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
 };

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

@@ -24,7 +24,7 @@ export const DatasourceModal = ({
   const onClose = useCallback(() => {
     dispatch(hideDatasourceModal(transaction));
   }, [dispatch, transaction]);
-  const onInsert = useOnInsert(view, existingNode);
+  const updateAdf = useUpdateAdf(view, existingNode);
   const isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
   const {
     id: datasourceId = defaultDatasourceId,
@@ -58,10 +58,10 @@ export const DatasourceModal = ({
     columnCustomSizes: columnCustomSizes,
     wrappedColumnKeys: wrappedColumnKeys,
     onCancel: onClose,
-    onInsert: onInsert
+    onInsert: updateAdf
   });
 };
-const useOnInsert = (view, existingNode) => {
+const useUpdateAdf = (view, existingNode) => {
   return useCallback((newAdf, analyticEvent) => {
     if (analyticEvent) {
       analyticEvent.update(payload => ({
@@ -111,10 +111,9 @@ const resolveColumnsConfig = views => {
   const [tableView] = views;
   const visibleColumnKeys = [];
   const wrappedColumnKeys = [];
-  let columnCustomSizes;
+  const columnCustomSizes = {};
   const columns = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns;
   if (columns) {
-    columnCustomSizes = {};
     for (const {
       key,
       width,

package/dist/es2019/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 const EditDatasourceButton = ({
     editorState: editorState,
     cardContext: cardContext
   }));
-};
-export const editDatasource = (datasourceId, editorAnalyticsApi) => (state, dispatch) => {
-  const datasourceType = getDatasourceType(datasourceId);
-  if (dispatch && datasourceType) {
-    const {
-      tr
-    } = state;
-    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;
 };