@atlaskit/editor-plugin-card 5.3.4 → 5.3.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 5.3.6
+
+### Patch Changes
+
+- [#129581](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129581)
+  [`28d3a33252273`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28d3a33252273) -
+  [ux] Update open button on short link
+- Updated dependencies
+
+## 5.3.5
+
+### Patch Changes
+
+- [#128122](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128122)
+  [`552a7081e75d7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/552a7081e75d7) -
+  [ux] ED-27167 Move copy and delete button to overflow menu for datasource floating toolbar
+- Updated dependencies
+
 ## 5.3.4
 
 ### Patch Changes

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

@@ -102,7 +102,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_OpenButtonOverlay.default, {
-      isVisible: isHovered,
+      isVisible: isResolvedViewRendered && isHovered,
       onMouseEnter: function onMouseEnter() {
         return handleOverlayChange(true);
       },
@@ -111,7 +111,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       },
       url: url
     }, children);
-  }, [children, isHovered, url, handleOverlayChange]);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
     return (

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

@@ -1,13 +1,15 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _new = require("@atlaskit/button/new");
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
@@ -20,6 +22,8 @@ var _excluded = ["children", "isVisible", "url"];
  */
 // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 && {}.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 containerStyles = (0, _react2.css)({
   position: 'relative'
 });
@@ -39,9 +43,10 @@ var overlayStyles = (0, _react2.css)({
   zIndex: 2,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   a: {
-    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
+    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
   }
 });
+var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
@@ -50,17 +55,36 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // TODO: ED-26961 - add translation
   var label = 'Open';
+  var containerRef = (0, _react.useRef)(null);
+  var openButtonRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
   var handleDoubleClick = function handleDoubleClick() {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  (0, _react.useLayoutEffect)(function () {
+    var _containerRef$current, _openButtonRef$curren;
+    if (!isVisible) {
+      return;
+    }
+    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
+    var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    setShowLabel(canShowLabel);
+  }, [isVisible]);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
+    (0, _react2.jsx)("span", (0, _extends2.default)({
+      ref: containerRef
+    }, props, {
       css: containerStyles,
       onDoubleClick: handleDoubleClick
     }), children, isVisible && (0, _react2.jsx)("div", {
+      ref: openButtonRef,
       css: [overlayStyles]
     }, (0, _react2.jsx)(_new.LinkButton, {
       spacing: "compact",
@@ -68,7 +92,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       target: "_blank",
       iconBefore: _linkExternal.default,
       appearance: "default"
-    }, label)))
+    }, showLabel ? label : '')))
   );
 };
 var _default = exports.default = OpenButtonOverlay;

package/dist/cjs/ui/toolbar.js

@@ -256,7 +256,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
     } else {
       var _pluginInjectionApi$c;
       var inlineCard = state.schema.nodes.inlineCard;
@@ -429,7 +429,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }, {
           type: 'overflow-dropdown',
           options: [{
-            title: 'Copy',
+            title: intl.formatMessage(_messages.default.copyToClipboard),
             onClick: function onClick() {
               var _pluginInjectionApi$c2, _pluginInjectionApi$f;
               pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
@@ -437,13 +437,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               return true;
             },
             icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
-              label: "Copy"
+              label: intl.formatMessage(_messages.default.copyToClipboard)
             })
           }, {
-            title: 'Delete',
+            title: intl.formatMessage(_messages.default.delete),
             onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
             icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
-              label: "Delete"
+              label: intl.formatMessage(_messages.default.delete)
             })
           }]
         }];
@@ -478,7 +478,7 @@ var getSettingsButton = exports.getSettingsButton = function getSettingsButton(i
     target: '_blank'
   };
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
   var _node$attrs2;
   var toolbarItems = [];
   var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
@@ -574,36 +574,68 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(_messages.linkMessages.openLink),
       onClick: visitCardLink(editorAnalyticsApi)
+    });
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'separator'
+      });
+    }
+  }
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+    toolbarItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
     }, {
       type: 'separator'
+    }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
+      type: 'separator'
+    }, {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: _delete.default,
+      iconFallback: _remove.default,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(_messages.default.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
     });
+  } else {
+    toolbarItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+    var overflowMenuConfig = [{
+      type: 'overflow-dropdown',
+      options: [{
+        title: intl.formatMessage(_messages.default.copyToClipboard),
+        onClick: function onClick() {
+          var _pluginInjectionApi$c3, _pluginInjectionApi$f2;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
+          return true;
+        },
+        icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
+          label: intl.formatMessage(_messages.default.copyToClipboard)
+        })
+      }, {
+        title: intl.formatMessage(_messages.default.delete),
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
+          label: intl.formatMessage(_messages.default.delete)
+        })
+      }]
+    }];
+    toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
   }
-  toolbarItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: node.type
-    }]
-  }, {
-    type: 'separator'
-  }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
-    type: 'separator'
-  }, {
-    id: 'editor.link.delete',
-    focusEditoronEnter: true,
-    type: 'button',
-    appearance: 'danger',
-    icon: _delete.default,
-    iconFallback: _remove.default,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    title: intl.formatMessage(_messages.default.remove),
-    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-  });
   return toolbarItems;
 };
 var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {

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

@@ -88,12 +88,12 @@ export const AwarenessWrapper = ({
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   const cardWithOpenButtonOverlay = useMemo(() => {
     return jsx(OpenButtonOverlay, {
-      isVisible: isHovered,
+      isVisible: isResolvedViewRendered && isHovered,
       onMouseEnter: () => handleOverlayChange(true),
       onMouseLeave: () => handleOverlayChange(false),
       url: url
     }, children);
-  }, [children, isHovered, url, handleOverlayChange]);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   return useMemo(() => {
     var _cardContext$value;
     return (

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

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -30,9 +30,10 @@ const overlayStyles = css({
   zIndex: 2,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   a: {
-    padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0`
+    padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
   }
 });
+const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 const OpenButtonOverlay = ({
   children,
   isVisible = false,
@@ -41,17 +42,33 @@ const OpenButtonOverlay = ({
 }) => {
   // TODO: ED-26961 - add translation
   const label = 'Open';
+  const containerRef = useRef(null);
+  const openButtonRef = useRef(null);
+  const [showLabel, setShowLabel] = useState(true);
   const handleDoubleClick = () => {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  useLayoutEffect(() => {
+    var _containerRef$current, _openButtonRef$curren;
+    if (!isVisible) {
+      return;
+    }
+    const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
+    const canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    setShowLabel(canShowLabel);
+  }, [isVisible]);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    jsx("span", _extends({}, props, {
+    jsx("span", _extends({
+      ref: containerRef
+    }, props, {
       css: containerStyles,
       onDoubleClick: handleDoubleClick
     }), children, isVisible && jsx("div", {
+      ref: openButtonRef,
       css: [overlayStyles]
     }, jsx(LinkButton, {
       spacing: "compact",
@@ -59,7 +76,7 @@ const OpenButtonOverlay = ({
       target: "_blank",
       iconBefore: LinkExternalIcon,
       appearance: "default"
-    }, label)))
+    }, showLabel ? label : '')))
   );
 };
 export default OpenButtonOverlay;

package/dist/es2019/ui/toolbar.js

@@ -248,7 +248,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       lpLinkPicker
     })];
   } else if (shouldRenderDatasourceToolbar) {
-    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
+    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
   } else {
     var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
     const {
@@ -419,7 +419,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       }, {
         type: 'overflow-dropdown',
         options: [{
-          title: 'Copy',
+          title: intl.formatMessage(commonMessages.copyToClipboard),
           onClick: () => {
             var _pluginInjectionApi$c4, _pluginInjectionApi$f;
             pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute( // @ts-ignore
@@ -427,13 +427,13 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
             return true;
           },
           icon: /*#__PURE__*/React.createElement(CopyIcon, {
-            label: "Copy"
+            label: intl.formatMessage(commonMessages.copyToClipboard)
           })
         }, {
-          title: 'Delete',
+          title: intl.formatMessage(commonMessages.delete),
           onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
           icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-            label: "Delete"
+            label: intl.formatMessage(commonMessages.delete)
           })
         }]
       }];
@@ -467,7 +467,7 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
     target: '_blank'
   };
 };
-const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) => {
+const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) => {
   var _node$attrs2;
   const toolbarItems = [];
   const canShowAppearanceSwitch = () => {
@@ -563,36 +563,68 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
       onClick: visitCardLink(editorAnalyticsApi)
+    });
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'separator'
+      });
+    }
+  }
+  if (editorExperiment('platform_editor_controls', 'control')) {
+    toolbarItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
     }, {
       type: 'separator'
+    }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
+      type: 'separator'
+    }, {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: DeleteIcon,
+      iconFallback: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
+    });
+  } else {
+    toolbarItems.push({
+      type: 'separator',
+      fullHeight: true
     });
+    const overflowMenuConfig = [{
+      type: 'overflow-dropdown',
+      options: [{
+        title: intl.formatMessage(commonMessages.copyToClipboard),
+        onClick: () => {
+          var _pluginInjectionApi$c5, _pluginInjectionApi$f2;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: intl.formatMessage(commonMessages.copyToClipboard)
+        })
+      }, {
+        title: intl.formatMessage(commonMessages.delete),
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: intl.formatMessage(commonMessages.delete)
+        })
+      }]
+    }];
+    toolbarItems.push(...overflowMenuConfig);
   }
-  toolbarItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state,
-      formatMessage: intl.formatMessage,
-      nodeType: node.type
-    }]
-  }, {
-    type: 'separator'
-  }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
-    type: 'separator'
-  }, {
-    id: 'editor.link.delete',
-    focusEditoronEnter: true,
-    type: 'button',
-    appearance: 'danger',
-    icon: DeleteIcon,
-    iconFallback: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-  });
   return toolbarItems;
 };
 export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDiscoverabilityEnabled) => {

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

@@ -94,7 +94,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var cardWithOpenButtonOverlay = useMemo(function () {
     return jsx(OpenButtonOverlay, {
-      isVisible: isHovered,
+      isVisible: isResolvedViewRendered && isHovered,
       onMouseEnter: function onMouseEnter() {
         return handleOverlayChange(true);
       },
@@ -103,7 +103,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
       },
       url: url
     }, children);
-  }, [children, isHovered, url, handleOverlayChange]);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   return useMemo(function () {
     var _cardContext$value;
     return (

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "isVisible", "url"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -7,7 +8,7 @@ var _excluded = ["children", "isVisible", "url"];
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,9 +33,10 @@ var overlayStyles = css({
   zIndex: 2,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   a: {
-    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
+    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
   }
 });
+var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
@@ -43,17 +45,36 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   // TODO: ED-26961 - add translation
   var label = 'Open';
+  var containerRef = useRef(null);
+  var openButtonRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
   var handleDoubleClick = function handleDoubleClick() {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  useLayoutEffect(function () {
+    var _containerRef$current, _openButtonRef$curren;
+    if (!isVisible) {
+      return;
+    }
+    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
+    var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    setShowLabel(canShowLabel);
+  }, [isVisible]);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    jsx("span", _extends({}, props, {
+    jsx("span", _extends({
+      ref: containerRef
+    }, props, {
       css: containerStyles,
       onDoubleClick: handleDoubleClick
     }), children, isVisible && jsx("div", {
+      ref: openButtonRef,
       css: [overlayStyles]
     }, jsx(LinkButton, {
       spacing: "compact",
@@ -61,7 +82,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       target: "_blank",
       iconBefore: LinkExternalIcon,
       appearance: "default"
-    }, label)))
+    }, showLabel ? label : '')))
   );
 };
 export default OpenButtonOverlay;

package/dist/esm/ui/toolbar.js

@@ -246,7 +246,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         lpLinkPicker: lpLinkPicker
       })];
     } else if (shouldRenderDatasourceToolbar) {
-      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
+      return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance, pluginInjectionApi);
     } else {
       var _pluginInjectionApi$c;
       var inlineCard = state.schema.nodes.inlineCard;
@@ -419,7 +419,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }, {
           type: 'overflow-dropdown',
           options: [{
-            title: 'Copy',
+            title: intl.formatMessage(commonMessages.copyToClipboard),
             onClick: function onClick() {
               var _pluginInjectionApi$c2, _pluginInjectionApi$f;
               pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 || _pluginInjectionApi$c2.actions.execute( // @ts-ignore
@@ -427,13 +427,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               return true;
             },
             icon: /*#__PURE__*/React.createElement(CopyIcon, {
-              label: "Copy"
+              label: intl.formatMessage(commonMessages.copyToClipboard)
             })
           }, {
-            title: 'Delete',
+            title: intl.formatMessage(commonMessages.delete),
             onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
             icon: /*#__PURE__*/React.createElement(DeleteIcon, {
-              label: "Delete"
+              label: intl.formatMessage(commonMessages.delete)
             })
           }]
         }];
@@ -468,7 +468,7 @@ export var getSettingsButton = function getSettingsButton(intl, editorAnalyticsA
     target: '_blank'
   };
 };
-var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) {
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
   var _node$attrs2;
   var toolbarItems = [];
   var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
@@ -564,36 +564,68 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       className: 'hyperlink-open-link',
       title: intl.formatMessage(linkMessages.openLink),
       onClick: visitCardLink(editorAnalyticsApi)
+    });
+    if (editorExperiment('platform_editor_controls', 'control')) {
+      toolbarItems.push({
+        type: 'separator'
+      });
+    }
+  }
+  if (editorExperiment('platform_editor_controls', 'control')) {
+    toolbarItems.push({
+      type: 'copy-button',
+      supportsViewMode: true,
+      items: [{
+        state: state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
     }, {
       type: 'separator'
+    }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
+      type: 'separator'
+    }, {
+      id: 'editor.link.delete',
+      focusEditoronEnter: true,
+      type: 'button',
+      appearance: 'danger',
+      icon: DeleteIcon,
+      iconFallback: RemoveIcon,
+      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+      title: intl.formatMessage(commonMessages.remove),
+      onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
     });
+  } else {
+    toolbarItems.push({
+      type: 'separator',
+      fullHeight: true
+    });
+    var overflowMenuConfig = [{
+      type: 'overflow-dropdown',
+      options: [{
+        title: intl.formatMessage(commonMessages.copyToClipboard),
+        onClick: function onClick() {
+          var _pluginInjectionApi$c3, _pluginInjectionApi$f2;
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 || _pluginInjectionApi$c3.actions.execute( // @ts-ignore
+          pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
+          return true;
+        },
+        icon: /*#__PURE__*/React.createElement(CopyIcon, {
+          label: intl.formatMessage(commonMessages.copyToClipboard)
+        })
+      }, {
+        title: intl.formatMessage(commonMessages.delete),
+        onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        icon: /*#__PURE__*/React.createElement(DeleteIcon, {
+          label: intl.formatMessage(commonMessages.delete)
+        })
+      }]
+    }];
+    toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
   }
-  toolbarItems.push({
-    type: 'copy-button',
-    supportsViewMode: true,
-    items: [{
-      state: state,
-      formatMessage: intl.formatMessage,
-      nodeType: node.type
-    }]
-  }, {
-    type: 'separator'
-  }, getSettingsButton(intl, editorAnalyticsApi, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.userPreferencesLink), {
-    type: 'separator'
-  }, {
-    id: 'editor.link.delete',
-    focusEditoronEnter: true,
-    type: 'button',
-    appearance: 'danger',
-    icon: DeleteIcon,
-    iconFallback: RemoveIcon,
-    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
-    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
-    title: intl.formatMessage(commonMessages.remove),
-    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-  });
   return toolbarItems;
 };
 export var shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.3.4",
+	"version": "5.3.6",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^102.10.0",
+		"@atlaskit/editor-common": "^102.11.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.3.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^3.2.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^3.3.0",
 		"@atlaskit/editor-plugin-grid": "^2.0.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -54,12 +54,12 @@
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/link-analytics": "^9.1.0",
 		"@atlaskit/link-client-extension": "^4.0.0",
-		"@atlaskit/link-datasource": "^4.0.0",
+		"@atlaskit/link-datasource": "^4.1.0",
 		"@atlaskit/linking-common": "^8.0.0",
 		"@atlaskit/linking-types": "^9.6.0",
 		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/smart-card": "^36.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.1.0",