@atlaskit/renderer 111.2.7 → 111.2.9

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/renderer
 
+## 111.2.9
+
+### Patch Changes
+
+- [#155853](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155853)
+  [`1986c9bd0cc15`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1986c9bd0cc15) -
+  [ux] ED-25409 Support comments on media for external images in renderer
+- [#155735](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155735)
+  [`1beeeda29023a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1beeeda29023a) -
+  Upgrades editor packages to react 18
+- Updated dependencies
+
+## 111.2.8
+
+### Patch Changes
+
+- [#155195](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155195)
+  [`73c97aeb48ea9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/73c97aeb48ea9) -
+  Add platform_editor_support_table_in_comment_jira experiment to control table drag and drop and
+  table scaling features to support new table features in jira
+- [#152897](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152897)
+  [`ecafb0e3e4fdf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ecafb0e3e4fdf) -
+  [ux] [ED-25418] Fix z-indexes for media badges in renderer
+- Updated dependencies
+
 ## 111.2.7
 
 ### Patch Changes

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

@@ -333,7 +333,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       }, (0, _experiments.editorExperiment)('add-media-from-url', true) && (0, _react2.jsx)(_mediaSingle.MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
-        mediaHeight: height
+        mediaHeight: height,
+        useMinimumZIndex: true
       }, function (_ref8) {
         var badgeSize = _ref8.badgeSize;
         return (0, _react2.jsx)(_react.default.Fragment, null, shouldShowExternalMediaBadge && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {

package/dist/cjs/react/nodes/table/colgroup.js

@@ -176,6 +176,8 @@ var Colgroup = exports.Colgroup = function Colgroup(props) {
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
       exposure: true
+    }) || props.rendererAppearance === 'comment' && (0, _experiments.editorExperiment)('support_table_in_comment_jira', true, {
+      exposure: true
     }),
     isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width')
   }));

package/dist/cjs/ui/MediaCard.js

@@ -21,6 +21,7 @@ var _traverse = require("@atlaskit/adf-utils/traverse");
 var _mediaCard = require("@atlaskit/media-card");
 var _mediaClientReact = require("@atlaskit/media-client-react");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -215,7 +216,8 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         alt = _this$props4.alt,
         featureFlags = _this$props4.featureFlags,
         ssr = _this$props4.ssr,
-        mediaClient = _this$props4.mediaClient;
+        mediaClient = _this$props4.mediaClient,
+        dataAttributes = _this$props4.dataAttributes;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -227,23 +229,45 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
 
       // we need this statement for the mandatory mediaClientConfig below
       var mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
-      return /*#__PURE__*/_react.default.createElement(_mediaCard.Card
-      // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
-      // context is not really used when the type is external and we want to render the component asap
-      , {
-        mediaClientConfig: mediaClientConfig,
-        alt: alt,
-        identifier: identifier,
-        dimensions: cardDimensions,
-        appearance: appearance,
-        resizeMode: resizeMode,
-        disableOverlay: disableOverlay,
-        shouldOpenMediaViewer: shouldOpenMediaViewer,
-        mediaViewerItems: Array.from(mediaIdentifierMap.values()),
-        featureFlags: featureFlags,
-        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
-        shouldHideTooltip: false
-      });
+      if ((0, _platformFeatureFlags.fg)('platform_editor_external_media_comment_bugfix')) {
+        return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, dataAttributes, {
+          "data-node-type": "media"
+        }), /*#__PURE__*/_react.default.createElement(_mediaCard.Card
+        // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+        // context is not really used when the type is external and we want to render the component asap
+        , {
+          mediaClientConfig: mediaClientConfig,
+          alt: alt,
+          identifier: identifier,
+          dimensions: cardDimensions,
+          appearance: appearance,
+          resizeMode: resizeMode,
+          disableOverlay: disableOverlay,
+          shouldOpenMediaViewer: shouldOpenMediaViewer,
+          mediaViewerItems: Array.from(mediaIdentifierMap.values()),
+          featureFlags: featureFlags,
+          ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+          shouldHideTooltip: false
+        }));
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_mediaCard.Card
+        // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+        // context is not really used when the type is external and we want to render the component asap
+        , {
+          mediaClientConfig: mediaClientConfig,
+          alt: alt,
+          identifier: identifier,
+          dimensions: cardDimensions,
+          appearance: appearance,
+          resizeMode: resizeMode,
+          disableOverlay: disableOverlay,
+          shouldOpenMediaViewer: shouldOpenMediaViewer,
+          mediaViewerItems: Array.from(mediaIdentifierMap.values()),
+          featureFlags: featureFlags,
+          ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+          shouldHideTooltip: false
+        });
+      }
     }
   }, {
     key: "render",

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

@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.2.7";
+var packageVersion = "111.2.9";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -300,7 +300,8 @@ class Media extends PureComponent {
       }, editorExperiment('add-media-from-url', true) && jsx(MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
-        mediaHeight: height
+        mediaHeight: height,
+        useMinimumZIndex: true
       }, ({
         badgeSize
       }) => jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {

package/dist/es2019/react/nodes/table/colgroup.js

@@ -166,6 +166,8 @@ export const Colgroup = props => {
     ...props,
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
+    }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {
+      exposure: true
     }),
     isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width')
   });

package/dist/es2019/ui/MediaCard.js

@@ -5,6 +5,7 @@ import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
@@ -147,7 +148,8 @@ export class MediaCardView extends Component {
       alt,
       featureFlags,
       ssr,
-      mediaClient
+      mediaClient,
+      dataAttributes
     } = this.props;
     if (imageStatus === 'loading' || !url) {
       return this.renderLoadingCard();
@@ -160,23 +162,45 @@ export class MediaCardView extends Component {
 
     // we need this statement for the mandatory mediaClientConfig below
     const mediaClientConfig = mediaClient === null || mediaClient === void 0 ? void 0 : mediaClient.mediaClientConfig;
-    return /*#__PURE__*/React.createElement(Card
-    // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
-    // context is not really used when the type is external and we want to render the component asap
-    , {
-      mediaClientConfig: mediaClientConfig,
-      alt: alt,
-      identifier: identifier,
-      dimensions: cardDimensions,
-      appearance: appearance,
-      resizeMode: resizeMode,
-      disableOverlay: disableOverlay,
-      shouldOpenMediaViewer: shouldOpenMediaViewer,
-      mediaViewerItems: Array.from(mediaIdentifierMap.values()),
-      featureFlags: featureFlags,
-      ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
-      shouldHideTooltip: false
-    });
+    if (fg('platform_editor_external_media_comment_bugfix')) {
+      return /*#__PURE__*/React.createElement("div", _extends({}, dataAttributes, {
+        "data-node-type": "media"
+      }), /*#__PURE__*/React.createElement(Card
+      // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+      // context is not really used when the type is external and we want to render the component asap
+      , {
+        mediaClientConfig: mediaClientConfig,
+        alt: alt,
+        identifier: identifier,
+        dimensions: cardDimensions,
+        appearance: appearance,
+        resizeMode: resizeMode,
+        disableOverlay: disableOverlay,
+        shouldOpenMediaViewer: shouldOpenMediaViewer,
+        mediaViewerItems: Array.from(mediaIdentifierMap.values()),
+        featureFlags: featureFlags,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+        shouldHideTooltip: false
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement(Card
+      // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+      // context is not really used when the type is external and we want to render the component asap
+      , {
+        mediaClientConfig: mediaClientConfig,
+        alt: alt,
+        identifier: identifier,
+        dimensions: cardDimensions,
+        appearance: appearance,
+        resizeMode: resizeMode,
+        disableOverlay: disableOverlay,
+        shouldOpenMediaViewer: shouldOpenMediaViewer,
+        mediaViewerItems: Array.from(mediaIdentifierMap.values()),
+        featureFlags: featureFlags,
+        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+        shouldHideTooltip: false
+      });
+    }
   }
   render() {
     const {

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

@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "111.2.7";
+const packageVersion = "111.2.9";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -324,7 +324,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       }, editorExperiment('add-media-from-url', true) && jsx(MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
-        mediaHeight: height
+        mediaHeight: height,
+        useMinimumZIndex: true
       }, function (_ref8) {
         var badgeSize = _ref8.badgeSize;
         return jsx(React.Fragment, null, shouldShowExternalMediaBadge && jsx(ExternalImageBadge, {

package/dist/esm/react/nodes/table/colgroup.js

@@ -169,6 +169,8 @@ export var Colgroup = function Colgroup(props) {
   var colStyles = renderScaleDownColgroup(_objectSpread(_objectSpread({}, props), {}, {
     isTableScalingEnabled: !!(flags && 'tablePreserveWidth' in flags && flags.tablePreserveWidth) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment', true, {
       exposure: true
+    }) || props.rendererAppearance === 'comment' && editorExperiment('support_table_in_comment_jira', true, {
+      exposure: true
     }),
     isTableFixedColumnWidthsOptionEnabled: !!(flags && 'tableWithFixedColumnWidthsOption' in flags && flags.tableWithFixedColumnWidthsOption) && (props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width')
   }));

package/dist/esm/ui/MediaCard.js

@@ -17,6 +17,7 @@ import { filter } from '@atlaskit/adf-utils/traverse';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var mediaIdentifierMap = new Map();
 export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
   if (!doc) {
@@ -205,7 +206,8 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         alt = _this$props4.alt,
         featureFlags = _this$props4.featureFlags,
         ssr = _this$props4.ssr,
-        mediaClient = _this$props4.mediaClient;
+        mediaClient = _this$props4.mediaClient,
+        dataAttributes = _this$props4.dataAttributes;
       if (imageStatus === 'loading' || !url) {
         return this.renderLoadingCard();
       }
@@ -217,23 +219,45 @@ 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;
-      return /*#__PURE__*/React.createElement(Card
-      // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
-      // context is not really used when the type is external and we want to render the component asap
-      , {
-        mediaClientConfig: mediaClientConfig,
-        alt: alt,
-        identifier: identifier,
-        dimensions: cardDimensions,
-        appearance: appearance,
-        resizeMode: resizeMode,
-        disableOverlay: disableOverlay,
-        shouldOpenMediaViewer: shouldOpenMediaViewer,
-        mediaViewerItems: Array.from(mediaIdentifierMap.values()),
-        featureFlags: featureFlags,
-        ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
-        shouldHideTooltip: false
-      });
+      if (fg('platform_editor_external_media_comment_bugfix')) {
+        return /*#__PURE__*/React.createElement("div", _extends({}, dataAttributes, {
+          "data-node-type": "media"
+        }), /*#__PURE__*/React.createElement(Card
+        // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+        // context is not really used when the type is external and we want to render the component asap
+        , {
+          mediaClientConfig: mediaClientConfig,
+          alt: alt,
+          identifier: identifier,
+          dimensions: cardDimensions,
+          appearance: appearance,
+          resizeMode: resizeMode,
+          disableOverlay: disableOverlay,
+          shouldOpenMediaViewer: shouldOpenMediaViewer,
+          mediaViewerItems: Array.from(mediaIdentifierMap.values()),
+          featureFlags: featureFlags,
+          ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+          shouldHideTooltip: false
+        }));
+      } else {
+        return /*#__PURE__*/React.createElement(Card
+        // TODO MPT-315: clean up after we move mediaClientConfig into FileIdentifier
+        // context is not really used when the type is external and we want to render the component asap
+        , {
+          mediaClientConfig: mediaClientConfig,
+          alt: alt,
+          identifier: identifier,
+          dimensions: cardDimensions,
+          appearance: appearance,
+          resizeMode: resizeMode,
+          disableOverlay: disableOverlay,
+          shouldOpenMediaViewer: shouldOpenMediaViewer,
+          mediaViewerItems: Array.from(mediaIdentifierMap.values()),
+          featureFlags: featureFlags,
+          ssr: ssr === null || ssr === void 0 ? void 0 : ssr.mode,
+          shouldHideTooltip: false
+        });
+      }
     }
   }, {
     key: "render",

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

@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "111.2.7";
+var packageVersion = "111.2.9";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "111.2.7",
+	"version": "111.2.9",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,22 +23,22 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^42.3.1",
-		"@atlaskit/adf-utils": "^19.9.0",
+		"@atlaskit/adf-utils": "^19.10.0",
 		"@atlaskit/analytics-listeners": "^8.11.0",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/button": "^20.2.0",
+		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/editor-common": "^94.0.0",
+		"@atlaskit/editor-common": "^94.2.0",
 		"@atlaskit/editor-json-transformer": "^8.20.0",
-		"@atlaskit/editor-palette": "1.6.1",
+		"@atlaskit/editor-palette": "1.6.2",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
 		"@atlaskit/emoji": "^67.8.0",
 		"@atlaskit/feature-gate-js-client": "^4.20.0",
-		"@atlaskit/icon": "^22.23.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/link-datasource": "^3.6.0",
-		"@atlaskit/media-card": "^78.7.0",
+		"@atlaskit/media-card": "^78.8.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.6.0",
@@ -93,8 +93,6 @@
 		"jsdom": "^22.0.0",
 		"mockdate": "^3.0.5",
 		"puppeteer": "13.7.0",
-		"react": "^16.8.0",
-		"react-dom": "^16.8.0",
 		"react-live-clock": "^5.0.0",
 		"react-magnetic-di": "^3.1.4",
 		"react-moment": "^1.1.2",
@@ -136,6 +134,9 @@
 		},
 		"platform-datasources-enable-two-way-sync": {
 			"type": "boolean"
+		},
+		"platform_editor_external_media_comment_bugfix": {
+			"type": "boolean"
 		}
 	},
 	"af:exports": {