@atlaskit/editor-plugin-card 5.0.0 → 5.0.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-card
 
+## 5.0.2
+
+### Patch Changes
+
+- [#117485](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117485)
+  [`e9a8d9ba26963`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e9a8d9ba26963) -
+  Reorder icons, and remove some based on new editor controls. Changes under
+  `editor_plugin_controls` experiment.
+- Updated dependencies
+
+## 5.0.1
+
+### Patch Changes
+
+- [#117971](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117971)
+  [`d63604c31bb17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d63604c31bb17) -
+  [ux] Editor controls - Link consumption friendliness with open link on hover
+- Updated dependencies
+
 ## 5.0.0
 
 ### Major Changes

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

@@ -9,10 +9,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../../pm-plugins/utils");
 var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
 var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
 var _localStorage = require("../local-storage");
+var _OpenButtonOverlay = _interopRequireDefault(require("../OpenButtonOverlay"));
 var _Pulse = require("../Pulse");
 /**
  * @jsxRuntime classic
@@ -98,6 +100,18 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_OpenButtonOverlay.default, {
+      isVisible: isHovered,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      },
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange]);
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
     return (
@@ -115,7 +129,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
         discoveryMode: "start",
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse"
-      }, cardWithOverlay)))
+      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
     );
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, cardWithOpenButtonOverlay]);
 };

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _new = require("@atlaskit/button/new");
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _excluded = ["children", "isVisible", "url"];
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var containerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var overlayStyles = (0, _react2.css)({
+  position: 'absolute',
+  left: '2px',
+  top: 0,
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  verticalAlign: 'text-top',
+  height: '19px',
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  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")
+  }
+});
+var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    url = _ref.url,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // TODO add translation
+  var label = 'Open';
+  var handleDoubleClick = function handleDoubleClick() {
+    // Double click opens the link in a new tab
+    window.open(url, '_blank');
+  };
+  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, {
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick
+    }), children, isVisible && (0, _react2.jsx)("div", {
+      css: [overlayStyles]
+    }, (0, _react2.jsx)(_new.LinkButton, {
+      spacing: "compact",
+      href: url,
+      target: "_blank",
+      iconBefore: _linkExternal.default,
+      appearance: "default"
+    }, label)))
+  );
+};
+var _default = exports.default = OpenButtonOverlay;

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

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/ui/toolbar.js

@@ -29,6 +29,7 @@ var _settings2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/set
 var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _utils3 = require("../pm-plugins/utils");
@@ -288,12 +289,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         testId: 'inline-card-toolbar-comment-button',
         iconFallback: _comment2.default,
         title: intl.formatMessage(_messages.annotationMessages.createComment),
+        showTitle: (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? undefined : true,
         onClick: onCommentButtonClick,
         disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline'
       }, {
         type: 'separator'
       }] : [];
-      var toolbarItems = [].concat(editItems, commentItems, [{
+      var toolbarItems = (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [].concat(editItems, commentItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: _linkExternal.default,
@@ -328,7 +330,44 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(_messages.default.remove),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-      }]);
+      }]) : [].concat(editItems, (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [getSettingsButton(intl, editorAnalyticsApi, 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))
+      }, {
+        type: 'separator'
+      }, {
+        id: 'editor.link.openLink',
+        type: 'button',
+        icon: _linkExternal.default,
+        iconFallback: _shortcut.default,
+        metadata: metadata,
+        className: 'hyperlink-open-link',
+        title: intl.formatMessage(_messages.linkMessages.openLink),
+        onClick: visitCardLink(editorAnalyticsApi)
+      }, {
+        type: 'separator'
+      }, {
+        type: 'copy-button',
+        items: [{
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: node.type
+        }]
+      }], (0, _toConsumableArray2.default)(commentItems.length > 1 ? [{
+        type: 'separator'
+      }, commentItems[0]] : commentItems));
       if (currentAppearance === 'embed') {
         var _pluginInjectionApi$a4;
         var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions);
@@ -509,7 +548,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     focusEditoronEnter: true,
     type: 'button',
     appearance: 'danger',
-    icon: _remove.default,
+    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),

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

@@ -7,10 +7,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
 import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
 import InlineCardOverlay from '../InlineCardOverlay';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../local-storage';
+import OpenButtonOverlay from '../OpenButtonOverlay';
 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
@@ -84,6 +86,14 @@ export const AwarenessWrapper = ({
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  const cardWithOpenButtonOverlay = useMemo(() => {
+    return jsx(OpenButtonOverlay, {
+      isVisible: isHovered,
+      onMouseEnter: () => handleOverlayChange(true),
+      onMouseLeave: () => handleOverlayChange(false),
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
     return (
@@ -101,7 +111,7 @@ export const AwarenessWrapper = ({
         discoveryMode: "start",
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse"
-      }, cardWithOverlay)))
+      }, editorExperiment('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : 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]);
+  }, [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, cardWithOpenButtonOverlay]);
 };

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

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React 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
+import { LinkButton } from '@atlaskit/button/new';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+const containerStyles = css({
+  position: 'relative'
+});
+const overlayStyles = css({
+  position: 'absolute',
+  left: '2px',
+  top: 0,
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  verticalAlign: 'text-top',
+  height: '19px',
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  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`
+  }
+});
+const OpenButtonOverlay = ({
+  children,
+  isVisible = false,
+  url,
+  ...props
+}) => {
+  // TODO add translation
+  const label = 'Open';
+  const handleDoubleClick = () => {
+    // Double click opens the link in a new tab
+    window.open(url, '_blank');
+  };
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
+    jsx("span", _extends({}, props, {
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick
+    }), children, isVisible && jsx("div", {
+      css: [overlayStyles]
+    }, jsx(LinkButton, {
+      spacing: "compact",
+      href: url,
+      target: "_blank",
+      iconBefore: LinkExternalIcon,
+      appearance: "default"
+    }, label)))
+  );
+};
+export default OpenButtonOverlay;

package/dist/es2019/ui/toolbar.js

@@ -19,6 +19,7 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceNode, titleUrlPairFromNode } from '../pm-plugins/utils';
@@ -280,12 +281,13 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       testId: 'inline-card-toolbar-comment-button',
       iconFallback: LegacyCommentIcon,
       title: intl.formatMessage(annotationMessages.createComment),
+      showTitle: editorExperiment('platform_editor_controls', 'control') ? undefined : true,
       onClick: onCommentButtonClick,
       disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : (_pluginInjectionApi$c3 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.mode) === 'offline'
     }, {
       type: 'separator'
     }] : [];
-    const toolbarItems = [...editItems, ...commentItems, {
+    const toolbarItems = editorExperiment('platform_editor_controls', 'control') ? [...editItems, ...commentItems, {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -320,7 +322,44 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       title: intl.formatMessage(commonMessages.remove),
       onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-    }];
+    }] : [...editItems, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), getSettingsButton(intl, editorAnalyticsApi, 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))
+    }, {
+      type: 'separator'
+    }, {
+      id: 'editor.link.openLink',
+      type: 'button',
+      icon: LinkExternalIcon,
+      iconFallback: OpenIcon,
+      metadata: metadata,
+      className: 'hyperlink-open-link',
+      title: intl.formatMessage(linkMessages.openLink),
+      onClick: visitCardLink(editorAnalyticsApi)
+    }, {
+      type: 'separator'
+    }, {
+      type: 'copy-button',
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }]
+    }, ...(commentItems.length > 1 ? [{
+      type: 'separator'
+    }, commentItems[0]] : commentItems)];
     if (currentAppearance === 'embed') {
       var _pluginInjectionApi$a5;
       const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions, cardOptions);
@@ -498,7 +537,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     focusEditoronEnter: true,
     type: 'button',
     appearance: 'danger',
-    icon: RemoveIcon,
+    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),

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

@@ -8,10 +8,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
 import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
 import InlineCardOverlay from '../InlineCardOverlay';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../local-storage';
+import OpenButtonOverlay from '../OpenButtonOverlay';
 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
@@ -90,6 +92,18 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  var cardWithOpenButtonOverlay = useMemo(function () {
+    return jsx(OpenButtonOverlay, {
+      isVisible: isHovered,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      },
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange]);
   return useMemo(function () {
     var _cardContext$value;
     return (
@@ -107,7 +121,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
         discoveryMode: "start",
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse"
-      }, cardWithOverlay)))
+      }, editorExperiment('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
     );
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, cardWithOpenButtonOverlay]);
 };

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "isVisible", "url"];
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React 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
+import { LinkButton } from '@atlaskit/button/new';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+var containerStyles = css({
+  position: 'relative'
+});
+var overlayStyles = css({
+  position: 'absolute',
+  left: '2px',
+  top: 0,
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  verticalAlign: 'text-top',
+  height: '19px',
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  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")
+  }
+});
+var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    url = _ref.url,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // TODO add translation
+  var label = 'Open';
+  var handleDoubleClick = function handleDoubleClick() {
+    // Double click opens the link in a new tab
+    window.open(url, '_blank');
+  };
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
+    jsx("span", _extends({}, props, {
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick
+    }), children, isVisible && jsx("div", {
+      css: [overlayStyles]
+    }, jsx(LinkButton, {
+      spacing: "compact",
+      href: url,
+      target: "_blank",
+      iconBefore: LinkExternalIcon,
+      appearance: "default"
+    }, label)))
+  );
+};
+export default OpenButtonOverlay;

package/dist/esm/ui/toolbar.js

@@ -23,6 +23,7 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceNode, titleUrlPairFromNode } from '../pm-plugins/utils';
@@ -278,12 +279,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         testId: 'inline-card-toolbar-comment-button',
         iconFallback: LegacyCommentIcon,
         title: intl.formatMessage(annotationMessages.createComment),
+        showTitle: editorExperiment('platform_editor_controls', 'control') ? undefined : true,
         onClick: onCommentButtonClick,
         disabled: (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.connectivity) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.mode) === 'offline'
       }, {
         type: 'separator'
       }] : [];
-      var toolbarItems = [].concat(editItems, commentItems, [{
+      var toolbarItems = editorExperiment('platform_editor_controls', 'control') ? [].concat(editItems, commentItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: LinkExternalIcon,
@@ -318,7 +320,44 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(commonMessages.remove),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-      }]);
+      }]) : [].concat(editItems, _toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [getSettingsButton(intl, editorAnalyticsApi, 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))
+      }, {
+        type: 'separator'
+      }, {
+        id: 'editor.link.openLink',
+        type: 'button',
+        icon: LinkExternalIcon,
+        iconFallback: OpenIcon,
+        metadata: metadata,
+        className: 'hyperlink-open-link',
+        title: intl.formatMessage(linkMessages.openLink),
+        onClick: visitCardLink(editorAnalyticsApi)
+      }, {
+        type: 'separator'
+      }, {
+        type: 'copy-button',
+        items: [{
+          state: state,
+          formatMessage: intl.formatMessage,
+          nodeType: node.type
+        }]
+      }], _toConsumableArray(commentItems.length > 1 ? [{
+        type: 'separator'
+      }, commentItems[0]] : commentItems));
       if (currentAppearance === 'embed') {
         var _pluginInjectionApi$a4;
         var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions);
@@ -499,7 +538,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     focusEditoronEnter: true,
     type: 'button',
     appearance: 'danger',
-    icon: RemoveIcon,
+    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),

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { OpenButtonOverlayProps } from './types';
+declare const OpenButtonOverlay: ({ children, isVisible, url, ...props }: React.PropsWithChildren<OpenButtonOverlayProps>) => jsx.JSX.Element;
+export default OpenButtonOverlay;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    url: string;
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { OpenButtonOverlayProps } from './types';
+declare const OpenButtonOverlay: ({ children, isVisible, url, ...props }: React.PropsWithChildren<OpenButtonOverlayProps>) => jsx.JSX.Element;
+export default OpenButtonOverlay;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    url: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.0.0",
+	"version": "5.0.2",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 		"@atlaskit/adf-schema": "^47.2.1",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^100.0.0",
+		"@atlaskit/editor-common": "^100.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-base": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -48,19 +48,19 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.3.0",
 		"@atlaskit/frontend-utilities": "^3.0.0",
-		"@atlaskit/icon": "^24.0.0",
+		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/link-analytics": "^9.0.0",
 		"@atlaskit/link-client-extension": "^4.0.0",
 		"@atlaskit/link-datasource": "^3.21.0",
 		"@atlaskit/linking-common": "^8.0.0",
 		"@atlaskit/linking-types": "^9.6.0",
-		"@atlaskit/menu": "3.0.0",
+		"@atlaskit/menu": "3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.0.0",
+		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/smart-card": "^35.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^3.2.0",
+		"@atlaskit/tokens": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",