@atlaskit/editor-common 78.8.5 → 78.9.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-common
 
+## 78.9.0
+
+### Minor Changes
+
+- [#77158](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77158) [`4a5f437bd464`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a5f437bd464) - [ux] Adds initial changes to extension lozenges for the macro visual design updates project in Confluence.
+
 ## 78.8.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -120,6 +120,9 @@
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/tag/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../elements/task-decision/afm-cc/tsconfig.json"
         },

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,7 +9,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _withPluginState = require("../../..//with-plugin-state");
@@ -20,6 +21,8 @@ var _styles = require("../styles");
 var _styles2 = require("./styles");
 var _excluded = ["type"];
 /** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
 function ExtensionWithPluginState(props) {
@@ -33,11 +36,13 @@ function ExtensionWithPluginState(props) {
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
-    editorAppearance = props.editorAppearance;
+    editorAppearance = props.editorAppearance,
+    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    isNodeSelected = props.isNodeSelected;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
-  var removeBorder = hideFrame && !isMobile && !hasBody || false;
+  var removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
   var getPos = props.getPos,
     view = props.view;
   var isTopLevelNode = _react.default.useMemo(function () {
@@ -76,7 +81,11 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), _styles2.contentWrapper);
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), (0, _react2.jsx)("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
     className: classNames,
@@ -92,14 +101,16 @@ function ExtensionWithPluginState(props) {
     contentEditable: false,
     className: headerClassNames
   }, !removeBorder && (0, _react2.jsx)(_Lozenge.default, {
-    node: node
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && (0, _react2.jsx)("div", {
     css: newContentStyles
   }, (0, _react2.jsx)("div", {
     css: _styles2.content,
     ref: handleContentDOMRef,
     className: "extension-content block"
-  }))));
+  })))));
 }
 var Extension = function Extension(props) {
   // TODO: ED-17836 This code is here because confluence injects

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

@@ -32,7 +32,9 @@ var InlineExtension = exports.default = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         node = _this$props.node,
-        children = _this$props.children;
+        children = _this$props.children,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
+        isNodeSelected = _this$props.isNodeSelected;
       var hasChildren = !!children;
       var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
       return (0, _react2.jsx)("div", {
@@ -42,7 +44,9 @@ var InlineExtension = exports.default = /*#__PURE__*/function (_Component) {
         css: _styles.overlay,
         className: "extension-overlay"
       }), children ? children : (0, _react2.jsx)(_Lozenge.default, {
-        node: node
+        node: node,
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       }));
     }
   }]);

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

@@ -4,35 +4,67 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.capitalizeFirstLetter = exports.ICON_SIZE = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 var _utils = require("../../utils");
+var _LozengeComponent = require("./LozengeComponent");
 var _styles = require("./styles");
 var _excluded = ["url"];
-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; }
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
-var capitalizeFirstLetter = exports.capitalizeFirstLetter = function capitalizeFirstLetter(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-var ICON_SIZE = exports.ICON_SIZE = 24;
 var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ExtensionLozenge, _Component);
   var _super = _createSuper(ExtensionLozenge);
   function ExtensionLozenge() {
+    var _this;
     (0, _classCallCheck2.default)(this, ExtensionLozenge);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderImage", function (lozengeData) {
+      var extensionKey = _this.props.node.attrs.extensionKey;
+      var url = lozengeData.url,
+        rest = (0, _objectWithoutProperties2.default)(lozengeData, _excluded);
+      return (0, _react2.jsx)("img", (0, _extends2.default)({
+        css: _styles.styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderFallback", function (lozengeData) {
+      var _this$props = _this.props,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
+        isNodeSelected = _this$props.isNodeSelected;
+      var _this$props$node$attr = _this.props.node.attrs,
+        parameters = _this$props$node$attr.parameters,
+        extensionKey = _this$props$node$attr.extensionKey;
+      var name = _this.props.node.type.name;
+      var params = parameters && parameters.macroParams;
+      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
+      var isBlockExtension = name === 'extension';
+      return (0, _react2.jsx)(_LozengeComponent.LozengeComponent, {
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isBlockExtension: isBlockExtension,
+        lozengeData: lozengeData,
+        params: params,
+        title: title,
+        renderImage: _this.renderImage
+      });
+    });
+    return _this;
   }
   (0, _createClass2.default)(ExtensionLozenge, [{
     key: "render",
@@ -51,45 +83,6 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
       });
       return this.renderFallback(iconData);
     }
-  }, {
-    key: "renderImage",
-    value: function renderImage(lozengeData) {
-      var extensionKey = this.props.node.attrs.extensionKey;
-      var url = lozengeData.url,
-        rest = (0, _objectWithoutProperties2.default)(lozengeData, _excluded);
-      return (0, _react2.jsx)("img", (0, _extends2.default)({
-        css: _styles.styledImage,
-        src: url
-      }, rest, {
-        alt: extensionKey
-      }));
-    }
-  }, {
-    key: "renderFallback",
-    value: function renderFallback(lozengeData) {
-      var _this$props$node$attr = this.props.node.attrs,
-        parameters = _this$props$node$attr.parameters,
-        extensionKey = _this$props$node$attr.extensionKey;
-      var name = this.props.node.type.name;
-      var params = parameters && parameters.macroParams;
-      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
-      var isBlockExtension = name === 'extension';
-      return (0, _react2.jsx)("div", {
-        "data-testid": "lozenge-fallback",
-        css: _styles.placeholderFallback
-      }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
-        height: ICON_SIZE,
-        width: ICON_SIZE
-      }, lozengeData)) : (0, _react2.jsx)(_file.default, {
-        label: title
-      }), (0, _react2.jsx)("span", {
-        className: "extension-title"
-      }, capitalizeFirstLetter(title)), params && !isBlockExtension && (0, _react2.jsx)("span", {
-        css: _styles.placeholderFallbackParams
-      }, Object.keys(params).map(function (key) {
-        return key && " | ".concat(key, " = ").concat(params[key].value);
-      })));
-    }
   }]);
   return ExtensionLozenge;
 }(_react.Component);

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

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LozengeComponent = exports.ICON_SIZE = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
+var _tag = require("@atlaskit/tag");
+var _styles = require("./styles");
+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; } /** @jsx jsx */
+var ICON_SIZE = exports.ICON_SIZE = 24;
+var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref) {
+  var lozengeData = _ref.lozengeData,
+    isBlockExtension = _ref.isBlockExtension,
+    title = _ref.title,
+    params = _ref.params,
+    renderImage = _ref.renderImage,
+    isNodeSelected = _ref.isNodeSelected,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  var capitalizedTitle = capitalizeFirstLetter(title);
+  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
+  if (showMacroInteractionDesignUpdates) {
+    return (0, _react.jsx)("div", {
+      className: "extension-title",
+      css: _styles.lozengeWrapper,
+      "data-testid": "new-lozenge"
+    }, (0, _react.jsx)(_tag.SimpleTag, {
+      text: capitalizedTitle,
+      color: isNodeSelected ? 'blueLight' : 'greyLight'
+    }));
+  }
+  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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "BODIED_EXT_PADDING", {
     return _styles.BODIED_EXT_PADDING;
   }
 });
-exports.overlay = void 0;
+exports.overlay = exports.lozengeWrapper = void 0;
 Object.defineProperty(exports, "padding", {
   enumerable: true,
   get: function get() {
@@ -22,9 +22,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../styles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var wrapperDefault = exports.wrapperDefault = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(_colors.B200, ")"), "var(--ds-background-neutral-hovered, ".concat(_colors.N20A, ")"));
 var overlay = exports.overlay = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
-var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
+var placeholderFallback = exports.placeholderFallback = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
 var placeholderFallbackParams = exports.placeholderFallbackParams = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(_colors.N70, ")"));
-var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));
+var styledImage = exports.styledImage = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));
+var lozengeWrapper = exports.lozengeWrapper = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: left;\n  width: 100%;\n  margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -17,6 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _extensions = require("../extensions");
 var _utils = require("../utils");
 var _Extension = _interopRequireDefault(require("./Extension/Extension"));
@@ -195,6 +196,8 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
         showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+      var selection = editorView.state.selection;
+      var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       if (node.type.name === 'multiBodiedExtension') {
         return /*#__PURE__*/_react.default.createElement(_MultiBodiedExtension.default, {
           node: node,
@@ -222,12 +225,14 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         default:
           return null;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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.8.5";
+var packageVersion = "78.9.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "78.8.5";
+var packageVersion = "78.9.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { WithPluginState } from '../../..//with-plugin-state';
@@ -22,12 +22,14 @@ function ExtensionWithPluginState(props) {
     handleRef,
     shadowClassNames,
     hideFrame,
-    editorAppearance
+    editorAppearance,
+    showMacroInteractionDesignUpdates,
+    isNodeSelected
   } = props;
   const hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   const isMobile = editorAppearance === 'mobile';
   const hasChildren = !!children;
-  const removeBorder = hideFrame && !isMobile && !hasBody || false;
+  const removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
   const {
     getPos,
     view
@@ -75,7 +77,11 @@ function ExtensionWithPluginState(props) {
     ...newContentStyles,
     ...contentWrapper
   };
-  return jsx("div", {
+  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
     className: classNames,
@@ -91,14 +97,16 @@ function ExtensionWithPluginState(props) {
     contentEditable: false,
     className: headerClassNames
   }, !removeBorder && jsx(ExtensionLozenge, {
-    node: node
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && jsx("div", {
     css: newContentStyles
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,
     className: "extension-content block"
-  }))));
+  })))));
 }
 const Extension = props => {
   // TODO: ED-17836 This code is here because confluence injects

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

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
@@ -9,7 +8,9 @@ export default class InlineExtension extends Component {
   render() {
     const {
       node,
-      children
+      children,
+      showMacroInteractionDesignUpdates,
+      isNodeSelected
     } = this.props;
     const hasChildren = !!children;
     const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
@@ -20,7 +21,9 @@ export default class InlineExtension extends Component {
       css: overlay,
       className: "extension-overlay"
     }), children ? children : jsx(ExtensionLozenge, {
-      node: node
+      node: node,
+      isNodeSelected: isNodeSelected,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
     }));
   }
 }

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

@@ -1,15 +1,55 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { getExtensionLozengeData } from '../../utils';
-import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
-export const capitalizeFirstLetter = str => {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-export const ICON_SIZE = 24;
+import { LozengeComponent } from './LozengeComponent';
+import { styledImage } from './styles';
 export default class ExtensionLozenge extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "renderImage", lozengeData => {
+      const {
+        extensionKey
+      } = this.props.node.attrs;
+      const {
+        url,
+        ...rest
+      } = lozengeData;
+      return jsx("img", _extends({
+        css: styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    });
+    _defineProperty(this, "renderFallback", lozengeData => {
+      const {
+        showMacroInteractionDesignUpdates,
+        isNodeSelected
+      } = this.props;
+      const {
+        parameters,
+        extensionKey
+      } = this.props.node.attrs;
+      const {
+        name
+      } = this.props.node.type;
+      const params = parameters && parameters.macroParams;
+      const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
+      const isBlockExtension = name === 'extension';
+      return jsx(LozengeComponent, {
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isBlockExtension: isBlockExtension,
+        lozengeData: lozengeData,
+        params: params,
+        title: title,
+        renderImage: this.renderImage
+      });
+    });
+  }
   render() {
     const {
       node
@@ -27,45 +67,4 @@ export default class ExtensionLozenge extends Component {
     });
     return this.renderFallback(iconData);
   }
-  renderImage(lozengeData) {
-    const {
-      extensionKey
-    } = this.props.node.attrs;
-    const {
-      url,
-      ...rest
-    } = lozengeData;
-    return jsx("img", _extends({
-      css: styledImage,
-      src: url
-    }, rest, {
-      alt: extensionKey
-    }));
-  }
-  renderFallback(lozengeData) {
-    const {
-      parameters,
-      extensionKey
-    } = this.props.node.attrs;
-    const {
-      name
-    } = this.props.node.type;
-    const params = parameters && parameters.macroParams;
-    const title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
-    const isBlockExtension = name === 'extension';
-    return jsx("div", {
-      "data-testid": "lozenge-fallback",
-      css: placeholderFallback
-    }, lozengeData && !isBlockExtension ? this.renderImage({
-      height: ICON_SIZE,
-      width: ICON_SIZE,
-      ...lozengeData
-    }) : jsx(EditorFileIcon, {
-      label: title
-    }), jsx("span", {
-      className: "extension-title"
-    }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
-      css: placeholderFallbackParams
-    }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
-  }
 }

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

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
+import { SimpleTag as Tag } from '@atlaskit/tag';
+import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
+export const ICON_SIZE = 24;
+const capitalizeFirstLetter = str => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+export const LozengeComponent = ({
+  lozengeData,
+  isBlockExtension,
+  title,
+  params,
+  renderImage,
+  isNodeSelected,
+  showMacroInteractionDesignUpdates
+}) => {
+  const capitalizedTitle = capitalizeFirstLetter(title);
+  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
+  if (showMacroInteractionDesignUpdates) {
+    return jsx("div", {
+      className: "extension-title",
+      css: lozengeWrapper,
+      "data-testid": "new-lozenge"
+    }, jsx(Tag, {
+      text: capitalizedTitle,
+      color: isNodeSelected ? 'blueLight' : 'greyLight'
+    }));
+  }
+  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

@@ -40,6 +40,7 @@ export const placeholderFallback = css`
   & > img {
     margin: 0 ${"var(--ds-space-050, 4px)"};
   }
+
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: placeholder-fallback;
@@ -59,4 +60,10 @@ export const styledImage = css`
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: lozenge-image;
+`;
+export const lozengeWrapper = css`
+  display: flex;
+  justify-content: left;
+  width: 100%;
+  margin-left: ${"var(--ds-space-050, 4px)"};
 `;

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
 import Extension from './Extension/Extension';
@@ -148,6 +149,10 @@ export class ExtensionComponent extends Component {
       eventDispatcher,
       showMacroInteractionDesignUpdates
     } = this.props;
+    const {
+      selection
+    } = editorView.state;
+    const selectedNode = selection instanceof NodeSelection && selection.node;
     if (node.type.name === 'multiBodiedExtension') {
       return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
         node: node,
@@ -175,12 +180,14 @@ export class ExtensionComponent extends Component {
           editorAppearance: editorAppearance,
           hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
           pluginInjectionApi: pluginInjectionApi,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          isNodeSelected: selectedNode === node
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {
           node: node,
-          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+          showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+          isNodeSelected: selectedNode === node
         }, extensionHandlerResult);
       default:
         return null;

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.8.5";
+const packageVersion = "78.9.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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.8.5";
+const packageVersion = "78.9.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/extensibility/Extension/Extension/index.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; }
 /** @jsx jsx */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { WithPluginState } from '../../..//with-plugin-state';
@@ -27,11 +27,13 @@ function ExtensionWithPluginState(props) {
     handleRef = props.handleRef,
     shadowClassNames = props.shadowClassNames,
     hideFrame = props.hideFrame,
-    editorAppearance = props.editorAppearance;
+    editorAppearance = props.editorAppearance,
+    showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
+    isNodeSelected = props.isNodeSelected;
   var hasBody = ['bodiedExtension', 'multiBodiedExtension'].includes(node.type.name);
   var isMobile = editorAppearance === 'mobile';
   var hasChildren = !!children;
-  var removeBorder = hideFrame && !isMobile && !hasBody || false;
+  var removeBorder = showMacroInteractionDesignUpdates || !!(hideFrame && !isMobile && !hasBody);
   var getPos = props.getPos,
     view = props.view;
   var isTopLevelNode = React.useMemo(function () {
@@ -70,7 +72,11 @@ function ExtensionWithPluginState(props) {
     customContainerStyles = breakoutStyles;
   }
   newContentStyles = _objectSpread(_objectSpread({}, newContentStyles), contentWrapper);
-  return jsx("div", {
+  return jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout,
     className: classNames,
@@ -86,14 +92,16 @@ function ExtensionWithPluginState(props) {
     contentEditable: false,
     className: headerClassNames
   }, !removeBorder && jsx(ExtensionLozenge, {
-    node: node
+    isNodeSelected: isNodeSelected,
+    node: node,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
   }), children), hasBody && jsx("div", {
     css: newContentStyles
   }, jsx("div", {
     css: content,
     ref: handleContentDOMRef,
     className: "extension-content block"
-  }))));
+  })))));
 }
 var Extension = function Extension(props) {
   // TODO: ED-17836 This code is here because confluence injects

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

@@ -6,8 +6,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
@@ -24,7 +23,9 @@ var InlineExtension = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         node = _this$props.node,
-        children = _this$props.children;
+        children = _this$props.children,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
+        isNodeSelected = _this$props.isNodeSelected;
       var hasChildren = !!children;
       var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
       return jsx("div", {
@@ -34,7 +35,9 @@ var InlineExtension = /*#__PURE__*/function (_Component) {
         css: overlay,
         className: "extension-overlay"
       }), children ? children : jsx(ExtensionLozenge, {
-        node: node
+        node: node,
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
       }));
     }
   }]);

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

@@ -1,32 +1,64 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["url"];
-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) { _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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
-import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { getExtensionLozengeData } from '../../utils';
-import { placeholderFallback, placeholderFallbackParams, styledImage } from './styles';
-export var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-};
-export var ICON_SIZE = 24;
+import { LozengeComponent } from './LozengeComponent';
+import { styledImage } from './styles';
 var ExtensionLozenge = /*#__PURE__*/function (_Component) {
   _inherits(ExtensionLozenge, _Component);
   var _super = _createSuper(ExtensionLozenge);
   function ExtensionLozenge() {
+    var _this;
     _classCallCheck(this, ExtensionLozenge);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "renderImage", function (lozengeData) {
+      var extensionKey = _this.props.node.attrs.extensionKey;
+      var url = lozengeData.url,
+        rest = _objectWithoutProperties(lozengeData, _excluded);
+      return jsx("img", _extends({
+        css: styledImage,
+        src: url
+      }, rest, {
+        alt: extensionKey
+      }));
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderFallback", function (lozengeData) {
+      var _this$props = _this.props,
+        showMacroInteractionDesignUpdates = _this$props.showMacroInteractionDesignUpdates,
+        isNodeSelected = _this$props.isNodeSelected;
+      var _this$props$node$attr = _this.props.node.attrs,
+        parameters = _this$props$node$attr.parameters,
+        extensionKey = _this$props$node$attr.extensionKey;
+      var name = _this.props.node.type.name;
+      var params = parameters && parameters.macroParams;
+      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
+      var isBlockExtension = name === 'extension';
+      return jsx(LozengeComponent, {
+        isNodeSelected: isNodeSelected,
+        showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+        isBlockExtension: isBlockExtension,
+        lozengeData: lozengeData,
+        params: params,
+        title: title,
+        renderImage: _this.renderImage
+      });
+    });
+    return _this;
   }
   _createClass(ExtensionLozenge, [{
     key: "render",
@@ -45,45 +77,6 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       });
       return this.renderFallback(iconData);
     }
-  }, {
-    key: "renderImage",
-    value: function renderImage(lozengeData) {
-      var extensionKey = this.props.node.attrs.extensionKey;
-      var url = lozengeData.url,
-        rest = _objectWithoutProperties(lozengeData, _excluded);
-      return jsx("img", _extends({
-        css: styledImage,
-        src: url
-      }, rest, {
-        alt: extensionKey
-      }));
-    }
-  }, {
-    key: "renderFallback",
-    value: function renderFallback(lozengeData) {
-      var _this$props$node$attr = this.props.node.attrs,
-        parameters = _this$props$node$attr.parameters,
-        extensionKey = _this$props$node$attr.extensionKey;
-      var name = this.props.node.type.name;
-      var params = parameters && parameters.macroParams;
-      var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey;
-      var isBlockExtension = name === 'extension';
-      return jsx("div", {
-        "data-testid": "lozenge-fallback",
-        css: placeholderFallback
-      }, lozengeData && !isBlockExtension ? this.renderImage(_objectSpread({
-        height: ICON_SIZE,
-        width: ICON_SIZE
-      }, lozengeData)) : jsx(EditorFileIcon, {
-        label: title
-      }), jsx("span", {
-        className: "extension-title"
-      }, capitalizeFirstLetter(title)), params && !isBlockExtension && jsx("span", {
-        css: placeholderFallbackParams
-      }, Object.keys(params).map(function (key) {
-        return key && " | ".concat(key, " = ").concat(params[key].value);
-      })));
-    }
   }]);
   return ExtensionLozenge;
 }(Component);

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

@@ -0,0 +1,48 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _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; }
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
+import { SimpleTag as Tag } from '@atlaskit/tag';
+import { lozengeWrapper, placeholderFallback, placeholderFallbackParams } from './styles';
+export var ICON_SIZE = 24;
+var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+export var LozengeComponent = function LozengeComponent(_ref) {
+  var lozengeData = _ref.lozengeData,
+    isBlockExtension = _ref.isBlockExtension,
+    title = _ref.title,
+    params = _ref.params,
+    renderImage = _ref.renderImage,
+    isNodeSelected = _ref.isNodeSelected,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  var capitalizedTitle = capitalizeFirstLetter(title);
+  // TODO: only show on lozenge on hover: https://product-fabric.atlassian.net/browse/PGXT-4945
+  if (showMacroInteractionDesignUpdates) {
+    return jsx("div", {
+      className: "extension-title",
+      css: lozengeWrapper,
+      "data-testid": "new-lozenge"
+    }, jsx(Tag, {
+      text: capitalizedTitle,
+      color: isNodeSelected ? 'blueLight' : 'greyLight'
+    }));
+  }
+  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

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { css } from '@emotion/react';
 import { B200, N20, N20A, N70 } from '@atlaskit/theme/colors';
 import { BODIED_EXT_PADDING, EXTENSION_PADDING } from '../../styles';
 export { EXTENSION_PADDING as padding, BODIED_EXT_PADDING };
 export var wrapperDefault = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: ", ";\n  position: relative;\n  vertical-align: middle;\n\n  .ProseMirror-selectednode > span > & > .extension-overlay {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    opacity: 1;\n  }\n\n  &.with-overlay {\n    .extension-overlay {\n      background: ", ";\n      color: transparent;\n    }\n\n    &:hover .extension-overlay {\n      opacity: 1;\n    }\n  }\n"])), "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", "var(--ds-border-selected, ".concat(B200, ")"), "var(--ds-background-neutral-hovered, ".concat(N20A, ")"));
 export var overlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.3s;\n"])), "var(--ds-border-radius, 3px)");
-export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
+export var placeholderFallback = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > img {\n    margin: 0 ", ";\n  }\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: placeholder-fallback;\n"])), "var(--ds-space-050, 4px)");
 export var placeholderFallbackParams = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  max-width: 200px;\n  margin-left: 5px;\n  color: ", ";\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n"])), "var(--ds-text-subtlest, ".concat(N70, ")"));
-export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));
+export var styledImage = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  max-height: 16px;\n  max-width: 16px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: lozenge-image;\n"])));
+export var lozengeWrapper = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: left;\n  width: 100%;\n  margin-left: ", ";\n"])), "var(--ds-space-050, 4px)");

package/dist/esm/extensibility/ExtensionComponent.js

@@ -11,6 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React, { Component } from 'react';
 import memoizeOne from 'memoize-one';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
 import Extension from './Extension/Extension';
@@ -185,6 +186,8 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
         showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
+      var selection = editorView.state.selection;
+      var selectedNode = selection instanceof NodeSelection && selection.node;
       if (node.type.name === 'multiBodiedExtension') {
         return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
           node: node,
@@ -212,12 +215,14 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             editorAppearance: editorAppearance,
             hideFrame: (_this$state$_privateP = this.state._privateProps) === null || _this$state$_privateP === void 0 ? void 0 : _this$state$_privateP.__hideFrame,
             pluginInjectionApi: pluginInjectionApi,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {
             node: node,
-            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+            showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
+            isNodeSelected: selectedNode === node
           }, extensionHandlerResult);
         default:
           return null;

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.8.5";
+var packageVersion = "78.9.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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.8.5";
+var packageVersion = "78.9.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -17,6 +17,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 /**
  * End workaround

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 export default class InlineExtension extends Component<Props, any> {
     render(): jsx.JSX.Element;

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

@@ -2,11 +2,16 @@
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-export declare const capitalizeFirstLetter: (str: string) => string;
 export interface Props {
     node: PmNode;
+    showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
+}
+export interface LozengeData {
+    url: string;
+    height?: number;
+    width?: number;
 }
-export declare const ICON_SIZE = 24;
 export default class ExtensionLozenge extends Component<Props, any> {
     render(): jsx.JSX.Element;
     private renderImage;

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

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { LozengeData } from './Lozenge';
+export declare const ICON_SIZE = 24;
+type LozengeComponentProps = {
+    lozengeData?: LozengeData;
+    isBlockExtension: boolean;
+    title: string;
+    params: any;
+    renderImage: (lozengeData: LozengeData) => void;
+    isNodeSelected?: boolean;
+    showMacroInteractionDesignUpdates?: boolean;
+};
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
+export {};

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

@@ -5,3 +5,4 @@ export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;
 export declare const styledImage: import("@emotion/react").SerializedStyles;
+export declare const lozengeWrapper: import("@emotion/react").SerializedStyles;

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

@@ -17,6 +17,7 @@ export interface Props {
     editorAppearance?: EditorAppearance;
     pluginInjectionApi: ExtensionsPluginInjectionAPI;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 /**
  * End workaround

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

@@ -1,12 +1,12 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 export interface Props {
     node: PmNode;
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
 }
 export default class InlineExtension extends Component<Props, any> {
     render(): jsx.JSX.Element;

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

@@ -2,11 +2,16 @@
 import { Component } from 'react';
 import { jsx } from '@emotion/react';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-export declare const capitalizeFirstLetter: (str: string) => string;
 export interface Props {
     node: PmNode;
+    showMacroInteractionDesignUpdates?: boolean;
+    isNodeSelected?: boolean;
+}
+export interface LozengeData {
+    url: string;
+    height?: number;
+    width?: number;
 }
-export declare const ICON_SIZE = 24;
 export default class ExtensionLozenge extends Component<Props, any> {
     render(): jsx.JSX.Element;
     private renderImage;

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

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { LozengeData } from './Lozenge';
+export declare const ICON_SIZE = 24;
+type LozengeComponentProps = {
+    lozengeData?: LozengeData;
+    isBlockExtension: boolean;
+    title: string;
+    params: any;
+    renderImage: (lozengeData: LozengeData) => void;
+    isNodeSelected?: boolean;
+    showMacroInteractionDesignUpdates?: boolean;
+};
+export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, }: LozengeComponentProps) => jsx.JSX.Element;
+export {};

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

@@ -5,3 +5,4 @@ export declare const overlay: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallback: import("@emotion/react").SerializedStyles;
 export declare const placeholderFallbackParams: import("@emotion/react").SerializedStyles;
 export declare const styledImage: import("@emotion/react").SerializedStyles;
+export declare const lozengeWrapper: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.8.5",
+  "version": "78.9.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -128,6 +128,7 @@
     "@atlaskit/smart-card": "^26.48.0",
     "@atlaskit/smart-user-picker": "^6.9.0",
     "@atlaskit/spinner": "^16.0.0",
+    "@atlaskit/tag": "^12.0.0",
     "@atlaskit/task-decision": "^17.9.0",
     "@atlaskit/textfield": "^6.0.0",
     "@atlaskit/theme": "^12.6.0",