@atlaskit/renderer 126.2.2 → 126.2.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 126.2.4
+
+### Patch Changes
+
+- [`16e318bcceb16`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/16e318bcceb16) -
+  [ux] EDITOR-4603 - Inline Bodied Extension: Can not create inline comments on merged text nodes
+
+## 126.2.3
+
+### Patch Changes
+
+- [`dac15aa628811`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dac15aa628811) -
+  [ux] fix wrapped media/embed link is displayed out of border in synced block
+- Updated dependencies
+
 ## 126.2.2
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -29,7 +29,7 @@ var _rendererNode = require("./renderer-node");
 var _renderTextSegments = require("./utils/render-text-segments");
 var _segmentText = require("./utils/segment-text");
 var _getStandaloneBackgroundColorMarks = require("./utils/getStandaloneBackgroundColorMarks");
-var _mergeInlinedExtension = require("./utils/merge-inlined-extension");
+var _markBlockAsInline = require("./utils/markBlockAsInline");
 var _excluded = ["key"];
 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; }
@@ -65,6 +65,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "surroundTextNodesWithTextWrapper", false);
     (0, _defineProperty2.default)(this, "allowAnnotations", false);
     (0, _defineProperty2.default)(this, "standaloneBackgroundColorMarks", []);
+    (0, _defineProperty2.default)(this, "inlinePositions", new Set());
     (0, _defineProperty2.default)(this, "serializeFragmentChild", function (node, _ref) {
       var index = _ref.index,
         parentInfo = _ref.parentInfo;
@@ -642,6 +643,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var startPos = this.startPos + path.length;
       return _objectSpread({
+        asInline: this.inlinePositions.has(startPos) ? 'on' : undefined,
         text: node.text,
         providers: this.providers,
         eventHandlers: this.eventHandlers,
@@ -768,14 +770,20 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
   }, {
     key: "getChildNodes",
     value: function getChildNodes(fragment) {
+      var _this8 = this;
       var children = [];
       fragment.forEach(function (node) {
         children.push(node);
       });
       children = (0, _nodes.mergeTextNodes)(children);
       if (!!this.shouldDisplayExtensionAsInline && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
-        children = (0, _mergeInlinedExtension.mergeInlinedExtension)({
+        (0, _markBlockAsInline.markBlockAsInline)({
           nodes: children,
+          onMark: function onMark(_ref5) {
+            var pos = _ref5.pos;
+            _this8.inlinePositions.add(pos);
+          },
+          parentPos: this.startPos,
           shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
         });
       }
@@ -792,9 +800,9 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
   }, {
     key: "buildMarkStructure",
     value: function buildMarkStructure(content) {
-      var _this8 = this;
+      var _this9 = this;
       return mergeMarks(content.map(function (node) {
-        var nodeMarks = _this8.getMarks(node);
+        var nodeMarks = _this9.getMarks(node);
         if (nodeMarks.length === 0) {
           return node;
         }

package/dist/cjs/react/nodes/emoji.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.EmojiItemComponent = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -96,7 +96,7 @@ var EmojiNode = /*#__PURE__*/function (_PureComponent) {
 (0, _defineProperty2.default)(EmojiNode, "defaultProps", {
   showTooltip: true
 });
-function EmojiItem(props) {
+var EmojiItemComponent = exports.EmojiItemComponent = function EmojiItemComponent(props) {
   var id = props.id,
     providers = props.providers,
     shortName = props.shortName,
@@ -128,9 +128,5 @@ function EmojiItem(props) {
     fitToHeight: fitToHeight,
     resourceConfig: resourceConfig
   });
-}
-
-// Working around an issue with pre existing tests using react-test-renderer
-// https://github.com/facebook/react/issues/17301#issuecomment-557765213
-EmojiItem.defaultProps = {};
-var _default = exports.default = /*#__PURE__*/(0, _react2.memo)(EmojiItem);
+};
+var _default = exports.default = /*#__PURE__*/(0, _react2.memo)(EmojiItemComponent);

package/dist/cjs/react/nodes/heading.js

@@ -57,7 +57,8 @@ function Heading(props) {
     allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
     marks = props.marks,
     invisible = props.invisible,
-    localId = props.localId;
+    localId = props.localId,
+    asInline = props.asInline;
   var HX = "h".concat(props.level);
   var mouseEntered = _react.default.useRef(false);
   var showAnchorLink = !!props.showAnchorLink;
@@ -77,6 +78,7 @@ function Heading(props) {
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/_react.default.createElement(WrappedHeadingAnchor, {
     level: props.level,

package/dist/cjs/react/nodes/paragraph.js

@@ -11,7 +11,8 @@ var _inline = _interopRequireDefault(require("./inline"));
 function Paragraph(_ref) {
   var children = _ref.children,
     dataAttributes = _ref.dataAttributes,
-    localId = _ref.localId;
+    localId = _ref.localId,
+    asInline = _ref.asInline;
   return (
     /*#__PURE__*/
     // ignore the eslint warning Text primitive does not support dataAttributes
@@ -19,7 +20,8 @@ function Paragraph(_ref) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/use-primitives-text
     _react.default.createElement("p", (0, _extends2.default)({}, dataAttributes, {
-      "data-local-id": localId
+      "data-local-id": localId,
+      "data-as-inline": asInline
     }), /*#__PURE__*/_react.default.createElement(_inline.default, null, children))
   );
 }

package/dist/cjs/react/utils/{merge-inlined-extension.js → markBlockAsInline.js}

@@ -1,34 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mergeInlinedExtension = mergeInlinedExtension;
+exports.markBlockAsInline = markBlockAsInline;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-/**
- * Merges extensions (displayed as inline) with adjacent textblocks
- *
- * Input:
- * [
- *   { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
- *   { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *   { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
- * ]
- *
- * Output:
- * [
- *   { type: 'paragraph', content: [
- *     { type: 'text', text: 'Hello' },
- *     { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *     { type: 'text', text: '!' }
- *   ] },
- * ]
- */
-function mergeInlinedExtension(_ref) {
+function markBlockAsInline(_ref) {
   var nodes = _ref.nodes,
+    onMark = _ref.onMark,
+    parentPos = _ref.parentPos,
     shouldDisplayExtensionAsInline = _ref.shouldDisplayExtensionAsInline;
+  if (!nodes || nodes.length === 0 || nodes[0].isInline) {
+    return;
+  }
   function isInlineBodiedExtension(node) {
     var _node$attrs, _node$attrs2, _node$attrs3, _node$attrs4;
     return Boolean((node === null || node === void 0 ? void 0 : node.type.name) === 'bodiedExtension' && shouldDisplayExtensionAsInline({
@@ -41,52 +29,40 @@ function mergeInlinedExtension(_ref) {
     }));
   }
   try {
-    // if it's [inlinedBodiedExtension], wrap it in a textblock
-    if (nodes.length === 1 && isInlineBodiedExtension(nodes[0])) {
-      return [nodes[0].type.schema.nodes.paragraph.create(null, nodes[0])];
-    }
-    var newNodes = [];
-    var _iterator = _createForOfIteratorHelper(nodes),
+    var prevPos = parentPos;
+    var pos = parentPos;
+    var prevTextBlockType;
+    var _iterator = _createForOfIteratorHelper(nodes.entries()),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var node = _step.value;
-        var previousNode = newNodes[newNodes.length - 1];
-
-        // first node
-        if (!previousNode) {
-          newNodes.push(node);
-          continue;
-        }
+        var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
+          index = _step$value[0],
+          node = _step$value[1];
+        var prevNode = nodes[index - 1];
 
         // textblock + inlinedBodiedExtension
-        if (isInlineBodiedExtension(node) && previousNode.isTextblock) {
-          newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.addToEnd(node));
-        }
-        // textblock(..., inlinedBodiedExtension) + textblock
-        else if (node.isTextblock && previousNode.isTextblock && isInlineBodiedExtension(previousNode.content.lastChild)) {
-          newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.append(node.content));
+        if (prevNode !== null && prevNode !== void 0 && prevNode.isTextblock && isInlineBodiedExtension(node)) {
+          onMark({
+            pos: prevPos
+          });
         }
         // inlinedBodiedExtension + textblock
-        else if (isInlineBodiedExtension(previousNode) && node.isTextblock) {
-          newNodes[newNodes.length - 1] = node.copy(node.content.addToStart(previousNode));
-        }
-        // inlinedBodiedExtension + non-textblock
-        else if (isInlineBodiedExtension(previousNode) && !node.isTextblock) {
-          newNodes[newNodes.length - 1] = node.type.schema.nodes.paragraph.create(null, previousNode);
-          newNodes.push(node);
+        else if (isInlineBodiedExtension(prevNode) && node.isTextblock && (!prevTextBlockType || node.type === prevTextBlockType)) {
+          onMark({
+            pos: pos
+          });
         }
-        // default case
-        else {
-          newNodes.push(node);
+        if (!isInlineBodiedExtension(node)) {
+          prevTextBlockType = node.isTextblock ? node.type : undefined;
         }
+        prevPos = pos;
+        pos += node.nodeSize;
       }
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-    return newNodes;
   } catch (_unused) {}
-  return nodes;
 }

package/dist/cjs/ui/Renderer/RendererStyleContainer.js

@@ -30,7 +30,7 @@ var _emoji = require("@atlaskit/editor-common/emoji");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _css, _css7;
-/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
@@ -709,23 +709,21 @@ var extensionStyle = (0, _react.css)({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
-var extensionAsInlineStyle = (0, _react.css)({
-  '.ak-renderer-document .ak-renderer-extension-as-inline': {
-    display: 'inline-block',
-    // use !important here because the current width has !important applied to it and it's not working when used in React style prop
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    width: 'auto !important',
-    marginTop: 0
-  },
-  '.ak-renderer-extension-as-inline .ak-renderer-extension-overflow-container': {
-    display: 'inline-block',
-    overflowX: 'visible',
-    containerType: 'normal'
-  },
-  '.ak-renderer-extension-as-inline div, .ak-renderer-extension-as-inline p': {
-    display: 'inline-block'
-  }
-});
+var extensionAsInlineStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_consts.RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+  display: 'inline-block'
+}), ".".concat(_consts.RendererCssClassName.DOCUMENT, " .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE), {
+  display: 'inline-block',
+  // use !important here because the current width has !important applied to it and it's not working when used in React style prop
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'auto !important',
+  marginTop: 0
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(_consts.RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+  display: 'inline-block'
+}));
 var shadowSharedStyle = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "& .".concat(_ui.shadowClassNames.RIGHT_SHADOW, "::before, .").concat(_ui.shadowClassNames.RIGHT_SHADOW, "::after, .").concat(_ui.shadowClassNames.LEFT_SHADOW, "::before, .").concat(_ui.shadowClassNames.LEFT_SHADOW, "::after"), {
   display: 'none',
   position: 'absolute',
@@ -1631,6 +1629,10 @@ var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineP
 }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
 }));
+var syncBlockOverflowStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
+  // Contain floated elements (wrap-left/wrap-right) within synced block borders
+  overflow: 'hidden'
+}));
 var RendererStyleContainer = exports.RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -1677,7 +1679,7 @@ var RendererStyleContainer = exports.RendererStyleContainer = function RendererS
       // this should be placed after baseOtherStyles
       (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
+      (0, _platformFeatureFlags.fg)('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, (0, _table.isStickyScrollbarEnabled)(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, (0, _expValEquals.expValEquals)('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && syncBlockStyles, (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
       "data-testid": testId
     }, children)
   );

package/dist/cjs/ui/Renderer/index.js

@@ -70,7 +70,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.2.1";
+var packageVersion = "126.2.3";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/index.js

@@ -18,7 +18,7 @@ import { insideBlockNode, insideBreakoutExpand, insideBreakoutLayout, insideMult
 import { renderTextSegments } from './utils/render-text-segments';
 import { segmentText } from './utils/segment-text';
 import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
-import { mergeInlinedExtension } from './utils/merge-inlined-extension';
+import { markBlockAsInline } from './utils/markBlockAsInline';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
     const prev = acc.length && acc[acc.length - 1] || null;
@@ -49,6 +49,7 @@ export default class ReactSerializer {
     _defineProperty(this, "surroundTextNodesWithTextWrapper", false);
     _defineProperty(this, "allowAnnotations", false);
     _defineProperty(this, "standaloneBackgroundColorMarks", []);
+    _defineProperty(this, "inlinePositions", new Set());
     _defineProperty(this, "serializeFragmentChild", (node, {
       index,
       parentInfo
@@ -573,6 +574,7 @@ export default class ReactSerializer {
   getProps(node, path = []) {
     const startPos = this.startPos + path.length;
     return {
+      asInline: this.inlinePositions.has(startPos) ? 'on' : undefined,
       text: node.text,
       providers: this.providers,
       eventHandlers: this.eventHandlers,
@@ -687,8 +689,14 @@ export default class ReactSerializer {
     });
     children = mergeTextNodes(children);
     if (!!this.shouldDisplayExtensionAsInline && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
-      children = mergeInlinedExtension({
+      markBlockAsInline({
         nodes: children,
+        onMark: ({
+          pos
+        }) => {
+          this.inlinePositions.add(pos);
+        },
+        parentPos: this.startPos,
         shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
       });
     }

package/dist/es2019/react/nodes/emoji.js

@@ -76,7 +76,7 @@ _defineProperty(EmojiNode, "displayName", 'EmojiNode');
 _defineProperty(EmojiNode, "defaultProps", {
   showTooltip: true
 });
-function EmojiItem(props) {
+export const EmojiItemComponent = props => {
   const {
     id,
     providers,
@@ -110,9 +110,5 @@ function EmojiItem(props) {
     fitToHeight: fitToHeight,
     resourceConfig: resourceConfig
   });
-}
-
-// Working around an issue with pre existing tests using react-test-renderer
-// https://github.com/facebook/react/issues/17301#issuecomment-557765213
-EmojiItem.defaultProps = {};
-export default /*#__PURE__*/memo(EmojiItem);
+};
+export default /*#__PURE__*/memo(EmojiItemComponent);

package/dist/es2019/react/nodes/heading.js

@@ -48,7 +48,8 @@ function Heading(props) {
     allowHeadingAnchorLinks,
     marks,
     invisible,
-    localId
+    localId,
+    asInline
   } = props;
   const HX = `h${props.level}`;
   const mouseEntered = React.useRef(false);
@@ -69,6 +70,7 @@ function Heading(props) {
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler
   }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,

package/dist/es2019/react/nodes/paragraph.js

@@ -4,7 +4,8 @@ import Inline from './inline';
 export default function Paragraph({
   children,
   dataAttributes,
-  localId
+  localId,
+  asInline
 }) {
   return (
     /*#__PURE__*/
@@ -13,7 +14,8 @@ export default function Paragraph({
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/use-primitives-text
     React.createElement("p", _extends({}, dataAttributes, {
-      "data-local-id": localId
+      "data-local-id": localId,
+      "data-as-inline": asInline
     }), /*#__PURE__*/React.createElement(Inline, null, children))
   );
 }

package/dist/es2019/react/utils/markBlockAsInline.js

@@ -0,0 +1,47 @@
+export function markBlockAsInline({
+  nodes,
+  onMark,
+  parentPos,
+  shouldDisplayExtensionAsInline
+}) {
+  if (!nodes || nodes.length === 0 || nodes[0].isInline) {
+    return;
+  }
+  function isInlineBodiedExtension(node) {
+    var _node$attrs, _node$attrs2, _node$attrs3, _node$attrs4;
+    return Boolean((node === null || node === void 0 ? void 0 : node.type.name) === 'bodiedExtension' && shouldDisplayExtensionAsInline({
+      type: node.type.name,
+      extensionKey: (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionKey,
+      extensionType: (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionType,
+      parameters: (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.parameters,
+      content: node.content,
+      localId: (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.localId
+    }));
+  }
+  try {
+    let prevPos = parentPos;
+    let pos = parentPos;
+    let prevTextBlockType;
+    for (const [index, node] of nodes.entries()) {
+      const prevNode = nodes[index - 1];
+
+      // textblock + inlinedBodiedExtension
+      if (prevNode !== null && prevNode !== void 0 && prevNode.isTextblock && isInlineBodiedExtension(node)) {
+        onMark({
+          pos: prevPos
+        });
+      }
+      // inlinedBodiedExtension + textblock
+      else if (isInlineBodiedExtension(prevNode) && node.isTextblock && (!prevTextBlockType || node.type === prevTextBlockType)) {
+        onMark({
+          pos
+        });
+      }
+      if (!isInlineBodiedExtension(node)) {
+        prevTextBlockType = node.isTextblock ? node.type : undefined;
+      }
+      prevPos = pos;
+      pos += node.nodeSize;
+    }
+  } catch {}
+}

package/dist/es2019/ui/Renderer/RendererStyleContainer.js

@@ -1,4 +1,4 @@
-/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
@@ -817,19 +817,22 @@ const extensionStyle = css({
   }
 });
 const extensionAsInlineStyle = css({
-  '.ak-renderer-document .ak-renderer-extension-as-inline': {
+  [`.${RendererCssClassName.DOCUMENT} [data-as-inline="on"]`]: {
+    display: 'inline-block'
+  },
+  [`.${RendererCssClassName.DOCUMENT} .${RendererCssClassName.EXTENSION_AS_INLINE}`]: {
     display: 'inline-block',
     // use !important here because the current width has !important applied to it and it's not working when used in React style prop
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
     width: 'auto !important',
     marginTop: 0
   },
-  '.ak-renderer-extension-as-inline .ak-renderer-extension-overflow-container': {
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER}`]: {
     display: 'inline-block',
     overflowX: 'visible',
     containerType: 'normal'
   },
-  '.ak-renderer-extension-as-inline div, .ak-renderer-extension-as-inline p': {
+  [`.${RendererCssClassName.EXTENSION_AS_INLINE} div, .${RendererCssClassName.EXTENSION_AS_INLINE} p`]: {
     display: 'inline-block'
   }
 });
@@ -2058,6 +2061,12 @@ const syncBlockStyles = css({
     boxShadow: `0 0 0 1px ${"var(--ds-border, #0B120E24)"}`
   }
 });
+const syncBlockOverflowStyles = css({
+  [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
+    // Contain floated elements (wrap-left/wrap-right) within synced block borders
+    overflow: 'hidden'
+  }
+});
 export const RendererStyleContainer = props => {
   const {
     onClick,
@@ -2106,7 +2115,7 @@ export const RendererStyleContainer = props => {
       // this should be placed after baseOtherStyles
       expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
+      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles, expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
       "data-testid": testId
     }, children)
   );

package/dist/es2019/ui/Renderer/index.js

@@ -56,7 +56,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "126.2.1";
+const packageVersion = "126.2.3";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/index.js

@@ -25,7 +25,7 @@ import { insideBlockNode, insideBreakoutExpand, insideBreakoutLayout, insideMult
 import { renderTextSegments } from './utils/render-text-segments';
 import { segmentText } from './utils/segment-text';
 import { getStandaloneBackgroundColorMarks } from './utils/getStandaloneBackgroundColorMarks';
-import { mergeInlinedExtension } from './utils/merge-inlined-extension';
+import { markBlockAsInline } from './utils/markBlockAsInline';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
     var prev = acc.length && acc[acc.length - 1] || null;
@@ -58,6 +58,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     _defineProperty(this, "surroundTextNodesWithTextWrapper", false);
     _defineProperty(this, "allowAnnotations", false);
     _defineProperty(this, "standaloneBackgroundColorMarks", []);
+    _defineProperty(this, "inlinePositions", new Set());
     _defineProperty(this, "serializeFragmentChild", function (node, _ref) {
       var index = _ref.index,
         parentInfo = _ref.parentInfo;
@@ -635,6 +636,7 @@ var ReactSerializer = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var startPos = this.startPos + path.length;
       return _objectSpread({
+        asInline: this.inlinePositions.has(startPos) ? 'on' : undefined,
         text: node.text,
         providers: this.providers,
         eventHandlers: this.eventHandlers,
@@ -761,14 +763,20 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getChildNodes",
     value: function getChildNodes(fragment) {
+      var _this8 = this;
       var children = [];
       fragment.forEach(function (node) {
         children.push(node);
       });
       children = mergeTextNodes(children);
       if (!!this.shouldDisplayExtensionAsInline && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
-        children = mergeInlinedExtension({
+        markBlockAsInline({
           nodes: children,
+          onMark: function onMark(_ref5) {
+            var pos = _ref5.pos;
+            _this8.inlinePositions.add(pos);
+          },
+          parentPos: this.startPos,
           shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
         });
       }
@@ -785,9 +793,9 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "buildMarkStructure",
     value: function buildMarkStructure(content) {
-      var _this8 = this;
+      var _this9 = this;
       return mergeMarks(content.map(function (node) {
-        var nodeMarks = _this8.getMarks(node);
+        var nodeMarks = _this9.getMarks(node);
         if (nodeMarks.length === 0) {
           return node;
         }

package/dist/esm/react/nodes/emoji.js

@@ -91,7 +91,7 @@ _defineProperty(EmojiNode, "displayName", 'EmojiNode');
 _defineProperty(EmojiNode, "defaultProps", {
   showTooltip: true
 });
-function EmojiItem(props) {
+export var EmojiItemComponent = function EmojiItemComponent(props) {
   var id = props.id,
     providers = props.providers,
     shortName = props.shortName,
@@ -123,9 +123,5 @@ function EmojiItem(props) {
     fitToHeight: fitToHeight,
     resourceConfig: resourceConfig
   });
-}
-
-// Working around an issue with pre existing tests using react-test-renderer
-// https://github.com/facebook/react/issues/17301#issuecomment-557765213
-EmojiItem.defaultProps = {};
-export default /*#__PURE__*/memo(EmojiItem);
+};
+export default /*#__PURE__*/memo(EmojiItemComponent);

package/dist/esm/react/nodes/heading.js

@@ -50,7 +50,8 @@ function Heading(props) {
     allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
     marks = props.marks,
     invisible = props.invisible,
-    localId = props.localId;
+    localId = props.localId,
+    asInline = props.asInline;
   var HX = "h".concat(props.level);
   var mouseEntered = React.useRef(false);
   var showAnchorLink = !!props.showAnchorLink;
@@ -70,6 +71,7 @@ function Heading(props) {
     id: headingIdToUse,
     "data-local-id": localId,
     "data-renderer-start-pos": dataAttributes['data-renderer-start-pos'],
+    "data-as-inline": asInline,
     onMouseEnter: mouseEnterHandler
   }, /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && headingId && isRightAligned && /*#__PURE__*/React.createElement(WrappedHeadingAnchor, {
     level: props.level,

package/dist/esm/react/nodes/paragraph.js

@@ -4,7 +4,8 @@ import Inline from './inline';
 export default function Paragraph(_ref) {
   var children = _ref.children,
     dataAttributes = _ref.dataAttributes,
-    localId = _ref.localId;
+    localId = _ref.localId,
+    asInline = _ref.asInline;
   return (
     /*#__PURE__*/
     // ignore the eslint warning Text primitive does not support dataAttributes
@@ -12,7 +13,8 @@ export default function Paragraph(_ref) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/design-system/use-primitives-text
     React.createElement("p", _extends({}, dataAttributes, {
-      "data-local-id": localId
+      "data-local-id": localId,
+      "data-as-inline": asInline
     }), /*#__PURE__*/React.createElement(Inline, null, children))
   );
 }

package/dist/esm/react/utils/{merge-inlined-extension.js → markBlockAsInline.js}

@@ -1,28 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-/**
- * Merges extensions (displayed as inline) with adjacent textblocks
- *
- * Input:
- * [
- *   { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
- *   { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *   { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
- * ]
- *
- * Output:
- * [
- *   { type: 'paragraph', content: [
- *     { type: 'text', text: 'Hello' },
- *     { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *     { type: 'text', text: '!' }
- *   ] },
- * ]
- */
-export function mergeInlinedExtension(_ref) {
+export function markBlockAsInline(_ref) {
   var nodes = _ref.nodes,
+    onMark = _ref.onMark,
+    parentPos = _ref.parentPos,
     shouldDisplayExtensionAsInline = _ref.shouldDisplayExtensionAsInline;
+  if (!nodes || nodes.length === 0 || nodes[0].isInline) {
+    return;
+  }
   function isInlineBodiedExtension(node) {
     var _node$attrs, _node$attrs2, _node$attrs3, _node$attrs4;
     return Boolean((node === null || node === void 0 ? void 0 : node.type.name) === 'bodiedExtension' && shouldDisplayExtensionAsInline({
@@ -35,52 +22,40 @@ export function mergeInlinedExtension(_ref) {
     }));
   }
   try {
-    // if it's [inlinedBodiedExtension], wrap it in a textblock
-    if (nodes.length === 1 && isInlineBodiedExtension(nodes[0])) {
-      return [nodes[0].type.schema.nodes.paragraph.create(null, nodes[0])];
-    }
-    var newNodes = [];
-    var _iterator = _createForOfIteratorHelper(nodes),
+    var prevPos = parentPos;
+    var pos = parentPos;
+    var prevTextBlockType;
+    var _iterator = _createForOfIteratorHelper(nodes.entries()),
       _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var node = _step.value;
-        var previousNode = newNodes[newNodes.length - 1];
-
-        // first node
-        if (!previousNode) {
-          newNodes.push(node);
-          continue;
-        }
+        var _step$value = _slicedToArray(_step.value, 2),
+          index = _step$value[0],
+          node = _step$value[1];
+        var prevNode = nodes[index - 1];
 
         // textblock + inlinedBodiedExtension
-        if (isInlineBodiedExtension(node) && previousNode.isTextblock) {
-          newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.addToEnd(node));
-        }
-        // textblock(..., inlinedBodiedExtension) + textblock
-        else if (node.isTextblock && previousNode.isTextblock && isInlineBodiedExtension(previousNode.content.lastChild)) {
-          newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.append(node.content));
+        if (prevNode !== null && prevNode !== void 0 && prevNode.isTextblock && isInlineBodiedExtension(node)) {
+          onMark({
+            pos: prevPos
+          });
         }
         // inlinedBodiedExtension + textblock
-        else if (isInlineBodiedExtension(previousNode) && node.isTextblock) {
-          newNodes[newNodes.length - 1] = node.copy(node.content.addToStart(previousNode));
-        }
-        // inlinedBodiedExtension + non-textblock
-        else if (isInlineBodiedExtension(previousNode) && !node.isTextblock) {
-          newNodes[newNodes.length - 1] = node.type.schema.nodes.paragraph.create(null, previousNode);
-          newNodes.push(node);
+        else if (isInlineBodiedExtension(prevNode) && node.isTextblock && (!prevTextBlockType || node.type === prevTextBlockType)) {
+          onMark({
+            pos: pos
+          });
         }
-        // default case
-        else {
-          newNodes.push(node);
+        if (!isInlineBodiedExtension(node)) {
+          prevTextBlockType = node.isTextblock ? node.type : undefined;
         }
+        prevPos = pos;
+        pos += node.nodeSize;
       }
     } catch (err) {
       _iterator.e(err);
     } finally {
       _iterator.f();
     }
-    return newNodes;
   } catch (_unused) {}
-  return nodes;
 }

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _css, _css7;
-/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles */
+/* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
@@ -702,23 +702,21 @@ var extensionStyle = css({
     fontSize: 'var(--ak-renderer-base-font-size)'
   }
 });
-var extensionAsInlineStyle = css({
-  '.ak-renderer-document .ak-renderer-extension-as-inline': {
-    display: 'inline-block',
-    // use !important here because the current width has !important applied to it and it's not working when used in React style prop
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-    width: 'auto !important',
-    marginTop: 0
-  },
-  '.ak-renderer-extension-as-inline .ak-renderer-extension-overflow-container': {
-    display: 'inline-block',
-    overflowX: 'visible',
-    containerType: 'normal'
-  },
-  '.ak-renderer-extension-as-inline div, .ak-renderer-extension-as-inline p': {
-    display: 'inline-block'
-  }
-});
+var extensionAsInlineStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT, " [data-as-inline=\"on\"]"), {
+  display: 'inline-block'
+}), ".".concat(RendererCssClassName.DOCUMENT, " .").concat(RendererCssClassName.EXTENSION_AS_INLINE), {
+  display: 'inline-block',
+  // use !important here because the current width has !important applied to it and it's not working when used in React style prop
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+  width: 'auto !important',
+  marginTop: 0
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " .").concat(RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER), {
+  display: 'inline-block',
+  overflowX: 'visible',
+  containerType: 'normal'
+}), ".".concat(RendererCssClassName.EXTENSION_AS_INLINE, " div, .").concat(RendererCssClassName.EXTENSION_AS_INLINE, " p"), {
+  display: 'inline-block'
+}));
 var shadowSharedStyle = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "& .".concat(shadowClassNames.RIGHT_SHADOW, "::before, .").concat(shadowClassNames.RIGHT_SHADOW, "::after, .").concat(shadowClassNames.LEFT_SHADOW, "::before, .").concat(shadowClassNames.LEFT_SHADOW, "::after"), {
   display: 'none',
   position: 'absolute',
@@ -1624,6 +1622,10 @@ var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
 }), ".".concat(SyncBlockSharedCssClassName.loading), {
   boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
 }));
+var syncBlockOverflowStyles = css(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
+  // Contain floated elements (wrap-left/wrap-right) within synced block borders
+  overflow: 'hidden'
+}));
 export var RendererStyleContainer = function RendererStyleContainer(props) {
   var onClick = props.onClick,
     onMouseDown = props.onMouseDown,
@@ -1670,7 +1672,7 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // this should be placed after baseOtherStyles
       expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && extensionAsInlineStyle, allowNestedHeaderLinks && alignedHeadingAnchorStyle, mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles],
+      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks, rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, expValEquals('platform_synced_block', 'isEnabled', true) && syncBlockStyles, expValEquals('platform_synced_block', 'isEnabled', true) && fg('platform_synced_block_dogfooding') && syncBlockOverflowStyles],
       "data-testid": testId
     }, children)
   );

package/dist/esm/ui/Renderer/index.js

@@ -61,7 +61,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.2.1";
+var packageVersion = "126.2.3";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/react/index.d.ts

@@ -115,6 +115,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private standaloneBackgroundColorMarks;
     private onSetLinkTarget?;
     private shouldDisplayExtensionAsInline?;
+    private inlinePositions;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types/react/nodes/emoji.d.ts

@@ -1,9 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
 import { type EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import { type FC } from 'react';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EmojiId } from '@atlaskit/emoji/types';
 import { type MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
@@ -15,9 +11,6 @@ export interface EmojiProps extends EmojiId, EmojiAttributes, MarkDataAttributes
     resourceConfig?: EmojiResourceConfig;
     showTooltip?: boolean;
 }
-declare function EmojiItem(props: EmojiProps): jsx.JSX.Element;
-declare namespace EmojiItem {
-    var defaultProps: {};
-}
-declare const _default: import("react").MemoExoticComponent<typeof EmojiItem>;
+export declare const EmojiItemComponent: FC<EmojiProps>;
+declare const _default: import("react").NamedExoticComponent<EmojiProps>;
 export default _default;

package/dist/types/react/nodes/paragraph.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type NodeProps } from '../types';
-export default function Paragraph({ children, dataAttributes, localId, }: NodeProps): React.JSX.Element;
+export default function Paragraph({ children, dataAttributes, localId, asInline, }: NodeProps): React.JSX.Element;

package/dist/types/react/types.d.ts

@@ -20,6 +20,7 @@ export interface NodeMeta {
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     allowPlaceholderText?: boolean;
     allowWrapCodeBlock?: boolean;
+    asInline?: 'on' | undefined;
     content?: {
         [key: string]: any;
     } | null;

package/dist/types/react/utils/markBlockAsInline.d.ts

@@ -0,0 +1,10 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
+export declare function markBlockAsInline({ nodes, onMark, parentPos, shouldDisplayExtensionAsInline, }: {
+    nodes: PMNode[];
+    onMark: ({ pos }: {
+        pos: number;
+    }) => void;
+    parentPos: number;
+    shouldDisplayExtensionAsInline: (extensionParams: ExtensionParams<Parameters>) => boolean;
+}): void;

package/dist/types-ts4.5/react/index.d.ts

@@ -115,6 +115,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private standaloneBackgroundColorMarks;
     private onSetLinkTarget?;
     private shouldDisplayExtensionAsInline?;
+    private inlinePositions;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;

package/dist/types-ts4.5/react/nodes/emoji.d.ts

@@ -1,9 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
 import { type EmojiResourceConfig } from '@atlaskit/emoji/resource';
+import { type FC } from 'react';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EmojiId } from '@atlaskit/emoji/types';
 import { type MarkDataAttributes } from '../../ui/annotations/element/useInlineAnnotationProps';
@@ -15,9 +11,6 @@ export interface EmojiProps extends EmojiId, EmojiAttributes, MarkDataAttributes
     resourceConfig?: EmojiResourceConfig;
     showTooltip?: boolean;
 }
-declare function EmojiItem(props: EmojiProps): jsx.JSX.Element;
-declare namespace EmojiItem {
-    var defaultProps: {};
-}
-declare const _default: import("react").MemoExoticComponent<typeof EmojiItem>;
+export declare const EmojiItemComponent: FC<EmojiProps>;
+declare const _default: import("react").NamedExoticComponent<EmojiProps>;
 export default _default;

package/dist/types-ts4.5/react/nodes/paragraph.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type NodeProps } from '../types';
-export default function Paragraph({ children, dataAttributes, localId, }: NodeProps): React.JSX.Element;
+export default function Paragraph({ children, dataAttributes, localId, asInline, }: NodeProps): React.JSX.Element;

package/dist/types-ts4.5/react/types.d.ts

@@ -20,6 +20,7 @@ export interface NodeMeta {
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     allowPlaceholderText?: boolean;
     allowWrapCodeBlock?: boolean;
+    asInline?: 'on' | undefined;
     content?: {
         [key: string]: any;
     } | null;

package/dist/types-ts4.5/react/utils/markBlockAsInline.d.ts

@@ -0,0 +1,10 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
+export declare function markBlockAsInline({ nodes, onMark, parentPos, shouldDisplayExtensionAsInline, }: {
+    nodes: PMNode[];
+    onMark: ({ pos }: {
+        pos: number;
+    }) => void;
+    parentPos: number;
+    shouldDisplayExtensionAsInline: (extensionParams: ExtensionParams<Parameters>) => boolean;
+}): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.2.2",
+	"version": "126.2.4",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -57,7 +57,7 @@
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.35.0",
+		"@atlaskit/tmp-editor-statsig": "^17.1.0",
 		"@atlaskit/tokens": "^10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -90,10 +90,11 @@
 		"@atlaskit/mention": "^24.4.0",
 		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
-		"@atlaskit/profilecard": "^24.33.0",
+		"@atlaskit/profilecard": "^24.34.0",
 		"@atlaskit/util-data-test": "^18.5.0",
 		"@atlassian/a11y-jest-testing": "^0.8.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/testing-library": "^0.4.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"@types/react-loadable": "^5.4.1",
@@ -248,6 +249,9 @@
 		},
 		"confluence_inline_insert_excerpt_width_bugfix": {
 			"type": "boolean"
+		},
+		"platform_synced_block_dogfooding": {
+			"type": "boolean"
 		}
 	}
 }

package/dist/es2019/react/utils/merge-inlined-extension.js

@@ -1,75 +0,0 @@
-/**
- * Merges extensions (displayed as inline) with adjacent textblocks
- *
- * Input:
- * [
- *   { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
- *   { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *   { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
- * ]
- *
- * Output:
- * [
- *   { type: 'paragraph', content: [
- *     { type: 'text', text: 'Hello' },
- *     { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *     { type: 'text', text: '!' }
- *   ] },
- * ]
- */
-export function mergeInlinedExtension({
-  nodes,
-  shouldDisplayExtensionAsInline
-}) {
-  function isInlineBodiedExtension(node) {
-    var _node$attrs, _node$attrs2, _node$attrs3, _node$attrs4;
-    return Boolean((node === null || node === void 0 ? void 0 : node.type.name) === 'bodiedExtension' && shouldDisplayExtensionAsInline({
-      type: node.type.name,
-      extensionKey: (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionKey,
-      extensionType: (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionType,
-      parameters: (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.parameters,
-      content: node.content,
-      localId: (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.localId
-    }));
-  }
-  try {
-    // if it's [inlinedBodiedExtension], wrap it in a textblock
-    if (nodes.length === 1 && isInlineBodiedExtension(nodes[0])) {
-      return [nodes[0].type.schema.nodes.paragraph.create(null, nodes[0])];
-    }
-    const newNodes = [];
-    for (const node of nodes) {
-      const previousNode = newNodes[newNodes.length - 1];
-
-      // first node
-      if (!previousNode) {
-        newNodes.push(node);
-        continue;
-      }
-
-      // textblock + inlinedBodiedExtension
-      if (isInlineBodiedExtension(node) && previousNode.isTextblock) {
-        newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.addToEnd(node));
-      }
-      // textblock(..., inlinedBodiedExtension) + textblock
-      else if (node.isTextblock && previousNode.isTextblock && isInlineBodiedExtension(previousNode.content.lastChild)) {
-        newNodes[newNodes.length - 1] = previousNode.copy(previousNode.content.append(node.content));
-      }
-      // inlinedBodiedExtension + textblock
-      else if (isInlineBodiedExtension(previousNode) && node.isTextblock) {
-        newNodes[newNodes.length - 1] = node.copy(node.content.addToStart(previousNode));
-      }
-      // inlinedBodiedExtension + non-textblock
-      else if (isInlineBodiedExtension(previousNode) && !node.isTextblock) {
-        newNodes[newNodes.length - 1] = node.type.schema.nodes.paragraph.create(null, previousNode);
-        newNodes.push(node);
-      }
-      // default case
-      else {
-        newNodes.push(node);
-      }
-    }
-    return newNodes;
-  } catch {}
-  return nodes;
-}

package/dist/types/react/utils/merge-inlined-extension.d.ts

@@ -1,25 +0,0 @@
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
-/**
- * Merges extensions (displayed as inline) with adjacent textblocks
- *
- * Input:
- * [
- *   { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
- *   { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *   { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
- * ]
- *
- * Output:
- * [
- *   { type: 'paragraph', content: [
- *     { type: 'text', text: 'Hello' },
- *     { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *     { type: 'text', text: '!' }
- *   ] },
- * ]
- */
-export declare function mergeInlinedExtension({ nodes, shouldDisplayExtensionAsInline, }: {
-    nodes: PMNode[];
-    shouldDisplayExtensionAsInline: (extensionParams: ExtensionParams<Parameters>) => boolean;
-}): PMNode[];

package/dist/types-ts4.5/react/utils/merge-inlined-extension.d.ts

@@ -1,25 +0,0 @@
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
-/**
- * Merges extensions (displayed as inline) with adjacent textblocks
- *
- * Input:
- * [
- *   { type: 'paragraph', content: [ { type: 'text', text: 'Hello' } ] },
- *   { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *   { type: 'paragraph', content: [ { type: 'text', text: '!' } ] },
- * ]
- *
- * Output:
- * [
- *   { type: 'paragraph', content: [
- *     { type: 'text', text: 'Hello' },
- *     { type: 'bodiedExtension', content: [ { type: 'text', text: 'World' } ] },
- *     { type: 'text', text: '!' }
- *   ] },
- * ]
- */
-export declare function mergeInlinedExtension({ nodes, shouldDisplayExtensionAsInline, }: {
-    nodes: PMNode[];
-    shouldDisplayExtensionAsInline: (extensionParams: ExtensionParams<Parameters>) => boolean;
-}): PMNode[];