@atlaskit/editor-plugin-card 0.14.22 → 0.14.24

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-card
 
+## 0.14.24
+
+### Patch Changes
+
+- [#63549](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63549) [`c2147cd56a94`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c2147cd56a94) - Fix inconsistency of discoverability pulse
+- Updated dependencies
+
+## 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

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/AwarenessWrapper/index.js

@@ -94,14 +94,16 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     return (0, _react2.jsx)("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles,
       className: "card"
-    }, shouldShowLinkPulse ? (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+    }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: {
         attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
     }, (0, _react2.jsx)(_Pulse.DiscoveryPulse, {
       localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: _localStorage.ONE_DAY_IN_MILLISECONDS,
-      discoveryMode: "start"
-    }, cardWithOverlay)) : cardWithOverlay);
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, cardWithOverlay]);
+      discoveryMode: "start",
+      shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
+      testId: "link-discovery-pulse"
+    }, cardWithOverlay)));
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
 };

package/dist/cjs/ui/LinkToolbarAppearance.js

@@ -135,7 +135,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
             attributes: _objectSpread({}, resolvedAnalyticsAttributes)
           }
         }, /*#__PURE__*/_react.default.createElement(_Pulse.DiscoveryPulse, {
-          localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR
+          localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
+          testId: "toolbar-discovery-pulse"
         }, LinkToolbarButtons));
       }
       return LinkToolbarButtons;

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

@@ -14,15 +14,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DiscoveryPulse = exports.DiscoveryPulse = function DiscoveryPulse(_ref) {
   var children = _ref.children,
     localStorageKey = _ref.localStorageKey,
-    isDiscovered = _ref.isDiscovered,
     localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs,
     _ref$discoveryMode = _ref.discoveryMode,
-    discoveryMode = _ref$discoveryMode === void 0 ? 'iteration' : _ref$discoveryMode;
-  var discovered = isDiscovered || (0, _localStorage.isLocalStorageKeyDiscovered)(localStorageKey);
+    discoveryMode = _ref$discoveryMode === void 0 ? 'iteration' : _ref$discoveryMode,
+    shouldShowPulse = _ref.shouldShowPulse,
+    testId = _ref.testId;
+  var discovered = (0, _localStorage.isLocalStorageKeyDiscovered)(localStorageKey);
+  var showPulse = shouldShowPulse !== null && shouldShowPulse !== void 0 ? shouldShowPulse : !discovered;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   (0, _react.useEffect)(function () {
-    if (!discovered) {
+    if (showPulse) {
       createAnalyticsEvent({
         action: 'viewed',
         actionSubject: 'pulse',
@@ -32,16 +34,16 @@ var DiscoveryPulse = exports.DiscoveryPulse = function DiscoveryPulse(_ref) {
         }
       }).fire('media');
     }
-  }, [createAnalyticsEvent, discovered, localStorageKey]);
+  }, [createAnalyticsEvent, discovered, localStorageKey, showPulse]);
   var onDiscovery = (0, _react.useCallback)(function () {
     if (!discovered) {
       (0, _localStorage.markLocalStorageKeyDiscovered)(localStorageKey, localStorageKeyExpirationInMs);
     }
   }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
-  var pulseProps = {
-    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+  return /*#__PURE__*/_react.default.createElement(_linkingCommon.Pulse, {
     onAnimationIteration: discoveryMode === 'iteration' ? onDiscovery : undefined,
-    isDiscovered: discovered
-  };
-  return /*#__PURE__*/_react.default.createElement(_linkingCommon.Pulse, pulseProps, children);
+    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+    showPulse: showPulse,
+    testId: testId
+  }, children);
 };

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/AwarenessWrapper/index.js

@@ -78,14 +78,16 @@ export const AwarenessWrapper = ({
     return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles,
       className: "card"
-    }, shouldShowLinkPulse ? jsx(AnalyticsContext, {
+    }, jsx(AnalyticsContext, {
       data: {
         attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
     }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
-      discoveryMode: "start"
-    }, cardWithOverlay)) : cardWithOverlay);
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, cardWithOverlay]);
+      discoveryMode: "start",
+      shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
+      testId: "link-discovery-pulse"
+    }, cardWithOverlay)));
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
 };

package/dist/es2019/ui/LinkToolbarAppearance.js

@@ -106,7 +106,8 @@ export class LinkToolbarAppearance extends React.Component {
             }
           }
         }, /*#__PURE__*/React.createElement(DiscoveryPulse, {
-          localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR
+          localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
+          testId: "toolbar-discovery-pulse"
         }, LinkToolbarButtons));
       }
       return LinkToolbarButtons;

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

@@ -5,16 +5,18 @@ import { isLocalStorageKeyDiscovered, markLocalStorageKeyDiscovered } from '../.
 export const DiscoveryPulse = ({
   children,
   localStorageKey,
-  isDiscovered,
   localStorageKeyExpirationInMs,
-  discoveryMode = 'iteration'
+  discoveryMode = 'iteration',
+  shouldShowPulse,
+  testId
 }) => {
-  const discovered = isDiscovered || isLocalStorageKeyDiscovered(localStorageKey);
+  const discovered = isLocalStorageKeyDiscovered(localStorageKey);
+  const showPulse = shouldShowPulse !== null && shouldShowPulse !== void 0 ? shouldShowPulse : !discovered;
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
   useEffect(() => {
-    if (!discovered) {
+    if (showPulse) {
       createAnalyticsEvent({
         action: 'viewed',
         actionSubject: 'pulse',
@@ -24,16 +26,16 @@ export const DiscoveryPulse = ({
         }
       }).fire('media');
     }
-  }, [createAnalyticsEvent, discovered, localStorageKey]);
+  }, [createAnalyticsEvent, discovered, localStorageKey, showPulse]);
   const onDiscovery = useCallback(() => {
     if (!discovered) {
       markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
     }
   }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
-  const pulseProps = {
-    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+  return /*#__PURE__*/React.createElement(Pulse, {
     onAnimationIteration: discoveryMode === 'iteration' ? onDiscovery : undefined,
-    isDiscovered: discovered
-  };
-  return /*#__PURE__*/React.createElement(Pulse, pulseProps, children);
+    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+    showPulse: showPulse,
+    testId: testId
+  }, children);
 };

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/AwarenessWrapper/index.js

@@ -86,14 +86,16 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles,
       className: "card"
-    }, shouldShowLinkPulse ? jsx(AnalyticsContext, {
+    }, jsx(AnalyticsContext, {
       data: {
         attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
     }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
-      discoveryMode: "start"
-    }, cardWithOverlay)) : cardWithOverlay);
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, cardWithOverlay]);
+      discoveryMode: "start",
+      shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
+      testId: "link-discovery-pulse"
+    }, cardWithOverlay)));
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
 };

package/dist/esm/ui/LinkToolbarAppearance.js

@@ -125,7 +125,8 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
             attributes: _objectSpread({}, resolvedAnalyticsAttributes)
           }
         }, /*#__PURE__*/React.createElement(DiscoveryPulse, {
-          localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR
+          localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
+          testId: "toolbar-discovery-pulse"
         }, LinkToolbarButtons));
       }
       return LinkToolbarButtons;

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

@@ -5,15 +5,17 @@ import { isLocalStorageKeyDiscovered, markLocalStorageKeyDiscovered } from '../.
 export var DiscoveryPulse = function DiscoveryPulse(_ref) {
   var children = _ref.children,
     localStorageKey = _ref.localStorageKey,
-    isDiscovered = _ref.isDiscovered,
     localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs,
     _ref$discoveryMode = _ref.discoveryMode,
-    discoveryMode = _ref$discoveryMode === void 0 ? 'iteration' : _ref$discoveryMode;
-  var discovered = isDiscovered || isLocalStorageKeyDiscovered(localStorageKey);
+    discoveryMode = _ref$discoveryMode === void 0 ? 'iteration' : _ref$discoveryMode,
+    shouldShowPulse = _ref.shouldShowPulse,
+    testId = _ref.testId;
+  var discovered = isLocalStorageKeyDiscovered(localStorageKey);
+  var showPulse = shouldShowPulse !== null && shouldShowPulse !== void 0 ? shouldShowPulse : !discovered;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   useEffect(function () {
-    if (!discovered) {
+    if (showPulse) {
       createAnalyticsEvent({
         action: 'viewed',
         actionSubject: 'pulse',
@@ -23,16 +25,16 @@ export var DiscoveryPulse = function DiscoveryPulse(_ref) {
         }
       }).fire('media');
     }
-  }, [createAnalyticsEvent, discovered, localStorageKey]);
+  }, [createAnalyticsEvent, discovered, localStorageKey, showPulse]);
   var onDiscovery = useCallback(function () {
     if (!discovered) {
       markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
     }
   }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
-  var pulseProps = {
-    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+  return /*#__PURE__*/React.createElement(Pulse, {
     onAnimationIteration: discoveryMode === 'iteration' ? onDiscovery : undefined,
-    isDiscovered: discovered
-  };
-  return /*#__PURE__*/React.createElement(Pulse, pulseProps, children);
+    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+    showPulse: showPulse,
+    testId: testId
+  }, children);
 };

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/dist/types/ui/Pulse/index.d.ts

@@ -13,14 +13,12 @@ export interface PulseProps {
      * The time in ms after which the key in local storage will be considered expired and the Pulse will be shown again
      */
     localStorageKeyExpirationInMs?: number;
-    /**
-     * And indicator that the feature was discovered externally and the pulsation needs to stop.
-     */
-    isDiscovered?: boolean;
     /**
      * Indicates when the feature is considered discovered. If "start" is passed, local storage key will be invalidated
      * as soon as the animation starts. If "iteration" is passed (the default one), it will be invalidated after the first iteration
      */
     discoveryMode?: PulseDiscoveryMode;
+    shouldShowPulse?: boolean;
+    testId?: string;
 }
-export declare const DiscoveryPulse: ({ children, localStorageKey, isDiscovered, localStorageKeyExpirationInMs, discoveryMode, }: PulseProps) => JSX.Element;
+export declare const DiscoveryPulse: ({ children, localStorageKey, localStorageKeyExpirationInMs, discoveryMode, shouldShowPulse, testId, }: PulseProps) => JSX.Element;

package/dist/types-ts4.5/ui/Pulse/index.d.ts

@@ -13,14 +13,12 @@ export interface PulseProps {
      * The time in ms after which the key in local storage will be considered expired and the Pulse will be shown again
      */
     localStorageKeyExpirationInMs?: number;
-    /**
-     * And indicator that the feature was discovered externally and the pulsation needs to stop.
-     */
-    isDiscovered?: boolean;
     /**
      * Indicates when the feature is considered discovered. If "start" is passed, local storage key will be invalidated
      * as soon as the animation starts. If "iteration" is passed (the default one), it will be invalidated after the first iteration
      */
     discoveryMode?: PulseDiscoveryMode;
+    shouldShowPulse?: boolean;
+    testId?: string;
 }
-export declare const DiscoveryPulse: ({ children, localStorageKey, isDiscovered, localStorageKeyExpirationInMs, discoveryMode, }: PulseProps) => JSX.Element;
+export declare const DiscoveryPulse: ({ children, localStorageKey, localStorageKeyExpirationInMs, discoveryMode, shouldShowPulse, testId, }: PulseProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.14.22",
+  "version": "0.14.24",
   "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.30.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -49,13 +50,13 @@
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
     "@atlaskit/link-datasource": "^1.19.0",
-    "@atlaskit/linking-common": "^4.21.0",
+    "@atlaskit/linking-common": "^5.0.0",
     "@atlaskit/linking-types": "^8.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@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"
     }
   }
 }