@atlaskit/editor-common 95.5.0 → 95.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-common
 
+## 95.6.0
+
+### Minor Changes
+
+- [#166206](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166206)
+  [`589f49d62238b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/589f49d62238b) -
+  [ux] Adds logic to change bodied macro from edit to view mode and vice versa. Also updates some
+  styling/interactions based on this new feature.
+
 ## 95.5.0
 
 ### Minor Changes

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

@@ -45,7 +45,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;
@@ -87,7 +89,8 @@ function ExtensionWithPluginState(props) {
     'with-bodied-padding-styles': hasBody && showMacroInteractionDesignUpdates
   });
   var contentClassNames = (0, _classnames2.default)('extension-content', 'block', {
-    'remove-border': showMacroInteractionDesignUpdates
+    'remove-border': showMacroInteractionDesignUpdates,
+    'hide-content': showBodiedExtensionRendererView
   });
   var customContainerStyles = {
     width: '100%'
@@ -120,7 +123,9 @@ function ExtensionWithPluginState(props) {
     customContainerStyles: customContainerStyles,
     setIsNodeHovered: setIsNodeHovered,
     isBodiedMacro: hasBody,
-    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
   }), (0, _react2.jsx)("div", {
     ref: handleRef,
     "data-layout": node.attrs.layout

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

@@ -62,6 +62,10 @@ var content = exports.content = (0, _react.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/cjs/extensibility/Extension/Lozenge/EditToggle.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EditToggle = void 0;
-var _react = require("@emotion/react");
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
+var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _primitives = require("@atlaskit/primitives");
 /**
  * @jsxRuntime classic
@@ -16,7 +18,7 @@ var _primitives = require("@atlaskit/primitives");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var buttonContainerStyles = (0, _react.css)({
+var buttonContainerStyles = (0, _react2.css)({
   opacity: 0,
   lineHeight: 1,
   position: 'absolute',
@@ -27,7 +29,7 @@ var buttonContainerStyles = (0, _react.css)({
   justifyContent: 'flex-end',
   color: "var(--ds-text-subtle, #44546F)"
 });
-var buttonStyles = (0, _react.css)({
+var buttonStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer',
@@ -36,9 +38,12 @@ var buttonStyles = (0, _react.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 = (0, _react.css)({
+var showButtonContainerStyle = (0, _react2.css)({
   opacity: 1
 });
 var iconStyles = (0, _primitives.xcss)({
@@ -49,15 +54,33 @@ var i18n = (0, _reactIntlNext.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
 var EditToggle = exports.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 = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)("div", {
+  var text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
+  var icon = showBodiedExtensionRendererView ? (0, _react2.jsx)(_edit.default, {
+    testId: "edit-icon",
+    label: ""
+  }) : (0, _react2.jsx)(_checkMark.default, {
+    testId: "check-mark-icon",
+    label: ""
+  });
+  var handleClick = (0, _react.useCallback)(function () {
+    setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
+  }, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
+  return (0, _react2.jsx)("div", {
     "data-testid": "extension-edit-toggle-container"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
@@ -74,13 +97,17 @@ var EditToggle = exports.EditToggle = function EditToggle(_ref) {
     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, {
+  }, (0, _react2.jsx)("span", {
+    "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
+  }, (0, _react2.jsx)(_primitives.Flex, {
     as: "span",
     xcss: iconStyles
-  }, (0, _react.jsx)(_checkMark.default, {
-    label: ""
-  })), intl.formatMessage(i18n.doneEditing)));
+  }, icon), text));
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExtensionLabel = void 0;
+exports.getShouldShowBodiedMacroLabel = exports.ExtensionLabel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -124,6 +124,15 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     description: 'Text in tooltip that tells user they can configure the specific macro.'
   }
 });
+var getShouldShowBodiedMacroLabel = exports.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
+};
 var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
   var text = _ref.text,
     extensionName = _ref.extensionName,
@@ -133,23 +142,23 @@ var ExtensionLabel = exports.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 = (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 || 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 = (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.

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

@@ -34,7 +34,9 @@ var LozengeComponent = exports.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 (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ExtensionLabel.ExtensionLabel, {
@@ -46,11 +48,14 @@ var LozengeComponent = exports.LozengeComponent = function LozengeComponent(_ref
       setIsNodeHovered: setIsNodeHovered,
       isBodiedMacro: isBodiedMacro,
       showMacroButtonUpdates: showMacroButtonUpdates,
-      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+      showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+      showBodiedExtensionRendererView: showBodiedExtensionRendererView
     }), showLivePagesBodiedMacrosRendererView && isBodiedMacro && (0, _react2.jsx)(_EditToggle.EditToggle, {
       isNodeHovered: isNodeHovered,
       setIsNodeHovered: setIsNodeHovered,
-      customContainerStyles: customContainerStyles
+      customContainerStyles: customContainerStyles,
+      showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+      setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
     }));
   }
   var isBlockExtension = extensionName === 'extension';

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

@@ -57,7 +57,9 @@ var ExtensionLozenge = exports.default = /*#__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;
@@ -78,7 +80,9 @@ var ExtensionLozenge = exports.default = /*#__PURE__*/function (_Component) {
         customContainerStyles: customContainerStyles,
         setIsNodeHovered: setIsNodeHovered,
         isBodiedMacro: isBodiedMacro,
-        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+        showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+        showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+        setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
       });
     });
     return _this;

package/dist/cjs/extensibility/ExtensionComponent.js

@@ -27,13 +27,28 @@ var _utils = require("../utils");
 var _Extension = _interopRequireDefault(require("./Extension/Extension"));
 var _InlineExtension = _interopRequireDefault(require("./Extension/InlineExtension"));
 var _MultiBodiedExtension = _interopRequireDefault(require("./MultiBodiedExtension"));
-var _excluded = ["extensionProvider"];
+var _excluded = ["extensionProvider", "showLivePagesBodiedMacrosRendererView", "node"];
 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 && {}.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; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @repo/internal/react/no-class-components */
 /* temporary type until FG cleaned up */
+
 /* temporary type until FG cleaned up */
+
+var isEmptyBodiedMacro = function isEmptyBodiedMacro(node) {
+  var _node$content, _firstGrandChildNode$;
+  if (node.type.name !== 'bodiedExtension') {
+    return false;
+  }
+  var firstChildNode = node === null || node === void 0 || (_node$content = node.content) === null || _node$content === void 0 ? void 0 : _node$content.firstChild;
+  var firstGrandChildNode = firstChildNode === null || firstChildNode === void 0 ? void 0 : firstChildNode.firstChild;
+
+  // If firstChildNode?.childCount > 1 means there is content along with the placeholder.
+  var isEmptyWithPlacholder = (firstGrandChildNode === null || firstGrandChildNode === void 0 || (_firstGrandChildNode$ = firstGrandChildNode.type) === null || _firstGrandChildNode$ === void 0 ? void 0 : _firstGrandChildNode$.name) === 'placeholder' && (firstChildNode === null || firstChildNode === void 0 ? void 0 : firstChildNode.childCount) === 1;
+  var isEmptyWithNoContent = !firstGrandChildNode && node.childCount === 1;
+  return isEmptyWithPlacholder || isEmptyWithNoContent;
+};
 var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ExtensionComponentOld, _Component);
   var _super = _createSuper(ExtensionComponentOld);
@@ -55,6 +70,11 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
         isNodeHovered: isHovered
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setShowBodiedExtensionRendererView", function (showRendererView) {
+      _this.setState({
+        showBodiedExtensionRendererView: showRendererView
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setStateFromPromise", function (stateKey, promise) {
       promise && promise.then(function (p) {
         if (!_this.mounted) {
@@ -115,24 +135,32 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
       var _this$props = _this.props,
         extensionHandlers = _this$props.extensionHandlers,
         editorView = _this$props.editorView;
+      var showBodiedExtensionRendererView = _this.state.showBodiedExtensionRendererView; // State will only be true if the gate is on and meets requirements
       var _pmNode$attrs = pmNode.attrs,
         extensionType = _pmNode$attrs.extensionType,
         extensionKey = _pmNode$attrs.extensionKey,
         parameters = _pmNode$attrs.parameters,
         text = _pmNode$attrs.text;
       var isBodiedExtension = pmNode.type.name === 'bodiedExtension';
-      if (isBodiedExtension) {
+      if (isBodiedExtension && !showBodiedExtensionRendererView) {
         return;
       }
       var fragmentLocalId = pmNode === null || pmNode === void 0 || (_pmNode$marks = pmNode.marks) === null || _pmNode$marks === void 0 || (_pmNode$marks = _pmNode$marks.find(function (m) {
         return m.type.name === 'fragment';
       })) === null || _pmNode$marks === void 0 || (_pmNode$marks = _pmNode$marks.attrs) === null || _pmNode$marks === void 0 ? void 0 : _pmNode$marks.localId;
+      var nodeContent = [];
+      if (isBodiedExtension) {
+        var _pmNode$content;
+        pmNode === null || pmNode === void 0 || (_pmNode$content = pmNode.content) === null || _pmNode$content === void 0 || _pmNode$content.forEach(function (childNode) {
+          nodeContent.push(childNode);
+        });
+      }
       var node = {
         type: pmNode.type.name,
         extensionType: extensionType,
         extensionKey: extensionKey,
         parameters: parameters,
-        content: text,
+        content: isBodiedExtension ? nodeContent.length ? nodeContent : text : text,
         localId: pmNode.attrs.localId,
         fragmentLocalId: fragmentLocalId
       };
@@ -167,6 +195,15 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.mounted = true;
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        showLivePagesBodiedMacrosRendererView = _this$props2.showLivePagesBodiedMacrosRendererView;
+      // 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
+        });
+      }
     }
   }, {
     key: "componentDidMount",
@@ -198,17 +235,17 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
     key: "render",
     value: function render() {
       var _this$state$_privateP;
-      var _this$props2 = this.props,
-        node = _this$props2.node,
-        handleContentDOMRef = _this$props2.handleContentDOMRef,
-        editorView = _this$props2.editorView,
-        references = _this$props2.references,
-        editorAppearance = _this$props2.editorAppearance,
-        pluginInjectionApi = _this$props2.pluginInjectionApi,
-        getPos = _this$props2.getPos,
-        eventDispatcher = _this$props2.eventDispatcher,
-        macroInteractionDesignFeatureFlags = _this$props2.macroInteractionDesignFeatureFlags,
-        showLivePagesBodiedMacrosRendererView = _this$props2.showLivePagesBodiedMacrosRendererView;
+      var _this$props3 = this.props,
+        node = _this$props3.node,
+        handleContentDOMRef = _this$props3.handleContentDOMRef,
+        editorView = _this$props3.editorView,
+        references = _this$props3.references,
+        editorAppearance = _this$props3.editorAppearance,
+        pluginInjectionApi = _this$props3.pluginInjectionApi,
+        getPos = _this$props3.getPos,
+        eventDispatcher = _this$props3.eventDispatcher,
+        macroInteractionDesignFeatureFlags = _this$props3.macroInteractionDesignFeatureFlags,
+        showLivePagesBodiedMacrosRendererView = _this$props3.showLivePagesBodiedMacrosRendererView;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -250,7 +287,9 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
             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.default.createElement(_InlineExtension.default, {
@@ -287,11 +326,17 @@ var ExtensionComponentOld = exports.ExtensionComponentOld = /*#__PURE__*/functio
 }(_react.Component);
 var ExtensionComponentNew = exports.ExtensionComponentNew = function ExtensionComponentNew(props) {
   var extensionProviderResolver = props.extensionProvider,
+    showLivePagesBodiedMacrosRendererView = props.showLivePagesBodiedMacrosRendererView,
+    node = props.node,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     extensionProvider = _useState2[0],
     setExtensionProvider = _useState2[1];
+  var _useState3 = (0, _react.useState)(!!(showLivePagesBodiedMacrosRendererView && !isEmptyBodiedMacro(node))),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    showBodiedExtensionRendererView = _useState4[0],
+    setShowBodiedExtensionRendererView = _useState4[1];
   var mountedRef = (0, _react.useRef)(true);
   (0, _react.useLayoutEffect)(function () {
     mountedRef.current = true;
@@ -307,7 +352,11 @@ var ExtensionComponentNew = exports.ExtensionComponentNew = function ExtensionCo
     });
   }, [extensionProviderResolver]);
   return /*#__PURE__*/_react.default.createElement(ExtensionComponentInner, (0, _extends2.default)({}, restProps, {
-    extensionProvider: extensionProvider
+    extensionProvider: extensionProvider,
+    node: node,
+    showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
   }));
 };
 var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
@@ -381,25 +430,33 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
       var _pmNode$marks2;
       var _this2$props = _this2.props,
         extensionHandlers = _this2$props.extensionHandlers,
-        editorView = _this2$props.editorView;
+        editorView = _this2$props.editorView,
+        showBodiedExtensionRendererView = _this2$props.showBodiedExtensionRendererView;
       var _pmNode$attrs2 = pmNode.attrs,
         extensionType = _pmNode$attrs2.extensionType,
         extensionKey = _pmNode$attrs2.extensionKey,
         parameters = _pmNode$attrs2.parameters,
         text = _pmNode$attrs2.text;
       var isBodiedExtension = pmNode.type.name === 'bodiedExtension';
-      if (isBodiedExtension) {
+      if (isBodiedExtension && !showBodiedExtensionRendererView) {
         return;
       }
       var fragmentLocalId = pmNode === null || pmNode === void 0 || (_pmNode$marks2 = pmNode.marks) === null || _pmNode$marks2 === void 0 || (_pmNode$marks2 = _pmNode$marks2.find(function (m) {
         return m.type.name === 'fragment';
       })) === null || _pmNode$marks2 === void 0 || (_pmNode$marks2 = _pmNode$marks2.attrs) === null || _pmNode$marks2 === void 0 ? void 0 : _pmNode$marks2.localId;
+      var nodeContent = [];
+      if (isBodiedExtension) {
+        var _pmNode$content2;
+        pmNode === null || pmNode === void 0 || (_pmNode$content2 = pmNode.content) === null || _pmNode$content2 === void 0 || _pmNode$content2.forEach(function (childNode) {
+          nodeContent.push(childNode);
+        });
+      }
       var node = {
         type: pmNode.type.name,
         extensionType: extensionType,
         extensionKey: extensionKey,
         parameters: parameters,
-        content: text,
+        content: isBodiedExtension ? nodeContent.length ? nodeContent : text : text,
         localId: pmNode.attrs.localId,
         fragmentLocalId: fragmentLocalId
       };
@@ -439,18 +496,20 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
     key: "render",
     value: function render() {
       var _this$state$_privateP2;
-      var _this$props3 = this.props,
-        node = _this$props3.node,
-        handleContentDOMRef = _this$props3.handleContentDOMRef,
-        editorView = _this$props3.editorView,
-        references = _this$props3.references,
-        editorAppearance = _this$props3.editorAppearance,
-        pluginInjectionApi = _this$props3.pluginInjectionApi,
-        getPos = _this$props3.getPos,
-        eventDispatcher = _this$props3.eventDispatcher,
-        macroInteractionDesignFeatureFlags = _this$props3.macroInteractionDesignFeatureFlags,
-        extensionProvider = _this$props3.extensionProvider,
-        showLivePagesBodiedMacrosRendererView = _this$props3.showLivePagesBodiedMacrosRendererView;
+      var _this$props4 = this.props,
+        node = _this$props4.node,
+        handleContentDOMRef = _this$props4.handleContentDOMRef,
+        editorView = _this$props4.editorView,
+        references = _this$props4.references,
+        editorAppearance = _this$props4.editorAppearance,
+        pluginInjectionApi = _this$props4.pluginInjectionApi,
+        getPos = _this$props4.getPos,
+        eventDispatcher = _this$props4.eventDispatcher,
+        macroInteractionDesignFeatureFlags = _this$props4.macroInteractionDesignFeatureFlags,
+        extensionProvider = _this$props4.extensionProvider,
+        showLivePagesBodiedMacrosRendererView = _this$props4.showLivePagesBodiedMacrosRendererView,
+        showBodiedExtensionRendererView = _this$props4.showBodiedExtensionRendererView,
+        setShowBodiedExtensionRendererView = _this$props4.setShowBodiedExtensionRendererView;
       var selection = editorView.state.selection;
       var selectedNode = selection instanceof _state.NodeSelection && selection.node;
       var position = typeof getPos === 'function' && getPos();
@@ -492,7 +551,9 @@ var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
             isNodeHovered: this.state.isNodeHovered,
             isNodeNested: isNodeNested,
             setIsNodeHovered: this.setIsNodeHovered,
-            showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView
+            showLivePagesBodiedMacrosRendererView: showLivePagesBodiedMacrosRendererView,
+            showBodiedExtensionRendererView: showBodiedExtensionRendererView,
+            setShowBodiedExtensionRendererView: setShowBodiedExtensionRendererView
           }, 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 = "95.5.0";
+var packageVersion = "95.6.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 = "95.5.0";
+var packageVersion = "95.6.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -32,7 +32,9 @@ function ExtensionWithPluginState(props) {
     isNodeHovered,
     isNodeNested,
     setIsNodeHovered,
-    showLivePagesBodiedMacrosRendererView
+    showLivePagesBodiedMacrosRendererView,
+    showBodiedExtensionRendererView,
+    setShowBodiedExtensionRendererView
   } = props;
   const {
     showMacroInteractionDesignUpdates,
@@ -79,7 +81,8 @@ function ExtensionWithPluginState(props) {
     'with-bodied-padding-styles': hasBody && showMacroInteractionDesignUpdates
   });
   const contentClassNames = classnames('extension-content', 'block', {
-    'remove-border': showMacroInteractionDesignUpdates
+    'remove-border': showMacroInteractionDesignUpdates,
+    'hide-content': showBodiedExtensionRendererView
   });
   let customContainerStyles = {
     width: '100%'
@@ -118,7 +121,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/es2019/extensibility/Extension/Extension/styles.js

@@ -55,6 +55,10 @@ export const 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'
   }
 });