@atlaskit/editor-plugin-card 0.14.21 → 0.14.23

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-card
 
+## 0.14.23
+
+### 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
+
+## 0.14.22
+
+### Patch Changes
+
+- [#61458](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/61458) [`f69cbc65f2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f69cbc65f2ea) - Avoid mutating state directly
+
 ## 0.14.21
 
 ### Patch Changes

package/dist/cjs/nodeviews/embedCard.js

@@ -304,7 +304,7 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         onResolve: this.onResolve,
         onError: this.onError,
         showActions: platform === 'web',
-        isFrameVisible: true,
+        frameStyle: "show",
         inheritDimensions: true,
         platform: platform,
         container: this.scrollContainer,

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -84,7 +84,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
     })));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveUrl", /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(url) {
-        var supportedUrlsMap, isUrlSupported, provider;
+        var supportedUrlsMap, isUrlSupported, provider, newMap;
         return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -112,11 +112,12 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
               _context3.t0 = _context3["catch"](4);
               isUrlSupported = false;
             case 16:
-              supportedUrlsMap.set(url, isUrlSupported);
+              newMap = new Map(supportedUrlsMap);
+              newMap.set(url, isUrlSupported);
               _this.setState({
-                supportedUrlsMap: supportedUrlsMap
+                supportedUrlsMap: newMap
               });
-            case 18:
+            case 19:
             case "end":
               return _context3.stop();
           }

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -19,6 +19,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 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; }
 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) { (0, _defineProperty2.default)(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; }
@@ -332,7 +333,13 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
         containerWidth = _this$props6.containerWidth,
         fullWidthMode = _this$props6.fullWidthMode,
         children = _this$props6.children;
-      var initialWidth = this.calcPxWidth() - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+      var resizerProps = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? {
+        width: this.calcPxWidth(),
+        innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPadding
+      } : {
+        width: this.calcPxWidth() - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide,
+        innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide
+      };
       var enable = {};
       _ui.handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
@@ -359,7 +366,7 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
       return (0, _react2.jsx)("div", {
-        css: _styles.embedSpacingStyles,
+        css: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.show-embed-card-frame-renderer') ? {} : _styles.embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
       }, (0, _react2.jsx)("div", {
         css: (0, _ui.wrapperStyle)({
@@ -369,17 +376,14 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
           fullWidthMode: fullWidthMode
         })
       }, (0, _react2.jsx)(_ui.Resizer, (0, _extends2.default)({}, this.props, {
-        width: initialWidth // Starting or initial width of embed <iframe> itself.
-        ,
         enable: enable,
         calcNewSize: this.calcNewSize,
         snapPoints: this.calcSnapPoints(),
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
-        innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide,
         nodeType: "embed",
         handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
-      }), children, this.getHeightDefiningComponent())));
+      }, resizerProps), children, this.getHeightDefiningComponent())));
       /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
     }
   }]);

package/dist/es2019/nodeviews/embedCard.js

@@ -293,7 +293,7 @@ export class EmbedCardComponent extends React.PureComponent {
       onResolve: this.onResolve,
       onError: this.onError,
       showActions: platform === 'web',
-      isFrameVisible: true,
+      frameStyle: "show",
       inheritDimensions: true,
       platform: platform,
       container: this.scrollContainer,

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -41,9 +41,10 @@ export class HyperlinkToolbarAppearance extends Component {
       } catch (error) {
         isUrlSupported = false;
       }
-      supportedUrlsMap.set(url, isUrlSupported);
+      const newMap = new Map(supportedUrlsMap);
+      newMap.set(url, isUrlSupported);
       this.setState({
-        supportedUrlsMap
+        supportedUrlsMap: newMap
       });
     });
     _defineProperty(this, "componentDidMount", () => this.resolveUrl(this.props.url));

package/dist/es2019/ui/ResizableEmbedCard.js

@@ -6,7 +6,8 @@ import { jsx } from '@emotion/react';
 import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export default class ResizableEmbedCard extends React.Component {
@@ -306,7 +307,13 @@ export default class ResizableEmbedCard extends React.Component {
       fullWidthMode,
       children
     } = this.props;
-    const initialWidth = this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide;
+    const resizerProps = getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {
+      width: this.calcPxWidth(),
+      innerPadding: akEditorMediaResizeHandlerPadding
+    } : {
+      width: this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide,
+      innerPadding: akEditorMediaResizeHandlerPaddingWide
+    };
     const enable = {};
     handleSides.forEach(side => {
       const oppositeSide = side === 'left' ? 'right' : 'left';
@@ -333,7 +340,7 @@ export default class ResizableEmbedCard extends React.Component {
 
     /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
     return jsx("div", {
-      css: embedSpacingStyles,
+      css: getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {} : embedSpacingStyles,
       "data-testid": "resizable-embed-card-spacing"
     }, jsx("div", {
       css: wrapperStyle({
@@ -343,17 +350,14 @@ export default class ResizableEmbedCard extends React.Component {
         fullWidthMode
       })
     }, jsx(Resizer, _extends({}, this.props, {
-      width: initialWidth // Starting or initial width of embed <iframe> itself.
-      ,
       enable: enable,
       calcNewSize: this.calcNewSize,
       snapPoints: this.calcSnapPoints(),
       scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
       highlights: this.highlights,
-      innerPadding: akEditorMediaResizeHandlerPaddingWide,
       nodeType: "embed",
       handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
-    }), children, this.getHeightDefiningComponent())));
+    }, resizerProps), children, this.getHeightDefiningComponent())));
     /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
   }
 }

package/dist/esm/nodeviews/embedCard.js

@@ -297,7 +297,7 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         onResolve: this.onResolve,
         onError: this.onError,
         showActions: platform === 'web',
-        isFrameVisible: true,
+        frameStyle: "show",
         inheritDimensions: true,
         platform: platform,
         container: this.scrollContainer,

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -74,7 +74,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
     })));
     _defineProperty(_assertThisInitialized(_this), "resolveUrl", /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(url) {
-        var supportedUrlsMap, isUrlSupported, provider;
+        var supportedUrlsMap, isUrlSupported, provider, newMap;
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -102,11 +102,12 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
               _context3.t0 = _context3["catch"](4);
               isUrlSupported = false;
             case 16:
-              supportedUrlsMap.set(url, isUrlSupported);
+              newMap = new Map(supportedUrlsMap);
+              newMap.set(url, isUrlSupported);
               _this.setState({
-                supportedUrlsMap: supportedUrlsMap
+                supportedUrlsMap: newMap
               });
-            case 18:
+            case 19:
             case "end":
               return _context3.stop();
           }

package/dist/esm/ui/ResizableEmbedCard.js

@@ -16,7 +16,8 @@ import { jsx } from '@emotion/react';
 import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
 import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
 import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { embedHeaderHeight } from '@atlaskit/smart-card';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
@@ -326,7 +327,13 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props6.containerWidth,
         fullWidthMode = _this$props6.fullWidthMode,
         children = _this$props6.children;
-      var initialWidth = this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide;
+      var resizerProps = getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {
+        width: this.calcPxWidth(),
+        innerPadding: akEditorMediaResizeHandlerPadding
+      } : {
+        width: this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide,
+        innerPadding: akEditorMediaResizeHandlerPaddingWide
+      };
       var enable = {};
       handleSides.forEach(function (side) {
         var oppositeSide = side === 'left' ? 'right' : 'left';
@@ -353,7 +360,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
 
       /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
       return jsx("div", {
-        css: embedSpacingStyles,
+        css: getBooleanFF('platform.editor.show-embed-card-frame-renderer') ? {} : embedSpacingStyles,
         "data-testid": "resizable-embed-card-spacing"
       }, jsx("div", {
         css: wrapperStyle({
@@ -363,17 +370,14 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
           fullWidthMode: fullWidthMode
         })
       }, jsx(Resizer, _extends({}, this.props, {
-        width: initialWidth // Starting or initial width of embed <iframe> itself.
-        ,
         enable: enable,
         calcNewSize: this.calcNewSize,
         snapPoints: this.calcSnapPoints(),
         scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
         highlights: this.highlights,
-        innerPadding: akEditorMediaResizeHandlerPaddingWide,
         nodeType: "embed",
         handleStyles: nestedInTableHandleStyles(this.isNestedInTable())
-      }), children, this.getHeightDefiningComponent())));
+      }, resizerProps), children, this.getHeightDefiningComponent())));
       /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.14.21",
+  "version": "0.14.23",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -10,7 +10,8 @@
   "atlassian": {
     "team": "Linking Platform",
     "singleton": true,
-    "releaseModel": "continuous"
+    "releaseModel": "continuous",
+    "runReact18": false
   },
   "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
   "main": "dist/cjs/index.js",
@@ -34,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/custom-steps": "^0.0.10",
-    "@atlaskit/editor-common": "^76.27.0",
+    "@atlaskit/editor-common": "^76.29.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -55,7 +56,7 @@
     "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/smart-card": "^26.43.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.32.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",
@@ -129,6 +130,9 @@
     },
     "platform.linking-platform.smart-card.inline-switcher": {
       "type": "boolean"
+    },
+    "platform.editor.show-embed-card-frame-renderer": {
+      "type": "boolean"
     }
   }
 }