@atlaskit/renderer 109.0.0 → 109.0.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/renderer
 
+## 109.0.2
+
+### Patch Changes
+
+- [#61186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61186) [`56c310f67664`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56c310f67664) - [ED-20481] Update media breakout calculation in SSR mode for pixel resizing experience
+
+## 109.0.1
+
+### Patch Changes
+
+- [#60167](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/60167) [`ae0930df4bfa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae0930df4bfa) - Renamed supportReact18 to runReact18
+
 ## 109.0.0
 
 ### Major Changes

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -126,7 +126,10 @@ var MediaSingle = function MediaSingle(props) {
   var isFullWidth = rendererAppearance === 'full-width';
   var calcDimensions = function calcDimensions(mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = containerWidth;
+    var isPixel = widthType === 'pixel';
+
+    // max width and height are already handled in mediaSingle
+    var maxWidth = isPixel && widthAttr ? widthAttr : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),

package/dist/cjs/ui/Renderer/breakout-ssr.js

@@ -106,8 +106,8 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
        * The mutation observer is only called once per added node.
        * The above condition only deals with direct children of <div class="ak-renderer-document" />
        * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
-       * Thus adding this conditional to deal with all meida elements directly.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
        */
       item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
         applyMediaBreakout(item.target);
@@ -130,9 +130,12 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
     }
     var mode = card.dataset.mode || card.dataset.layout || '';
     var width = card.dataset.width;
+    var isPixelBasedResizing = card.dataset.widthType === 'pixel';
     if (WIDE_LAYOUT_MODES.includes(mode)) {
       card.style.width = '100%';
-    } else if (width) {
+    } else if (width && !isPixelBasedResizing) {
+      // Pixel based resizing has width set in pixels based on its width attribute
+      // Thus, no need to override for non-wide layouts
       card.style.width = "".concat(width, "%");
     }
   };

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.0";
+var packageVersion = "109.0.2";
 var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -111,7 +111,10 @@ const MediaSingle = props => {
   const isFullWidth = rendererAppearance === 'full-width';
   const calcDimensions = mediaContainerWidth => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    const maxWidth = containerWidth;
+    const isPixel = widthType === 'pixel';
+
+    // max width and height are already handled in mediaSingle
+    const maxWidth = isPixel && widthAttr ? widthAttr : containerWidth;
     const maxHeight = height / width * maxWidth;
     const cardDimensions = {
       width: `${maxWidth}px`,

package/dist/es2019/ui/Renderer/breakout-ssr.js

@@ -110,8 +110,8 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
        * The mutation observer is only called once per added node.
        * The above condition only deals with direct children of <div class="ak-renderer-document" />
        * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
-       * Thus adding this conditional to deal with all meida elements directly.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
        */
       item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
         applyMediaBreakout(item.target);
@@ -132,9 +132,12 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
     }
     const mode = card.dataset.mode || card.dataset.layout || '';
     const width = card.dataset.width;
+    const isPixelBasedResizing = card.dataset.widthType === 'pixel';
     if (WIDE_LAYOUT_MODES.includes(mode)) {
       card.style.width = '100%';
-    } else if (width) {
+    } else if (width && !isPixelBasedResizing) {
+      // Pixel based resizing has width set in pixels based on its width attribute
+      // Thus, no need to override for non-wide layouts
       card.style.width = `${width}%`;
     }
   };

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.0";
+const packageVersion = "109.0.2";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/esm/react/nodes/mediaSingle/index.js

@@ -116,7 +116,10 @@ var MediaSingle = function MediaSingle(props) {
   var isFullWidth = rendererAppearance === 'full-width';
   var calcDimensions = function calcDimensions(mediaContainerWidth) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
-    var maxWidth = containerWidth;
+    var isPixel = widthType === 'pixel';
+
+    // max width and height are already handled in mediaSingle
+    var maxWidth = isPixel && widthAttr ? widthAttr : containerWidth;
     var maxHeight = height / width * maxWidth;
     var cardDimensions = {
       width: "".concat(maxWidth, "px"),

package/dist/esm/ui/Renderer/breakout-ssr.js

@@ -98,8 +98,8 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
        * The mutation observer is only called once per added node.
        * The above condition only deals with direct children of <div class="ak-renderer-document" />
        * When it is initially called on the direct children, not all the sub children have loaded.
-       * So nested media elements which are not immediately loaded as sub children are not availabe in the above conditional.
-       * Thus adding this conditional to deal with all meida elements directly.
+       * So nested media elements which are not immediately loaded as sub children are not available in the above conditional.
+       * Thus adding this conditional to deal with all media elements directly.
        */
       item.target.dataset.nodeType === MEDIA_NODE_TYPE) {
         applyMediaBreakout(item.target);
@@ -122,9 +122,12 @@ function applyBreakoutAfterSSR(id, breakoutConsts) {
     }
     var mode = card.dataset.mode || card.dataset.layout || '';
     var width = card.dataset.width;
+    var isPixelBasedResizing = card.dataset.widthType === 'pixel';
     if (WIDE_LAYOUT_MODES.includes(mode)) {
       card.style.width = '100%';
-    } else if (width) {
+    } else if (width && !isPixelBasedResizing) {
+      // Pixel based resizing has width set in pixels based on its width attribute
+      // Thus, no need to override for non-wide layouts
       card.style.width = "".concat(width, "%");
     }
   };

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.0";
+var packageVersion = "109.0.2";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.0.0",
+  "version": "109.0.2",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,7 +22,7 @@
     "website": {
       "name": "Renderer"
     },
-    "supportsReact18": true
+    "runReact18": true
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.1.1",