@atlaskit/editor-plugin-media 1.28.0 → 1.28.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-media
 
+## 1.28.1
+
+### Patch Changes
+
+- [#128613](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128613)
+  [`9ca6a3874ec07`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9ca6a3874ec07) -
+  [ED-24516] Fix prepareDiff to avoid toDOM usage
+- Updated dependencies
+
 ## 1.28.0
 
 ### Minor Changes

package/dist/cjs/toDOM-fixes/mediaSingle.js

@@ -128,14 +128,13 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
     toDOM: function toDOM(node) {
-      var _mediaSingleAttrs$lay, _childNode$type;
+      var _mediaSingleAttrs$lay;
       var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
       var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(mediaSingleOption.withExtendedWidthTypes, node);
-      var mediaAttrs = (childNode === null || childNode === void 0 || (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? (0, _toDOMAttrs.getMediaAttrs)('media', childNode) : undefined;
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
@@ -145,16 +144,20 @@ var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = func
         height = _computeMediaSingleDi.height;
       var layoutStyles = computeLayoutStyles(width, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
-      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
-        return ['div', dataAttrs, ['img', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
-          src: childNode.attrs.url,
-          style: style
-        })]];
-      }
-      return ['div', dataAttrs, ['div', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
+      var content = ['div', _objectSpread({
+        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+      }, dataAttrs), ['div', {
+        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
         style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
-      })]];
+      }, ['figure', {
+        class: 'media-single-node'
+      }, ['div', {}, ['div', {
+        class: 'media-content-wrap'
+      }, 0]]]]];
+      return ['div', {
+        class: 'mediaSingleView-content-wrap'
+      }, content];
     }
   });
 };

package/dist/cjs/toDOM-fixes/toDOMAttrs.js

@@ -64,17 +64,13 @@ var getAttrsFromNodeMediaSingle = exports.getAttrsFromNodeMediaSingle = function
     width = _node$attrs.width;
   var attrs = {
     'data-node-type': 'mediaSingle',
-    'data-layout': layout,
-    'data-width': ''
+    'data-layout': layout
   };
   if (width) {
     attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
   }
-  if (withExtendedWidthTypes && node.attrs.widthType) {
-    var widthType = node.attrs.widthType;
-    return _objectSpread(_objectSpread({}, attrs), {}, {
-      'data-width-type': widthType || 'percentage'
-    });
-  }
-  return attrs;
+  var widthType = node.attrs.widthType;
+  return _objectSpread(_objectSpread({}, attrs), {}, {
+    'data-width-type': widthType || 'percentage'
+  });
 };

package/dist/es2019/toDOM-fixes/mediaSingle.js

@@ -1,6 +1,6 @@
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getAttrsFromNodeMediaSingle, getMediaAttrs } from './toDOMAttrs';
+import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 const skeletonStyling = `background: ${"var(--ds-background-neutral, #091E420F)"}; outline: none;`;
 export const wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 
@@ -117,14 +117,13 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
   return {
     ...mediaSingleNode,
     toDOM: node => {
-      var _mediaSingleAttrs$lay, _childNode$type;
+      var _mediaSingleAttrs$lay;
       const childNode = node.firstChild;
       const mediaSingleAttrs = node.attrs;
       const layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       const mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       const widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
       const dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
-      const mediaAttrs = (childNode === null || childNode === void 0 ? void 0 : (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? getMediaAttrs('media', childNode) : undefined;
       const {
         width,
         height
@@ -135,18 +134,21 @@ export const mediaSingleSpecWithFixedToDOM = mediaSingleOption => {
       });
       const layoutStyles = computeLayoutStyles(width, layout);
       const style = `display: block; margin-top: ${"var(--ds-space-300, 24px)"}; margin-bottom: ${"var(--ds-space-300, 24px)"}; ${layoutStyles}`;
-      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
-        return ['div', dataAttrs, ['img', {
-          ...mediaAttrs,
-          src: childNode.attrs.url,
-          style
-        }]];
-      }
-      return ['div', dataAttrs, ['div', {
-        ...mediaAttrs,
+      const content = ['div', {
+        class: 'rich-media-item mediaSingleView-content-wrap image-center',
+        ...dataAttrs
+      }, ['div', {
+        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
         style: `width: ${width}px; height: ${height}px; ${style} ${skeletonStyling} border-radius: ${"var(--ds-border-radius, 3px)"};`
-      }]];
+      }, ['figure', {
+        class: 'media-single-node'
+      }, ['div', {}, ['div', {
+        class: 'media-content-wrap'
+      }, 0]]]]];
+      return ['div', {
+        class: 'mediaSingleView-content-wrap'
+      }, content];
     }
   };
 };

package/dist/es2019/toDOM-fixes/toDOMAttrs.js

@@ -50,20 +50,16 @@ export const getAttrsFromNodeMediaSingle = (withExtendedWidthTypes, node) => {
   } = node.attrs;
   const attrs = {
     'data-node-type': 'mediaSingle',
-    'data-layout': layout,
-    'data-width': ''
+    'data-layout': layout
   };
   if (width) {
     attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
   }
-  if (withExtendedWidthTypes && node.attrs.widthType) {
-    const {
-      widthType
-    } = node.attrs;
-    return {
-      ...attrs,
-      'data-width-type': widthType || 'percentage'
-    };
-  }
-  return attrs;
+  const {
+    widthType
+  } = node.attrs;
+  return {
+    ...attrs,
+    'data-width-type': widthType || 'percentage'
+  };
 };

package/dist/esm/toDOM-fixes/mediaSingle.js

@@ -3,7 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import { mediaSingleSpec } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { getAttrsFromNodeMediaSingle, getMediaAttrs } from './toDOMAttrs';
+import { getAttrsFromNodeMediaSingle } from './toDOMAttrs';
 var skeletonStyling = "background: ".concat("var(--ds-background-neutral, #091E420F)", "; outline: none;");
 export var wrappedLayouts = ['wrap-left', 'wrap-right', 'align-end', 'align-start'];
 
@@ -120,14 +120,13 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
   }
   return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
     toDOM: function toDOM(node) {
-      var _mediaSingleAttrs$lay, _childNode$type;
+      var _mediaSingleAttrs$lay;
       var childNode = node.firstChild;
       var mediaSingleAttrs = node.attrs;
       var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
       var mediaSingleWidth = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width;
       var widthType = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType;
       var dataAttrs = getAttrsFromNodeMediaSingle(mediaSingleOption.withExtendedWidthTypes, node);
-      var mediaAttrs = (childNode === null || childNode === void 0 || (_childNode$type = childNode.type) === null || _childNode$type === void 0 ? void 0 : _childNode$type.name) === 'media' ? getMediaAttrs('media', childNode) : undefined;
       var _computeMediaSingleDi = computeMediaSingleDimensions({
           childNode: childNode,
           widthType: widthType,
@@ -137,16 +136,20 @@ export var mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDO
         height = _computeMediaSingleDi.height;
       var layoutStyles = computeLayoutStyles(width, layout);
       var style = "display: block; margin-top: ".concat("var(--ds-space-300, 24px)", "; margin-bottom: ", "var(--ds-space-300, 24px)", "; ", layoutStyles);
-      if ((childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external') {
-        return ['div', dataAttrs, ['img', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
-          src: childNode.attrs.url,
-          style: style
-        })]];
-      }
-      return ['div', dataAttrs, ['div', _objectSpread(_objectSpread({}, mediaAttrs), {}, {
+      var content = ['div', _objectSpread({
+        class: 'rich-media-item mediaSingleView-content-wrap image-center'
+      }, dataAttrs), ['div', {
+        class: 'css-13f4nzt-MediaWrapper',
         // Transparent image workaround to control styling
         style: "width: ".concat(width, "px; height: ").concat(height, "px; ").concat(style, " ").concat(skeletonStyling, " border-radius: ", "var(--ds-border-radius, 3px)", ";")
-      })]];
+      }, ['figure', {
+        class: 'media-single-node'
+      }, ['div', {}, ['div', {
+        class: 'media-content-wrap'
+      }, 0]]]]];
+      return ['div', {
+        class: 'mediaSingleView-content-wrap'
+      }, content];
     }
   });
 };

package/dist/esm/toDOM-fixes/toDOMAttrs.js

@@ -58,17 +58,13 @@ export var getAttrsFromNodeMediaSingle = function getAttrsFromNodeMediaSingle(wi
     width = _node$attrs.width;
   var attrs = {
     'data-node-type': 'mediaSingle',
-    'data-layout': layout,
-    'data-width': ''
+    'data-layout': layout
   };
   if (width) {
     attrs['data-width'] = isFinite(width) && Math.floor(width) === width ? width : width.toFixed(2);
   }
-  if (withExtendedWidthTypes && node.attrs.widthType) {
-    var widthType = node.attrs.widthType;
-    return _objectSpread(_objectSpread({}, attrs), {}, {
-      'data-width-type': widthType || 'percentage'
-    });
-  }
-  return attrs;
+  var widthType = node.attrs.widthType;
+  return _objectSpread(_objectSpread({}, attrs), {}, {
+    'data-width-type': widthType || 'percentage'
+  });
 };

package/dist/types/toDOM-fixes/toDOMAttrs.d.ts

@@ -24,12 +24,5 @@ export declare const camelCaseToKebabCase: (str: string) => string;
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
  */
 export declare const getAttrsFromNodeMediaSingle: (withExtendedWidthTypes: boolean, node: PMNode) => {
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
-} | {
     'data-width-type': any;
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
 };

package/dist/types-ts4.5/toDOM-fixes/toDOMAttrs.d.ts

@@ -24,12 +24,5 @@ export declare const camelCaseToKebabCase: (str: string) => string;
  * When we patch adf-schema with media `toDOM` fixes we can remove this.
  */
 export declare const getAttrsFromNodeMediaSingle: (withExtendedWidthTypes: boolean, node: PMNode) => {
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
-} | {
     'data-width-type': any;
-    'data-node-type': string;
-    'data-layout': any;
-    'data-width': string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.28.0",
+	"version": "1.28.1",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -64,7 +64,7 @@
 		"@atlaskit/media-ui": "^25.10.0",
 		"@atlaskit/media-viewer": "^48.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^11.1.0",
+		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.57.0",