@atlaskit/renderer 109.0.5 → 109.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 109.1.1
+
+### Patch Changes
+
+- [#62765](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62765) [`ec6a2bbae20e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec6a2bbae20e) - ED-21606: Width options support for MBE renderer and adding back edit option on toolbar
+
+## 109.1.0
+
+### Minor Changes
+
+- [#61685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61685) [`ac1ec9ea4cd3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac1ec9ea4cd3) - [ux] Add border mark support to mediaInline in Editor/Renderer
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 109.0.5
 
 ### Patch Changes

package/dist/cjs/react/marks/border.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Border;
+var _react = require("@emotion/react");
+var _editorPalette = require("@atlaskit/editor-palette");
+/** @jsx jsx */
+
+function Border(props) {
+  var _props$color, _props$size;
+  var borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  var borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+  return (0, _react.jsx)("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/cjs/react/marks/index.js

@@ -11,6 +11,12 @@ Object.defineProperty(exports, "Annotation", {
     return _annotation.default;
   }
 });
+Object.defineProperty(exports, "Border", {
+  enumerable: true,
+  get: function get() {
+    return _border.default;
+  }
+});
 Object.defineProperty(exports, "Breakout", {
   enumerable: true,
   get: function get() {
@@ -112,6 +118,7 @@ var _unsupportedNodeAttribute = _interopRequireDefault(require("./unsupportedNod
 var _dataConsumer = _interopRequireDefault(require("./data-consumer"));
 var _fragment = _interopRequireDefault(require("./fragment"));
 var _annotation = _interopRequireWildcard(require("./annotation"));
+var _border = _interopRequireDefault(require("./border"));
 var _confluenceInlineComment = _interopRequireDefault(require("./confluence-inline-comment"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -127,6 +134,7 @@ var markToReact = exports.markToReact = {
   textColor: _textColor.default,
   underline: _underline.default,
   annotation: _annotation.default,
+  border: _border.default,
   // Stage0
   confluenceInlineComment: _confluenceInlineComment.default,
   breakout: _breakout.default,

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

@@ -34,7 +34,9 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
     alt = _ref.alt,
     width = _ref.width,
     height = _ref.height,
-    type = _ref.type;
+    type = _ref.type,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -139,7 +141,11 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderSize,
+        borderColor: borderColor
+      }
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
@@ -175,6 +181,7 @@ var RenderMediaInline = exports.RenderMediaInline = function RenderMediaInline(_
   }));
 };
 var MediaInline = function MediaInline(props) {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
     providerFactory = props.providers,
@@ -184,7 +191,8 @@ var MediaInline = function MediaInline(props) {
     fileType = props.type,
     alt = props.alt,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    marks = props.marks;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -194,6 +202,11 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+  });
+  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -210,7 +223,9 @@ var MediaInline = function MediaInline(props) {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

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

@@ -14,7 +14,11 @@ var _colors = require("@atlaskit/theme/colors");
 var _react2 = _interopRequireWildcard(require("react"));
 var _extension = require("./extension");
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _consts = require("../../consts");
+var _utils = require("@atlaskit/editor-common/utils");
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -69,40 +73,51 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
-  var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    border: 1px solid ", ";\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(_colors.N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  var containerCSS = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), activeChildIndex + 1, "var(--ds-border, ".concat(_colors.N50, ")"));
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   return (0, _react.jsx)("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, (0, _react.jsx)("nav", {
-    className: "multiBodiedExtension-navigation",
-    css: navigationCSS,
-    "data-testid": "multiBodiedExtension-navigation"
-  }, (0, _react.jsx)(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
-    actions: actions,
-    type: "multiBodiedExtension"
-  }), function (_ref2) {
-    var result = _ref2.result;
-    try {
-      if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
-        // Return the content directly if it's a valid JSX.Element
-        return (0, _extension.renderExtension)(result, layout, {
-          isTopLevel: path.length < 1
-        });
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
+    var width = _ref2.width;
+    return (0, _react.jsx)("div", {
+      className: "".concat(_consts.RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+      style: {
+        width: isTopLevel ? (0, _utils.calcBreakoutWidth)(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, (0, _react.jsx)("nav", {
+      className: "multiBodiedExtension-navigation",
+      css: navigationCSS,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, (0, _react.jsx)(_ExtensionRenderer.default, (0, _extends2.default)({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), function (_ref3) {
+      var result = _ref3.result;
+      try {
+        if (result && /*#__PURE__*/_react2.default.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return (0, _extension.renderExtension)(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } catch (e) {
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
       }
-    } catch (e) {
-      /** We don't want this error to block renderer */
-      /** We keep rendering the default content */
-    }
 
-    // Always return default content if anything goes wrong
-    return (0, _extension.renderExtension)(children, layout, {
-      isTopLevel: path.length < 1
-    });
-  })), (0, _react.jsx)("article", {
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames"
-  }, children));
+      // Always return default content if anything goes wrong
+      return (0, _extension.renderExtension)(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), (0, _react.jsx)("article", {
+      className: "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+    }, children));
+  }));
 };
 var _default = exports.default = MultiBodiedExtension;

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

@@ -54,7 +54,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.5";
+var packageVersion = "109.1.1";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/marks/border.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+export default function Border(props) {
+  var _props$color, _props$size;
+  const borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  const borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/es2019/react/marks/index.js

@@ -14,6 +14,7 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 
 // Stage0
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -27,6 +28,7 @@ export const markToReact = {
   textColor: TextColor,
   underline: Underline,
   annotation: Annotation,
+  border: Border,
   // Stage0
   confluenceInlineComment: ConfluenceInlineComment,
   breakout: Breakout,
@@ -40,4 +42,4 @@ export const markToReact = {
 export const toReact = mark => {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

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

@@ -18,7 +18,9 @@ export const RenderMediaInline = ({
   alt,
   width,
   height,
-  type
+  type,
+  borderSize,
+  borderColor
 }) => {
   const [contextIdentifierProvider, setContextIdentifierProvider] = useState();
   const [fileState, setFileState] = useState();
@@ -84,7 +86,11 @@ export const RenderMediaInline = ({
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize,
+        borderColor
+      }
     });
   }
   const handleMediaInlineClick = result => {
@@ -124,6 +130,7 @@ export const RenderMediaInline = ({
   }));
 };
 const MediaInline = props => {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   const {
     collection,
     id,
@@ -134,7 +141,8 @@ const MediaInline = props => {
     type: fileType,
     alt,
     width,
-    height
+    height,
+    marks
   } = props;
   const clipboardAttrs = {
     id,
@@ -145,6 +153,9 @@ const MediaInline = props => {
     mediaItemType: 'file',
     collectionName: collection
   };
+  const borderMark = marks === null || marks === void 0 ? void 0 : marks.find(mark => (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border');
+  const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  const borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -161,7 +172,9 @@ const MediaInline = props => {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

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

@@ -1,11 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
-import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import { N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
+import { RendererCssClassName } from '../../consts';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 const useMultiBodiedExtensionActions = ({
   updateActiveChild,
   children
@@ -68,7 +72,6 @@ const MultiBodiedExtension = props => {
     children
   });
   const containerCSS = css`
-    border: 1px solid ${`var(--ds-border, ${N30})`};
     min-height: 100px;
 
     .multiBodiedExtension--frames > [data-extension-frame='true'] {
@@ -82,11 +85,21 @@ const MultiBodiedExtension = props => {
       min-height: 100px;
     }
   `;
+  const isTopLevel = path.length < 1;
+  const centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
+  }, jsx(WidthConsumer, null, ({
+    width
+  }) => jsx("div", {
+    className: `${RendererCssClassName.EXTENSION} ${centerAlignClass}`,
+    style: {
+      width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+    },
+    "data-layout": layout
   }, jsx("nav", {
     className: "multiBodiedExtension-navigation",
     css: navigationCSS,
@@ -116,6 +129,6 @@ const MultiBodiedExtension = props => {
   })), jsx("article", {
     className: "multiBodiedExtension--frames",
     "data-testid": "multiBodiedExtension--frames"
-  }, children));
+  }, children))));
 };
 export default MultiBodiedExtension;

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

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.0.5";
+const packageVersion = "109.1.1";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/marks/border.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+export default function Border(props) {
+  var _props$color, _props$size;
+  var borderColor = (_props$color = props.color) !== null && _props$color !== void 0 ? _props$color : '';
+  var borderSize = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 0;
+  var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+  return jsx("span", {
+    "data-color": paletteColorValue,
+    "data-size": borderSize,
+    "data-mark-type": "border"
+  }, props.children);
+}

package/dist/esm/react/marks/index.js

@@ -14,6 +14,7 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 
 // Stage0
 import ConfluenceInlineComment from './confluence-inline-comment';
@@ -27,6 +28,7 @@ export var markToReact = {
   textColor: TextColor,
   underline: Underline,
   annotation: Annotation,
+  border: Border,
   // Stage0
   confluenceInlineComment: ConfluenceInlineComment,
   breakout: Breakout,
@@ -40,4 +42,4 @@ export var markToReact = {
 export var toReact = function toReact(mark) {
   return markToReact[mark.type.name];
 };
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark };

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

@@ -24,7 +24,9 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     alt = _ref.alt,
     width = _ref.width,
     height = _ref.height,
-    type = _ref.type;
+    type = _ref.type,
+    borderSize = _ref.borderSize,
+    borderColor = _ref.borderColor;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     contextIdentifierProvider = _useState2[0],
@@ -129,7 +131,11 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
       identifier: identifier,
       alt: alt,
       width: width,
-      height: height
+      height: height,
+      border: {
+        borderSize: borderSize,
+        borderColor: borderColor
+      }
     });
   }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
@@ -165,6 +171,7 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
   }));
 };
 var MediaInline = function MediaInline(props) {
+  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
     providerFactory = props.providers,
@@ -174,7 +181,8 @@ var MediaInline = function MediaInline(props) {
     fileType = props.type,
     alt = props.alt,
     width = props.width,
-    height = props.height;
+    height = props.height,
+    marks = props.marks;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -184,6 +192,11 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
+  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+  });
+  var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+  var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
   return /*#__PURE__*/React.createElement(WithProviders, {
     providers: ['mediaProvider', 'contextIdentifierProvider'],
     providerFactory: providerFactory,
@@ -200,7 +213,9 @@ var MediaInline = function MediaInline(props) {
         type: fileType,
         alt: alt,
         width: width,
-        height: height
+        height: height,
+        borderSize: borderSize,
+        borderColor: borderColor
       });
     }
   });

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

@@ -2,13 +2,17 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 
 import { jsx, css } from '@emotion/react';
-import { N30, N40, N50 } from '@atlaskit/theme/colors';
+import { N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
 import ExtensionRenderer from '../../ui/ExtensionRenderer';
+import { WidthConsumer } from '@atlaskit/editor-common/ui';
+import { RendererCssClassName } from '../../consts';
+import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 var useMultiBodiedExtensionActions = function useMultiBodiedExtensionActions(_ref) {
   var updateActiveChild = _ref.updateActiveChild,
     children = _ref.children;
@@ -60,40 +64,51 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     updateActiveChild: updateActiveChild,
     children: children
   });
-  var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), "var(--ds-border, ".concat(N30, ")"), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
+  var isTopLevel = path.length < 1;
+  var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
   return jsx("section", {
     className: "multiBodiedExtension--container",
     css: containerCSS,
     "data-testid": "multiBodiedExtension--container",
     "data-active-child-index": activeChildIndex
-  }, jsx("nav", {
-    className: "multiBodiedExtension-navigation",
-    css: navigationCSS,
-    "data-testid": "multiBodiedExtension-navigation"
-  }, jsx(ExtensionRenderer, _extends({}, props, {
-    actions: actions,
-    type: "multiBodiedExtension"
-  }), function (_ref2) {
-    var result = _ref2.result;
-    try {
-      if (result && /*#__PURE__*/React.isValidElement(result)) {
-        // Return the content directly if it's a valid JSX.Element
-        return renderExtension(result, layout, {
-          isTopLevel: path.length < 1
-        });
+  }, jsx(WidthConsumer, null, function (_ref2) {
+    var width = _ref2.width;
+    return jsx("div", {
+      className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
+      style: {
+        width: isTopLevel ? calcBreakoutWidth(layout, width) : '100%'
+      },
+      "data-layout": layout
+    }, jsx("nav", {
+      className: "multiBodiedExtension-navigation",
+      css: navigationCSS,
+      "data-testid": "multiBodiedExtension-navigation"
+    }, jsx(ExtensionRenderer, _extends({}, props, {
+      actions: actions,
+      type: "multiBodiedExtension"
+    }), function (_ref3) {
+      var result = _ref3.result;
+      try {
+        if (result && /*#__PURE__*/React.isValidElement(result)) {
+          // Return the content directly if it's a valid JSX.Element
+          return renderExtension(result, layout, {
+            isTopLevel: path.length < 1
+          });
+        }
+      } catch (e) {
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
       }
-    } catch (e) {
-      /** We don't want this error to block renderer */
-      /** We keep rendering the default content */
-    }
 
-    // Always return default content if anything goes wrong
-    return renderExtension(children, layout, {
-      isTopLevel: path.length < 1
-    });
-  })), jsx("article", {
-    className: "multiBodiedExtension--frames",
-    "data-testid": "multiBodiedExtension--frames"
-  }, children));
+      // Always return default content if anything goes wrong
+      return renderExtension(children, layout, {
+        isTopLevel: path.length < 1
+      });
+    })), jsx("article", {
+      className: "multiBodiedExtension--frames",
+      "data-testid": "multiBodiedExtension--frames"
+    }, children));
+  }));
 };
 export default MultiBodiedExtension;

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

@@ -45,7 +45,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "109.0.5";
+var packageVersion = "109.1.1";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

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

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
+export default function Border(props: MarkProps<BorderMarkAttributes>): jsx.JSX.Element;

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

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { ComponentType } from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import Code from './code';
 import Em from './em';
 import Link from './link';
@@ -14,8 +14,9 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

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

@@ -9,6 +9,7 @@ import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs, MediaProvider } from '../../ui/MediaCard';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,6 +33,7 @@ export type MediaInlineProps = {
     eventHandlers?: EventHandlers;
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
+    marks?: Array<Mark>;
 };
 export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
 declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {

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

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { BorderMarkAttributes } from '@atlaskit/adf-schema';
+import type { MarkProps } from '../types';
+export default function Border(props: MarkProps<BorderMarkAttributes>): jsx.JSX.Element;

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

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import { Mark } from '@atlaskit/editor-prosemirror/model';
+import type { ComponentType } from 'react';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 import Code from './code';
 import Em from './em';
 import Link from './link';
@@ -14,8 +14,9 @@ import UnsupportedNodeAttribute from './unsupportedNodeAttribute';
 import DataConsumer from './data-consumer';
 import FragmentMark from './fragment';
 import Annotation, { isAnnotationMark } from './annotation';
+import Border from './border';
 export declare const markToReact: {
     [key: string]: ComponentType<any>;
 };
 export declare const toReact: (mark: Mark) => ComponentType<any>;
-export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };
+export { Code, Em, Link, Strike, Strong, Subsup, TextColor, Underline, Breakout, Annotation, Border, UnsupportedMark, isAnnotationMark, UnsupportedNodeAttribute, DataConsumer, FragmentMark, };

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

@@ -9,6 +9,7 @@ import type { IntlShape, WrappedComponentProps } from 'react-intl-next';
 import type { ClipboardAttrs, MediaProvider } from '../../ui/MediaCard';
 import type { RendererAppearance } from '../../ui/Renderer/types';
 import type { RendererContext } from '../types';
+import type { Mark } from '@atlaskit/editor-prosemirror/model';
 type MediaInlineProviders = {
     mediaProvider?: Promise<MediaProvider>;
     contextIdentifierProvider?: Promise<ContextIdentifierProvider>;
@@ -32,6 +33,7 @@ export type MediaInlineProps = {
     eventHandlers?: EventHandlers;
     rendererAppearance?: RendererAppearance;
     featureFlags?: MediaFeatureFlags;
+    marks?: Array<Mark>;
 };
 export declare const RenderMediaInline: FC<RenderMediaInlineProps & MediaInlineAttrs>;
 declare const _default: FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl"> & MediaInlineAttrs>> & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.0.5",
+  "version": "109.1.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^17.1.0",
     "@atlaskit/code": "^15.1.0",
-    "@atlaskit/editor-common": "^76.27.0",
+    "@atlaskit/editor-common": "^76.28.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "1.1.0",