@atlaskit/editor-common 78.13.0 → 78.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 78.14.0
+
+### Minor Changes
+
+- [#80901](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80901) [`dca34a53d8ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dca34a53d8ff) - [ux] Adds back lozenges to inline macros for visual update project and updates some styles/tests
+
+## 78.13.1
+
+### Patch Changes
+
+- [#81133](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81133) [`ad1f563ea96b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ad1f563ea96b) - [ux] ED-22503 Styling for annotations on the inline card for edit and render view
+
 ## 78.13.0
 
 ### Minor Changes

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

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -14,6 +15,8 @@ var _ui = require("../../../ui");
 var _Lozenge = _interopRequireDefault(require("../Lozenge"));
 var _styles = require("../styles");
 var _styles2 = require("./styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && 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; }
 /** @jsx jsx */
 
 var InlineExtension = function InlineExtension(props) {
@@ -21,16 +24,34 @@ var InlineExtension = function InlineExtension(props) {
     pluginInjectionApi = props.pluginInjectionApi,
     showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
     isNodeSelected = props.isNodeSelected,
-    children = props.children;
+    children = props.children,
+    isNodeHovered = props.isNodeHovered,
+    setIsNodeHovered = props.setIsNodeHovered;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;
   var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
   var rendererContainerWidth = widthState ? widthState.width - _editorSharedStyles.akEditorGutterPadding * 2 : 0;
   var extendedInlineExtension = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.inline_extension.extended_lcqdn') || false;
-  var inlineExtensionInternal = (0, _react2.jsx)("div", {
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
+  var inlineExtensionInternal = (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), (0, _react2.jsx)("div", {
     css: [_styles2.wrapperStyle, extendedInlineExtension && _styles2.inlineWrapperStyels],
-    className: "extension-container inline ".concat(className)
+    className: "extension-container inline ".concat(className),
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, (0, _react2.jsx)("div", {
     css: _styles.overlay,
     className: "extension-overlay"
@@ -38,7 +59,7 @@ var InlineExtension = function InlineExtension(props) {
     node: node,
     isNodeSelected: isNodeSelected,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-  }));
+  })));
   if (extendedInlineExtension) {
     return (0, _react2.jsx)(_ui.WidthContext.Provider, {
       value: (0, _ui.createWidthContext)(rendererContainerWidth)

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

@@ -55,12 +55,11 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
       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, {
         isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-        isBlockExtension: isBlockExtension,
+        extensionName: name,
         lozengeData: lozengeData,
         params: params,
         title: title,
@@ -73,12 +72,14 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(ExtensionLozenge, [{
     key: "render",
     value: function render() {
-      var node = this.props.node;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
       var imageData = (0, _utils.getExtensionLozengeData)({
         node: node,
         type: 'image'
       });
-      if (imageData && node.type.name !== 'extension') {
+      if (!showMacroInteractionDesignUpdates && imageData && node.type.name !== 'extension') {
         return this.renderImage(imageData);
       }
       var iconData = (0, _utils.getExtensionLozengeData)({

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

@@ -19,7 +19,7 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
 };
 var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref) {
   var lozengeData = _ref.lozengeData,
-    isBlockExtension = _ref.isBlockExtension,
+    extensionName = _ref.extensionName,
     title = _ref.title,
     params = _ref.params,
     renderImage = _ref.renderImage,
@@ -28,9 +28,9 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
     customContainerStyles = _ref.customContainerStyles,
     isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
-  if (showMacroInteractionDesignUpdates) {
+  if (showMacroInteractionDesignUpdates && (isNodeHovered || isNodeSelected)) {
     var lozengeClassNames = (0, _classnames.default)('extension-title', {
-      'show-lozenge': isNodeHovered || isNodeSelected
+      'inline-extension': extensionName === 'inlineExtension'
     });
     return (0, _react.jsx)("div", {
       className: lozengeClassNames,
@@ -41,7 +41,8 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
-  } else {
+  } else if (!showMacroInteractionDesignUpdates) {
+    var isBlockExtension = extensionName === 'extension';
     return (0, _react.jsx)("div", {
       "data-testid": "lozenge-fallback",
       css: _styles.placeholderFallback
@@ -58,4 +59,5 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       return key && " | ".concat(key, " = ").concat(params[key].value);
     })));
   }
+  return null;
 };

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

@@ -78,14 +78,11 @@ 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)",
-  // Using opacity so that lozenge takes up space and doesn't cause shift on render
-  opacity: '0',
-  '&.show-lozenge': {
-    opacity: '1'
+  position: 'absolute',
+  top: "var(--ds-space-negative-300, -24px)",
+  '&.inline-extension': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '-23px' // Unfortunately, this needs to be this exact number - otherwise there will be a gap/noticeable overlap
   }
 });

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -243,7 +243,9 @@ var ExtensionComponent = exports.ExtensionComponent = /*#__PURE__*/function (_Co
             node: node,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
             isNodeSelected: selectedNode === node,
-            pluginInjectionApi: pluginInjectionApi
+            pluginInjectionApi: pluginInjectionApi,
+            isNodeHovered: this.state.isNodeHovered,
+            setIsNodeHovered: this.setIsNodeHovered
           }, extensionHandlerResult);
         default:
           return null;

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -6,9 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ExtensionNodeWrapper = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
+/** @jsx jsx */
+
+var styles = (0, _react2.css)({
+  '&.inline-extension': {
+    display: 'inline-block'
+  },
+  '&.relative': {
+    position: 'relative'
+  }
+});
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
@@ -16,6 +29,14 @@ var _utils = require("../utils");
  */
 var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
-    nodeType = _ref.nodeType;
-  return /*#__PURE__*/_react.default.createElement("span", null, children, nodeType === 'inlineExtension' && _utils.ZERO_WIDTH_SPACE);
+    nodeType = _ref.nodeType,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  var wrapperClassNames = (0, _classnames.default)({
+    'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
+    relative: showMacroInteractionDesignUpdates
+  });
+  return (0, _react2.jsx)("span", {
+    className: wrapperClassNames,
+    css: styles
+  }, children, nodeType === 'inlineExtension' && _utils.ZERO_WIDTH_SPACE);
 };

package/dist/cjs/extensibility/extensionNodeView.js

@@ -55,7 +55,8 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
     value: function render(props, forwardRef) {
       var _props$extensionNodeV;
       return /*#__PURE__*/_react.default.createElement(_ExtensionNodeWrapper.ExtensionNodeWrapper, {
-        nodeType: this.node.type.name
+        nodeType: this.node.type.name,
+        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
       }, /*#__PURE__*/_react.default.createElement(_Extension.Extension, {
         editorView: this.view,
         node: this.node,

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.13.0";
+var packageVersion = "78.14.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/styles/shared/annotation.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.blockAnnotationPrefix = exports.annotationSharedStyles = exports.annotationPrefix = exports.BlockAnnotationSharedClassNames = exports.AnnotationSharedClassNames = exports.AnnotationSharedCSSByState = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../../media/styles");
 var _templateObject;
@@ -26,7 +27,33 @@ var mediaNodeDomRef = 'mediaView-content-wrap';
 var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
 var AnnotationSharedCSSByState = exports.AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
-  return {
+  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? {
+    focus: (0, _react.css)({
+      background: "var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"),
+      borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")")),
+      boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"),
+      cursor: 'pointer',
+      '&:has(.card)': {
+        fontSize: '1.5rem',
+        lineHeight: '1.2rem',
+        '& > *': {
+          fontSize: '16px'
+        }
+      }
+    }),
+    blur: (0, _react.css)({
+      background: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
+      borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y200a, ")")),
+      cursor: 'pointer',
+      '&:has(.card)': {
+        fontSize: '1.5rem',
+        lineHeight: '1.2rem',
+        '& > *': {
+          fontSize: '16px'
+        }
+      }
+    })
+  } : {
     focus: (0, _react.css)({
       // Background is not coming through in confluence, suspecting to be caused by some specific combination of
       // emotion and token look up

package/dist/cjs/styles/shared/smartCard.js

@@ -8,6 +8,7 @@ exports.smartCardStyles = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = export
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _smartCard = require("./smart-card");
 var _templateObject;
@@ -15,4 +16,4 @@ var DATASOURCE_INNER_CONTAINER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CL
 var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems safe to autofix with a fix to `getSelectionStyles`
-var smartCardStyles = exports.smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n      border-radius: ", ";\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-radius-200, 8px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.DATASOURCE_CONTAINER, _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
+var smartCardStyles = exports.smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n    ", "\n    .card {\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n      border-radius: ", ";\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, ".concat(_colors.Y75, ")"), ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, ".concat(_colors.Y300, ")"), ";\n          box-shadow: ", "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(_colors.N60A, ", -1px 2px 3px ").concat(_colors.N60A), ")"), ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-radius-200, 8px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.DATASOURCE_CONTAINER, _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(_colors.N40, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -14,7 +14,9 @@ const InlineExtension = props => {
     pluginInjectionApi,
     showMacroInteractionDesignUpdates,
     isNodeSelected,
-    children
+    children,
+    isNodeHovered,
+    setIsNodeHovered
   } = props;
   const {
     widthState
@@ -23,9 +25,21 @@ const InlineExtension = props => {
   const className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
   const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
   const extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
-  const inlineExtensionInternal = jsx("div", {
+  const handleMouseEvent = didHover => {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
+  const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
-    className: `extension-container inline ${className}`
+    className: `extension-container inline ${className}`,
+    onMouseOver: () => handleMouseEvent(true),
+    onMouseLeave: () => handleMouseEvent(false)
   }, jsx("div", {
     css: overlay,
     className: "extension-overlay"
@@ -33,7 +47,7 @@ const InlineExtension = props => {
     node: node,
     isNodeSelected: isNodeSelected,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-  }));
+  })));
   if (extendedInlineExtension) {
     return jsx(WidthContext.Provider, {
       value: createWidthContext(rendererContainerWidth)

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

@@ -40,12 +40,11 @@ export default class ExtensionLozenge extends Component {
       } = 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, {
         isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-        isBlockExtension: isBlockExtension,
+        extensionName: name,
         lozengeData: lozengeData,
         params: params,
         title: title,
@@ -56,13 +55,14 @@ export default class ExtensionLozenge extends Component {
   }
   render() {
     const {
-      node
+      node,
+      showMacroInteractionDesignUpdates
     } = this.props;
     const imageData = getExtensionLozengeData({
       node,
       type: 'image'
     });
-    if (imageData && node.type.name !== 'extension') {
+    if (!showMacroInteractionDesignUpdates && imageData && node.type.name !== 'extension') {
       return this.renderImage(imageData);
     }
     const iconData = getExtensionLozengeData({

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

@@ -11,7 +11,7 @@ const capitalizeFirstLetter = str => {
 };
 export const LozengeComponent = ({
   lozengeData,
-  isBlockExtension,
+  extensionName,
   title,
   params,
   renderImage,
@@ -21,9 +21,9 @@ export const LozengeComponent = ({
   isNodeHovered
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
-  if (showMacroInteractionDesignUpdates) {
+  if (showMacroInteractionDesignUpdates && (isNodeHovered || isNodeSelected)) {
     const lozengeClassNames = classnames('extension-title', {
-      'show-lozenge': isNodeHovered || isNodeSelected
+      'inline-extension': extensionName === 'inlineExtension'
     });
     return jsx("div", {
       className: lozengeClassNames,
@@ -34,7 +34,8 @@ export const LozengeComponent = ({
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
-  } else {
+  } else if (!showMacroInteractionDesignUpdates) {
+    const isBlockExtension = extensionName === 'extension';
     return jsx("div", {
       "data-testid": "lozenge-fallback",
       css: placeholderFallback
@@ -50,4 +51,5 @@ export const LozengeComponent = ({
       css: placeholderFallbackParams
     }, Object.keys(params).map(key => key && ` | ${key} = ${params[key].value}`)));
   }
+  return null;
 };

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

@@ -60,14 +60,11 @@ 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)",
-  // Using opacity so that lozenge takes up space and doesn't cause shift on render
-  opacity: '0',
-  '&.show-lozenge': {
-    opacity: '1'
+  position: 'absolute',
+  top: "var(--ds-space-negative-300, -24px)",
+  '&.inline-extension': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '-23px' // Unfortunately, this needs to be this exact number - otherwise there will be a gap/noticeable overlap
   }
 });

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -198,7 +198,9 @@ export class ExtensionComponent extends Component {
           node: node,
           showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
           isNodeSelected: selectedNode === node,
-          pluginInjectionApi: pluginInjectionApi
+          pluginInjectionApi: pluginInjectionApi,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
         }, extensionHandlerResult);
       default:
         return null;

package/dist/es2019/extensibility/ExtensionNodeWrapper.js

@@ -1,7 +1,19 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
 import { ZERO_WIDTH_SPACE } from '../utils';
+const styles = css({
+  '&.inline-extension': {
+    display: 'inline-block'
+  },
+  '&.relative': {
+    position: 'relative'
+  }
+});
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
@@ -9,5 +21,15 @@ import { ZERO_WIDTH_SPACE } from '../utils';
  */
 export const ExtensionNodeWrapper = ({
   children,
-  nodeType
-}) => /*#__PURE__*/React.createElement("span", null, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
+  nodeType,
+  showMacroInteractionDesignUpdates
+}) => {
+  const wrapperClassNames = classnames({
+    'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
+    relative: showMacroInteractionDesignUpdates
+  });
+  return jsx("span", {
+    className: wrapperClassNames,
+    css: styles
+  }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
+};

package/dist/es2019/extensibility/extensionNodeView.js

@@ -28,7 +28,8 @@ export class ExtensionNode extends ReactNodeView {
   render(props, forwardRef) {
     var _props$extensionNodeV;
     return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
-      nodeType: this.node.type.name
+      nodeType: this.node.type.name,
+      showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
     }, /*#__PURE__*/React.createElement(Extension, {
       editorView: this.view,
       node: this.node,

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

package/dist/es2019/styles/shared/annotation.js

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { commentStatusStyleMap } from '../../media/styles';
 export const annotationPrefix = 'ak-editor-annotation';
@@ -16,7 +17,33 @@ export const BlockAnnotationSharedClassNames = {
 const mediaNodeDomRef = 'mediaView-content-wrap';
 const Y75a = 'rgba(255, 240, 179, 0.5)';
 const Y200a = 'rgba(255, 196, 0, 0.82)';
-export const AnnotationSharedCSSByState = () => ({
+export const AnnotationSharedCSSByState = () => getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? {
+  focus: css({
+    background: `var(--ds-background-accent-yellow-subtler, ${Y75})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y300})`}`,
+    boxShadow: `var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`,
+    cursor: 'pointer',
+    '&:has(.card)': {
+      fontSize: '1.5rem',
+      lineHeight: '1.2rem',
+      '& > *': {
+        fontSize: '16px'
+      }
+    }
+  }),
+  blur: css({
+    background: `var(--ds-background-accent-yellow-subtlest, ${Y75a})`,
+    borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
+    cursor: 'pointer',
+    '&:has(.card)': {
+      fontSize: '1.5rem',
+      lineHeight: '1.2rem',
+      '& > *': {
+        fontSize: '16px'
+      }
+    }
+  })
+} : {
   focus: css({
     // Background is not coming through in confluence, suspecting to be caused by some specific combination of
     // emotion and token look up
@@ -31,7 +58,7 @@ export const AnnotationSharedCSSByState = () => ({
     borderBottom: `2px solid ${`var(--ds-border-accent-yellow, ${Y200a})`}`,
     cursor: 'pointer'
   })
-});
+};
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- `AnnotationSharedCSSByState()` is not safe in object syntax
 export const annotationSharedStyles = () => css`

package/dist/es2019/styles/shared/smartCard.js

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0, N40 } from '@atlaskit/theme/colors';
+import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
@@ -11,7 +13,11 @@ export const smartCardStyles = css`
     max-width: calc(100% - 20px);
     vertical-align: top;
     word-break: break-all;
-
+    ${getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? `.card-with-comment {
+          background: ${`var(--ds-background-accent-yellow-subtler, ${Y75})`};
+          border-bottom: 2px solid ${`var(--ds-border-accent-yellow, ${Y300})`};
+          box-shadow: ${`var(--ds-shadow-overlay, ${`1px 2px 3px ${N60A}, -1px 2px 3px ${N60A}`})`};
+        }` : ''}
     .card {
       padding-left: ${"var(--ds-space-025, 2px)"};
       padding-right: ${"var(--ds-space-025, 2px)"};

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
+import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -13,16 +13,34 @@ var InlineExtension = function InlineExtension(props) {
     pluginInjectionApi = props.pluginInjectionApi,
     showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
     isNodeSelected = props.isNodeSelected,
-    children = props.children;
+    children = props.children,
+    isNodeHovered = props.isNodeHovered,
+    setIsNodeHovered = props.setIsNodeHovered;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
     widthState = _useSharedPluginState.widthState;
   var hasChildren = !!children;
   var className = hasChildren ? 'with-overlay with-children' : 'with-overlay';
   var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
   var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
-  var inlineExtensionInternal = jsx("div", {
+  var handleMouseEvent = function handleMouseEvent(didHover) {
+    if (setIsNodeHovered) {
+      setIsNodeHovered(didHover);
+    }
+  };
+  var inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
+    node: node,
+    isNodeSelected: isNodeSelected,
+    isNodeHovered: isNodeHovered,
+    showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+  }), jsx("div", {
     css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
-    className: "extension-container inline ".concat(className)
+    className: "extension-container inline ".concat(className),
+    onMouseOver: function onMouseOver() {
+      return handleMouseEvent(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return handleMouseEvent(false);
+    }
   }, jsx("div", {
     css: overlay,
     className: "extension-overlay"
@@ -30,7 +48,7 @@ var InlineExtension = function InlineExtension(props) {
     node: node,
     isNodeSelected: isNodeSelected,
     showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
-  }));
+  })));
   if (extendedInlineExtension) {
     return jsx(WidthContext.Provider, {
       value: createWidthContext(rendererContainerWidth)

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

@@ -49,12 +49,11 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
       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, {
         isNodeHovered: isNodeHovered,
         isNodeSelected: isNodeSelected,
         showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
-        isBlockExtension: isBlockExtension,
+        extensionName: name,
         lozengeData: lozengeData,
         params: params,
         title: title,
@@ -67,12 +66,14 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
   _createClass(ExtensionLozenge, [{
     key: "render",
     value: function render() {
-      var node = this.props.node;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        showMacroInteractionDesignUpdates = _this$props2.showMacroInteractionDesignUpdates;
       var imageData = getExtensionLozengeData({
         node: node,
         type: 'image'
       });
-      if (imageData && node.type.name !== 'extension') {
+      if (!showMacroInteractionDesignUpdates && imageData && node.type.name !== 'extension') {
         return this.renderImage(imageData);
       }
       var iconData = getExtensionLozengeData({

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

@@ -14,7 +14,7 @@ var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
 };
 export var LozengeComponent = function LozengeComponent(_ref) {
   var lozengeData = _ref.lozengeData,
-    isBlockExtension = _ref.isBlockExtension,
+    extensionName = _ref.extensionName,
     title = _ref.title,
     params = _ref.params,
     renderImage = _ref.renderImage,
@@ -23,9 +23,9 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     customContainerStyles = _ref.customContainerStyles,
     isNodeHovered = _ref.isNodeHovered;
   var capitalizedTitle = capitalizeFirstLetter(title);
-  if (showMacroInteractionDesignUpdates) {
+  if (showMacroInteractionDesignUpdates && (isNodeHovered || isNodeSelected)) {
     var lozengeClassNames = classnames('extension-title', {
-      'show-lozenge': isNodeHovered || isNodeSelected
+      'inline-extension': extensionName === 'inlineExtension'
     });
     return jsx("div", {
       className: lozengeClassNames,
@@ -36,7 +36,8 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       text: capitalizedTitle,
       color: isNodeSelected ? 'blueLight' : 'greyLight'
     }));
-  } else {
+  } else if (!showMacroInteractionDesignUpdates) {
+    var isBlockExtension = extensionName === 'extension';
     return jsx("div", {
       "data-testid": "lozenge-fallback",
       css: placeholderFallback
@@ -53,4 +54,5 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       return key && " | ".concat(key, " = ").concat(params[key].value);
     })));
   }
+  return null;
 };

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

@@ -60,14 +60,11 @@ 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)",
-  // Using opacity so that lozenge takes up space and doesn't cause shift on render
-  opacity: '0',
-  '&.show-lozenge': {
-    opacity: '1'
+  position: 'absolute',
+  top: "var(--ds-space-negative-300, -24px)",
+  '&.inline-extension': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '-23px' // Unfortunately, this needs to be this exact number - otherwise there will be a gap/noticeable overlap
   }
 });

package/dist/esm/extensibility/ExtensionComponent.js

@@ -233,7 +233,9 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
             node: node,
             showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
             isNodeSelected: selectedNode === node,
-            pluginInjectionApi: pluginInjectionApi
+            pluginInjectionApi: pluginInjectionApi,
+            isNodeHovered: this.state.isNodeHovered,
+            setIsNodeHovered: this.setIsNodeHovered
           }, extensionHandlerResult);
         default:
           return null;

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -1,7 +1,19 @@
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
+import classnames from 'classnames';
 import { ZERO_WIDTH_SPACE } from '../utils';
+var styles = css({
+  '&.inline-extension': {
+    display: 'inline-block'
+  },
+  '&.relative': {
+    position: 'relative'
+  }
+});
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
@@ -9,6 +21,14 @@ import { ZERO_WIDTH_SPACE } from '../utils';
  */
 export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
-    nodeType = _ref.nodeType;
-  return /*#__PURE__*/React.createElement("span", null, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
+    nodeType = _ref.nodeType,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  var wrapperClassNames = classnames({
+    'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
+    relative: showMacroInteractionDesignUpdates
+  });
+  return jsx("span", {
+    className: wrapperClassNames,
+    css: styles
+  }, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE);
 };

package/dist/esm/extensibility/extensionNodeView.js

@@ -47,7 +47,8 @@ export var ExtensionNode = /*#__PURE__*/function (_ReactNodeView) {
     value: function render(props, forwardRef) {
       var _props$extensionNodeV;
       return /*#__PURE__*/React.createElement(ExtensionNodeWrapper, {
-        nodeType: this.node.type.name
+        nodeType: this.node.type.name,
+        showMacroInteractionDesignUpdates: props.showMacroInteractionDesignUpdates
       }, /*#__PURE__*/React.createElement(Extension, {
         editorView: this.view,
         node: this.node,

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.13.0";
+var packageVersion = "78.14.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/styles/shared/annotation.js

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { commentStatusStyleMap } from '../../media/styles';
 export var annotationPrefix = 'ak-editor-annotation';
@@ -19,7 +20,33 @@ var mediaNodeDomRef = 'mediaView-content-wrap';
 var Y75a = 'rgba(255, 240, 179, 0.5)';
 var Y200a = 'rgba(255, 196, 0, 0.82)';
 export var AnnotationSharedCSSByState = function AnnotationSharedCSSByState() {
-  return {
+  return getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? {
+    focus: css({
+      background: "var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"),
+      borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y300, ")")),
+      boxShadow: "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")"),
+      cursor: 'pointer',
+      '&:has(.card)': {
+        fontSize: '1.5rem',
+        lineHeight: '1.2rem',
+        '& > *': {
+          fontSize: '16px'
+        }
+      }
+    }),
+    blur: css({
+      background: "var(--ds-background-accent-yellow-subtlest, ".concat(Y75a, ")"),
+      borderBottom: "2px solid ".concat("var(--ds-border-accent-yellow, ".concat(Y200a, ")")),
+      cursor: 'pointer',
+      '&:has(.card)': {
+        fontSize: '1.5rem',
+        lineHeight: '1.2rem',
+        '& > *': {
+          fontSize: '16px'
+        }
+      }
+    })
+  } : {
     focus: css({
       // Background is not coming through in confluence, suspecting to be caused by some specific combination of
       // emotion and token look up

package/dist/esm/styles/shared/smartCard.js

@@ -2,10 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { N0, N40 } from '@atlaskit/theme/colors';
+import { N60A, Y300, Y75 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from './smart-card';
 export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Seems safe to autofix with a fix to `getSelectionStyles`
-export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n      border-radius: ", ";\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-radius-200, 8px)", SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.DATASOURCE_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(N0, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"), akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, getSelectionStyles([SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
+export var smartCardStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n    ", "\n    .card {\n      padding-left: ", ";\n      padding-right: ", ";\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n      border-radius: ", ";\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, ".concat(Y75, ")"), ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, ".concat(Y300, ")"), ";\n          box-shadow: ", "var(--ds-shadow-overlay, ".concat("1px 2px 3px ".concat(N60A, ", -1px 2px 3px ").concat(N60A), ")"), ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-radius-200, 8px)", SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.DATASOURCE_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(N0, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-border, ".concat(N40, ")"), akEditorSelectedNodeClassName, DATASOURCE_INNER_CONTAINER_CLASSNAME, getSelectionStyles([SelectionStyle.BoxShadow]), DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER, akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);

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

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

@@ -9,6 +9,8 @@ export interface Props {
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 declare const InlineExtension: (props: Props) => jsx.JSX.Element;
 export default InlineExtension;

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

@@ -5,7 +5,7 @@ import type { LozengeData } from './Lozenge';
 export declare const ICON_SIZE = 24;
 type LozengeComponentProps = {
     lozengeData?: LozengeData;
-    isBlockExtension: boolean;
+    extensionName: string;
     title: string;
     params: any;
     renderImage: (lozengeData: LozengeData) => void;
@@ -14,5 +14,5 @@ type LozengeComponentProps = {
     customContainerStyles?: CSSProperties;
     isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element | null;
 export {};

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

@@ -1,14 +1,18 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     children: React.ReactNode;
     nodeType: string;
+    showMacroInteractionDesignUpdates?: boolean;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType }: Props) => JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
 export {};

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

@@ -9,6 +9,8 @@ export interface Props {
     children?: React.ReactNode;
     showMacroInteractionDesignUpdates?: boolean;
     isNodeSelected?: boolean;
+    isNodeHovered?: boolean;
+    setIsNodeHovered?: (isHovered: boolean) => void;
 }
 declare const InlineExtension: (props: Props) => jsx.JSX.Element;
 export default InlineExtension;

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

@@ -5,7 +5,7 @@ import type { LozengeData } from './Lozenge';
 export declare const ICON_SIZE = 24;
 type LozengeComponentProps = {
     lozengeData?: LozengeData;
-    isBlockExtension: boolean;
+    extensionName: string;
     title: string;
     params: any;
     renderImage: (lozengeData: LozengeData) => void;
@@ -14,5 +14,5 @@ type LozengeComponentProps = {
     customContainerStyles?: CSSProperties;
     isNodeHovered?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, isBlockExtension, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, isNodeSelected, showMacroInteractionDesignUpdates, customContainerStyles, isNodeHovered, }: LozengeComponentProps) => jsx.JSX.Element | null;
 export {};

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

@@ -1,14 +1,18 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     children: React.ReactNode;
     nodeType: string;
+    showMacroInteractionDesignUpdates?: boolean;
 };
 /**
  * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
+ * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
  * else wrap with a div (for multi bodied extensions)
  *
  * @param param0
  * @returns
  */
-export declare const ExtensionNodeWrapper: ({ children, nodeType }: Props) => JSX.Element;
+export declare const ExtensionNodeWrapper: ({ children, nodeType, showMacroInteractionDesignUpdates, }: Props) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "78.13.0",
+  "version": "78.14.0",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"