@atlaskit/renderer 124.9.10 → 124.10.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/renderer
 
+## 124.10.0
+
+### Minor Changes
+
+- [`e5c510a42227e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e5c510a42227e) -
+  [ux] Disable preview modals within preview panels
+
+### Patch Changes
+
+- [`0f988dbb4b54b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f988dbb4b54b) -
+  Added an experiment and implemented changes to disable lazy loading of internal images found
+  within Confluence PDF export pages
+- Updated dependencies
+
+## 124.9.11
+
+### Patch Changes
+
+- [`9630c61136f9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9630c61136f9b) -
+  Fixed bug where percentage based width attributes was being used as an aboslute pixel number
+  instead of correctly calculating the width.
+
 ## 124.9.10
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -74,6 +74,9 @@
 		{
 			"path": "../../../linking-platform/link-extractors/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../linking-platform/linking-common/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../media/media-card/afm-cc/tsconfig.json"
 		},

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

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _linkProvider = require("@atlaskit/link-provider");
 var _smartCard = require("@atlaskit/smart-card");
+var _utils = require("@atlaskit/linking-common/utils");
 var _hooks = require("@atlaskit/smart-card/hooks");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _ui = require("@atlaskit/editor-common/ui");
@@ -97,12 +98,16 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
   var isPreviewModalAvailable = Boolean(preview);
   var isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
   var showPanelButtonIcon = isPreviewPanelAvailable ? 'panel' : isPreviewModalAvailable ? 'modal' : undefined;
+
+  // When inside preview panel iframe, hide the overlay button
+  var isInPreviewPanel = (0, _expValEquals.expValEquals)('platform_hover_card_preview_panel_modal', 'cohort', 'test') && (0, _utils.isWithinPreviewPanelIFrame)();
+  var showPanelButton = isInPreviewPanel ? isPreviewPanelAvailable : isPreviewAvailable;
   var Overlay = isPreviewAvailable ? HoverLinkOverlayWithCondition : HoverLinkOverlayNoop;
   return (0, _react2.jsx)(Overlay, {
     isVisible: isResolvedViewRendered,
     url: url,
     compactPadding: rendererAppearance === 'comment',
-    showPanelButton: isPreviewAvailable,
+    showPanelButton: showPanelButton,
     showPanelButtonIcon: showPanelButtonIcon,
     onClick: function onClick(event) {
       if (isPreviewPanelAvailable) {

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

@@ -142,7 +142,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var cardDimensions = {};
     if ((0, _platformFeatureFlags.fg)('media-perf-uplift-mutation-fix')) {
-      var maxWidth = widthAttr && typeof widthAttr === 'number' ? widthAttr : containerWidth;
+      var maxWidth = widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' ? widthAttr : containerWidth;
       cardDimensions = {
         width: "".concat(maxWidth, "px"),
         height: "100%"
@@ -170,7 +170,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   var originalDimensions = (0, _react.useMemo)(function () {
     return {
       width: width,

package/dist/cjs/ui/MediaCard.js

@@ -330,6 +330,11 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         occurrenceKey: occurrenceKey
       };
       var Card = enableSyncMediaCard && (0, _platformFeatureFlags.fg)('jfp-magma-ssr-iv-editor-media') ? _mediaCard.CardSync : _mediaCard.Card;
+
+      // 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
+      var currentUrl = window.location.href;
+      var shouldDisableLazyLoading = (0, _expValEquals.expValEquals)('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, getClipboardAttrs({
         id: id,
         alt: alt,
@@ -348,7 +353,7 @@ var MediaCardView = exports.MediaCardView = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         onClick: onCardClick,
         resizeMode: resizeMode,
-        isLazy: !isMobile,
+        isLazy: !isMobile && !shouldDisableLazyLoading,
         disableOverlay: disableOverlay,
         useInlinePlayer: isInlinePlayer,
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -68,7 +68,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "0.0.0-development";
+var packageVersion = "124.9.11";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -8,6 +8,7 @@ import { Fragment, useState, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSmartCardContext } from '@atlaskit/link-provider';
 import { Card, getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
+import { isWithinPreviewPanelIFrame } from '@atlaskit/linking-common/utils';
 import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { HoverLinkOverlay, UnsupportedInline } from '@atlaskit/editor-common/ui';
@@ -80,12 +81,16 @@ const OverlayWithCardContext = ({
   const isPreviewModalAvailable = Boolean(preview);
   const isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
   const showPanelButtonIcon = isPreviewPanelAvailable ? 'panel' : isPreviewModalAvailable ? 'modal' : undefined;
+
+  // When inside preview panel iframe, hide the overlay button
+  const isInPreviewPanel = expValEquals('platform_hover_card_preview_panel_modal', 'cohort', 'test') && isWithinPreviewPanelIFrame();
+  const showPanelButton = isInPreviewPanel ? isPreviewPanelAvailable : isPreviewAvailable;
   const Overlay = isPreviewAvailable ? HoverLinkOverlayWithCondition : HoverLinkOverlayNoop;
   return jsx(Overlay, {
     isVisible: isResolvedViewRendered,
     url: url,
     compactPadding: rendererAppearance === 'comment',
-    showPanelButton: isPreviewAvailable,
+    showPanelButton: showPanelButton,
     showPanelButtonIcon: showPanelButtonIcon,
     onClick: event => {
       if (isPreviewPanelAvailable) {

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

@@ -129,7 +129,7 @@ const MediaSingleWithChildren = props => {
     const containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     let cardDimensions = {};
     if (fg('media-perf-uplift-mutation-fix')) {
-      const maxWidth = widthAttr && typeof widthAttr === 'number' ? widthAttr : containerWidth;
+      const maxWidth = widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' ? widthAttr : containerWidth;
       cardDimensions = {
         width: `${maxWidth}px`,
         height: `100%`
@@ -157,7 +157,7 @@ const MediaSingleWithChildren = props => {
       cardDimensions,
       lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   const originalDimensions = useMemo(() => ({
     width,
     height

package/dist/es2019/ui/MediaCard.js

@@ -266,6 +266,11 @@ export class MediaCardView extends Component {
       occurrenceKey
     };
     const Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? 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
+    const currentUrl = window.location.href;
+    const shouldDisableLazyLoading = expValEquals('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
     return /*#__PURE__*/React.createElement("div", _extends({}, getClipboardAttrs({
       id,
       alt,
@@ -284,7 +289,7 @@ export class MediaCardView extends Component {
       originalDimensions: originalDimensions,
       onClick: onCardClick,
       resizeMode: resizeMode,
-      isLazy: !isMobile,
+      isLazy: !isMobile && !shouldDisableLazyLoading,
       disableOverlay: disableOverlay,
       useInlinePlayer: isInlinePlayer,
       shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -54,7 +54,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 const TABLE_WIDTH_INFO_TIMEOUT = 10000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "0.0.0-development";
+const packageVersion = "124.9.11";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

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

@@ -9,6 +9,7 @@ import { Fragment, useState, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSmartCardContext } from '@atlaskit/link-provider';
 import { Card, getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
+import { isWithinPreviewPanelIFrame } from '@atlaskit/linking-common/utils';
 import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { HoverLinkOverlay, UnsupportedInline } from '@atlaskit/editor-common/ui';
@@ -88,12 +89,16 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
   var isPreviewModalAvailable = Boolean(preview);
   var isPreviewAvailable = isPreviewModalAvailable || isPreviewPanelAvailable;
   var showPanelButtonIcon = isPreviewPanelAvailable ? 'panel' : isPreviewModalAvailable ? 'modal' : undefined;
+
+  // When inside preview panel iframe, hide the overlay button
+  var isInPreviewPanel = expValEquals('platform_hover_card_preview_panel_modal', 'cohort', 'test') && isWithinPreviewPanelIFrame();
+  var showPanelButton = isInPreviewPanel ? isPreviewPanelAvailable : isPreviewAvailable;
   var Overlay = isPreviewAvailable ? HoverLinkOverlayWithCondition : HoverLinkOverlayNoop;
   return jsx(Overlay, {
     isVisible: isResolvedViewRendered,
     url: url,
     compactPadding: rendererAppearance === 'comment',
-    showPanelButton: isPreviewAvailable,
+    showPanelButton: showPanelButton,
     showPanelButtonIcon: showPanelButtonIcon,
     onClick: function onClick(event) {
       if (isPreviewPanelAvailable) {

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

@@ -132,7 +132,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     var containerWidth = getMediaContainerWidth(mediaContainerWidth, layout);
     var cardDimensions = {};
     if (fg('media-perf-uplift-mutation-fix')) {
-      var maxWidth = widthAttr && typeof widthAttr === 'number' ? widthAttr : containerWidth;
+      var maxWidth = widthAttr && typeof widthAttr === 'number' && widthType === 'pixel' ? widthAttr : containerWidth;
       cardDimensions = {
         width: "".concat(maxWidth, "px"),
         height: "100%"
@@ -160,7 +160,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       cardDimensions: cardDimensions,
       lineLength: lineLength
     };
-  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr]);
+  }, [height, isFullWidth, isInsideOfBlockNode, layout, padding, rendererAppearance, width, widthAttr, widthType]);
   var originalDimensions = useMemo(function () {
     return {
       width: width,

package/dist/esm/ui/MediaCard.js

@@ -321,6 +321,11 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         occurrenceKey: occurrenceKey
       };
       var Card = enableSyncMediaCard && fg('jfp-magma-ssr-iv-editor-media') ? 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
+      var currentUrl = window.location.href;
+      var shouldDisableLazyLoading = expValEquals('platform_editor_disable_lazy_load_media', 'isEnabled', true) && currentUrl.includes('/wiki/pdf/spaces/');
       return /*#__PURE__*/React.createElement("div", _extends({}, getClipboardAttrs({
         id: id,
         alt: alt,
@@ -339,7 +344,7 @@ export var MediaCardView = /*#__PURE__*/function (_Component) {
         originalDimensions: originalDimensions,
         onClick: onCardClick,
         resizeMode: resizeMode,
-        isLazy: !isMobile,
+        isLazy: !isMobile && !shouldDisableLazyLoading,
         disableOverlay: disableOverlay,
         useInlinePlayer: isInlinePlayer,
         shouldOpenMediaViewer: shouldOpenMediaViewer,

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

@@ -59,7 +59,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 // we want to calculate all the table widths (which causes reflows) after the renderer has finished loading to mitigate performance impact
 var TABLE_WIDTH_INFO_TIMEOUT = 10000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "0.0.0-development";
+var packageVersion = "124.9.11";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "124.9.10",
+	"version": "124.10.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -43,6 +43,7 @@
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.29.0",
 		"@atlaskit/link-extractors": "^2.4.0",
+		"@atlaskit/linking-common": "^9.8.0",
 		"@atlaskit/media-card": "^79.6.0",
 		"@atlaskit/media-client": "^35.5.0",
 		"@atlaskit/media-client-react": "^4.1.0",
@@ -53,11 +54,11 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/react-ufo": "^4.14.0",
-		"@atlaskit/smart-card": "^43.5.0",
+		"@atlaskit/smart-card": "^43.6.0",
 		"@atlaskit/status": "^3.0.0",
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.26.0",
+		"@atlaskit/tmp-editor-statsig": "^13.28.0",
 		"@atlaskit/tokens": "^7.1.0",
 		"@atlaskit/tooltip": "^20.7.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
@@ -71,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.21.0",
+		"@atlaskit/editor-common": "^110.22.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -85,7 +86,6 @@
 		"@atlaskit/css-reset": "^7.3.0",
 		"@atlaskit/link-provider": "^4.0.0",
 		"@atlaskit/link-test-helpers": "^8.4.0",
-		"@atlaskit/linking-common": "^9.7.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
 		"@atlaskit/media-test-helpers": "^39.0.0",