@atlaskit/renderer 125.4.0 → 126.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 126.0.0
+
+### Major Changes
+
+- [`87c877957a81a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87c877957a81a) -
+  EDITOR-4544 - Inline Bodied Extension: merge inlined extensions with adjacent textblocks
+
+### Patch Changes
+
+- Updated dependencies
+
+## 125.4.1
+
+### Patch Changes
+
+- [`3bc6a51231706`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3bc6a51231706) -
+  [ux] Add 6px top margin to source and reference sync block
+
 ## 125.4.0
 
 ### Minor Changes

package/afm-products/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.products.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"declaration": true,
 		"target": "es5",

package/dist/cjs/react/index.js

@@ -29,6 +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 _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; }
@@ -221,6 +222,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
     this.isPresentational = init.isPresentational;
     this.disableTableOverflowShadow = init.disableTableOverflowShadow;
     this.onSetLinkTarget = init.onSetLinkTarget;
+    this.shouldDisplayExtensionAsInline = init.shouldDisplayExtensionAsInline;
   }
   return (0, _createClass2.default)(ReactSerializer, [{
     key: "resetState",
@@ -296,7 +298,7 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       if (key === 'root-0') {
         this.resetState();
       }
-      return this.renderNode(target, props, key, ReactSerializer.getChildNodes(fragment).map(function (node, index) {
+      return this.renderNode(target, props, key, this.getChildNodes(fragment).map(function (node, index) {
         if ((0, _nodes.isTextWrapper)(node)) {
           return _this2.serializeTextWrapper(node.content, {
             index: index,
@@ -531,7 +533,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       return _objectSpread(_objectSpread({}, this.getProps(node, path)), {}, {
         extensionViewportSizes: this.extensionViewportSizes,
-        nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
+        nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
+        shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
       });
     }
   }, {
@@ -760,16 +763,23 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
       }
       return this.getUniqueHeadingId(baseId, headingIds, ++counter);
     }
-  }], [{
+  }, {
     key: "getChildNodes",
     value: function getChildNodes(fragment) {
       var children = [];
       fragment.forEach(function (node) {
         children.push(node);
       });
-      return (0, _nodes.mergeTextNodes)(children);
+      children = (0, _nodes.mergeTextNodes)(children);
+      if (!!this.shouldDisplayExtensionAsInline && (0, _expValEquals.expValEquals)('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
+        children = (0, _mergeInlinedExtension.mergeInlinedExtension)({
+          nodes: children,
+          shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
+        });
+      }
+      return children;
     }
-  }, {
+  }], [{
     key: "getMarks",
     value: function getMarks(node) {
       if (!node.marks || node.marks.length === 0) {

package/dist/cjs/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -43,7 +43,7 @@ var codeBlockSharedStyles = (0, _react2.css)((0, _defineProperty2.default)((0, _
   backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
-  fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+  fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
   minWidth: "".concat(_editorSharedStyles.akEditorTableCellMinWidth, "px"),
   cursor: 'pointer',
   clear: 'both',

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

@@ -121,7 +121,9 @@ var addSortableColumn = exports.addSortableColumn = function addSortableColumn(r
     return row;
   });
 };
-var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
+var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnabled(rows
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
   if (!rows.length) {
     return false;
   }
@@ -138,7 +140,9 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
     return node.type === _tableCell.TableHeader;
   });
 };
-var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
+var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeInlinedExtension = mergeInlinedExtension;
+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) {
+  var nodes = _ref.nodes,
+    shouldDisplayExtensionAsInline = _ref.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])];
+    }
+    var newNodes = [];
+    var _iterator = _createForOfIteratorHelper(nodes),
+      _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;
+        }
+
+        // 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);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return newNodes;
+  } catch (_unused) {}
+  return nodes;
+}

package/dist/cjs/ui/MediaCard.js

@@ -17,7 +17,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _traverse = require("@atlaskit/adf-utils/traverse");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -247,7 +246,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
 
       // we need this statement for the mandatory mediaClientConfig below
       var mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
-      var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
+      var Card = enableSyncMediaCard ? _mediaCard.CardSync : _mediaCard.Card;
       return (
         /*#__PURE__*/
         // Ignored via go/ees005
@@ -329,7 +328,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
+      var Card = enableSyncMediaCard ? _mediaCard.CardSync : _mediaCard.Card;
 
       // Quick solution to disable lazy loading of images on PDF export pages in Confluence to remedy an issue with images never loading
       // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233

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

@@ -239,7 +239,7 @@ var telepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#".co
     left: 0,
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '10px',
-    fontWeight: "var(--ds-font-weight-bold, 700)",
+    fontWeight: "var(--ds-font-weight-bold, 653)",
     width: '12.5px',
     height: '13px',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
@@ -276,7 +276,7 @@ var rovoTelepointerStyles = (0, _react.css)((0, _defineProperty2.default)({}, "#
   '&::before': {
     content: '"Rovo"',
     position: 'absolute',
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     color: "var(--ds-text-inverse, white)",
     background: "var(--ds-text, #292A2E)",
@@ -418,7 +418,7 @@ var headingsSharedStyles = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 16 / 11,
     color: "var(--ds-text-subtlest, #6B6E76)",
-    fontWeight: "var(--ds-font-weight-bold, 700)",
+    fontWeight: "var(--ds-font-weight-bold, 653)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
     marginTop: '1.455em',
     textTransform: 'none'
@@ -433,7 +433,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     marginTop: '1.45833em',
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
-      fontWeight: "var(--ds-font-weight-bold, 700)"
+      fontWeight: "var(--ds-font-weight-bold, 653)"
     },
     '&::before': {}
   },
@@ -445,7 +445,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     marginBottom: 0,
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
-      fontWeight: "var(--ds-font-weight-bold, 700)"
+      fontWeight: "var(--ds-font-weight-bold, 653)"
     }
   },
   '& h3': {
@@ -456,7 +456,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     marginBottom: 0,
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
-      fontWeight: "var(--ds-font-weight-bold, 700)"
+      fontWeight: "var(--ds-font-weight-bold, 653)"
     }
   },
   '& h4': {
@@ -465,7 +465,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     marginTop: "var(--ds-space-250, 1.25em)",
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
-      fontWeight: "var(--ds-font-weight-bold, 700)"
+      fontWeight: "var(--ds-font-weight-bold, 653)"
     }
   },
   '& h5': {
@@ -476,7 +476,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     textTransform: 'none',
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
-      fontWeight: "var(--ds-font-weight-bold, 700)"
+      fontWeight: "var(--ds-font-weight-bold, 653)"
     }
   },
   '& h6': {
@@ -487,7 +487,7 @@ var headingsSharedStylesWithEditorUGC = (0, _react.css)({
     textTransform: 'none',
     '& strong': {
       // set all heading bold style to token font.weight.bold, as not matter what typography is used, the editorUGCToken will return the font weight 700
-      fontWeight: "var(--ds-font-weight-bold, 700)"
+      fontWeight: "var(--ds-font-weight-bold, 653)"
     }
   }
 });
@@ -713,7 +713,7 @@ var codeMarkSharedStyles = (0, _react.css)({
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: '0.875em',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     fontWeight: "var(--ds-font-weight-regular, 400)",
     backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ")"),
     color: "var(--ds-text, ".concat(_colors.N800, ")"),
@@ -896,7 +896,7 @@ var headerSmartCardStyles = (0, _react.css)({
 });
 var baseOtherStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
   '& .UnknownBlock': {
-    fontFamily: "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+    fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     fontSize: "".concat(14 / 16, "rem"),
     fontWeight: "var(--ds-font-weight-regular, 400)",
@@ -1626,6 +1626,7 @@ var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _definePrope
 }));
 var syncBlockStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.error, ", .").concat(_syncBlock.SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
+  marginTop: "var(--ds-space-075, 6px)",
   paddingBlock: "var(--ds-space-150, 12px)"
 }), ".".concat(_syncBlock.SyncBlockSharedCssClassName.renderer), {
   // First child node in syncBlock in editor is overridden with marginTop: 0, hence apply the same style in renderer for consistency

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 = "125.3.2";
+var packageVersion = "125.4.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -268,7 +268,8 @@ var RendererFunctionalComponent = exports.RendererFunctionalComponent = function
       textHighlighter: props.textHighlighter || props.UNSTABLE_textHighlighter,
       allowTableAlignment: props.UNSTABLE_allowTableAlignment,
       allowTableResizing: props.UNSTABLE_allowTableResizing,
-      disableTableOverflowShadow: props.disableTableOverflowShadow
+      disableTableOverflowShadow: props.disableTableOverflowShadow,
+      shouldDisplayExtensionAsInline: props.shouldDisplayExtensionAsInline
     };
   }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
   var serializer = (0, _useMemoFromPropsDerivative.useMemoFromPropsDerivative)(function (serializerProps) {

package/dist/es2019/react/index.js

@@ -18,6 +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';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce((acc, markOrNode) => {
     const prev = acc.length && acc[acc.length - 1] || null;
@@ -208,6 +209,7 @@ export default class ReactSerializer {
     this.isPresentational = init.isPresentational;
     this.disableTableOverflowShadow = init.disableTableOverflowShadow;
     this.onSetLinkTarget = init.onSetLinkTarget;
+    this.shouldDisplayExtensionAsInline = init.shouldDisplayExtensionAsInline;
   }
   resetState() {
     this.headingIds = [];
@@ -278,7 +280,7 @@ export default class ReactSerializer {
     if (key === 'root-0') {
       this.resetState();
     }
-    return this.renderNode(target, props, key, ReactSerializer.getChildNodes(fragment).map((node, index) => {
+    return this.renderNode(target, props, key, this.getChildNodes(fragment).map((node, index) => {
       if (isTextWrapper(node)) {
         return this.serializeTextWrapper(node.content, {
           index,
@@ -481,7 +483,8 @@ export default class ReactSerializer {
     return {
       ...this.getProps(node, path),
       extensionViewportSizes: this.extensionViewportSizes,
-      nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node)
+      nodeHeight: (_this$getExtensionHei = this.getExtensionHeight) === null || _this$getExtensionHei === void 0 ? void 0 : _this$getExtensionHei.call(this, node),
+      shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
     };
   }
   getEmojiProps(node, path = []) {
@@ -675,12 +678,19 @@ export default class ReactSerializer {
     }
     return this.getUniqueHeadingId(baseId, headingIds, ++counter);
   }
-  static getChildNodes(fragment) {
-    const children = [];
+  getChildNodes(fragment) {
+    let children = [];
     fragment.forEach(node => {
       children.push(node);
     });
-    return mergeTextNodes(children);
+    children = mergeTextNodes(children);
+    if (!!this.shouldDisplayExtensionAsInline && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true)) {
+      children = mergeInlinedExtension({
+        nodes: children,
+        shouldDisplayExtensionAsInline: this.shouldDisplayExtensionAsInline
+      });
+    }
+    return children;
   }
   static getMarks(node) {
     if (!node.marks || node.marks.length === 0) {

package/dist/es2019/react/nodes/codeBlock/components/lightWeightCodeBlock.js

@@ -37,7 +37,7 @@ const codeBlockSharedStyles = css({
     backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
     borderRadius: "var(--ds-radius-small, 3px)",
     margin: `${blockNodesVerticalMargin} 0 0 0`,
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
     minWidth: `${akEditorTableCellMinWidth}px`,
     cursor: 'pointer',
     clear: 'both',

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

@@ -90,7 +90,9 @@ export const addSortableColumn = (rows, tableOrderStatus, onSorting) => {
     return row;
   });
 };
-export const isHeaderRowEnabled = rows => {
+export const isHeaderRowEnabled = (rows
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
   if (!rows.length) {
     return false;
   }
@@ -107,7 +109,9 @@ export const isHeaderRowEnabled = rows => {
   }
   return children.every(node => node.type === TableHeader);
 };
-export const tableCanBeSticky = (node, children) => {
+export const tableCanBeSticky = (node, children
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 /**

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

@@ -0,0 +1,75 @@
+/**
+ * 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/es2019/ui/MediaCard.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component, useContext } from 'react';
 import { filter } from '@atlaskit/adf-utils/traverse';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as CardAsync, CardSync, CardLoading, CardError } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
@@ -183,7 +182,7 @@ export class MediaCardView extends Component {
 
     // we need this statement for the mandatory mediaClientConfig below
     const mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
-    const Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? CardSync : CardAsync;
+    const Card = enableSyncMediaCard ? CardSync : CardAsync;
     return (
       /*#__PURE__*/
       // Ignored via go/ees005
@@ -265,7 +264,7 @@ export class MediaCardView extends Component {
       collectionName: collection,
       occurrenceKey
     };
-    const Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? CardSync : CardAsync;
+    const Card = enableSyncMediaCard ? CardSync : CardAsync;
 
     // Quick solution to disable lazy loading of images on PDF export pages in Confluence to remedy an issue with images never loading
     // More robust solution will be implemented as part of CCPDF-233 - Link: https://hello.jira.atlassian.cloud/browse/CCPDF-233