@atlaskit/editor-plugin-card 5.4.6 → 5.4.8

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 5.4.8
+
+### Patch Changes
+
+- [#134468](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134468)
+  [`e312ec529d05a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e312ec529d05a) -
+  [ux] Apply hover decoration when hovering on copy/delete button on overflow menu
+- Updated dependencies
+
+## 5.4.7
+
+### Patch Changes
+
+- [#132269](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132269)
+  [`f6984f0b31c02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6984f0b31c02) -
+  [ux] Fixed alignment of the icon in OpenButtonOverlay on header link.
+- Updated dependencies
+
 ## 5.4.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -8,10 +8,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineCardWithAwareness = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _AwarenessWrapper = require("../ui/AwarenessWrapper");
+var _OpenButtonOverlay = _interopRequireDefault(require("../ui/OpenButtonOverlay"));
 var _inlineCard = require("./inlineCard");
 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; }
@@ -72,7 +75,26 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       setIsHovered(isHovered);
     }
   }, [isOverlayEnabled]);
-  var innerCard = (0, _react.useMemo)(function () {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react.default.createElement(_OpenButtonOverlay.default, {
+      isVisible: isResolvedViewRendered,
+      url: node.attrs.url
+    }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
+      node: node,
+      view: view,
+      getPos: getPos,
+      useAlternativePreloader: useAlternativePreloader,
+      actionOptions: actionOptions,
+      onResolve: onResolve,
+      onClick: onClick,
+      cardContext: cardContext,
+      isHovered: isHovered,
+      isPageSSRed: isPageSSRed
+    }));
+  }, [isResolvedViewRendered, node, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
+  var innerCardOriginal = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
       node: node,
       view: view,
@@ -86,6 +108,7 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       isPageSSRed: isPageSSRed
     });
   }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
+  var innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/_react.default.createElement(_AwarenessWrapper.AwarenessWrapper, {
     isOverlayEnabled: isOverlayEnabled,
     isPulseEnabled: isPulseEnabled,

package/dist/cjs/nodeviews/lazy-inline-card.js

@@ -14,7 +14,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(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 lazyInlineCardView = exports.lazyInlineCardView = function lazyInlineCardView(props) {
   var isPageSSRed = props.isPageSSRed || false;
-  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || !(0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_smartlinks') || isPageSSRed && (0, _platformFeatureFlags.fg)('platform_ssr_smartlinks_editor')) {
+  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || isPageSSRed && (0, _platformFeatureFlags.fg)('platform_ssr_smartlinks_editor')) {
     return (0, _inlineCard.inlineCardNodeView)(props);
   }
   return (0, _lazyNodeView.withLazyLoading)({

package/dist/cjs/nodeviews/toDOM-fixes/inlineCard.js

@@ -8,15 +8,11 @@ exports.inlineCardSpecWithFixedToDOM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // @nodeSpecException:toDOM patch
 var inlineCardSpecWithFixedToDOM = exports.inlineCardSpecWithFixedToDOM = function inlineCardSpecWithFixedToDOM() {
-  if (!(0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_smartlinks')) {
-    return _adfSchema.inlineCard;
-  }
   return _objectSpread(_objectSpread({}, _adfSchema.inlineCard), {}, {
     toDOM: function toDOM(node) {
       var wrapperAttrs = {

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

@@ -87,7 +87,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = (0, _react.useMemo)(function () {
-    if (shouldShowLinkOverlay) {
+    if (shouldShowLinkOverlay && !((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1'))) {
       return (0, _react2.jsx)(_InlineCardOverlay.default, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -103,20 +103,17 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
-    if (shouldShowLinkOverlay || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
-      return (0, _react2.jsx)(_OpenButtonOverlay.default, {
-        isVisible: isResolvedViewRendered && isHovered,
-        onMouseEnter: function onMouseEnter() {
-          return handleOverlayChange(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return handleOverlayChange(false);
-        },
-        url: url
-      }, children);
-    }
-    return children;
-  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered, shouldShowLinkOverlay]);
+    return (0, _react2.jsx)(_OpenButtonOverlay.default, {
+      isVisible: isResolvedViewRendered && isHovered,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      },
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   var isInline = appearance === 'inline';
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
@@ -136,7 +133,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse",
         isInline: isInline
-      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
+      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? 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, cardWithOpenButtonOverlay, isInline]);
 };

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

@@ -12,6 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _excluded = ["children", "isVisible", "url"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -71,20 +72,56 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showLabel = _useState2[0],
     setShowLabel = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHovered = _useState4[0],
+    setHovered = _useState4[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) {
+    if (!isVisible || !isHovered) {
       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]);
+  }, [isVisible, isHovered]);
+  var handleOverlayChange = (0, _react.useCallback)(function (isHovered) {
+    setHovered(isHovered);
+  }, []);
+  if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      (0, _react2.jsx)("span", {
+        ref: containerRef,
+        css: containerStyles,
+        onDoubleClick: handleDoubleClick,
+        onMouseEnter: function onMouseEnter() {
+          return handleOverlayChange(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleOverlayChange(false);
+        }
+      }, children, isHovered && (0, _react2.jsx)(_primitives.Anchor, {
+        ref: openButtonRef,
+        xcss: linkStyles,
+        href: url,
+        target: "_blank"
+      }, (0, _react2.jsx)(_primitives.Box, {
+        xcss: iconWrapperStyles
+      }, (0, _react2.jsx)(_linkExternal.default, {
+        label: ""
+      })), showLabel && (0, _react2.jsx)(_primitives.Text, {
+        size: "small",
+        color: "color.text.subtle",
+        maxLines: 1
+      }, label)))
+    );
+  }
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
@@ -99,7 +136,8 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       href: url,
       target: "_blank"
     }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: iconWrapperStyles
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
     }, (0, _react2.jsx)(_linkExternal.default, {
       label: ""
     })), showLabel && (0, _react2.jsx)(_primitives.Text, {

package/dist/cjs/ui/toolbar.js

@@ -18,6 +18,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
@@ -423,12 +424,20 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }]));
       }
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+        var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
+          return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? {
+            onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+            onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+            onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+            onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+          } : undefined;
+        };
         var overflowMenuConfig = [{
           type: 'separator',
           fullHeight: true
         }, {
           type: 'overflow-dropdown',
-          options: [{
+          options: [_objectSpread({
             title: intl.formatMessage(_messages.default.copyToClipboard),
             onClick: function onClick() {
               var _pluginInjectionApi$c2, _pluginInjectionApi$f;
@@ -439,13 +448,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
               label: intl.formatMessage(_messages.default.copyToClipboard)
             })
-          }, {
+          }, hoverDecorationProps(node.type, _editorSharedStyles.akEditorSelectedNodeClassName)), _objectSpread({
             title: intl.formatMessage(_messages.default.delete),
             onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
             icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
               label: intl.formatMessage(_messages.default.delete)
             })
-          }]
+          }, hoverDecorationProps(node.type))]
         }];
         toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
       }
@@ -623,12 +632,20 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
           pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
           return true;
         },
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, _editorSharedStyles.akEditorSelectedNodeClassName),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, _editorSharedStyles.akEditorSelectedNodeClassName),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, _editorSharedStyles.akEditorSelectedNodeClassName),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, _editorSharedStyles.akEditorSelectedNodeClassName),
         icon: /*#__PURE__*/_react.default.createElement(_copy.default, {
           label: intl.formatMessage(_messages.default.copyToClipboard)
         })
       }, {
         title: intl.formatMessage(_messages.default.delete),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        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),
         icon: /*#__PURE__*/_react.default.createElement(_delete.default, {
           label: intl.formatMessage(_messages.default.delete)
         })

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,8 +1,11 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
+import OpenButtonOverlay from '../ui/OpenButtonOverlay';
 import { InlineCard } from './inlineCard';
 export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   node,
@@ -47,7 +50,25 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
       setIsHovered(isHovered);
     }
   }, [isOverlayEnabled]);
-  const innerCard = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  const innerCardWithOpenButtonOverlay = useMemo(() => /*#__PURE__*/React.createElement(OpenButtonOverlay, {
+    isVisible: isResolvedViewRendered,
+    url: node.attrs.url
+  }, /*#__PURE__*/React.createElement(InlineCard, {
+    node: node,
+    view: view,
+    getPos: getPos,
+    useAlternativePreloader: useAlternativePreloader,
+    actionOptions: actionOptions,
+    onResolve: onResolve,
+    onClick: onClick,
+    cardContext: cardContext,
+    isHovered: isHovered,
+    isPageSSRed: isPageSSRed
+  })), [isResolvedViewRendered, node, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
+  const innerCardOriginal = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
     node: node,
     view: view,
     getPos: getPos,
@@ -59,6 +80,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     isHovered: isHovered,
     isPageSSRed: isPageSSRed
   }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
+  const innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
     isOverlayEnabled: isOverlayEnabled,
     isPulseEnabled: isPulseEnabled,

package/dist/es2019/nodeviews/lazy-inline-card.js

@@ -4,7 +4,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { inlineCardNodeView } from './inlineCard';
 export const lazyInlineCardView = props => {
   const isPageSSRed = props.isPageSSRed || false;
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || !fg('platform_editor_ssr_fix_smartlinks') || isPageSSRed && fg('platform_ssr_smartlinks_editor')) {
+  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed && fg('platform_ssr_smartlinks_editor')) {
     return inlineCardNodeView(props);
   }
   return withLazyLoading({

package/dist/es2019/nodeviews/toDOM-fixes/inlineCard.js

@@ -1,12 +1,8 @@
 import { inlineCard } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
 // @nodeSpecException:toDOM patch
 export const inlineCardSpecWithFixedToDOM = () => {
-  if (!fg('platform_editor_ssr_fix_smartlinks')) {
-    return inlineCard;
-  }
   return {
     ...inlineCard,
     toDOM: node => {

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

@@ -77,7 +77,7 @@ export const AwarenessWrapper = ({
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   const cardWithOverlay = useMemo(() => {
-    if (shouldShowLinkOverlay) {
+    if (shouldShowLinkOverlay && !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1'))) {
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -89,16 +89,13 @@ export const AwarenessWrapper = ({
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   const cardWithOpenButtonOverlay = useMemo(() => {
-    if (shouldShowLinkOverlay || !fg('platform_editor_controls_patch_1')) {
-      return jsx(OpenButtonOverlay, {
-        isVisible: isResolvedViewRendered && isHovered,
-        onMouseEnter: () => handleOverlayChange(true),
-        onMouseLeave: () => handleOverlayChange(false),
-        url: url
-      }, children);
-    }
-    return children;
-  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered, shouldShowLinkOverlay]);
+    return jsx(OpenButtonOverlay, {
+      isVisible: isResolvedViewRendered && isHovered,
+      onMouseEnter: () => handleOverlayChange(true),
+      onMouseLeave: () => handleOverlayChange(false),
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   const isInline = appearance === 'inline';
   return useMemo(() => {
     var _cardContext$value;
@@ -118,7 +115,7 @@ export const AwarenessWrapper = ({
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse",
         isInline: isInline
-      }, editorExperiment('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
+      }, editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_1') ? 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, cardWithOpenButtonOverlay, isInline]);
 };

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

@@ -5,11 +5,12 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, 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
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
 const containerStyles = css({
   position: 'relative'
@@ -55,20 +56,49 @@ const OpenButtonOverlay = ({
   const containerRef = useRef(null);
   const openButtonRef = useRef(null);
   const [showLabel, setShowLabel] = useState(true);
+  const [isHovered, setHovered] = useState(false);
   const handleDoubleClick = () => {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
   useLayoutEffect(() => {
     var _containerRef$current, _openButtonRef$curren;
-    if (!isVisible) {
+    if (!isVisible || !isHovered) {
       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]);
+  }, [isVisible, isHovered]);
+  const handleOverlayChange = useCallback(isHovered => {
+    setHovered(isHovered);
+  }, []);
+  if (fg('platform_editor_controls_patch_1')) {
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("span", {
+        ref: containerRef,
+        css: containerStyles,
+        onDoubleClick: handleDoubleClick,
+        onMouseEnter: () => handleOverlayChange(true),
+        onMouseLeave: () => handleOverlayChange(false)
+      }, children, isHovered && jsx(Anchor, {
+        ref: openButtonRef,
+        xcss: linkStyles,
+        href: url,
+        target: "_blank"
+      }, jsx(Box, {
+        xcss: iconWrapperStyles
+      }, jsx(LinkExternalIcon, {
+        label: ""
+      })), showLabel && jsx(Text, {
+        size: "small",
+        color: "color.text.subtle",
+        maxLines: 1
+      }, label)))
+    );
+  }
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
@@ -83,7 +113,8 @@ const OpenButtonOverlay = ({
       href: url,
       target: "_blank"
     }, jsx(Box, {
-      xcss: iconWrapperStyles
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
     }, jsx(LinkExternalIcon, {
       label: ""
     })), showLabel && jsx(Text, {

package/dist/es2019/ui/toolbar.js

@@ -8,6 +8,7 @@ import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, richMediaClassName } from '@atla
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
@@ -413,6 +414,12 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       });
     }
     if (editorExperiment('platform_editor_controls', 'variant1')) {
+      const hoverDecorationProps = (nodeType, className) => fg('platform_editor_controls_patch_1') ? {
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+      } : undefined;
       const overflowMenuConfig = [{
         type: 'separator',
         fullHeight: true
@@ -428,13 +435,15 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
           },
           icon: /*#__PURE__*/React.createElement(CopyIcon, {
             label: intl.formatMessage(commonMessages.copyToClipboard)
-          })
+          }),
+          ...hoverDecorationProps(node.type, akEditorSelectedNodeClassName)
         }, {
           title: intl.formatMessage(commonMessages.delete),
           onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
           icon: /*#__PURE__*/React.createElement(DeleteIcon, {
             label: intl.formatMessage(commonMessages.delete)
-          })
+          }),
+          ...hoverDecorationProps(node.type)
         }]
       }];
       toolbarItems.push(...overflowMenuConfig);
@@ -612,12 +621,20 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
           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;
         },
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, akEditorSelectedNodeClassName),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, akEditorSelectedNodeClassName),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, akEditorSelectedNodeClassName),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, akEditorSelectedNodeClassName),
         icon: /*#__PURE__*/React.createElement(CopyIcon, {
           label: intl.formatMessage(commonMessages.copyToClipboard)
         })
       }, {
         title: intl.formatMessage(commonMessages.delete),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        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),
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
           label: intl.formatMessage(commonMessages.delete)
         })

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,9 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { memo, useCallback, useMemo, useState } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
+import OpenButtonOverlay from '../ui/OpenButtonOverlay';
 import { InlineCard } from './inlineCard';
 export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
   var node = _ref.node,
@@ -62,7 +65,26 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       setIsHovered(isHovered);
     }
   }, [isOverlayEnabled]);
-  var innerCard = useMemo(function () {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var innerCardWithOpenButtonOverlay = useMemo(function () {
+    return /*#__PURE__*/React.createElement(OpenButtonOverlay, {
+      isVisible: isResolvedViewRendered,
+      url: node.attrs.url
+    }, /*#__PURE__*/React.createElement(InlineCard, {
+      node: node,
+      view: view,
+      getPos: getPos,
+      useAlternativePreloader: useAlternativePreloader,
+      actionOptions: actionOptions,
+      onResolve: onResolve,
+      onClick: onClick,
+      cardContext: cardContext,
+      isHovered: isHovered,
+      isPageSSRed: isPageSSRed
+    }));
+  }, [isResolvedViewRendered, node, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
+  var innerCardOriginal = useMemo(function () {
     return /*#__PURE__*/React.createElement(InlineCard, {
       node: node,
       view: view,
@@ -76,6 +98,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       isPageSSRed: isPageSSRed
     });
   }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
+  var innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
     isOverlayEnabled: isOverlayEnabled,
     isPulseEnabled: isPulseEnabled,

package/dist/esm/nodeviews/lazy-inline-card.js

@@ -4,7 +4,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { inlineCardNodeView } from './inlineCard';
 export var lazyInlineCardView = function lazyInlineCardView(props) {
   var isPageSSRed = props.isPageSSRed || false;
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || !fg('platform_editor_ssr_fix_smartlinks') || isPageSSRed && fg('platform_ssr_smartlinks_editor')) {
+  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed && fg('platform_ssr_smartlinks_editor')) {
     return inlineCardNodeView(props);
   }
   return withLazyLoading({

package/dist/esm/nodeviews/toDOM-fixes/inlineCard.js

@@ -3,13 +3,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { inlineCard } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { B400 } from '@atlaskit/theme/colors';
 // @nodeSpecException:toDOM patch
 export var inlineCardSpecWithFixedToDOM = function inlineCardSpecWithFixedToDOM() {
-  if (!fg('platform_editor_ssr_fix_smartlinks')) {
-    return inlineCard;
-  }
   return _objectSpread(_objectSpread({}, inlineCard), {}, {
     toDOM: function toDOM(node) {
       var wrapperAttrs = {

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

@@ -79,7 +79,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = useMemo(function () {
-    if (shouldShowLinkOverlay) {
+    if (shouldShowLinkOverlay && !(editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1'))) {
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -95,20 +95,17 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var cardWithOpenButtonOverlay = useMemo(function () {
-    if (shouldShowLinkOverlay || !fg('platform_editor_controls_patch_1')) {
-      return jsx(OpenButtonOverlay, {
-        isVisible: isResolvedViewRendered && isHovered,
-        onMouseEnter: function onMouseEnter() {
-          return handleOverlayChange(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return handleOverlayChange(false);
-        },
-        url: url
-      }, children);
-    }
-    return children;
-  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered, shouldShowLinkOverlay]);
+    return jsx(OpenButtonOverlay, {
+      isVisible: isResolvedViewRendered && isHovered,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      },
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   var isInline = appearance === 'inline';
   return useMemo(function () {
     var _cardContext$value;
@@ -128,7 +125,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse",
         isInline: isInline
-      }, editorExperiment('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
+      }, editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_1') ? 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, cardWithOpenButtonOverlay, isInline]);
 };

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

@@ -8,11 +8,12 @@ var _excluded = ["children", "isVisible", "url"];
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useCallback, 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
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
 var containerStyles = css({
   position: 'relative'
@@ -61,20 +62,56 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showLabel = _useState2[0],
     setShowLabel = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovered = _useState4[0],
+    setHovered = _useState4[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) {
+    if (!isVisible || !isHovered) {
       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]);
+  }, [isVisible, isHovered]);
+  var handleOverlayChange = useCallback(function (isHovered) {
+    setHovered(isHovered);
+  }, []);
+  if (fg('platform_editor_controls_patch_1')) {
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("span", {
+        ref: containerRef,
+        css: containerStyles,
+        onDoubleClick: handleDoubleClick,
+        onMouseEnter: function onMouseEnter() {
+          return handleOverlayChange(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleOverlayChange(false);
+        }
+      }, children, isHovered && jsx(Anchor, {
+        ref: openButtonRef,
+        xcss: linkStyles,
+        href: url,
+        target: "_blank"
+      }, jsx(Box, {
+        xcss: iconWrapperStyles
+      }, jsx(LinkExternalIcon, {
+        label: ""
+      })), showLabel && jsx(Text, {
+        size: "small",
+        color: "color.text.subtle",
+        maxLines: 1
+      }, label)))
+    );
+  }
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
@@ -89,7 +126,8 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       href: url,
       target: "_blank"
     }, jsx(Box, {
-      xcss: iconWrapperStyles
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
     }, jsx(LinkExternalIcon, {
       label: ""
     })), showLabel && jsx(Text, {

package/dist/esm/ui/toolbar.js

@@ -12,6 +12,7 @@ import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, richMediaClassName } from '@atla
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
@@ -413,12 +414,20 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         }]));
       }
       if (editorExperiment('platform_editor_controls', 'variant1')) {
+        var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
+          return fg('platform_editor_controls_patch_1') ? {
+            onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+            onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
+            onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
+            onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
+          } : undefined;
+        };
         var overflowMenuConfig = [{
           type: 'separator',
           fullHeight: true
         }, {
           type: 'overflow-dropdown',
-          options: [{
+          options: [_objectSpread({
             title: intl.formatMessage(commonMessages.copyToClipboard),
             onClick: function onClick() {
               var _pluginInjectionApi$c2, _pluginInjectionApi$f;
@@ -429,13 +438,13 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             icon: /*#__PURE__*/React.createElement(CopyIcon, {
               label: intl.formatMessage(commonMessages.copyToClipboard)
             })
-          }, {
+          }, hoverDecorationProps(node.type, akEditorSelectedNodeClassName)), _objectSpread({
             title: intl.formatMessage(commonMessages.delete),
             onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
             icon: /*#__PURE__*/React.createElement(DeleteIcon, {
               label: intl.formatMessage(commonMessages.delete)
             })
-          }]
+          }, hoverDecorationProps(node.type))]
         }];
         toolbarItems.push.apply(toolbarItems, overflowMenuConfig);
       }
@@ -613,12 +622,20 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
           pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f2 = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.commands.copyNode(node.type));
           return true;
         },
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, akEditorSelectedNodeClassName),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, akEditorSelectedNodeClassName),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true, akEditorSelectedNodeClassName),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false, akEditorSelectedNodeClassName),
         icon: /*#__PURE__*/React.createElement(CopyIcon, {
           label: intl.formatMessage(commonMessages.copyToClipboard)
         })
       }, {
         title: intl.formatMessage(commonMessages.delete),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi)),
+        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),
         icon: /*#__PURE__*/React.createElement(DeleteIcon, {
           label: intl.formatMessage(commonMessages.delete)
         })

package/dist/types/nodeviews/toDOM-fixes/inlineCard.d.ts

@@ -1 +1,24 @@
-export declare const inlineCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const inlineCardSpecWithFixedToDOM: () => {
+    toDOM: (node: PMNode) => DOMOutputSpec;
+    content?: string | undefined;
+    marks?: string | undefined;
+    group?: string | undefined;
+    inline?: boolean | undefined;
+    atom?: boolean | undefined;
+    attrs?: {
+        [name: string]: import("prosemirror-model").AttributeSpec;
+    } | undefined;
+    selectable?: boolean | undefined;
+    draggable?: boolean | undefined;
+    code?: boolean | undefined;
+    whitespace?: "pre" | "normal" | undefined;
+    definingAsContext?: boolean | undefined;
+    definingForContent?: boolean | undefined;
+    defining?: boolean | undefined;
+    isolating?: boolean | undefined;
+    parseDOM?: readonly import("prosemirror-model").TagParseRule[] | undefined;
+    toDebugString?: ((node: PMNode) => string) | undefined;
+    leafText?: ((node: PMNode) => string) | undefined;
+    linebreakReplacement?: boolean | undefined;
+};

package/dist/types-ts4.5/nodeviews/toDOM-fixes/inlineCard.d.ts

@@ -1 +1,24 @@
-export declare const inlineCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const inlineCardSpecWithFixedToDOM: () => {
+    toDOM: (node: PMNode) => DOMOutputSpec;
+    content?: string | undefined;
+    marks?: string | undefined;
+    group?: string | undefined;
+    inline?: boolean | undefined;
+    atom?: boolean | undefined;
+    attrs?: {
+        [name: string]: import("prosemirror-model").AttributeSpec;
+    } | undefined;
+    selectable?: boolean | undefined;
+    draggable?: boolean | undefined;
+    code?: boolean | undefined;
+    whitespace?: "pre" | "normal" | undefined;
+    definingAsContext?: boolean | undefined;
+    definingForContent?: boolean | undefined;
+    defining?: boolean | undefined;
+    isolating?: boolean | undefined;
+    parseDOM?: readonly import("prosemirror-model").TagParseRule[] | undefined;
+    toDebugString?: ((node: PMNode) => string) | undefined;
+    leafText?: ((node: PMNode) => string) | undefined;
+    linebreakReplacement?: boolean | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.4.6",
+	"version": "5.4.8",
 	"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": "^22.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^102.13.0",
+		"@atlaskit/editor-common": "^102.15.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -51,18 +51,18 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/frontend-utilities": "^3.0.0",
-		"@atlaskit/icon": "^25.2.0",
+		"@atlaskit/icon": "^25.3.0",
 		"@atlaskit/link-analytics": "^9.1.0",
 		"@atlaskit/link-client-extension": "^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/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/smart-card": "^36.2.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.4.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -128,9 +128,6 @@
 		"linking_platform_smart_links_in_live_pages": {
 			"type": "boolean"
 		},
-		"platform_editor_ssr_fix_smartlinks": {
-			"type": "boolean"
-		},
 		"platform_editor_fix_card_plugin_state": {
 			"type": "boolean"
 		},