@atlaskit/renderer 109.1.3 → 109.1.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/renderer
 
+## 109.1.5
+
+### Patch Changes
+
+- [#63612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63612) [`ce40b4308ec7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce40b4308ec7) - Fix an issue with datasource table where rendering inside another component causes it to overflow beyound the parent component.
+- Updated dependencies
+
+## 109.1.4
+
+### Patch Changes
+
+- [#63354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63354) [`0b49755d1170`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0b49755d1170) - [ux] Include embed card frame as part of its width when frameStyle is set to "show" and show embed frame by default in renderer
+
 ## 109.1.3
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -219,6 +219,8 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
           return this.getTaskItemProps(node, path);
         case 'embedCard':
           return this.getEmbedCardProps(node, path);
+        case 'blockCard':
+          return this.getBlockCardProps(node, path);
         case 'expand':
           return this.getExpandProps(node, path);
         case 'unsupportedBlock':
@@ -424,6 +426,14 @@ var ReactSerializer = exports.default = /*#__PURE__*/function () {
         isInsideOfBlockNode: isInsideOfBlockNode
       });
     }
+  }, {
+    key: "getBlockCardProps",
+    value: function getBlockCardProps(node) {
+      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+        isNodeNested: path.length > 0
+      });
+    }
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {

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

@@ -33,7 +33,8 @@ function BlockCard(props) {
     eventHandlers = props.eventHandlers,
     portal = props.portal,
     rendererAppearance = props.rendererAppearance,
-    smartLinks = props.smartLinks;
+    smartLinks = props.smartLinks,
+    isNodeNested = props.isNodeNested;
   var _ref = smartLinks || {},
     showServerActions = _ref.showServerActions;
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
@@ -93,8 +94,9 @@ function BlockCard(props) {
         var width = _ref5.width;
         return (0, _react2.jsx)("div", {
           css: datasourceContainerStyle,
+          "data-testid": "renderer-datasource-table",
           style: {
-            width: (0, _utils2.calcBreakoutWidth)(layout, width)
+            width: isNodeNested ? '100%' : (0, _utils2.calcBreakoutWidth)(layout, width)
           }
         }, (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
           datasourceId: datasource.id,

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

@@ -12,6 +12,7 @@ var _react = require("@emotion/react");
 var _react2 = require("react");
 var _smartCard = require("@atlaskit/smart-card");
 var _linkProvider = require("@atlaskit/link-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("../../utils");
@@ -24,6 +25,7 @@ var _templateObject, _templateObject2;
 var embedCardWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
 var uIMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 function EmbedCard(props) {
+  var _smartLinks$frameStyl;
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
@@ -45,7 +47,7 @@ function EmbedCard(props) {
     container: portal,
     platform: platform,
     showActions: platform === 'web',
-    frameStyle: smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined
   };
   var _useState = (0, _react2.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

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

package/dist/es2019/react/index.js

@@ -200,6 +200,8 @@ export default class ReactSerializer {
         return this.getTaskItemProps(node, path);
       case 'embedCard':
         return this.getEmbedCardProps(node, path);
+      case 'blockCard':
+        return this.getBlockCardProps(node, path);
       case 'expand':
         return this.getExpandProps(node, path);
       case 'unsupportedBlock':
@@ -371,6 +373,12 @@ export default class ReactSerializer {
       isInsideOfBlockNode
     };
   }
+  getBlockCardProps(node, path = []) {
+    return {
+      ...this.getProps(node),
+      isNodeNested: path.length > 0
+    };
+  }
   getMediaGroupProps(node) {
     var _this$media2, _this$media3;
     return {

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

@@ -27,7 +27,8 @@ export default function BlockCard(props) {
     eventHandlers,
     portal,
     rendererAppearance,
-    smartLinks
+    smartLinks,
+    isNodeNested
   } = props;
   const {
     showServerActions
@@ -84,8 +85,9 @@ export default function BlockCard(props) {
         width
       }) => jsx("div", {
         css: datasourceContainerStyle,
+        "data-testid": "renderer-datasource-table",
         style: {
-          width: calcBreakoutWidth(layout, width)
+          width: isNodeNested ? '100%' : calcBreakoutWidth(layout, width)
         }
       }, jsx(DatasourceTableView, {
         datasourceId: datasource.id,

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

@@ -4,6 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { SmartCardContext } from '@atlaskit/link-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
@@ -30,6 +31,7 @@ const uIMediaSingleLayoutStyles = css`
   transform: translateX(-50%);
 `;
 export default function EmbedCard(props) {
+  var _smartLinks$frameStyl;
   const {
     url,
     data,
@@ -51,7 +53,7 @@ export default function EmbedCard(props) {
     container: portal,
     platform,
     showActions: platform === 'web',
-    frameStyle: smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined
   };
   const [liveHeight, setLiveHeight] = useState(null);
   const [aspectRatio, setAspectRatio] = useState();

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

package/dist/esm/react/index.js

@@ -212,6 +212,8 @@ var ReactSerializer = /*#__PURE__*/function () {
           return this.getTaskItemProps(node, path);
         case 'embedCard':
           return this.getEmbedCardProps(node, path);
+        case 'blockCard':
+          return this.getBlockCardProps(node, path);
         case 'expand':
           return this.getExpandProps(node, path);
         case 'unsupportedBlock':
@@ -417,6 +419,14 @@ var ReactSerializer = /*#__PURE__*/function () {
         isInsideOfBlockNode: isInsideOfBlockNode
       });
     }
+  }, {
+    key: "getBlockCardProps",
+    value: function getBlockCardProps(node) {
+      var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
+        isNodeNested: path.length > 0
+      });
+    }
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {

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

@@ -26,7 +26,8 @@ export default function BlockCard(props) {
     eventHandlers = props.eventHandlers,
     portal = props.portal,
     rendererAppearance = props.rendererAppearance,
-    smartLinks = props.smartLinks;
+    smartLinks = props.smartLinks,
+    isNodeNested = props.isNodeNested;
   var _ref = smartLinks || {},
     showServerActions = _ref.showServerActions;
   var onClick = getCardClickHandler(eventHandlers, url);
@@ -86,8 +87,9 @@ export default function BlockCard(props) {
         var width = _ref5.width;
         return jsx("div", {
           css: datasourceContainerStyle,
+          "data-testid": "renderer-datasource-table",
           style: {
-            width: calcBreakoutWidth(layout, width)
+            width: isNodeNested ? '100%' : calcBreakoutWidth(layout, width)
           }
         }, jsx(DatasourceTableView, {
           datasourceId: datasource.id,

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

@@ -7,6 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { useMemo, useContext, useState, useRef } from 'react';
 import { Card, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { SmartCardContext } from '@atlaskit/link-provider';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { getPlatform } from '../../utils';
@@ -17,6 +18,7 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 var embedCardWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
 var uIMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 export default function EmbedCard(props) {
+  var _smartLinks$frameStyl;
   var url = props.url,
     data = props.data,
     eventHandlers = props.eventHandlers,
@@ -38,7 +40,7 @@ export default function EmbedCard(props) {
     container: portal,
     platform: platform,
     showActions: platform === 'web',
-    frameStyle: smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle
+    frameStyle: (_smartLinks$frameStyl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.frameStyle) !== null && _smartLinks$frameStyl !== void 0 ? _smartLinks$frameStyl : getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? 'show' : undefined
   };
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),

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

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

@@ -101,6 +101,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getMediaProps;
     private getEmojiProps;
     private getEmbedCardProps;
+    private getBlockCardProps;
     private getMediaGroupProps;
     private getMediaInlineProps;
     private getTaskItemProps;

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

@@ -12,4 +12,5 @@ export default function BlockCard(props: {
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;
     layout?: string;
+    isNodeNested?: boolean;
 }): jsx.JSX.Element;

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

@@ -61,6 +61,7 @@ declare const BlockCard: React.ComponentType<{
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;
     layout?: string | undefined;
+    isNodeNested?: boolean | undefined;
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;

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

@@ -101,6 +101,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getMediaProps;
     private getEmojiProps;
     private getEmbedCardProps;
+    private getBlockCardProps;
     private getMediaGroupProps;
     private getMediaInlineProps;
     private getTaskItemProps;

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

@@ -12,4 +12,5 @@ export default function BlockCard(props: {
     rendererAppearance?: RendererAppearance;
     smartLinks?: SmartLinksOptions;
     layout?: string;
+    isNodeNested?: boolean;
 }): jsx.JSX.Element;

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

@@ -61,6 +61,7 @@ declare const BlockCard: React.ComponentType<{
     rendererAppearance?: import("../../ui/Renderer/types").RendererAppearance;
     smartLinks?: import("../../types/smartLinksOptions").SmartLinksOptions | undefined;
     layout?: string | undefined;
+    isNodeNested?: boolean | undefined;
 }> & Loadable.LoadableComponent;
 declare const Media: React.ComponentType<import("./media").MediaProps> & Loadable.LoadableComponent;
 declare const MediaGroup: React.ComponentType<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "109.1.3",
+  "version": "109.1.5",
   "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.29.0",
+    "@atlaskit/editor-common": "^76.31.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-prosemirror": "1.1.0",
@@ -131,6 +131,9 @@
     },
     "platform.editor.use-lch-for-color-inversion_1qv8ol": {
       "type": "boolean"
+    },
+    "platform.editor.show-embed-card-frame-renderer": {
+      "type": "boolean"
     }
   }
 }