@atlaskit/editor-common 78.11.6 → 78.11.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-common
 
+## 78.11.7
+
+### Patch Changes
+
+- [#80237](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80237) [`bdbdbabdf655`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bdbdbabdf655) - Remove excess editor brower logging
+- [#80510](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80510) [`d1ef61df58a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d1ef61df58a5) - [ux] Adds hover interaction for lozenges in extensions
+
 ## 78.11.6
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -38,7 +38,9 @@ function ExtensionWithPluginState(props) {
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance,
     showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
-    isNodeSelected = props.isNodeSelected;
+    isNodeSelected = props.isNodeSelected,
+    isNodeHovered = props.isNodeHovered,
+    setIsNodeHovered = props.setIsNodeHovered;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
@@ -84,8 +86,14 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), _styles2.contentWrapper);
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -94,7 +102,13 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: _styles2.wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, (0, _react2.jsx)("div", {
     className: "extension-overflow-wrapper ".concat(hasBody ? 'with-body' : '')
   }, (0, _react2.jsx)("div", {

package/dist/cjs/extensibility/Extension/Lozenge.js

@@ -47,6 +47,7 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
         showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
         isNodeSelected = _this$props.isNodeSelected,
+        isNodeHovered = _this$props.isNodeHovered,
         customContainerStyles = _this$props.customContainerStyles;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
@@ -56,6 +57,7 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
       var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       var isBlockExtension = name === 'extension';
       return (0, _react2.jsx)(_LozengeComponent.LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/cjs/extensibility/Extension/LozengeComponent.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.LozengeComponent = exports.ICON_SIZE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 var _tag = require("@atlaskit/tag");
 var _styles = require("./styles");
@@ -24,12 +25,15 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
     renderImage = _ref.renderImage,
     isNodeSelected = _ref.isNodeSelected,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
-    customContainerStyles = _ref.customContainerStyles;
+    customContainerStyles = _ref.customContainerStyles,
+    isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
-  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
+    var lozengeClassNames = (0, _classnames.default)('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return (0, _react.jsx)("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: _styles.lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -37,20 +41,21 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return (0, _react.jsx)("div", {
+      "data-testid": "lozenge-fallback",
+      css: _styles.placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
+      height: ICON_SIZE,
+      width: ICON_SIZE
+    }, lozengeData)) : (0, _react.jsx)(_file.default, {
+      label: title
+    }), (0, _react.jsx)("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && (0, _react.jsx)("span", {
+      css: _styles.placeholderFallbackParams
+    }, Object.keys(params).map(function (key) {
+      return key && " | ".concat(key, " = ").concat(params[key].value);
+    })));
   }
-  return (0, _react.jsx)("div", {
-    "data-testid": "lozenge-fallback",
-    css: _styles.placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
-    height: ICON_SIZE,
-    width: ICON_SIZE
-  }, lozengeData)) : (0, _react.jsx)(_file.default, {
-    label: title
-  }), (0, _react.jsx)("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && (0, _react.jsx)("span", {
-    css: _styles.placeholderFallbackParams
-  }, Object.keys(params).map(function (key) {
-    return key && " | ".concat(key, " = ").concat(params[key].value);
-  })));
 };

package/dist/cjs/extensibility/Extension/styles.js

@@ -78,6 +78,14 @@ var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)({
   display: 'flex',
   justifyContent: 'left',
   width: '100%',
+  /* -0.75rem neutralizes the margin top coming from extensionView-content-wrap.
+   The lozenge takes up space so we don't need the extra padding anymore. */
+  marginTop: "var(--ds-space-negative-150, -0.75rem)",
   marginLeft: "var(--ds-space-050, 4px)",
-  marginBottom: "var(--ds-space-negative-050, -4px)"
+  marginBottom: "var(--ds-space-negative-050, -4px)",
+  // Using opacity so that lozenge takes up space and doesn't cause shift on render
+  opacity: '0',
+  '&.show-lozenge': {
+    opacity: '1'
+  }
 });

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -43,6 +43,11 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
     // memoized to avoid rerender on extension state changes
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNodeRenderer", (0, _memoizeOne.default)(_extensions.getNodeRenderer));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtensionModuleNodePrivateProps", (0, _memoizeOne.default)(_extensions.getExtensionModuleNodePrivateProps));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setIsNodeHovered", function (isHovered) {
+      _this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setStateFromPromise", function (stateKey, promise) {
       promise && promise.then(function (p) {
         if (!_this.mounted) {
@@ -209,7 +214,9 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -227,7 +234,9 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-            isNodeSelected: selectedNode === node
+            isNodeSelected: selectedNode === node,
+            isNodeHovered: this.state.isNodeHovered,
+            setIsNodeHovered: this.setIsNodeHovered
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {

package/dist/cjs/extensibility/MultiBodiedExtension/index.js

@@ -64,7 +64,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     widthState = _ref.widthState,
     editorAppearance = _ref.editorAppearance,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
-    isNodeSelected = _ref.isNodeSelected;
+    isNodeSelected = _ref.isNodeSelected,
+    isNodeHovered = _ref.isNodeHovered,
+    setIsNodeHovered = _ref.setIsNodeHovered;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -124,16 +126,28 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var navigationClassNames = (0, _classnames.default)('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), (0, _react2.jsx)("div", {
     className: wrapperClassNames,
     css: _styles.mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
-    style: mbeWrapperStyles
+    style: mbeWrapperStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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 SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.11.6";
+var packageVersion = "78.11.7";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/preset/plugin-injection-api.js

@@ -299,10 +299,6 @@ var EditorPluginInjectionAPI = exports.EditorPluginInjectionAPI = /*#__PURE__*/f
           }
           var plugin = getPluginByName(prop);
           if (!plugin) {
-            if (process.env.NODE_ENV === 'development') {
-              // eslint-disable-next-line
-              console.warn("Plugin: ".concat(prop, " does not exist"));
-            }
             return undefined;
           }
           var sharedState = sharedStateAPI.createAPI(plugin);

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

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.11.6";
+var packageVersion = "78.11.7";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -24,7 +24,9 @@ function ExtensionWithPluginState(props) {
     hideFrame,
     editorAppearance,
     showMacroInteractionDesignUpdates,
-    isNodeSelected
+    isNodeSelected,
+    isNodeHovered,
+    setIsNodeHovered
   } = props;
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
@@ -80,8 +82,14 @@ function ExtensionWithPluginState(props) {
     ...newContentStyles,
     ...contentWrapper
   };
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -90,7 +98,9 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {
     className: `extension-overflow-wrapper ${hasBody ? 'with-body' : ''}`
   }, jsx("div", {

package/dist/es2019/extensibility/Extension/Lozenge.js

@@ -28,6 +28,7 @@ export default class ExtensionLozenge extends Component {
       const {
         showMacroInteractionDesignUpdates,
         isNodeSelected,
+        isNodeHovered,
         customContainerStyles
       } = this.props;
       const {
@@ -41,6 +42,7 @@ export default class ExtensionLozenge extends Component {
       const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       const isBlockExtension = name === 'extension';
       return jsx(LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/es2019/extensibility/Extension/LozengeComponent.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { SimpleTag as Tag } from '@atlaskit/tag';
 import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
@@ -16,13 +17,16 @@ export const LozengeComponent = ({
   renderImage,
   isNodeSelected,
   showMacroInteractionDesignUpdates,
-  customContainerStyles
+  customContainerStyles,
+  isNodeHovered
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
-  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
+    const lozengeClassNames = classnames('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return jsx("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -30,19 +34,20 @@ export const LozengeComponent = ({
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return jsx("div", {
+      "data-testid": "lozenge-fallback",
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage({
+      height: ICON_SIZE,
+      width: ICON_SIZE,
+      ...lozengeData
+    }) : jsx(EditorFileIcon, {
+      label: title
+    }), jsx("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
-  return jsx("div", {
-    "data-testid": "lozenge-fallback",
-    css: placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage({
-    height: ICON_SIZE,
-    width: ICON_SIZE,
-    ...lozengeData
-  }) : jsx(EditorFileIcon, {
-    label: title
-  }), jsx("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
-    css: placeholderFallbackParams
-  }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
 };

package/dist/es2019/extensibility/Extension/styles.js

@@ -60,6 +60,14 @@ export const lozengeWrapper = css({
   display: 'flex',
   justifyContent: 'left',
   width: '100%',
+  /* -0.75rem neutralizes the margin top coming from extensionView-content-wrap.
+   The lozenge takes up space so we don't need the extra padding anymore. */
+  marginTop: "var(--ds-space-negative-150, -0.75rem)",
   marginLeft: "var(--ds-space-050, 4px)",
-  marginBottom: "var(--ds-space-negative-050, -4px)"
+  marginBottom: "var(--ds-space-negative-050, -4px)",
+  // Using opacity so that lozenge takes up space and doesn't cause shift on render
+  opacity: '0',
+  '&.show-lozenge': {
+    opacity: '1'
+  }
 });

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -16,6 +16,11 @@ export class ExtensionComponent extends Component {
     // memoized to avoid rerender on extension state changes
     _defineProperty(this, "getNodeRenderer", memoizeOne(getNodeRenderer));
     _defineProperty(this, "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(this, "setIsNodeHovered", isHovered => {
+      this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     _defineProperty(this, "setStateFromPromise", (stateKey, promise) => {
       promise && promise.then(p => {
         if (!this.mounted) {
@@ -164,7 +169,9 @@ export class ExtensionComponent extends Component {
         pluginInjectionApi: pluginInjectionApi,
         editorAppearance: editorAppearance,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-        isNodeSelected: selectedNode === node
+        isNodeSelected: selectedNode === node,
+        isNodeHovered: this.state.isNodeHovered,
+        setIsNodeHovered: this.setIsNodeHovered
       });
     }
     const extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -182,7 +189,9 @@ export class ExtensionComponent extends Component {
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/es2019/extensibility/MultiBodiedExtension/index.js

@@ -52,7 +52,9 @@ const MultiBodiedExtensionWithWidth = ({
   widthState,
   editorAppearance,
   showMacroInteractionDesignUpdates,
-  isNodeSelected
+  isNodeSelected,
+  isNodeHovered,
+  setIsNodeHovered
 }) => {
   const {
     parameters,
@@ -114,16 +116,24 @@ const MultiBodiedExtensionWithWidth = ({
   const navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
-    style: mbeWrapperStyles
+    style: mbeWrapperStyles,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "78.11.6";
+const packageVersion = "78.11.7";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/preset/plugin-injection-api.js

@@ -220,10 +220,6 @@ export class EditorPluginInjectionAPI {
         }
         const plugin = getPluginByName(prop);
         if (!plugin) {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line
-            console.warn(`Plugin: ${prop} does not exist`);
-          }
           return undefined;
         }
         const sharedState = sharedStateAPI.createAPI(plugin);

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

@@ -7,7 +7,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "78.11.6";
+const packageVersion = "78.11.7";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -29,7 +29,9 @@ function ExtensionWithPluginState(props) {
     hideFrame = props.hideFrame,
     editorAppearance = props.editorAppearance,
     showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
-    isNodeSelected = props.isNodeSelected;
+    isNodeSelected = props.isNodeSelected,
+    isNodeHovered = props.isNodeHovered,
+    setIsNodeHovered = props.setIsNodeHovered;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
@@ -75,8 +77,14 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), contentWrapper);
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
     node: node,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
     customContainerStyles: customContainerStyles
@@ -85,7 +93,13 @@ function ExtensionWithPluginState(props) {
     "data-layout": node.attrs.layout,
     className: classNames,
     css: wrapperStyle,
-    style: customContainerStyles
+    style: customContainerStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, jsx("div", {
     className: "extension-overflow-wrapper ".concat(hasBody ? 'with-body' : '')
   }, jsx("div", {

package/dist/esm/extensibility/Extension/Lozenge.js

@@ -41,6 +41,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       var _this$props = _this.props,
         showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
         isNodeSelected = _this$props.isNodeSelected,
+        isNodeHovered = _this$props.isNodeHovered,
         customContainerStyles = _this$props.customContainerStyles;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
@@ -50,6 +51,7 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
       var isBlockExtension = name === 'extension';
       return jsx(LozengeComponent, {
+        isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
         isBlockExtension: isBlockExtension,

package/dist/esm/extensibility/Extension/LozengeComponent.js

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
+import classnames from 'classnames';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { SimpleTag as Tag } from '@atlaskit/tag';
 import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
@@ -19,12 +20,15 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     renderImage = _ref.renderImage,
     isNodeSelected = _ref.isNodeSelected,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
-    customContainerStyles = _ref.customContainerStyles;
+    customContainerStyles = _ref.customContainerStyles,
+    isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
-  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
   if (showMacroInteractionDesignUpdates) {
+    var lozengeClassNames = classnames('extension-title', {
+      'show-lozenge': isNodeHovered || isNodeSelected
+    });
     return jsx("div", {
-      className: "extension-title",
+      className: lozengeClassNames,
       css: lozengeWrapper,
       "data-testid": "new-lozenge",
       style: customContainerStyles
@@ -32,20 +36,21 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
+  } else {
+    return jsx("div", {
+      "data-testid": "lozenge-fallback",
+      css: placeholderFallback
+    }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
+      height: ICON_SIZE,
+      width: ICON_SIZE
+    }, lozengeData)) : jsx(EditorFileIcon, {
+      label: title
+    }), jsx("span", {
+      className: "extension-title"
+    }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
+      css: placeholderFallbackParams
+    }, Object.keys(params).map(function (key) {
+      return key && " | ".concat(key, " = ").concat(params[key].value);
+    })));
   }
-  return jsx("div", {
-    "data-testid": "lozenge-fallback",
-    css: placeholderFallback
-  }, lozengeData && !isBlockExtension ? renderImage(_objectSpread({
-    height: ICON_SIZE,
-    width: ICON_SIZE
-  }, lozengeData)) : jsx(EditorFileIcon, {
-    label: title
-  }), jsx("span", {
-    className: "extension-title"
-  }, capitalizedTitle), params && !isBlockExtension && jsx("span", {
-    css: placeholderFallbackParams
-  }, Object.keys(params).map(function (key) {
-    return key && " | ".concat(key, " = ").concat(params[key].value);
-  })));
 };

package/dist/esm/extensibility/Extension/styles.js

@@ -60,6 +60,14 @@ export var lozengeWrapper = css({
   display: 'flex',
   justifyContent: 'left',
   width: '100%',
+  /* -0.75rem neutralizes the margin top coming from extensionView-content-wrap.
+   The lozenge takes up space so we don't need the extra padding anymore. */
+  marginTop: "var(--ds-space-negative-150, -0.75rem)",
   marginLeft: "var(--ds-space-050, 4px)",
-  marginBottom: "var(--ds-space-negative-050, -4px)"
+  marginBottom: "var(--ds-space-negative-050, -4px)",
+  // Using opacity so that lozenge takes up space and doesn't cause shift on render
+  opacity: '0',
+  '&.show-lozenge': {
+    opacity: '1'
+  }
 });

package/dist/esm/extensibility/ExtensionComponent.js

@@ -33,6 +33,11 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
     // memoized to avoid rerender on extension state changes
     _defineProperty(_assertThisInitialized(_this), "getNodeRenderer", memoizeOne(getNodeRenderer));
     _defineProperty(_assertThisInitialized(_this), "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(_assertThisInitialized(_this), "setIsNodeHovered", function (isHovered) {
+      _this.setState({
+        isNodeHovered: isHovered
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "setStateFromPromise", function (stateKey, promise) {
       promise && promise.then(function (p) {
         if (!_this.mounted) {
@@ -199,7 +204,9 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
           pluginInjectionApi: pluginInjectionApi,
           editorAppearance: editorAppearance,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-          isNodeSelected: selectedNode === node
+          isNodeSelected: selectedNode === node,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         });
       }
       var extensionHandlerResult = this.tryExtensionHandler(undefined);
@@ -217,7 +224,9 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-            isNodeSelected: selectedNode === node
+            isNodeSelected: selectedNode === node,
+            isNodeHovered: this.state.isNodeHovered,
+            setIsNodeHovered: this.setIsNodeHovered
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/esm/extensibility/MultiBodiedExtension/index.js

@@ -55,7 +55,9 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
     widthState = _ref.widthState,
     editorAppearance = _ref.editorAppearance,
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
-    isNodeSelected = _ref.isNodeSelected;
+    isNodeSelected = _ref.isNodeSelected,
+    isNodeHovered = _ref.isNodeHovered,
+    setIsNodeHovered = _ref.setIsNodeHovered;
   var _node$attrs = node.attrs,
     parameters = _node$attrs.parameters,
     extensionKey = _node$attrs.extensionKey;
@@ -115,16 +117,28 @@ var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref)
   var navigationClassNames = classnames('multiBodiedExtension--navigation', {
     'remove-margins': showMacroInteractionDesignUpdates
   });
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     node: node,
     showMacroInteractionDesignUpdates: true,
-    customContainerStyles: mbeWrapperStyles
+    customContainerStyles: mbeWrapperStyles,
+    isNodeHovered: isNodeHovered
   }), jsx("div", {
     className: wrapperClassNames,
     css: mbeExtensionWrapperCSS,
     "data-testid": "multiBodiedExtension--wrapper",
-    style: mbeWrapperStyles
+    style: mbeWrapperStyles,
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), jsx("div", {
     className: containerClassNames,
     css: containerCssExtended,

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "78.11.6";
+var packageVersion = "78.11.7";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/preset/plugin-injection-api.js

@@ -292,10 +292,6 @@ export var EditorPluginInjectionAPI = /*#__PURE__*/function () {
           }
           var plugin = getPluginByName(prop);
           if (!plugin) {
-            if (process.env.NODE_ENV === 'development') {
-              // eslint-disable-next-line
-              console.warn("Plugin: ".concat(prop, " does not exist"));
-            }
             return undefined;
           }
           var sharedState = sharedStateAPI.createAPI(plugin);

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

@@ -17,7 +17,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.11.6";
+var packageVersion = "78.11.7";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/extensibility/Extension/Extension/index.d.ts

@@ -18,6 +18,8 @@ export interface Props {
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 /**
  * End workaround

package/dist/types/extensibility/Extension/Lozenge.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
     customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {

package/dist/types/extensibility/Extension/LozengeComponent.d.ts

@@ -12,6 +12,7 @@ type LozengeComponentProps = {
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
     customContainerStyles?: CSSProperties;
+    isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types/extensibility/ExtensionComponent.d.ts

@@ -27,6 +27,7 @@ export interface State {
         __hideFrame?: boolean;
     };
     activeChildIndex?: number;
+    isNodeHovered?: boolean;
 }
 export declare class ExtensionComponent extends Component<Props, State> {
     private privatePropsParsed;
@@ -39,6 +40,7 @@ export declare class ExtensionComponent extends Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
     getExtensionModuleNodePrivateProps: import("memoize-one").MemoizedFn<typeof getExtensionModuleNodePrivateProps>;
+    setIsNodeHovered: (isHovered: boolean) => void;
     render(): JSX.Element | null;
     private setStateFromPromise;
     /**

package/dist/types/extensibility/MultiBodiedExtension/index.d.ts

@@ -20,6 +20,8 @@ type Props = {
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/dist/types-ts4.5/extensibility/Extension/Extension/index.d.ts

@@ -18,6 +18,8 @@ export interface Props {
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 /**
  * End workaround

package/dist/types-ts4.5/extensibility/Extension/Lozenge.d.ts

@@ -7,6 +7,7 @@ export interface Props {
     node: PmNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
     customContainerStyles?: CSSProperties;
 }
 export interface LozengeData {

package/dist/types-ts4.5/extensibility/Extension/LozengeComponent.d.ts

@@ -12,6 +12,7 @@ type LozengeComponentProps = {
     isNodeSelected?: boolean;
     showMacroInteractionDesignUpdates?: boolean;
     customContainerStyles?: CSSProperties;
+    isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/extensibility/ExtensionComponent.d.ts

@@ -27,6 +27,7 @@ export interface State {
         __hideFrame?: boolean;
     };
     activeChildIndex?: number;
+    isNodeHovered?: boolean;
 }
 export declare class ExtensionComponent extends Component<Props, State> {
     private privatePropsParsed;
@@ -39,6 +40,7 @@ export declare class ExtensionComponent extends Component<Props, State> {
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
     getNodeRenderer: import("memoize-one").MemoizedFn<typeof getNodeRenderer>;
     getExtensionModuleNodePrivateProps: import("memoize-one").MemoizedFn<typeof getExtensionModuleNodePrivateProps>;
+    setIsNodeHovered: (isHovered: boolean) => void;
     render(): JSX.Element | null;
     private setStateFromPromise;
     /**

package/dist/types-ts4.5/extensibility/MultiBodiedExtension/index.d.ts

@@ -20,6 +20,8 @@ type Props = {
     editorAppearance?: EditorAppearance;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 };
 declare const MultiBodiedExtension: (props: Props & OverflowShadowProps) => jsx.JSX.Element;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.11.6",
+  "version": "78.11.7",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -134,9 +134,9 @@
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tag": "^12.0.0",
     "@atlaskit/task-decision": "^17.9.0",
-    "@atlaskit/textfield": "^6.0.0",
+    "@atlaskit/textfield": "^6.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.39.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/width-detector": "^4.1.0",