@atlaskit/editor-plugin-card 16.0.2 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-card
 
+## 16.1.0
+
+### Minor Changes
+
+- [`51d860f32cd31`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51d860f32cd31) -
+  Force 16:9 aspect ratio for Confluence Slides embeds.
+  - `editor-card-provider`: Added `isConfluenceSlideUrl()` URL checker and exported it via
+    `./url-checkers` subpath; slide URLs now always resolve to `'embed'` appearance via
+    `getHardCodedAppearance()`
+  - `editor-plugin-card`: In `onResolve()`, overrides the ORS-resolved aspect ratio with `16/9` when
+    the URL is a Confluence Slide
+  - `native-embeds-slide-experience`: Added `parameterDefaults: { width: 960, height: 540 }` to
+    `SlideExperienceManifest` so slides get a 16:9 aspect-ratio container
+  - `native-embeds-editor-extension`: Falls back to `manifest.parameterDefaults` for width/height
+    when the ADF node has no explicit dimensions
+
+### Patch Changes
+
+- Updated dependencies
+
+## 16.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.0.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/embedCard.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedCardNodeView = exports.EmbedOrBlockCardComponent = exports.EmbedCardComponent = exports.EmbedCard = void 0;
+exports.getAspectRatioForUrl = exports.embedCardNodeView = exports.EmbedOrBlockCardComponent = exports.EmbedCardComponent = exports.EmbedCard = void 0;
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -17,6 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _steps = require("@atlaskit/adf-schema/steps");
+var _urlCheckers = require("@atlaskit/editor-card-provider/url-checkers");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
@@ -28,6 +29,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
@@ -38,6 +40,24 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * overriding the generic value returned by the link resolver.
+ * Add new URL checks here as more content types get fixed aspect ratios.
+ */
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * or `undefined` to use the default resolver-provided ratio.
+ *
+ * @internal Exported for testing only.
+ */
+var getAspectRatioForUrl = exports.getAspectRatioForUrl = function getAspectRatioForUrl(url) {
+  if ((0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-mui-slides-experiment', 'isEnabled', true) && url && (0, _urlCheckers.isConfluenceSlideUrl)(url)) {
+    // Slides have a 16:9 canvas
+    return 16 / 9;
+  }
+  return undefined;
+};
 var selector = function selector(states) {
   var _states$widthState, _states$widthState2, _states$editorDisable;
   return {
@@ -140,13 +160,15 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
       }
     });
     (0, _defineProperty2.default)(_this, "onResolve", function (data) {
+      var _getAspectRatioForUrl;
       var view = _this.props.view;
       var title = data.title,
         url = data.url,
-        aspectRatio = data.aspectRatio;
+        resolvedAspectRatio = data.aspectRatio;
       var _this$props$node$attr = _this.props.node.attrs,
         originalHeight = _this$props$node$attr.originalHeight,
         originalWidth = _this$props$node$attr.originalWidth;
+      var aspectRatio = (_getAspectRatioForUrl = getAspectRatioForUrl(url)) !== null && _getAspectRatioForUrl !== void 0 ? _getAspectRatioForUrl : resolvedAspectRatio;
       if (aspectRatio && !originalHeight && !originalWidth) {
         // Assumption here is if ADF already have both height and width set,
         // we will going to use that later on in this class as aspectRatio

package/dist/es2019/nodeviews/embedCard.js

@@ -5,6 +5,7 @@ import rafSchedule from 'raf-schd';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { isConfluenceSlideUrl } from '@atlaskit/editor-card-provider/url-checkers';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
@@ -16,11 +17,31 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { BlockCardComponent } from './blockCard';
 import { Card } from './genericCard';
+
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * overriding the generic value returned by the link resolver.
+ * Add new URL checks here as more content types get fixed aspect ratios.
+ */
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * or `undefined` to use the default resolver-provided ratio.
+ *
+ * @internal Exported for testing only.
+ */
+export const getAspectRatioForUrl = url => {
+  if (expValEqualsNoExposure('cc-mui-slides-experiment', 'isEnabled', true) && url && isConfluenceSlideUrl(url)) {
+    // Slides have a 16:9 canvas
+    return 16 / 9;
+  }
+  return undefined;
+};
 const selector = states => {
   var _states$widthState, _states$widthState2, _states$editorDisable;
   return {
@@ -125,18 +146,20 @@ export class EmbedCardComponent extends React.PureComponent {
       }
     });
     _defineProperty(this, "onResolve", data => {
+      var _getAspectRatioForUrl;
       const {
         view
       } = this.props;
       const {
         title,
         url,
-        aspectRatio
+        aspectRatio: resolvedAspectRatio
       } = data;
       const {
         originalHeight,
         originalWidth
       } = this.props.node.attrs;
+      const aspectRatio = (_getAspectRatioForUrl = getAspectRatioForUrl(url)) !== null && _getAspectRatioForUrl !== void 0 ? _getAspectRatioForUrl : resolvedAspectRatio;
       if (aspectRatio && !originalHeight && !originalWidth) {
         // Assumption here is if ADF already have both height and width set,
         // we will going to use that later on in this class as aspectRatio

package/dist/esm/nodeviews/embedCard.js

@@ -16,6 +16,7 @@ import rafSchedule from 'raf-schd';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid/v4';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { isConfluenceSlideUrl } from '@atlaskit/editor-card-provider/url-checkers';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
@@ -27,11 +28,31 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerCard, removeCard as _removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { BlockCardComponent } from './blockCard';
 import { Card } from './genericCard';
+
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * overriding the generic value returned by the link resolver.
+ * Add new URL checks here as more content types get fixed aspect ratios.
+ */
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * or `undefined` to use the default resolver-provided ratio.
+ *
+ * @internal Exported for testing only.
+ */
+export var getAspectRatioForUrl = function getAspectRatioForUrl(url) {
+  if (expValEqualsNoExposure('cc-mui-slides-experiment', 'isEnabled', true) && url && isConfluenceSlideUrl(url)) {
+    // Slides have a 16:9 canvas
+    return 16 / 9;
+  }
+  return undefined;
+};
 var selector = function selector(states) {
   var _states$widthState, _states$widthState2, _states$editorDisable;
   return {
@@ -134,13 +155,15 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     _defineProperty(_this, "onResolve", function (data) {
+      var _getAspectRatioForUrl;
       var view = _this.props.view;
       var title = data.title,
         url = data.url,
-        aspectRatio = data.aspectRatio;
+        resolvedAspectRatio = data.aspectRatio;
       var _this$props$node$attr = _this.props.node.attrs,
         originalHeight = _this$props$node$attr.originalHeight,
         originalWidth = _this$props$node$attr.originalWidth;
+      var aspectRatio = (_getAspectRatioForUrl = getAspectRatioForUrl(url)) !== null && _getAspectRatioForUrl !== void 0 ? _getAspectRatioForUrl : resolvedAspectRatio;
       if (aspectRatio && !originalHeight && !originalWidth) {
         // Assumption here is if ADF already have both height and width set,
         // we will going to use that later on in this class as aspectRatio

package/dist/types/nodeviews/embedCard.d.ts

@@ -7,6 +7,18 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../index';
 import type { SmartCardProps } from './genericCard';
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * overriding the generic value returned by the link resolver.
+ * Add new URL checks here as more content types get fixed aspect ratios.
+ */
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * or `undefined` to use the default resolver-provided ratio.
+ *
+ * @internal Exported for testing only.
+ */
+export declare const getAspectRatioForUrl: (url: string | undefined) => number | undefined;
 export type EmbedCardState = {
     hasPreview: boolean;
     initialAspectRatio?: number;

package/dist/types-ts4.5/nodeviews/embedCard.d.ts

@@ -7,6 +7,18 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../index';
 import type { SmartCardProps } from './genericCard';
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * overriding the generic value returned by the link resolver.
+ * Add new URL checks here as more content types get fixed aspect ratios.
+ */
+/**
+ * Returns a forced aspect ratio for URLs that have a known canvas shape,
+ * or `undefined` to use the default resolver-provided ratio.
+ *
+ * @internal Exported for testing only.
+ */
+export declare const getAspectRatioForUrl: (url: string | undefined) => number | undefined;
 export type EmbedCardState = {
     hasPreview: boolean;
     initialAspectRatio?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "16.0.2",
+	"version": "16.1.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,6 +32,7 @@
 		"@atlaskit/adf-schema": "^52.5.0",
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/custom-steps": "^0.16.0",
+		"@atlaskit/editor-card-provider": "^6.7.0",
 		"@atlaskit/editor-plugin-analytics": "^10.0.0",
 		"@atlaskit/editor-plugin-base": "^11.0.0",
 		"@atlaskit/editor-plugin-connectivity": "^10.0.0",
@@ -51,7 +52,7 @@
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/link-analytics": "^11.0.0",
 		"@atlaskit/link-client-extension": "^6.0.0",
-		"@atlaskit/link-datasource": "^5.0.0",
+		"@atlaskit/link-datasource": "^5.1.0",
 		"@atlaskit/link-extractors": "^2.4.0",
 		"@atlaskit/linking-common": "^9.11.0",
 		"@atlaskit/linking-types": "^14.2.0",
@@ -60,8 +61,8 @@
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/smart-card": "^44.1.0",
-		"@atlaskit/tmp-editor-statsig": "^63.0.0",
+		"@atlaskit/smart-card": "^44.3.0",
+		"@atlaskit/tmp-editor-statsig": "^64.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -71,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.2.0",
+		"@atlaskit/editor-common": "^114.6.0",
 		"@atlaskit/link-provider": "^4.3.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"