@atlaskit/editor-plugin-card 2.0.3 → 2.0.5

package/dist/es2019/ui/EditToolbarButton.js

@@ -3,7 +3,7 @@ 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 { 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';
@@ -15,21 +15,22 @@ import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const dropdownExpandContainer = css({
   margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
 });
-const EditButtonWithCardContext = ({
-  cardContext,
-  intl,
-  editorAnalyticsApi,
-  url,
-  editorView,
-  onLinkEditClick
-}) => {
+const EditToolbarButtonWithCardContext = props => {
+  var _response$datasourceI;
   const {
-    datasourceId
-  } = useFetchDatasourceInfo({
+    url,
+    cardContext,
+    intl,
+    editorAnalyticsApi,
+    editorView,
+    onLinkEditClick
+  } = props;
+  const response = useFetchDatasourceInfo({
     isRegularCardNode: true,
     url,
     cardContext
   });
+  const datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef();
   const toggleOpen = () => setIsOpen(open => !open);
@@ -45,74 +46,106 @@ const EditButtonWithCardContext = ({
   const onEditLink = useCallback(() => {
     dispatchCommand(onLinkEditClick);
   }, [dispatchCommand, onLinkEditClick]);
-  const shouldFallbackToEditButton = useMemo(() => {
+  const editVariant = useMemo(() => {
+    const hasUrl = url !== null && url !== undefined;
     if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
-      return true;
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
     }
-    if (url) {
+    if (hasUrl) {
       var _cardContext$store, _urlState$error;
       const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
       if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
-        return true;
+        return 'edit-link';
       }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
     }
-    return false;
   }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   const onEditDatasource = useCallback(() => {
     if (datasourceId) {
       dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
     }
   }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
-  if (shouldFallbackToEditButton) {
-    return jsx(Button, {
-      testId: "edit-link",
-      onClick: onEditLink
-    }, jsx(FormattedMessage, linkToolbarMessages.editLink));
+  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':
+      {
+        const 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;
   }
-  const 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 const EditToolbarButton = ({
-  intl,
-  editorAnalyticsApi,
-  url,
-  editorView,
-  onLinkEditClick
-}) => {
+export const EditToolbarButton = props => {
+  const {
+    datasourceId,
+    intl,
+    editorAnalyticsApi,
+    url,
+    editorView,
+    onLinkEditClick
+  } = props;
   return jsx(CardContextProvider, null, ({
     cardContext
-  }) => jsx(EditButtonWithCardContext, {
+  }) => jsx(EditToolbarButtonWithCardContext, {
+    datasourceId: datasourceId,
     url: url,
     intl: intl,
     editorAnalyticsApi: editorAnalyticsApi,

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
@@ -98,6 +99,6 @@ export class HyperlinkToolbarAppearance extends Component {
       editorView: editorView,
       editorAnalyticsApi: editorAnalyticsApi,
       inputMethod: INPUT_METHOD.FLOATING_TB
-    }));
+    }), /*#__PURE__*/React.createElement(Separator, null));
   }
 }

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

@@ -28,11 +28,15 @@ const getGradientWithColor = color => {
 const containerStyles = css({
   position: 'relative',
   lineHeight: 'normal',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':active': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     [`.${ICON_AND_LABEL_CLASSNAME}`]: {
       background: SMART_LINK_ACTIVE_COLOR
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     [`.${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)
     }
   }
@@ -60,6 +64,7 @@ const showOverlayStyles = css({
 });
 const iconStyles = 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'
   }
@@ -90,6 +95,7 @@ const overflowingContainerStyles = css({
 const gradientStyles = 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)
 });
 const InlineCardOverlay = ({

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

@@ -17,8 +17,10 @@ import { getDatasource, isDatasourceTableLayout } from './utils';
 const toolbarButtonWrapperStyles = css({
   background: `${`var(--ds-background-neutral, ${N20A})`}`,
   color: `${`var(--ds-icon, ${N300})`}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     background: `${`var(--ds-background-neutral-hovered, ${B300})`}`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     color: `${"var(--ds-icon, white)"} !important`
   }
 });

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

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { useIntl } from "react-intl-next";
-import Button from "@atlaskit/button/new";
-import DropdownMenu, { DropdownItem, DropdownItemGroup } from "@atlaskit/dropdown-menu";
-import { cardMessages as messages } from "@atlaskit/editor-common/messages";
-import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
-import PreferencesIcon from "@atlaskit/icon/glyph/preferences";
-import ShortcutIcon from "@atlaskit/icon/glyph/shortcut";
+import { useIntl } from 'react-intl-next';
+import Button from '@atlaskit/button/new';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
 const ConfigureLinkDropdown = props => {
   const {
     testId
@@ -19,7 +19,7 @@ const ConfigureLinkDropdown = props => {
       triggerRef,
       ...props
     }) => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
-      spacing: "none",
+      spacing: 'none',
       ref: triggerRef
     }), /*#__PURE__*/React.createElement("span", {
       style: {
@@ -30,17 +30,17 @@ const ConfigureLinkDropdown = props => {
       size: 'small',
       testId: `${testId}-icon`
     }))),
-    spacing: "compact",
-    placement: "bottom-start"
+    spacing: 'compact',
+    placement: 'bottom-start'
   }, /*#__PURE__*/React.createElement(DropdownItemGroup, null, /*#__PURE__*/React.createElement(DropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(ShortcutIcon, {
       label: goToLinkLabel,
-      size: "small"
+      size: 'small'
     })
   }, goToLinkLabel), /*#__PURE__*/React.createElement(DropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(PreferencesIcon, {
       label: configureLinkLabel,
-      size: "small"
+      size: 'small'
     })
   }, configureLinkLabel)));
 };

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

@@ -42,12 +42,15 @@ const showOverlayStyles = css({
 });
 const iconStyles = 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%)
@@ -157,7 +160,9 @@ const LeftIconOverlay = ({
     tabIndex: -1,
     "data-testid": testId
   }, jsx("span", _extends({}, 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
   }), jsx("span", {
     css: iconStyles

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -341,9 +341,11 @@ export default class ResizableEmbedCard extends React.Component {
     return jsx("div", {
       "data-testid": "resizable-embed-card-spacing"
     }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       css: wrapperStyle({
         layout,
         isResized: !!pctWidth,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
         fullWidthMode
       })

package/dist/esm/nodeviews/datasource.js

@@ -278,7 +278,9 @@ export var Datasource = /*#__PURE__*/function (_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/esm/pm-plugins/doc.js

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

package/dist/esm/toolbar.js

@@ -216,7 +216,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var isEditDropdownEnabled = 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) {
@@ -226,10 +226,10 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             intl: intl,
             editorAnalyticsApi: editorAnalyticsApi,
             editorView: editorView,
-            onLinkEditClick: editLink(editorAnalyticsApi)
+            onLinkEditClick: editLink(editorAnalyticsApi, true)
           });
         }
-      } : {
+      }] : [{
         id: 'editor.link.edit',
         type: 'button',
         selected: false,
@@ -237,10 +237,11 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         title: intl.formatMessage(linkToolbarMessages.editLink),
         showTitle: true,
         testId: 'link-toolbar-edit-link-button',
-        onClick: editLink(editorAnalyticsApi)
+        onClick: editLink(editorAnalyticsApi, true)
       }, {
         type: 'separator'
-      }, {
+      }];
+      var toolbarItems = [].concat(editItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: OpenIcon,
@@ -250,7 +251,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onClick: visitCardLink(editorAnalyticsApi)
       }, {
         type: 'separator'
-      }].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }], _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'copy-button',
         supportsViewMode: true,
         items: [{
@@ -400,23 +401,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       type: 'separator'
     });
   }
-  var editDropdownWithSeparator = [{
-    type: 'custom',
-    fallback: [],
-    render: function render(editorView) {
-      return /*#__PURE__*/React.createElement(EditToolbarButton, {
-        key: "edit-toolbar-item",
-        url: metadata.url,
-        intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi,
-        editorView: editorView,
-        onLinkEditClick: 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;
@@ -430,12 +415,12 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     // 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()) {
     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) {
@@ -470,7 +455,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       }
     }, {
       type: 'separator'
-    }].concat(_toConsumableArray(getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') ? [].concat(editDropdownWithSeparator) : [])));
+    });
+  }
+  if (getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+    toolbarItems.push({
+      type: 'custom',
+      fallback: [],
+      render: function render(editorView) {
+        return /*#__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/esm/ui/AwarenessWrapper/index.js

@@ -13,7 +13,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
 var 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/esm/ui/EditLinkToolbar.js

@@ -124,7 +124,7 @@ export var EditLinkToolbar = /*#__PURE__*/function (_React$Component) {
   }]);
   return EditLinkToolbar;
 }(React.Component);
-export var editLink = function editLink(editorAnalyticsApi) {
+export var editLink = function editLink(editorAnalyticsApi, scrollIntoView) {
   return function (state, dispatch) {
     var type = 'hyperlink';
     if (state.selection instanceof NodeSelection) {
@@ -134,6 +134,7 @@ export var editLink = function editLink(editorAnalyticsApi) {
       var tr = state.tr;
       showLinkToolbar(tr);
       editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(buildEditLinkPayload(type))(tr);
+      tr.setMeta('scrollIntoView', scrollIntoView);
       dispatch(tr);
       return true;
     }