@atlaskit/editor-plugin-card 2.0.3 → 2.0.5

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-card
 
+## 2.0.5
+
+### Patch Changes
+
+- [#110890](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110890)
+  [`a0ec52861fce2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0ec52861fce2) -
+  [ux] Fixed a duplicate separator showing in the floating toolbar.
+- [#110903](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110903)
+  [`7fafce0ccd594`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7fafce0ccd594) -
+  [ux] Clicking edit link or edit datasource while in SLLV view will no longer trigger scrolling.
+- Updated dependencies
+
+## 2.0.4
+
+### Patch Changes
+
+- [#108600](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108600)
+  [`ab0ef9cd9d368`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab0ef9cd9d368) -
+  [ux] Fixed the toolbar edit button in the new dropdown button for assets.
+- Updated dependencies
+
 ## 2.0.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/datasource.js

@@ -284,7 +284,9 @@ var Datasource = exports.Datasource = /*#__PURE__*/function (_ReactNodeView) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _styles.DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
-          minWidth: this.isNodeNested ? '100%' : (0, _utils.calcBreakoutWidth)(attrs.layout || _linkingCommon.DATASOURCE_DEFAULT_LAYOUT, this.tableWidth)
+          minWidth: this.isNodeNested ? '100%' :
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+          (0, _utils.calcBreakoutWidth)(attrs.layout || _linkingCommon.DATASOURCE_DEFAULT_LAYOUT, this.tableWidth)
         }
       }, (0, _react2.jsx)(DatasourceComponent, {
         node: this.node,

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

@@ -622,6 +622,8 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
       title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
       showTitle: true,
       metadata: metadata
+    }, {
+      type: 'separator'
     }];
     return [{
       type: 'custom',

package/dist/cjs/toolbar.js

@@ -226,7 +226,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var isEditDropdownEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
-      var toolbarItems = [isEditDropdownEnabled ? {
+      var editItems = isEditDropdownEnabled ? [{
         type: 'custom',
         fallback: [],
         render: function render(editorView) {
@@ -236,10 +236,10 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             intl: intl,
             editorAnalyticsApi: editorAnalyticsApi,
             editorView: editorView,
-            onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
+            onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, true)
           });
         }
-      } : {
+      }] : [{
         id: 'editor.link.edit',
         type: 'button',
         selected: false,
@@ -247,10 +247,11 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
         showTitle: true,
         testId: 'link-toolbar-edit-link-button',
-        onClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
+        onClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, true)
       }, {
         type: 'separator'
-      }, {
+      }];
+      var toolbarItems = [].concat(editItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: _shortcut.default,
@@ -260,7 +261,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: visitCardLink(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }], (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'copy-button',
         supportsViewMode: true,
         items: [{
@@ -410,23 +411,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
-  var editDropdownWithSeparator = [{
-    type: 'custom',
-    fallback: [],
-    render: function render(editorView) {
-      return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
-        key: "edit-toolbar-item",
-        url: metadata.url,
-        intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi,
-        editorView: editorView,
-        onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi)
-      });
-    }
-  }, {
-    type: 'separator'
-  }];
-  var canShowMainToolbar = function canShowMainToolbar() {
+  var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
       return false;
@@ -440,12 +425,12 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     // FF to enable additional toolbar buttons based on if the datasource is configurable or not
     return (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !(0, _utils3.isDatasourceConfigEditable)(datasourceId);
   };
-  if (canShowMainToolbar()) {
+  if (canShowAppearanceSwitch()) {
     var allowBlockCards = cardOptions.allowBlockCards,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    toolbarItems.push.apply(toolbarItems, [{
+    toolbarItems.push({
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
@@ -480,7 +465,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       }
     }, {
       type: 'separator'
-    }].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [].concat(editDropdownWithSeparator) : [])));
+    });
+  }
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+    toolbarItems.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
+          datasourceId: datasourceId,
+          key: "edit-toolbar-item",
+          url: metadata.url,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          onLinkEditClick: (0, _EditLinkToolbar.editLink)(editorAnalyticsApi, false)
+        });
+      }
+    });
   }
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
     toolbarItems.push({

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

@@ -21,7 +21,7 @@ var _Pulse = require("../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
 var loaderWrapperStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.loader-wrapper': {
     lineHeight: 'normal'
   }

package/dist/cjs/ui/EditLinkToolbar.js

@@ -133,7 +133,7 @@ var EditLinkToolbar = exports.EditLinkToolbar = /*#__PURE__*/function (_React$Co
   }]);
   return EditLinkToolbar;
 }(_react.default.Component);
-var editLink = exports.editLink = function editLink(editorAnalyticsApi) {
+var editLink = exports.editLink = function editLink(editorAnalyticsApi, scrollIntoView) {
   return function (state, dispatch) {
     var type = 'hyperlink';
     if (state.selection instanceof _state.NodeSelection) {
@@ -143,6 +143,7 @@ var editLink = exports.editLink = function editLink(editorAnalyticsApi) {
       var tr = state.tr;
       (0, _actions.showLinkToolbar)(tr);
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent((0, _analytics.buildEditLinkPayload)(type))(tr);
+      tr.setMeta('scrollIntoView', scrollIntoView);
       dispatch(tr);
       return true;
     }

package/dist/cjs/ui/EditToolbarButton.js

@@ -24,19 +24,20 @@ var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 var dropdownExpandContainer = (0, _react2.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 = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
-      isRegularCardNode: true,
-      url: url,
-      cardContext: cardContext
-    }),
-    datasourceId = _useFetchDatasourceIn.datasourceId;
+var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext(props) {
+  var _response$datasourceI;
+  var url = props.url,
+    cardContext = props.cardContext,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  var response = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
+    isRegularCardNode: true,
+    url: url,
+    cardContext: cardContext
+  });
+  var datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -61,73 +62,104 @@ var EditButtonWithCardContext = function EditButtonWithCardContext(_ref) {
   var onEditLink = (0, _react.useCallback)(function () {
     dispatchCommand(onLinkEditClick);
   }, [dispatchCommand, onLinkEditClick]);
-  var shouldFallbackToEditButton = (0, _react.useMemo)(function () {
+  var editVariant = (0, _react.useMemo)(function () {
+    var hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !(0, _utils.isDatasourceConfigEditable)(datasourceId)) {
-      return true;
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
     }
-    if (url) {
+    if (hasUrl) {
       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 'edit-link';
       }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
     }
-    return false;
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   var onEditDatasource = (0, _react.useCallback)(function () {
     if (datasourceId) {
       dispatchCommand((0, _doc.editDatasource)(datasourceId, editorAnalyticsApi));
     }
   }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
-  if (shouldFallbackToEditButton) {
-    return (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-      testId: "edit-link",
-      onClick: onEditLink
-    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editLink));
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editLink)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      }
+    case 'edit-datasource':
+      {
+        return (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(_messages.linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.linkToolbarMessages.editDatasourceStandalone)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      }
+    case 'edit-dropdown':
+      {
+        var trigger = (0, _react2.jsx)(_primitives.Flex, {
+          gap: "space.050"
+        }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: (0, _react2.jsx)("span", {
+            css: dropdownExpandContainer
+          }, (0, _react2.jsx)(_chevronDown.default, {
+            label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownTriggerTitle)), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+        return (0, _react2.jsx)(_primitives.Flex, {
+          ref: containerRef
+        }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: _uiMenu.ArrowKeyNavigationType.MENU
+          }
+        }, (0, _react2.jsx)(_menu.ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_menu.ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
   }
-  var trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
-    testId: "edit-dropdown-trigger",
-    iconAfter: (0, _react2.jsx)("span", {
-      css: dropdownExpandContainer
-    }, (0, _react2.jsx)(_chevronDown.default, {
-      label: intl.formatMessage(_messages.cardMessages.editDropdownTriggerTitle)
-    })),
-    onClick: toggleOpen,
-    selected: isOpen,
-    disabled: false,
-    ariaHasPopup: true
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownTriggerTitle));
-  return (0, _react2.jsx)(_primitives.Flex, {
-    ref: containerRef
-  }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
-    mountTo: containerRef.current,
-    isOpen: isOpen,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
-    trigger: trigger,
-    scrollableElement: containerRef.current,
-    arrowKeyNavigationProviderOptions: {
-      type: _uiMenu.ArrowKeyNavigationType.MENU
-    }
-  }, (0, _react2.jsx)(_menu.ButtonItem, {
-    key: "edit.link",
-    onClick: onEditLink,
-    testId: "edit-dropdown-edit-link-item"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditLinkTitle)), (0, _react2.jsx)(_menu.ButtonItem, {
-    key: "edit.datasource",
-    onClick: onEditDatasource,
-    testId: "edit-dropdown-edit-datasource-item"
-  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.cardMessages.editDropdownEditDatasourceTitle))));
 };
-var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(_ref2) {
-  var intl = _ref2.intl,
-    editorAnalyticsApi = _ref2.editorAnalyticsApi,
-    url = _ref2.url,
-    editorView = _ref2.editorView,
-    onLinkEditClick = _ref2.onLinkEditClick;
-  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
-    var cardContext = _ref3.cardContext;
-    return (0, _react2.jsx)(EditButtonWithCardContext, {
+var EditToolbarButton = exports.EditToolbarButton = function EditToolbarButton(props) {
+  var datasourceId = props.datasourceId,
+    intl = props.intl,
+    editorAnalyticsApi = props.editorAnalyticsApi,
+    url = props.url,
+    editorView = props.editorView,
+    onLinkEditClick = props.onLinkEditClick;
+  return (0, _react2.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref) {
+    var cardContext = _ref.cardContext;
+    return (0, _react2.jsx)(EditToolbarButtonWithCardContext, {
+      datasourceId: datasourceId,
       url: url,
       intl: intl,
       editorAnalyticsApi: editorAnalyticsApi,

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -17,6 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _DatasourceAppearanceButton = require("./DatasourceAppearanceButton");
@@ -183,7 +184,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         editorView: editorView,
         editorAnalyticsApi: editorAnalyticsApi,
         inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
-      }));
+      }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
     }
   }]);
   return HyperlinkToolbarAppearance;

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

@@ -43,9 +43,11 @@ var getGradientWithColor = function getGradientWithColor(color) {
 var containerStyles = (0, _react2.css)({
   position: 'relative',
   lineHeight: 'normal',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':active': (_active = {}, (0, _defineProperty2.default)(_active, ".".concat(ICON_AND_LABEL_CLASSNAME), {
     background: SMART_LINK_ACTIVE_COLOR
   }), (0, _defineProperty2.default)(_active, ".".concat(OVERLAY_GRADIENT_CLASSNAME), {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     background: getGradientWithColor(SMART_LINK_ACTIVE_COLOR)
   }), _active)
 });
@@ -72,6 +74,7 @@ var showOverlayStyles = (0, _react2.css)({
 });
 var iconStyles = (0, _react2.css)({
   // Position icon in the middle
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     display: 'flex'
   }
@@ -102,6 +105,7 @@ var overflowingContainerStyles = (0, _react2.css)({
 var gradientStyles = (0, _react2.css)({
   width: '2.5rem',
   height: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   background: getGradientWithColor(SMART_LINK_BACKGROUND_COLOR)
 });
 var InlineCardOverlay = function InlineCardOverlay(_ref) {

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

@@ -26,8 +26,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var toolbarButtonWrapperStyles = (0, _react2.css)({
   background: "".concat("var(--ds-background-neutral, ".concat(_colors.N20A, ")")),
   color: "".concat("var(--ds-icon, ".concat(_colors.N300, ")")),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     background: "".concat("var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")")),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     color: "var(--ds-icon, white)".concat(" !important")
   }
 });

package/dist/cjs/ui/LeftIconOverlay/ConfigureLinkDropdown/index.js

@@ -29,7 +29,7 @@ var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
       var triggerRef = _ref.triggerRef,
         props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
       return /*#__PURE__*/_react.default.createElement(_new.default, (0, _extends2.default)({}, props, {
-        spacing: "none",
+        spacing: 'none',
         ref: triggerRef
       }), /*#__PURE__*/_react.default.createElement("span", {
         style: {
@@ -41,17 +41,17 @@ var ConfigureLinkDropdown = function ConfigureLinkDropdown(props) {
         testId: "".concat(testId, "-icon")
       })));
     },
-    spacing: "compact",
-    placement: "bottom-start"
+    spacing: 'compact',
+    placement: 'bottom-start'
   }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItemGroup, null, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_shortcut.default, {
       label: goToLinkLabel,
-      size: "small"
+      size: 'small'
     })
   }, goToLinkLabel), /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_preferences.default, {
       label: configureLinkLabel,
-      size: "small"
+      size: 'small'
     })
   }, configureLinkLabel)));
 };

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

@@ -55,12 +55,15 @@ var showOverlayStyles = (0, _react2.css)({
 });
 var iconStyles = (0, _react2.css)({
   background: CONFIGURE_ICON_BACKGROUND_COLOR,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     background: CONFIGURE_ICON_BACKGROUND_HOVERED_COLOR
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':active': {
     background: CONFIGURE_ICON_BACKGROUND_ACTIVE_COLOR
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
     // If PreferencesIcon left as inline-block (default), height is incorrect and border radius is clipped when parent element
     // uses 1lh height (rather than 100%)
@@ -179,7 +182,9 @@ var LeftIconOverlay = function LeftIconOverlay(_ref) {
       tabIndex: -1,
       "data-testid": testId
     }, (0, _react2.jsx)("span", (0, _extends2.default)({}, tooltipProps, {
-      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
     }), (0, _react2.jsx)("span", {
       css: iconStyles

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -366,9 +366,11 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
       return (0, _react2.jsx)("div", {
         "data-testid": "resizable-embed-card-spacing"
       }, (0, _react2.jsx)("div", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         css: (0, _ui.wrapperStyle)({
           layout: layout,
           isResized: !!pctWidth,
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
           containerWidth: containerWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
           fullWidthMode: fullWidthMode
         })

package/dist/es2019/nodeviews/datasource.js

@@ -232,7 +232,9 @@ export class Datasource extends ReactNodeView {
       // 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)
+        minWidth: this.isNodeNested ? '100%' :
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+        calcBreakoutWidth(attrs.layout || DATASOURCE_DEFAULT_LAYOUT, this.tableWidth)
       }
     }, jsx(DatasourceComponent, {
       node: this.node,

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

@@ -610,6 +610,8 @@ export const getStartingToolbarItems = (options, api) => {
       title: intl.formatMessage(linkToolbarMessages.editLink),
       showTitle: true,
       metadata: metadata
+    }, {
+      type: 'separator'
     }];
     return [{
       type: 'custom',

package/dist/es2019/toolbar.js

@@ -220,7 +220,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       inlineCard
     } = state.schema.nodes;
     const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
-    const toolbarItems = [isEditDropdownEnabled ? {
+    const editItems = isEditDropdownEnabled ? [{
       type: 'custom',
       fallback: [],
       render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
@@ -229,9 +229,9 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         intl: intl,
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
-        onLinkEditClick: editLink(editorAnalyticsApi)
+        onLinkEditClick: editLink(editorAnalyticsApi, true)
       })
-    } : {
+    }] : [{
       id: 'editor.link.edit',
       type: 'button',
       selected: false,
@@ -239,10 +239,11 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       title: intl.formatMessage(linkToolbarMessages.editLink),
       showTitle: true,
       testId: 'link-toolbar-edit-link-button',
-      onClick: editLink(editorAnalyticsApi)
+      onClick: editLink(editorAnalyticsApi, true)
     }, {
       type: 'separator'
-    }, {
+    }];
+    const toolbarItems = [...editItems, {
       id: 'editor.link.openLink',
       type: 'button',
       icon: OpenIcon,
@@ -397,21 +398,7 @@ 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 = () => {
+  const canShowAppearanceSwitch = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
       return false;
@@ -425,7 +412,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     // FF to enable additional toolbar buttons based on if the datasource is configurable or not
     return getBooleanFF('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !isDatasourceConfigEditable(datasourceId);
   };
-  if (canShowMainToolbar()) {
+  if (canShowAppearanceSwitch()) {
     const {
       allowBlockCards,
       allowEmbeds,
@@ -467,7 +454,22 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       })
     }, {
       type: 'separator'
-    }, ...(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [...editDropdownWithSeparator] : []));
+    });
+  }
+  if (getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+    toolbarItems.push({
+      type: 'custom',
+      fallback: [],
+      render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
+        datasourceId: datasourceId,
+        key: "edit-toolbar-item",
+        url: metadata.url,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi,
+        editorView: editorView,
+        onLinkEditClick: editLink(editorAnalyticsApi, false)
+      })
+    });
   }
   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

@@ -12,7 +12,7 @@ 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
 const loaderWrapperStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.loader-wrapper': {
     lineHeight: 'normal'
   }

package/dist/es2019/ui/EditLinkToolbar.js

@@ -107,7 +107,7 @@ export class EditLinkToolbar extends React.Component {
     });
   }
 }
-export const editLink = editorAnalyticsApi => (state, dispatch) => {
+export const editLink = (editorAnalyticsApi, scrollIntoView) => (state, dispatch) => {
   let type = 'hyperlink';
   if (state.selection instanceof NodeSelection) {
     type = state.selection.node.type.name;
@@ -118,6 +118,7 @@ export const editLink = editorAnalyticsApi => (state, dispatch) => {
     } = state;
     showLinkToolbar(tr);
     editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
+    tr.setMeta('scrollIntoView', scrollIntoView);
     dispatch(tr);
     return true;
   }