@atlaskit/editor-common 95.4.0 → 95.6.0

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

@@ -3,10 +3,13 @@
  * @jsx jsx
  */
 
+import { useCallback } from 'react';
+
 // 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 EditIcon from '@atlaskit/icon/core/edit';
 import { Flex, xcss } from '@atlaskit/primitives';
 const buttonContainerStyles = css({
   opacity: 0,
@@ -28,7 +31,10 @@ const buttonStyles = css({
   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)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  }
 });
 const showButtonContainerStyle = css({
   opacity: 1
@@ -41,15 +47,33 @@ const i18n = defineMessages({
     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'
+  },
+  makeEdits: {
+    id: 'editor-common-extensibility-extension-lozenge-editToggle.make.edits',
+    defaultMessage: 'Make edits',
+    description: 'Text in button when on click switches back to edit mode of a macro'
   }
 });
 // Used to toggle between edit and renderer mode for bodied macros in live pages
 export const EditToggle = ({
   isNodeHovered,
   customContainerStyles,
-  setIsNodeHovered
+  setIsNodeHovered,
+  showBodiedExtensionRendererView,
+  setShowBodiedExtensionRendererView
 }) => {
   const intl = useIntl();
+  const text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
+  const icon = showBodiedExtensionRendererView ? jsx(EditIcon, {
+    testId: "edit-icon",
+    label: ""
+  }) : jsx(CheckMarkIcon, {
+    testId: "check-mark-icon",
+    label: ""
+  });
+  const handleClick = useCallback(() => {
+    setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 ? void 0 : setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
+  }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
   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
@@ -64,12 +88,16 @@ export const EditToggle = ({
     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"
+    "data-testid": "edit-toggle"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    css: buttonStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "extension-edit-toggle",
+    onClick: handleClick
   }, jsx(Flex, {
     as: "span",
     xcss: iconStyles
-  }, jsx(CheckMarkIcon, {
-    label: ""
-  })), intl.formatMessage(i18n.doneEditing)));
+  }, icon), text));
 };

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

@@ -115,6 +115,15 @@ const i18n = defineMessages({
     description: 'Text in tooltip that tells user they can configure the specific macro.'
   }
 });
+export const getShouldShowBodiedMacroLabel = (isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView) => {
+  if (!isBodiedMacro) {
+    return isNodeHovered;
+  } // Bodied macros show the label by default
+  if (!showLivePagesBodiedMacrosRendererView) {
+    return true;
+  } // Keep showing labels as usual for default experience for bodied macros
+  return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
+};
 export const ExtensionLabel = ({
   text,
   extensionName,
@@ -124,24 +133,24 @@ export const ExtensionLabel = ({
   setIsNodeHovered,
   isBodiedMacro,
   showMacroButtonUpdates,
-  showLivePagesBodiedMacrosRendererView
+  showLivePagesBodiedMacrosRendererView,
+  showBodiedExtensionRendererView
 }) => {
   const isInlineExtension = extensionName === 'inlineExtension';
   const showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
+  const shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView);
   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 || showBodiedMacroLabel,
-    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView
+    'show-label': shouldShowBodiedMacroLabel,
+    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
+    'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView // Need this separate class since we don't ever want to show the label during view mode
   });
   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.

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

@@ -26,7 +26,9 @@ export const LozengeComponent = ({
   isNodeNested,
   setIsNodeHovered,
   isBodiedMacro,
-  showLivePagesBodiedMacrosRendererView
+  showLivePagesBodiedMacrosRendererView,
+  showBodiedExtensionRendererView,
+  setShowBodiedExtensionRendererView
 }) => {
   const capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
@@ -39,11 +41,14 @@ export const LozengeComponent = ({
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
       showMacroButtonUpdates: showMacroButtonUpdates,
-      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+      showBodiedExtensionRendererView: showBodiedExtensionRendererView
     }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
       isNodeHovered: isNodeHovered,
       setIsNodeHovered: setIsNodeHovered,
-      customContainerStyles: customContainerStyles
+      customContainerStyles: customContainerStyles,
+      showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+      setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
     }));
   }
   const isBlockExtension = extensionName === 'extension';

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

@@ -39,7 +39,9 @@ export default class ExtensionLozenge extends Component {
         customContainerStyles,
         setIsNodeHovered,
         isBodiedMacro,
-        showLivePagesBodiedMacrosRendererView
+        showLivePagesBodiedMacrosRendererView,
+        showBodiedExtensionRendererView,
+        setShowBodiedExtensionRendererView
       } = this.props;
       const {
         parameters,
@@ -64,7 +66,9 @@ export default class ExtensionLozenge extends Component {
         customContainerStyles: customContainerStyles,
         setIsNodeHovered: setIsNodeHovered,
         isBodiedMacro: isBodiedMacro,
-        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+        showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+        setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
       });
     });
   }

package/dist/es2019/extensibility/ExtensionComponent.js

@@ -15,6 +15,19 @@ import MultiBodiedExtension from './MultiBodiedExtension';
 
 /* temporary type until FG cleaned up */
 
+const isEmptyBodiedMacro = node => {
+  var _node$content, _firstGrandChildNode$;
+  if (node.type.name !== 'bodiedExtension') {
+    return false;
+  }
+  const firstChildNode = node === null || node === void 0 ? void 0 : (_node$content = node.content) === null || _node$content === void 0 ? void 0 : _node$content.firstChild;
+  const firstGrandChildNode = firstChildNode === null || firstChildNode === void 0 ? void 0 : firstChildNode.firstChild;
+
+  // If firstChildNode?.childCount > 1 means there is content along with the placeholder.
+  const isEmptyWithPlacholder = (firstGrandChildNode === null || firstGrandChildNode === void 0 ? void 0 : (_firstGrandChildNode$ = firstGrandChildNode.type) === null || _firstGrandChildNode$ === void 0 ? void 0 : _firstGrandChildNode$.name) === 'placeholder' && (firstChildNode === null || firstChildNode === void 0 ? void 0 : firstChildNode.childCount) === 1;
+  const isEmptyWithNoContent = !firstGrandChildNode && node.childCount === 1;
+  return isEmptyWithPlacholder || isEmptyWithNoContent;
+};
 export class ExtensionComponentOld extends Component {
   constructor(...args) {
     super(...args);
@@ -29,6 +42,11 @@ export class ExtensionComponentOld extends Component {
         isNodeHovered: isHovered
       });
     });
+    _defineProperty(this, "setShowBodiedExtensionRendererView", showRendererView => {
+      this.setState({
+        showBodiedExtensionRendererView: showRendererView
+      });
+    });
     _defineProperty(this, "setStateFromPromise", (stateKey, promise) => {
       promise && promise.then(p => {
         if (!this.mounted) {
@@ -78,6 +96,9 @@ export class ExtensionComponentOld extends Component {
         extensionHandlers,
         editorView
       } = this.props;
+      const {
+        showBodiedExtensionRendererView
+      } = this.state; // State will only be true if the gate is on and meets requirements
       const {
         extensionType,
         extensionKey,
@@ -85,16 +106,23 @@ export class ExtensionComponentOld extends Component {
         text
       } = pmNode.attrs;
       const isBodiedExtension = pmNode.type.name === 'bodiedExtension';
-      if (isBodiedExtension) {
+      if (isBodiedExtension && !showBodiedExtensionRendererView) {
         return;
       }
       const fragmentLocalId = pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$marks = pmNode.marks) === null || _pmNode$marks === void 0 ? void 0 : (_pmNode$marks$find = _pmNode$marks.find(m => m.type.name === 'fragment')) === null || _pmNode$marks$find === void 0 ? void 0 : (_pmNode$marks$find$at = _pmNode$marks$find.attrs) === null || _pmNode$marks$find$at === void 0 ? void 0 : _pmNode$marks$find$at.localId;
+      const nodeContent = [];
+      if (isBodiedExtension) {
+        var _pmNode$content;
+        pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$content = pmNode.content) === null || _pmNode$content === void 0 ? void 0 : _pmNode$content.forEach(childNode => {
+          nodeContent.push(childNode);
+        });
+      }
       const node = {
         type: pmNode.type.name,
         extensionType,
         extensionKey,
         parameters,
-        content: text,
+        content: isBodiedExtension ? nodeContent.length ? nodeContent : text : text,
         localId: pmNode.attrs.localId,
         fragmentLocalId
       };
@@ -126,6 +154,16 @@ export class ExtensionComponentOld extends Component {
   }
   UNSAFE_componentWillMount() {
     this.mounted = true;
+    const {
+      node,
+      showLivePagesBodiedMacrosRendererView
+    } = this.props;
+    // We only care about this empty state on first page load or insertion to determine the view
+    if (showLivePagesBodiedMacrosRendererView && !isEmptyBodiedMacro(node)) {
+      this.setState({
+        showBodiedExtensionRendererView: true
+      });
+    }
   }
   componentDidMount() {
     const {
@@ -206,7 +244,9 @@ export class ExtensionComponentOld extends Component {
           isNodeHovered: this.state.isNodeHovered,
           isNodeNested: isNodeNested,
           setIsNodeHovered: this.setIsNodeHovered,
-          showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+          showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+          showBodiedExtensionRendererView: this.state.showBodiedExtensionRendererView,
+          setShowBodiedExtensionRendererView: this.setShowBodiedExtensionRendererView
         }, extensionHandlerResult);
       case 'inlineExtension':
         return /*#__PURE__*/React.createElement(InlineExtension, {
@@ -242,9 +282,12 @@ export class ExtensionComponentOld extends Component {
 export const ExtensionComponentNew = props => {
   const {
     extensionProvider: extensionProviderResolver,
+    showLivePagesBodiedMacrosRendererView,
+    node,
     ...restProps
   } = props;
   const [extensionProvider, setExtensionProvider] = useState(undefined);
+  const [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView] = useState(!!(showLivePagesBodiedMacrosRendererView && !isEmptyBodiedMacro(node)));
   const mountedRef = useRef(true);
   useLayoutEffect(() => {
     mountedRef.current = true;
@@ -260,7 +303,11 @@ export const ExtensionComponentNew = props => {
     });
   }, [extensionProviderResolver]);
   return /*#__PURE__*/React.createElement(ExtensionComponentInner, _extends({}, restProps, {
-    extensionProvider: extensionProvider
+    extensionProvider: extensionProvider,
+    node: node,
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
   }));
 };
 class ExtensionComponentInner extends Component {
@@ -313,7 +360,8 @@ class ExtensionComponentInner extends Component {
       var _pmNode$marks2, _pmNode$marks2$find, _pmNode$marks2$find$a;
       const {
         extensionHandlers,
-        editorView
+        editorView,
+        showBodiedExtensionRendererView
       } = this.props;
       const {
         extensionType,
@@ -322,16 +370,23 @@ class ExtensionComponentInner extends Component {
         text
       } = pmNode.attrs;
       const isBodiedExtension = pmNode.type.name === 'bodiedExtension';
-      if (isBodiedExtension) {
+      if (isBodiedExtension && !showBodiedExtensionRendererView) {
         return;
       }
       const fragmentLocalId = pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$marks2 = pmNode.marks) === null || _pmNode$marks2 === void 0 ? void 0 : (_pmNode$marks2$find = _pmNode$marks2.find(m => m.type.name === 'fragment')) === null || _pmNode$marks2$find === void 0 ? void 0 : (_pmNode$marks2$find$a = _pmNode$marks2$find.attrs) === null || _pmNode$marks2$find$a === void 0 ? void 0 : _pmNode$marks2$find$a.localId;
+      const nodeContent = [];
+      if (isBodiedExtension) {
+        var _pmNode$content2;
+        pmNode === null || pmNode === void 0 ? void 0 : (_pmNode$content2 = pmNode.content) === null || _pmNode$content2 === void 0 ? void 0 : _pmNode$content2.forEach(childNode => {
+          nodeContent.push(childNode);
+        });
+      }
       const node = {
         type: pmNode.type.name,
         extensionType,
         extensionKey,
         parameters,
-        content: text,
+        content: isBodiedExtension ? nodeContent.length ? nodeContent : text : text,
         localId: pmNode.attrs.localId,
         fragmentLocalId
       };
@@ -377,7 +432,9 @@ class ExtensionComponentInner extends Component {
       eventDispatcher,
       macroInteractionDesignFeatureFlags,
       extensionProvider,
-      showLivePagesBodiedMacrosRendererView
+      showLivePagesBodiedMacrosRendererView,
+      showBodiedExtensionRendererView,
+      setShowBodiedExtensionRendererView
     } = this.props;
     const {
       selection
@@ -422,7 +479,9 @@ class ExtensionComponentInner extends Component {
           isNodeHovered: this.state.isNodeHovered,
           isNodeNested: isNodeNested,
           setIsNodeHovered: this.setIsNodeHovered,
-          showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+          showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+          showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+          setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
         }, 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 = "95.4.0";
+const packageVersion = "95.6.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 = "95.4.0";
+const packageVersion = "95.6.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/analytics/types/enums.js

@@ -269,6 +269,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["ACTION"] = "action";
   ACTION_SUBJECT_ID["AI_DEFINITIONS_DEFINE_BUTTON"] = "aiDefinitionsDefineButton";
   ACTION_SUBJECT_ID["AI_DEFINITIONS_AUTO_HIGHLIGHT"] = "aiDefinitionsAutoHighlight";
+  ACTION_SUBJECT_ID["AI_PANELS_BODIED_EXTENSION"] = "aiPanelsBodiedExtension";
   ACTION_SUBJECT_ID["ALL"] = "all";
   ACTION_SUBJECT_ID["ALT_TEXT"] = "altText";
   ACTION_SUBJECT_ID["ANNOTATE_BUTTON"] = "annotateButton";

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

@@ -37,7 +37,9 @@ function ExtensionWithPluginState(props) {
     isNodeHovered = props.isNodeHovered,
     isNodeNested = props.isNodeNested,
     setIsNodeHovered = props.setIsNodeHovered,
-    showLivePagesBodiedMacrosRendererView = props.showLivePagesBodiedMacrosRendererView;
+    showLivePagesBodiedMacrosRendererView = props.showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView = props.showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView = props.setShowBodiedExtensionRendererView;
   var _ref = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates,
     showMacroButtonUpdates = _ref.showMacroButtonUpdates;
@@ -79,7 +81,8 @@ function ExtensionWithPluginState(props) {
     'with-bodied-padding-styles': hasBody && showMacroInteractionDesignUpdates
   });
   var contentClassNames = classnames('extension-content', 'block', {
-    'remove-border': showMacroInteractionDesignUpdates
+    'remove-border': showMacroInteractionDesignUpdates,
+    'hide-content': showBodiedExtensionRendererView
   });
   var customContainerStyles = {
     width: '100%'
@@ -112,7 +115,9 @@ function ExtensionWithPluginState(props) {
     customContainerStyles: customContainerStyles,
     setIsNodeHovered: setIsNodeHovered,
     isBodiedMacro: hasBody,
-    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
   }), jsx("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout

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

@@ -55,6 +55,10 @@ export var content = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.remove-border': {
     border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.hide-content': {
+    display: 'none'
   }
 });
 

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

@@ -3,10 +3,13 @@
  * @jsx jsx
  */
 
+import { useCallback } from 'react';
+
 // 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 EditIcon from '@atlaskit/icon/core/edit';
 import { Flex, xcss } from '@atlaskit/primitives';
 var buttonContainerStyles = css({
   opacity: 0,
@@ -28,7 +31,10 @@ var buttonStyles = css({
   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)"
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+  }
 });
 var showButtonContainerStyle = css({
   opacity: 1
@@ -41,14 +47,32 @@ var i18n = defineMessages({
     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'
+  },
+  makeEdits: {
+    id: 'editor-common-extensibility-extension-lozenge-editToggle.make.edits',
+    defaultMessage: 'Make edits',
+    description: 'Text in button when on click switches back to edit 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;
+    setIsNodeHovered = _ref.setIsNodeHovered,
+    showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView;
   var intl = useIntl();
+  var text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
+  var icon = showBodiedExtensionRendererView ? jsx(EditIcon, {
+    testId: "edit-icon",
+    label: ""
+  }) : jsx(CheckMarkIcon, {
+    testId: "check-mark-icon",
+    label: ""
+  });
+  var handleClick = useCallback(function () {
+    setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
+  }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
   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
@@ -67,12 +91,16 @@ export var EditToggle = function EditToggle(_ref) {
       return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
     }
   }, jsx("span", {
-    css: buttonStyles,
-    className: "extension-edit-toggle"
+    "data-testid": "edit-toggle"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    css: buttonStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: "extension-edit-toggle",
+    onClick: handleClick
   }, jsx(Flex, {
     as: "span",
     xcss: iconStyles
-  }, jsx(CheckMarkIcon, {
-    label: ""
-  })), intl.formatMessage(i18n.doneEditing)));
+  }, icon), text));
 };

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

@@ -115,6 +115,15 @@ var i18n = defineMessages({
     description: 'Text in tooltip that tells user they can configure the specific macro.'
   }
 });
+export var getShouldShowBodiedMacroLabel = function getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView) {
+  if (!isBodiedMacro) {
+    return isNodeHovered;
+  } // Bodied macros show the label by default
+  if (!showLivePagesBodiedMacrosRendererView) {
+    return true;
+  } // Keep showing labels as usual for default experience for bodied macros
+  return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
+};
 export var ExtensionLabel = function ExtensionLabel(_ref) {
   var text = _ref.text,
     extensionName = _ref.extensionName,
@@ -124,23 +133,23 @@ export var ExtensionLabel = function ExtensionLabel(_ref) {
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
     showMacroButtonUpdates = _ref.showMacroButtonUpdates,
-    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView;
+    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView;
   var isInlineExtension = extensionName === 'inlineExtension';
   var showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
+  var shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView);
   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 || showBodiedMacroLabel,
-    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView
+    'show-label': shouldShowBodiedMacroLabel,
+    'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
+    'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView // Need this separate class since we don't ever want to show the label during view mode
   });
   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.

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

@@ -29,7 +29,9 @@ export var LozengeComponent = function LozengeComponent(_ref) {
     isNodeNested = _ref.isNodeNested,
     setIsNodeHovered = _ref.setIsNodeHovered,
     isBodiedMacro = _ref.isBodiedMacro,
-    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView;
+    showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView;
   var capitalizedTitle = capitalizeFirstLetter(title);
   if (showMacroInteractionDesignUpdates) {
     return jsx(Fragment, null, jsx(ExtensionLabel, {
@@ -41,11 +43,14 @@ export var LozengeComponent = function LozengeComponent(_ref) {
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
       showMacroButtonUpdates: showMacroButtonUpdates,
-      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+      showBodiedExtensionRendererView: showBodiedExtensionRendererView
     }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && jsx(EditToggle, {
       isNodeHovered: isNodeHovered,
       setIsNodeHovered: setIsNodeHovered,
-      customContainerStyles: customContainerStyles
+      customContainerStyles: customContainerStyles,
+      showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+      setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
     }));
   }
   var isBlockExtension = extensionName === 'extension';

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

@@ -52,7 +52,9 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         customContainerStyles = _this$props.customContainerStyles,
         setIsNodeHovered = _this$props.setIsNodeHovered,
         isBodiedMacro = _this$props.isBodiedMacro,
-        showLivePagesBodiedMacrosRendererView = _this$props.showLivePagesBodiedMacrosRendererView;
+        showLivePagesBodiedMacrosRendererView = _this$props.showLivePagesBodiedMacrosRendererView,
+        showBodiedExtensionRendererView = _this$props.showBodiedExtensionRendererView,
+        setShowBodiedExtensionRendererView = _this$props.setShowBodiedExtensionRendererView;
       var _this$props$node$attr = _this.props.node.attrs,
         parameters = _this$props$node$attr.parameters,
         extensionKey = _this$props$node$attr.extensionKey;
@@ -73,7 +75,9 @@ var ExtensionLozenge = /*#__PURE__*/function (_Component) {
         customContainerStyles: customContainerStyles,
         setIsNodeHovered: setIsNodeHovered,
         isBodiedMacro: isBodiedMacro,
-        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+        showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+        setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
       });
     });
     return _this;