@atlaskit/editor-common 94.22.1 → 94.23.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-common
 
+## 94.23.0
+
+### Minor Changes
+
+- [#163929](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163929)
+  [`4f9a06f018da6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f9a06f018da6) -
+  [ux] Adds initial changes for edit toggle for bodied macros & updates tests/VR tests with new icon
+
 ## 94.22.1
 
 ### Patch Changes

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

@@ -44,7 +44,8 @@ function ExtensionWithPluginState(props) {
     isNodeSelected = props.isNodeSelected,
     isNodeHovered = props.isNodeHovered,
     isNodeNested = props.isNodeNested,
-    setIsNodeHovered = props.setIsNodeHovered;
+    setIsNodeHovered = props.setIsNodeHovered,
+    showLivePagesBodiedMacrosRendererView = props.showLivePagesBodiedMacrosRendererView;
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
     showMacroButtonUpdates = _ref.showMacroButtonUpdates;
@@ -118,7 +119,8 @@ function ExtensionWithPluginState(props) {
     showMacroButtonUpdates: showMacroButtonUpdates,
     customContainerStyles: customContainerStyles,
     setIsNodeHovered: setIsNodeHovered,
-    isBodiedMacro: hasBody
+    isBodiedMacro: hasBody,
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
   }), (0, _react2.jsx)("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditToggle = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
+var _primitives = require("@atlaskit/primitives");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var buttonContainerStyles = (0, _react.css)({
+  opacity: 0,
+  lineHeight: 1,
+  position: 'absolute',
+  width: 'max-content',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  top: '-19px',
+  display: 'inline-flex',
+  justifyContent: 'flex-end',
+  color: "var(--ds-text-subtle, #44546F)"
+});
+var buttonStyles = (0, _react.css)({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)"),
+  minHeight: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius, 4px)",
+  paddingLeft: "var(--ds-space-150, 12px)",
+  paddingRight: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var showButtonContainerStyle = (0, _react.css)({
+  opacity: 1
+});
+var iconStyles = (0, _primitives.xcss)({
+  marginRight: 'space.075'
+});
+var i18n = (0, _reactIntlNext.defineMessages)({
+  doneEditing: {
+    id: 'editor-common-extensibility-extension-lozenge-editToggle.done.editing',
+    defaultMessage: 'Done editing',
+    description: 'Text in button when on click switches back to view mode of a macro'
+  }
+});
+// Used to toggle between edit and renderer mode for bodied macros in live pages
+var EditToggle = exports.EditToggle = function EditToggle(_ref) {
+  var isNodeHovered = _ref.isNodeHovered,
+    customContainerStyles = _ref.customContainerStyles,
+    setIsNodeHovered = _ref.setIsNodeHovered;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react.jsx)("div", {
+    "data-testid": "extension-edit-toggle-container"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    css: isNodeHovered ? [buttonContainerStyles, showButtonContainerStyle] : buttonContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: customContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "extension-edit-toggle-container",
+    onMouseOver: function onMouseOver() {
+      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
+    }
+  }, (0, _react.jsx)("span", {
+    css: buttonStyles,
+    className: "extension-edit-toggle"
+  }, (0, _react.jsx)(_primitives.Flex, {
+    as: "span",
+    xcss: iconStyles
+  }, (0, _react.jsx)(_checkMark.default, {
+    label: ""
+  })), intl.formatMessage(i18n.doneEditing)));
+};

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

@@ -10,7 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactIntlNext = require("react-intl-next");
-var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 /**
  * @jsxRuntime classic
@@ -78,8 +78,12 @@ var buttonLabelStyles = (0, _react2.css)({
   '&.remove-nested-left-margin': {
     marginLeft: 0
   },
-  fontSize: "var(--ds-space-200, 16px)",
-  fontWeight: "var(--ds-font-weight-regular, 400)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-bodied-macro-live-page-styles': {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
+  }
 });
 var spacerStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -107,7 +111,7 @@ var originalLabelStyles = (0, _react2.css)({
   }
 });
 var iconStyles = (0, _react2.css)({
-  marginLeft: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-075, 6px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.hide-icon': {
     display: 'none'
@@ -128,19 +132,24 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
-    showMacroButtonUpdates = _ref.showMacroButtonUpdates;
+    showMacroButtonUpdates = _ref.showMacroButtonUpdates,
+    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView;
   var isInlineExtension = extensionName === 'inlineExtension';
   var showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
   var containerClassNames = (0, _classnames.default)({
     bodied: isBodiedMacro
   });
+
+  // For the new live pages bodied macro experience, we don't want to hide the label by default
+  var showBodiedMacroLabel = isBodiedMacro ? !showLivePagesBodiedMacrosRendererView : false;
   var sharedLabelClassNames = (0, _classnames.default)('extension-label', {
     nested: isNodeNested,
     inline: isInlineExtension,
     bodied: isBodiedMacro,
     'bodied-border': showDefaultBodiedStyles,
     'bodied-background': showDefaultBodiedStyles,
-    'show-label': isNodeHovered || isBodiedMacro
+    'show-label': isNodeHovered || showBodiedMacroLabel,
+    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView
   });
   var newButtonLabelClassNames = (0, _classnames.default)({
     // For new button design, non-bodied macros should have a flush label. Inline macros don't need this since they never had the margin-left applied.
@@ -189,7 +198,7 @@ var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
         css: iconStyles,
         className: iconClassNames,
         "data-testid": "config-icon"
-      }, (0, _react2.jsx)(_preferences.default, {
+      }, (0, _react2.jsx)(_customize.default, {
         label: ""
       })));
     }), (0, _react2.jsx)("div", {

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

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.LozengeComponent = exports.ICON_SIZE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
 var _styles = require("../styles");
+var _EditToggle = require("./EditToggle");
 var _ExtensionLabel = require("./ExtensionLabel");
 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; } /**
@@ -31,10 +33,11 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered,
-    isBodiedMacro = _ref.isBodiedMacro;
+    isBodiedMacro = _ref.isBodiedMacro,
+    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
-    return (0, _react.jsx)(_ExtensionLabel.ExtensionLabel, {
+    return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ExtensionLabel.ExtensionLabel, {
       text: capitalizedTitle,
       extensionName: extensionName,
       isNodeHovered: isNodeHovered,
@@ -42,25 +45,30 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       customContainerStyles: customContainerStyles,
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
-      showMacroButtonUpdates: showMacroButtonUpdates
-    });
+      showMacroButtonUpdates: showMacroButtonUpdates,
+      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+    }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && (0, _react2.jsx)(_EditToggle.EditToggle, {
+      isNodeHovered: isNodeHovered,
+      setIsNodeHovered: setIsNodeHovered,
+      customContainerStyles: customContainerStyles
+    }));
   }
   var isBlockExtension = extensionName === 'extension';
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react.jsx)("div", {
+    (0, _react2.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, {
+    }, lozengeData)) : (0, _react2.jsx)(_file.default, {
       label: title
-    }), (0, _react.jsx)("span", {
+    }), (0, _react2.jsx)("span", {
       className: "extension-title"
     }, capitalizedTitle), params && !isBlockExtension &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    (0, _react.jsx)("span", {
+    (0, _react2.jsx)("span", {
       css: _styles.placeholderFallbackParams
     }, Object.keys(params).map(function (key) {
       return key && " | ".concat(key, " = ").concat(params[key].value);

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

@@ -56,7 +56,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
         isNodeNested = _this$props.isNodeNested,
         customContainerStyles = _this$props.customContainerStyles,
         setIsNodeHovered = _this$props.setIsNodeHovered,
-        isBodiedMacro = _this$props.isBodiedMacro;
+        isBodiedMacro = _this$props.isBodiedMacro,
+        showLivePagesBodiedMacrosRendererView = _this$props.showLivePagesBodiedMacrosRendererView;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
         extensionKey = _this$props$node$attr.extensionKey;
@@ -76,7 +77,8 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
         renderImage: _this.renderImage,
         customContainerStyles: customContainerStyles,
         setIsNodeHovered: setIsNodeHovered,
-        isBodiedMacro: isBodiedMacro
+        isBodiedMacro: isBodiedMacro,
+        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
       });
     });
     return _this;

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -207,7 +207,8 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
-        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags;
+        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags,
+        showLivePagesBodiedMacrosRendererView = _this$props2.showLivePagesBodiedMacrosRendererView;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -248,7 +249,8 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
-            setIsNodeHovered: this.setIsNodeHovered
+            setIsNodeHovered: this.setIsNodeHovered,
+            showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {
@@ -447,7 +449,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
         getPos = _this$props3.getPos,
         eventDispatcher = _this$props3.eventDispatcher,
         macroInteractionDesignFeatureFlags = _this$props3.macroInteractionDesignFeatureFlags,
-        extensionProvider = _this$props3.extensionProvider;
+        extensionProvider = _this$props3.extensionProvider,
+        showLivePagesBodiedMacrosRendererView = _this$props3.showLivePagesBodiedMacrosRendererView;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -488,7 +491,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
-            setIsNodeHovered: this.setIsNodeHovered
+            setIsNodeHovered: this.setIsNodeHovered,
+            showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/_react.default.createElement(_InlineExtension.default, {

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,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 && {}.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 = "94.22.1";
+var packageVersion = "94.23.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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.22.1";
+var packageVersion = "94.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -31,7 +31,8 @@ function ExtensionWithPluginState(props) {
     isNodeSelected,
     isNodeHovered,
     isNodeNested,
-    setIsNodeHovered
+    setIsNodeHovered,
+    showLivePagesBodiedMacrosRendererView
   } = props;
   const {
     showMacroInteractionDesignUpdates,
@@ -116,7 +117,8 @@ function ExtensionWithPluginState(props) {
     showMacroButtonUpdates: showMacroButtonUpdates,
     customContainerStyles: customContainerStyles,
     setIsNodeHovered: setIsNodeHovered,
-    isBodiedMacro: hasBody
+    isBodiedMacro: hasBody,
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
   }), jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout

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

@@ -0,0 +1,75 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
+import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
+import { Flex, xcss } from '@atlaskit/primitives';
+const buttonContainerStyles = css({
+  opacity: 0,
+  lineHeight: 1,
+  position: 'absolute',
+  width: 'max-content',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  top: '-19px',
+  display: 'inline-flex',
+  justifyContent: 'flex-end',
+  color: "var(--ds-text-subtle, #44546F)"
+});
+const buttonStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`,
+  minHeight: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius, 4px)",
+  paddingLeft: "var(--ds-space-150, 12px)",
+  paddingRight: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+const showButtonContainerStyle = css({
+  opacity: 1
+});
+const iconStyles = xcss({
+  marginRight: 'space.075'
+});
+const i18n = defineMessages({
+  doneEditing: {
+    id: 'editor-common-extensibility-extension-lozenge-editToggle.done.editing',
+    defaultMessage: 'Done editing',
+    description: 'Text in button when on click switches back to view mode of a macro'
+  }
+});
+// Used to toggle between edit and renderer mode for bodied macros in live pages
+export const EditToggle = ({
+  isNodeHovered,
+  customContainerStyles,
+  setIsNodeHovered
+}) => {
+  const intl = useIntl();
+  return jsx("div", {
+    "data-testid": "extension-edit-toggle-container"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    css: isNodeHovered ? [buttonContainerStyles, showButtonContainerStyle] : buttonContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: customContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "extension-edit-toggle-container",
+    onMouseOver: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true),
+    onMouseLeave: () => setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false)
+  }, jsx("span", {
+    css: buttonStyles,
+    className: "extension-edit-toggle"
+  }, jsx(Flex, {
+    as: "span",
+    xcss: iconStyles
+  }, jsx(CheckMarkIcon, {
+    label: ""
+  })), intl.formatMessage(i18n.doneEditing)));
+};

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

@@ -8,7 +8,7 @@ import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
-import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
 import Tooltip from '@atlaskit/tooltip';
 const containerStyles = css({
   textAlign: 'left',
@@ -69,8 +69,12 @@ const buttonLabelStyles = css({
   '&.remove-nested-left-margin': {
     marginLeft: 0
   },
-  fontSize: "var(--ds-space-200, 16px)",
-  fontWeight: "var(--ds-font-weight-regular, 400)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-bodied-macro-live-page-styles': {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
+  }
 });
 const spacerStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -98,7 +102,7 @@ const originalLabelStyles = css({
   }
 });
 const iconStyles = css({
-  marginLeft: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-075, 6px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.hide-icon': {
     display: 'none'
@@ -119,20 +123,25 @@ export const ExtensionLabel = ({
   isNodeNested,
   setIsNodeHovered,
   isBodiedMacro,
-  showMacroButtonUpdates
+  showMacroButtonUpdates,
+  showLivePagesBodiedMacrosRendererView
 }) => {
   const isInlineExtension = extensionName === 'inlineExtension';
   const showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
   const containerClassNames = classnames({
     bodied: isBodiedMacro
   });
+
+  // For the new live pages bodied macro experience, we don't want to hide the label by default
+  const showBodiedMacroLabel = isBodiedMacro ? !showLivePagesBodiedMacrosRendererView : false;
   const sharedLabelClassNames = classnames('extension-label', {
     nested: isNodeNested,
     inline: isInlineExtension,
     bodied: isBodiedMacro,
     'bodied-border': showDefaultBodiedStyles,
     'bodied-background': showDefaultBodiedStyles,
-    'show-label': isNodeHovered || isBodiedMacro
+    'show-label': isNodeHovered || showBodiedMacroLabel,
+    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView
   });
   const newButtonLabelClassNames = classnames({
     // For new button design, non-bodied macros should have a flush label. Inline macros don't need this since they never had the margin-left applied.
@@ -180,7 +189,7 @@ export const ExtensionLabel = ({
       css: iconStyles,
       className: iconClassNames,
       "data-testid": "config-icon"
-    }, jsx(PreferencesIcon, {
+    }, jsx(CustomizeIcon, {
       label: ""
     })))), jsx("div", {
       css: spacerStyles

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

@@ -2,11 +2,12 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { placeholderFallback, placeholderFallbackParams } from '../styles';
+import { EditToggle } from './EditToggle';
 import { ExtensionLabel } from './ExtensionLabel';
 export const ICON_SIZE = 24;
 const capitalizeFirstLetter = str => {
@@ -24,11 +25,12 @@ export const LozengeComponent = ({
   isNodeHovered,
   isNodeNested,
   setIsNodeHovered,
-  isBodiedMacro
+  isBodiedMacro,
+  showLivePagesBodiedMacrosRendererView
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
-    return jsx(ExtensionLabel, {
+    return jsx(Fragment, null, jsx(ExtensionLabel, {
       text: capitalizedTitle,
       extensionName: extensionName,
       isNodeHovered: isNodeHovered,
@@ -36,8 +38,13 @@ export const LozengeComponent = ({
       customContainerStyles: customContainerStyles,
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
-      showMacroButtonUpdates: showMacroButtonUpdates
-    });
+      showMacroButtonUpdates: showMacroButtonUpdates,
+      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+    }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
+      isNodeHovered: isNodeHovered,
+      setIsNodeHovered: setIsNodeHovered,
+      customContainerStyles: customContainerStyles
+    }));
   }
   const isBlockExtension = extensionName === 'extension';
   return (

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

@@ -38,7 +38,8 @@ export default class ExtensionLozenge extends Component {
         isNodeNested,
         customContainerStyles,
         setIsNodeHovered,
-        isBodiedMacro
+        isBodiedMacro,
+        showLivePagesBodiedMacrosRendererView
       } = this.props;
       const {
         parameters,
@@ -62,7 +63,8 @@ export default class ExtensionLozenge extends Component {
         renderImage: this.renderImage,
         customContainerStyles: customContainerStyles,
         setIsNodeHovered: setIsNodeHovered,
-        isBodiedMacro: isBodiedMacro
+        isBodiedMacro: isBodiedMacro,
+        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
       });
     });
   }

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -160,7 +160,8 @@ export class ExtensionComponentOld extends Component {
       pluginInjectionApi,
       getPos,
       eventDispatcher,
-      macroInteractionDesignFeatureFlags
+      macroInteractionDesignFeatureFlags,
+      showLivePagesBodiedMacrosRendererView
     } = this.props;
     const {
       selection
@@ -204,7 +205,8 @@ export class ExtensionComponentOld extends Component {
           isNodeSelected: selectedNode === node,
           isNodeHovered: this.state.isNodeHovered,
           isNodeNested: isNodeNested,
-          setIsNodeHovered: this.setIsNodeHovered
+          setIsNodeHovered: this.setIsNodeHovered,
+          showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {
@@ -374,7 +376,8 @@ class ExtensionComponentInner extends Component {
       getPos,
       eventDispatcher,
       macroInteractionDesignFeatureFlags,
-      extensionProvider
+      extensionProvider,
+      showLivePagesBodiedMacrosRendererView
     } = this.props;
     const {
       selection
@@ -418,7 +421,8 @@ class ExtensionComponentInner extends Component {
           isNodeSelected: selectedNode === node,
           isNodeHovered: this.state.isNodeHovered,
           isNodeNested: isNodeNested,
-          setIsNodeHovered: this.setIsNodeHovered
+          setIsNodeHovered: this.setIsNodeHovered,
+          showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 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 = "94.22.1";
+const packageVersion = "94.23.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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "94.22.1";
+const packageVersion = "94.23.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -36,7 +36,8 @@ function ExtensionWithPluginState(props) {
     isNodeSelected = props.isNodeSelected,
     isNodeHovered = props.isNodeHovered,
     isNodeNested = props.isNodeNested,
-    setIsNodeHovered = props.setIsNodeHovered;
+    setIsNodeHovered = props.setIsNodeHovered,
+    showLivePagesBodiedMacrosRendererView = props.showLivePagesBodiedMacrosRendererView;
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
     showMacroButtonUpdates = _ref.showMacroButtonUpdates;
@@ -110,7 +111,8 @@ function ExtensionWithPluginState(props) {
     showMacroButtonUpdates: showMacroButtonUpdates,
     customContainerStyles: customContainerStyles,
     setIsNodeHovered: setIsNodeHovered,
-    isBodiedMacro: hasBody
+    isBodiedMacro: hasBody,
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
   }), jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout

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

@@ -0,0 +1,78 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { defineMessages, useIntl } from 'react-intl-next';
+import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
+import { Flex, xcss } from '@atlaskit/primitives';
+var buttonContainerStyles = css({
+  opacity: 0,
+  lineHeight: 1,
+  position: 'absolute',
+  width: 'max-content',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+  top: '-19px',
+  display: 'inline-flex',
+  justifyContent: 'flex-end',
+  color: "var(--ds-text-subtle, #44546F)"
+});
+var buttonStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)"),
+  minHeight: "var(--ds-space-300, 24px)",
+  borderRadius: "var(--ds-border-radius, 4px)",
+  paddingLeft: "var(--ds-space-150, 12px)",
+  paddingRight: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var showButtonContainerStyle = css({
+  opacity: 1
+});
+var iconStyles = xcss({
+  marginRight: 'space.075'
+});
+var i18n = defineMessages({
+  doneEditing: {
+    id: 'editor-common-extensibility-extension-lozenge-editToggle.done.editing',
+    defaultMessage: 'Done editing',
+    description: 'Text in button when on click switches back to view mode of a macro'
+  }
+});
+// Used to toggle between edit and renderer mode for bodied macros in live pages
+export var EditToggle = function EditToggle(_ref) {
+  var isNodeHovered = _ref.isNodeHovered,
+    customContainerStyles = _ref.customContainerStyles,
+    setIsNodeHovered = _ref.setIsNodeHovered;
+  var intl = useIntl();
+  return jsx("div", {
+    "data-testid": "extension-edit-toggle-container"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    css: isNodeHovered ? [buttonContainerStyles, showButtonContainerStyle] : buttonContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: customContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "extension-edit-toggle-container",
+    onMouseOver: function onMouseOver() {
+      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
+    }
+  }, jsx("span", {
+    css: buttonStyles,
+    className: "extension-edit-toggle"
+  }, jsx(Flex, {
+    as: "span",
+    xcss: iconStyles
+  }, jsx(CheckMarkIcon, {
+    label: ""
+  })), intl.formatMessage(i18n.doneEditing)));
+};

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

@@ -8,7 +8,7 @@ import { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
-import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
 import Tooltip from '@atlaskit/tooltip';
 var containerStyles = css({
   textAlign: 'left',
@@ -69,8 +69,12 @@ var buttonLabelStyles = css({
   '&.remove-nested-left-margin': {
     marginLeft: 0
   },
-  fontSize: "var(--ds-space-200, 16px)",
-  fontWeight: "var(--ds-font-weight-regular, 400)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.with-bodied-macro-live-page-styles': {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    boxShadow: "0 0 0 1px ".concat("var(--ds-border, #091E4224)")
+  }
 });
 var spacerStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
@@ -98,7 +102,7 @@ var originalLabelStyles = css({
   }
 });
 var iconStyles = css({
-  marginLeft: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-075, 6px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.hide-icon': {
     display: 'none'
@@ -119,19 +123,24 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
-    showMacroButtonUpdates = _ref.showMacroButtonUpdates;
+    showMacroButtonUpdates = _ref.showMacroButtonUpdates,
+    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView;
   var isInlineExtension = extensionName === 'inlineExtension';
   var showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
   var containerClassNames = classnames({
     bodied: isBodiedMacro
   });
+
+  // For the new live pages bodied macro experience, we don't want to hide the label by default
+  var showBodiedMacroLabel = isBodiedMacro ? !showLivePagesBodiedMacrosRendererView : false;
   var sharedLabelClassNames = classnames('extension-label', {
     nested: isNodeNested,
     inline: isInlineExtension,
     bodied: isBodiedMacro,
     'bodied-border': showDefaultBodiedStyles,
     'bodied-background': showDefaultBodiedStyles,
-    'show-label': isNodeHovered || isBodiedMacro
+    'show-label': isNodeHovered || showBodiedMacroLabel,
+    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView
   });
   var newButtonLabelClassNames = classnames({
     // For new button design, non-bodied macros should have a flush label. Inline macros don't need this since they never had the margin-left applied.
@@ -180,7 +189,7 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
         css: iconStyles,
         className: iconClassNames,
         "data-testid": "config-icon"
-      }, jsx(PreferencesIcon, {
+      }, jsx(CustomizeIcon, {
         label: ""
       })));
     }), jsx("div", {

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

@@ -5,11 +5,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsxRuntime classic
  * @jsx jsx
  */
-
+import { Fragment } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import EditorFileIcon from '@atlaskit/icon/glyph/editor/file';
 import { placeholderFallback, placeholderFallbackParams } from '../styles';
+import { EditToggle } from './EditToggle';
 import { ExtensionLabel } from './ExtensionLabel';
 export var ICON_SIZE = 24;
 var capitalizeFirstLetter = function capitalizeFirstLetter(str) {
@@ -27,10 +28,11 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     isNodeHovered = _ref.isNodeHovered,
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered,
-    isBodiedMacro = _ref.isBodiedMacro;
+    isBodiedMacro = _ref.isBodiedMacro,
+    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
-    return jsx(ExtensionLabel, {
+    return jsx(Fragment, null, jsx(ExtensionLabel, {
       text: capitalizedTitle,
       extensionName: extensionName,
       isNodeHovered: isNodeHovered,
@@ -38,8 +40,13 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       customContainerStyles: customContainerStyles,
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
-      showMacroButtonUpdates: showMacroButtonUpdates
-    });
+      showMacroButtonUpdates: showMacroButtonUpdates,
+      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+    }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
+      isNodeHovered: isNodeHovered,
+      setIsNodeHovered: setIsNodeHovered,
+      customContainerStyles: customContainerStyles
+    }));
   }
   var isBlockExtension = extensionName === 'extension';
   return (

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

@@ -51,7 +51,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         isNodeNested = _this$props.isNodeNested,
         customContainerStyles = _this$props.customContainerStyles,
         setIsNodeHovered = _this$props.setIsNodeHovered,
-        isBodiedMacro = _this$props.isBodiedMacro;
+        isBodiedMacro = _this$props.isBodiedMacro,
+        showLivePagesBodiedMacrosRendererView = _this$props.showLivePagesBodiedMacrosRendererView;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
         extensionKey = _this$props$node$attr.extensionKey;
@@ -71,7 +72,8 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         renderImage: _this.renderImage,
         customContainerStyles: customContainerStyles,
         setIsNodeHovered: setIsNodeHovered,
-        isBodiedMacro: isBodiedMacro
+        isBodiedMacro: isBodiedMacro,
+        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
       });
     });
     return _this;

package/dist/esm/extensibility/ExtensionComponent.js

@@ -201,7 +201,8 @@ export var ExtensionComponentOld = /*#__PURE__*/function (_Component) {
         pluginInjectionApi = _this$props2.pluginInjectionApi,
         getPos = _this$props2.getPos,
         eventDispatcher = _this$props2.eventDispatcher,
-        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags;
+        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags,
+        showLivePagesBodiedMacrosRendererView = _this$props2.showLivePagesBodiedMacrosRendererView;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -242,7 +243,8 @@ export var ExtensionComponentOld = /*#__PURE__*/function (_Component) {
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
-            setIsNodeHovered: this.setIsNodeHovered
+            setIsNodeHovered: this.setIsNodeHovered,
+            showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {
@@ -441,7 +443,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
         getPos = _this$props3.getPos,
         eventDispatcher = _this$props3.eventDispatcher,
         macroInteractionDesignFeatureFlags = _this$props3.macroInteractionDesignFeatureFlags,
-        extensionProvider = _this$props3.extensionProvider;
+        extensionProvider = _this$props3.extensionProvider,
+        showLivePagesBodiedMacrosRendererView = _this$props3.showLivePagesBodiedMacrosRendererView;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -482,7 +485,8 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
             isNodeSelected: selectedNode === node,
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
-            setIsNodeHovered: this.setIsNodeHovered
+            setIsNodeHovered: this.setIsNodeHovered,
+            showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
           }, extensionHandlerResult);
         case 'inlineExtension':
           return /*#__PURE__*/React.createElement(InlineExtension, {

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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 = "94.22.1";
+var packageVersion = "94.23.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

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "94.22.1";
+var packageVersion = "94.23.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -21,6 +21,7 @@ export interface Props {
     isNodeHovered?: boolean;
     isNodeNested?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 }
 declare const _default: {
     new (props: Props | Readonly<Props>): {

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

@@ -0,0 +1,13 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
+type EditToggleProps = {
+    isNodeHovered?: boolean;
+    customContainerStyles?: CSSProperties;
+    setIsNodeHovered?: (isNodeHovered: boolean) => void;
+};
+export declare const EditToggle: ({ isNodeHovered, customContainerStyles, setIsNodeHovered, }: EditToggleProps) => jsx.JSX.Element;
+export {};

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

@@ -9,6 +9,7 @@ type ExtensionLabelProps = {
     setIsNodeHovered?: (isHovered: boolean) => void;
     isBodiedMacro?: boolean;
     showMacroButtonUpdates?: boolean;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 };
-export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, setIsNodeHovered, isBodiedMacro, showMacroButtonUpdates, }: ExtensionLabelProps) => jsx.JSX.Element;
+export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, setIsNodeHovered, isBodiedMacro, showMacroButtonUpdates, showLivePagesBodiedMacrosRendererView, }: ExtensionLabelProps) => jsx.JSX.Element;
 export {};

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

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { LozengeData } from './index';
@@ -20,6 +16,7 @@ type LozengeComponentProps = {
     isNodeNested?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;
     isBodiedMacro?: boolean;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, showMacroButtonUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, isBodiedMacro, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, showMacroButtonUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, isBodiedMacro, showLivePagesBodiedMacrosRendererView, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

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

@@ -16,6 +16,7 @@ export interface Props {
     customContainerStyles?: CSSProperties;
     setIsNodeHovered?: (isHovered: boolean) => void;
     isBodiedMacro?: boolean;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 }
 export interface LozengeData {
     url: string;

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

@@ -21,6 +21,7 @@ export interface Props {
     isNodeHovered?: boolean;
     isNodeNested?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 }
 declare const _default: {
     new (props: Props | Readonly<Props>): {

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

@@ -0,0 +1,13 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { CSSProperties } from 'react';
+import { jsx } from '@emotion/react';
+type EditToggleProps = {
+    isNodeHovered?: boolean;
+    customContainerStyles?: CSSProperties;
+    setIsNodeHovered?: (isNodeHovered: boolean) => void;
+};
+export declare const EditToggle: ({ isNodeHovered, customContainerStyles, setIsNodeHovered, }: EditToggleProps) => jsx.JSX.Element;
+export {};

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

@@ -9,6 +9,7 @@ type ExtensionLabelProps = {
     setIsNodeHovered?: (isHovered: boolean) => void;
     isBodiedMacro?: boolean;
     showMacroButtonUpdates?: boolean;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 };
-export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, setIsNodeHovered, isBodiedMacro, showMacroButtonUpdates, }: ExtensionLabelProps) => jsx.JSX.Element;
+export declare const ExtensionLabel: ({ text, extensionName, isNodeHovered, customContainerStyles, isNodeNested, setIsNodeHovered, isBodiedMacro, showMacroButtonUpdates, showLivePagesBodiedMacrosRendererView, }: ExtensionLabelProps) => jsx.JSX.Element;
 export {};

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

@@ -1,7 +1,3 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import type { CSSProperties } from 'react';
 import { jsx } from '@emotion/react';
 import type { LozengeData } from './index';
@@ -20,6 +16,7 @@ type LozengeComponentProps = {
     isNodeNested?: boolean;
     setIsNodeHovered?: (isHovered: boolean) => void;
     isBodiedMacro?: boolean;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 };
-export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, showMacroButtonUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, isBodiedMacro, }: LozengeComponentProps) => jsx.JSX.Element;
+export declare const LozengeComponent: ({ lozengeData, extensionName, title, params, renderImage, showMacroInteractionDesignUpdates, showMacroButtonUpdates, customContainerStyles, isNodeHovered, isNodeNested, setIsNodeHovered, isBodiedMacro, showLivePagesBodiedMacrosRendererView, }: LozengeComponentProps) => jsx.JSX.Element;
 export {};

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

@@ -16,6 +16,7 @@ export interface Props {
     customContainerStyles?: CSSProperties;
     setIsNodeHovered?: (isHovered: boolean) => void;
     isBodiedMacro?: boolean;
+    showLivePagesBodiedMacrosRendererView?: boolean;
 }
 export interface LozengeData {
     url: string;

package/package.json

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