@atlaskit/renderer 125.4.0 → 126.0.0

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

@@ -314,7 +314,7 @@ const telepointerStyles = css({
       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
@@ -353,7 +353,7 @@ const rovoTelepointerStyles = css({
     '&::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)",
@@ -496,7 +496,7 @@ const headingsSharedStyles = 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'
@@ -511,7 +511,7 @@ const headingsSharedStylesWithEditorUGC = 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': {}
   },
@@ -523,7 +523,7 @@ const headingsSharedStylesWithEditorUGC = 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': {
@@ -534,7 +534,7 @@ const headingsSharedStylesWithEditorUGC = 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': {
@@ -543,7 +543,7 @@ const headingsSharedStylesWithEditorUGC = 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': {
@@ -554,7 +554,7 @@ const headingsSharedStylesWithEditorUGC = 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': {
@@ -565,7 +565,7 @@ const headingsSharedStylesWithEditorUGC = 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)"
     }
   }
 });
@@ -822,7 +822,7 @@ const codeMarkSharedStyles = 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,${`var(--ds-background-neutral, ${N20})`})`,
     color: `var(--ds-text, ${N800})`,
@@ -1035,7 +1035,7 @@ const headerSmartCardStyles = css({
 });
 const baseOtherStyles = css({
   '& .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: `${14 / 16}rem`,
     fontWeight: "var(--ds-font-weight-regular, 400)",
@@ -2050,6 +2050,7 @@ const denseStyles = css({
 const syncBlockStyles = css({
   [`.${SyncBlockSharedCssClassName.renderer}, .${BodiedSyncBlockSharedCssClassName.renderer}, .${SyncBlockSharedCssClassName.error}, .${SyncBlockSharedCssClassName.loading}`]: {
     borderRadius: "var(--ds-radius-small, 3px)",
+    marginTop: "var(--ds-space-075, 6px)",
     paddingBlock: "var(--ds-space-150, 12px)"
   },
   [`.${SyncBlockSharedCssClassName.renderer}`]: {

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 = "125.3.2";
+const packageVersion = "125.4.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -262,7 +262,8 @@ export const RendererFunctionalComponent = props => {
       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]);
   const serializer = useMemoFromPropsDerivative(serializerProps => {

package/dist/esm/react/index.js

@@ -25,6 +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';
 function mergeMarks(marksAndNodes) {
   return marksAndNodes.reduce(function (acc, markOrNode) {
     var prev = acc.length && acc[acc.length - 1] || null;
@@ -214,6 +215,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.isPresentational = init.isPresentational;
     this.disableTableOverflowShadow = init.disableTableOverflowShadow;
     this.onSetLinkTarget = init.onSetLinkTarget;
+    this.shouldDisplayExtensionAsInline = init.shouldDisplayExtensionAsInline;
   }
   return _createClass(ReactSerializer, [{
     key: "resetState",
@@ -289,7 +291,7 @@ var ReactSerializer = /*#__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 (isTextWrapper(node)) {
           return _this2.serializeTextWrapper(node.content, {
             index: index,
@@ -524,7 +526,8 @@ var ReactSerializer = /*#__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
       });
     }
   }, {
@@ -753,16 +756,23 @@ var ReactSerializer = /*#__PURE__*/function () {
       }
       return this.getUniqueHeadingId(baseId, headingIds, ++counter);
     }
-  }], [{
+  }, {
     key: "getChildNodes",
     value: function getChildNodes(fragment) {
       var children = [];
       fragment.forEach(function (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;
     }
-  }, {
+  }], [{
     key: "getMarks",
     value: function getMarks(node) {
       if (!node.marks || node.marks.length === 0) {

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

@@ -34,7 +34,7 @@ var codeBlockSharedStyles = css(_defineProperty(_defineProperty(_defineProperty(
   backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
   borderRadius: "var(--ds-radius-small, 3px)",
   margin: "".concat(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(akEditorTableCellMinWidth, "px"),
   cursor: 'pointer',
   clear: 'both',

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

@@ -115,7 +115,9 @@ export var addSortableColumn = function addSortableColumn(rows, tableOrderStatus
     return row;
   });
 };
-export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
+export var isHeaderRowEnabled = function isHeaderRowEnabled(rows
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+) {
   if (!rows.length) {
     return false;
   }
@@ -132,7 +134,9 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
     return node.type === TableHeader;
   });
 };
-export var tableCanBeSticky = function tableCanBeSticky(node, children) {
+export var 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/esm/react/utils/merge-inlined-extension.js

@@ -0,0 +1,86 @@
+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) {
+  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/esm/ui/MediaCard.js

@@ -13,7 +13,6 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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';
@@ -238,7 +237,7 @@ export var 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 && fg('jfp-magma-ssr-iv-editor-media') ? CardSync : CardAsync;
+      var Card = enableSyncMediaCard ? CardSync : CardAsync;
       return (
         /*#__PURE__*/
         // Ignored via go/ees005
@@ -320,7 +319,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      var Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? CardSync : CardAsync;
+      var 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

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

@@ -232,7 +232,7 @@ var telepointerStyles = css(_defineProperty({}, "#".concat(TELEPOINTER_ID), {
     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
@@ -269,7 +269,7 @@ var rovoTelepointerStyles = css(_defineProperty({}, "#".concat(TELEPOINTER_ID),
   '&::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)",
@@ -411,7 +411,7 @@ var headingsSharedStyles = 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'
@@ -426,7 +426,7 @@ var headingsSharedStylesWithEditorUGC = 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': {}
   },
@@ -438,7 +438,7 @@ var headingsSharedStylesWithEditorUGC = 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': {
@@ -449,7 +449,7 @@ var headingsSharedStylesWithEditorUGC = 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': {
@@ -458,7 +458,7 @@ var headingsSharedStylesWithEditorUGC = 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': {
@@ -469,7 +469,7 @@ var headingsSharedStylesWithEditorUGC = 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': {
@@ -480,7 +480,7 @@ var headingsSharedStylesWithEditorUGC = 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)"
     }
   }
 });
@@ -706,7 +706,7 @@ var codeMarkSharedStyles = 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(N20, ")"), ")"),
     color: "var(--ds-text, ".concat(N800, ")"),
@@ -889,7 +889,7 @@ var headerSmartCardStyles = css({
 });
 var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .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)",
@@ -1619,6 +1619,7 @@ var denseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".co
 }));
 var syncBlockStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SyncBlockSharedCssClassName.renderer, ", .").concat(BodiedSyncBlockSharedCssClassName.renderer, ", .").concat(SyncBlockSharedCssClassName.error, ", .").concat(SyncBlockSharedCssClassName.loading), {
   borderRadius: "var(--ds-radius-small, 3px)",
+  marginTop: "var(--ds-space-075, 6px)",
   paddingBlock: "var(--ds-space-150, 12px)"
 }), ".".concat(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/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 = "125.3.2";
+var packageVersion = "125.4.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'
@@ -259,7 +259,8 @@ export var RendererFunctionalComponent = function RendererFunctionalComponent(pr
       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 = useMemoFromPropsDerivative(function (serializerProps) {

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

@@ -3,8 +3,7 @@ import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
 import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, RendererContentMode, StickyHeaderConfig } from '../ui/Renderer/types';
-import type { TextWrapper } from './nodes';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -44,6 +43,7 @@ export interface ReactSerializerInit {
     onSetLinkTarget?: (url: string) => '_blank' | undefined;
     portal?: HTMLElement;
     providers?: ProviderFactory;
+    shouldDisplayExtensionAsInline?: (extensionParams: ExtensionParams<Parameters>) => boolean;
     shouldOpenMediaViewer?: boolean;
     smartLinks?: SmartLinksOptions;
     /**
@@ -112,6 +112,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private disableTableOverflowShadow?;
     private standaloneBackgroundColorMarks;
     private onSetLinkTarget?;
+    private shouldDisplayExtensionAsInline?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;
@@ -147,7 +148,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getUniqueHeadingId;
     private getAnnotationMarkProps;
     private getMarkProps;
-    static getChildNodes(fragment: Fragment): (Node | TextWrapper)[];
+    private getChildNodes;
     static getMarks(node: Node): Mark[];
     static buildMarkStructure(content: Node[]): Mark[];
     static fromSchema(_: unknown, init: ReactSerializerInit): ReactSerializer;

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

@@ -0,0 +1,25 @@
+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/ui/renderer-props.d.ts

@@ -1,6 +1,6 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
@@ -135,6 +135,12 @@ export interface RendererProps {
     portal?: HTMLElement;
     rendererContext?: RendererContext;
     schema?: Schema;
+    /**
+     * Determines if the extension should be displayed as inline based on the extension parameters.
+     * @param extensionParams - The extension parameters.
+     * @returns True if the extension should be displayed as inline, false otherwise.
+     */
+    shouldDisplayExtensionAsInline?: (extensionParams: ExtensionParams<Parameters>) => boolean;
     shouldOpenMediaViewer?: boolean;
     shouldRemoveEmptySpaceAroundContent?: boolean;
     smartLinks?: SmartLinksOptions;

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

@@ -3,8 +3,7 @@ import type { Fragment, Mark, Node } from '@atlaskit/editor-prosemirror/model';
 import type { AnalyticsEventPayload } from '../analytics/events';
 import type { Serializer } from '../serializer';
 import type { HeadingAnchorLinksProps, NodeComponentsProps, RendererAppearance, RendererContentMode, StickyHeaderConfig } from '../ui/Renderer/types';
-import type { TextWrapper } from './nodes';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import type { EmojiResourceConfig } from '@atlaskit/emoji/resource';
@@ -44,6 +43,7 @@ export interface ReactSerializerInit {
     onSetLinkTarget?: (url: string) => '_blank' | undefined;
     portal?: HTMLElement;
     providers?: ProviderFactory;
+    shouldDisplayExtensionAsInline?: (extensionParams: ExtensionParams<Parameters>) => boolean;
     shouldOpenMediaViewer?: boolean;
     smartLinks?: SmartLinksOptions;
     /**
@@ -112,6 +112,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private disableTableOverflowShadow?;
     private standaloneBackgroundColorMarks;
     private onSetLinkTarget?;
+    private shouldDisplayExtensionAsInline?;
     constructor(init: ReactSerializerInit);
     private resetState;
     private getNodeProps;
@@ -147,7 +148,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getUniqueHeadingId;
     private getAnnotationMarkProps;
     private getMarkProps;
-    static getChildNodes(fragment: Fragment): (Node | TextWrapper)[];
+    private getChildNodes;
     static getMarks(node: Node): Mark[];
     static buildMarkStructure(content: Node[]): Mark[];
     static fromSchema(_: unknown, init: ReactSerializerInit): ReactSerializer;

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

@@ -0,0 +1,25 @@
+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/ui/renderer-props.d.ts

@@ -1,6 +1,6 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import type { ExtensionHandlers } from '@atlaskit/editor-common/extensions';
+import type { ExtensionHandlers, ExtensionParams, Parameters } from '@atlaskit/editor-common/extensions';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { AnnotationProviders } from '@atlaskit/editor-common/types';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
@@ -135,6 +135,12 @@ export interface RendererProps {
     portal?: HTMLElement;
     rendererContext?: RendererContext;
     schema?: Schema;
+    /**
+     * Determines if the extension should be displayed as inline based on the extension parameters.
+     * @param extensionParams - The extension parameters.
+     * @returns True if the extension should be displayed as inline, false otherwise.
+     */
+    shouldDisplayExtensionAsInline?: (extensionParams: ExtensionParams<Parameters>) => boolean;
     shouldOpenMediaViewer?: boolean;
     shouldRemoveEmptySpaceAroundContent?: boolean;
     smartLinks?: SmartLinksOptions;