@atlaskit/native-embeds-common 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/native-embeds-common
 
+## 1.1.1
+
+### Patch Changes
+
+- [`9e964a88958bd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e964a88958bd) -
+  Fix resize overlay placeholder height and aspect ratio calculation to use the stored `aspectRatio`
+  node parameter (set from originalWidth/originalHeight during card-to-native-embed conversion)
+  rather than relying solely on live DOM measurements. This ensures resize handles and the overlay
+  placeholder reflect the correct proportions from the very first selection, before a resize has
+  occurred. Applies to both `EmbedResizeOverlay` and `ResizableNativeEmbedLegacy`.
+
+  Add `aspectRatio` to `NativeEmbedParameters` macroParams type so that `getParameters` and
+  `setParameters` correctly serialize and deserialize the stored width-to-height ratio. This enables
+  native embed containers to derive their height from the original embed dimensions without
+  requiring a resize interaction.
+
+  Fix native embed containers incorrectly defaulting to a 1:1 or 1200/600 aspect ratio on initial
+  render when `aspectRatio` (originalWidth/originalHeight) is stored in the node parameters. The
+  container now derives the correct height from the stored `aspectRatio` on the very first render,
+  before any resize interaction occurs.
+
+- Updated dependencies
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/embed-depth.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EMBED_DEPTH_QUERY_PARAM", {
+  enumerable: true,
+  get: function get() {
+    return _constants.EMBED_DEPTH_QUERY_PARAM;
+  }
+});
+Object.defineProperty(exports, "MAX_EMBED_DEPTH", {
+  enumerable: true,
+  get: function get() {
+    return _constants.MAX_EMBED_DEPTH;
+  }
+});
+Object.defineProperty(exports, "getCurrentEmbedDepth", {
+  enumerable: true,
+  get: function get() {
+    return _constants.getCurrentEmbedDepth;
+  }
+});
+var _constants = require("./utils/constants");

package/dist/cjs/utils/constants.js

@@ -3,7 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NATIVE_EMBED_PARAMETER_DEFAULTS = exports.EDITOR_TOOLBAR_HANDLER_KEYS = exports.DEFAULT_ALIGNMENT = exports.BUILTIN_TOOLBAR_KEYS = exports.ALIGNMENT_VALUES = void 0;
+exports.getCurrentEmbedDepth = exports.NATIVE_EMBED_PARAMETER_DEFAULTS = exports.MAX_EMBED_DEPTH = exports.EMBED_DEPTH_QUERY_PARAM = exports.EDITOR_TOOLBAR_HANDLER_KEYS = exports.DEFAULT_ALIGNMENT = exports.BUILTIN_TOOLBAR_KEYS = exports.ALIGNMENT_VALUES = void 0;
+// ─── Embed depth constants ──────────────────────────────────────────────────
+
+/**
+ * URL query-parameter key used to track the current embedding depth.
+ * Each nested native-embed iframe increments this value by 1.
+ */
+var EMBED_DEPTH_QUERY_PARAM = exports.EMBED_DEPTH_QUERY_PARAM = 'nativeEmbedDepth';
+
+/**
+ * Maximum allowed embedding depth.  When `getCurrentEmbedDepth()` returns a
+ * value **≥** this limit the extension renderer should display a fallback
+ * instead of another iframe to prevent infinite recursion.
+ */
+var MAX_EMBED_DEPTH = exports.MAX_EMBED_DEPTH = 2;
+
+/**
+ * Read the current embedding depth from `window.location.search`.
+ *
+ * Returns `0` when the parameter is absent or cannot be parsed as a
+ * non-negative integer, which is the expected case for top-level pages.
+ */
+var getCurrentEmbedDepth = exports.getCurrentEmbedDepth = function getCurrentEmbedDepth() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  var raw = new URLSearchParams(window.location.search).get(EMBED_DEPTH_QUERY_PARAM);
+  if (raw === null) {
+    return 0;
+  }
+  var parsed = Number(raw);
+  return Number.isFinite(parsed) && parsed >= 0 ? Math.floor(parsed) : 0;
+};
+
 // Alignment constants
 var ALIGNMENT_VALUES = exports.ALIGNMENT_VALUES = ['left', 'center', 'right', 'wrap-left', 'wrap-right'];
 var DEFAULT_ALIGNMENT = exports.DEFAULT_ALIGNMENT = 'center';
@@ -13,6 +46,7 @@ var NATIVE_EMBED_PARAMETER_DEFAULTS = exports.NATIVE_EMBED_PARAMETER_DEFAULTS =
   alignment: DEFAULT_ALIGNMENT,
   displayText: undefined,
   height: 600,
+  aspectRatio: 1,
   width: undefined
 };
 

package/dist/cjs/utils/utils.js

@@ -30,8 +30,24 @@ var PARAMETER_VALIDATORS = {
     return _constants.ALIGNMENT_VALUES.includes(value);
   }
 };
-var parseFromDefault = function parseFromDefault(defaultValue, value) {
-  if (typeof defaultValue === 'boolean') {
+
+/**
+ * Explicitly declares the intended primitive type for each parameter key.
+ * This is necessary for keys whose default value is `undefined` (e.g. `url`, `width`),
+ * because `typeof undefined === 'undefined'` gives no type information for deserialization.
+ */
+var PARAMETER_TYPES = {
+  alignment: 'string',
+  alwaysShowTitle: 'boolean',
+  aspectRatio: 'number',
+  displayText: 'string',
+  height: 'number',
+  url: 'string',
+  width: 'number'
+};
+var parseFromDefault = function parseFromDefault(defaultValue, value, explicitType) {
+  var resolvedType = explicitType !== null && explicitType !== void 0 ? explicitType : (0, _typeof2.default)(defaultValue);
+  if (resolvedType === 'boolean') {
     if (typeof value === 'boolean') {
       return value;
     }
@@ -43,12 +59,12 @@ var parseFromDefault = function parseFromDefault(defaultValue, value) {
     }
     return undefined;
   }
-  if (typeof defaultValue === 'number') {
+  if (resolvedType === 'number') {
     var parsed = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : NaN;
     return Number.isFinite(parsed) ? parsed : undefined;
   }
 
-  // String-like values (including keys whose default is undefined, e.g. url/width)
+  // String-like values
   return typeof value === 'string' ? value : undefined;
 };
 var serializeParameterValue = function serializeParameterValue(key, value) {
@@ -59,7 +75,7 @@ var serializeParameterValue = function serializeParameterValue(key, value) {
   return value === undefined ? undefined : String(value);
 };
 var deserializeParameterValue = function deserializeParameterValue(key, value) {
-  var parsedValue = parseFromDefault(_constants.NATIVE_EMBED_PARAMETER_DEFAULTS[key], value);
+  var parsedValue = parseFromDefault(_constants.NATIVE_EMBED_PARAMETER_DEFAULTS[key], value, PARAMETER_TYPES[key]);
   var validator = PARAMETER_VALIDATORS[key];
   if (parsedValue === undefined) {
     return undefined;

package/dist/es2019/embed-depth.js

@@ -0,0 +1 @@
+export { EMBED_DEPTH_QUERY_PARAM, getCurrentEmbedDepth, MAX_EMBED_DEPTH } from './utils/constants';

package/dist/es2019/utils/constants.js

@@ -1,3 +1,36 @@
+// ─── Embed depth constants ──────────────────────────────────────────────────
+
+/**
+ * URL query-parameter key used to track the current embedding depth.
+ * Each nested native-embed iframe increments this value by 1.
+ */
+export const EMBED_DEPTH_QUERY_PARAM = 'nativeEmbedDepth';
+
+/**
+ * Maximum allowed embedding depth.  When `getCurrentEmbedDepth()` returns a
+ * value **≥** this limit the extension renderer should display a fallback
+ * instead of another iframe to prevent infinite recursion.
+ */
+export const MAX_EMBED_DEPTH = 2;
+
+/**
+ * Read the current embedding depth from `window.location.search`.
+ *
+ * Returns `0` when the parameter is absent or cannot be parsed as a
+ * non-negative integer, which is the expected case for top-level pages.
+ */
+export const getCurrentEmbedDepth = () => {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  const raw = new URLSearchParams(window.location.search).get(EMBED_DEPTH_QUERY_PARAM);
+  if (raw === null) {
+    return 0;
+  }
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) && parsed >= 0 ? Math.floor(parsed) : 0;
+};
+
 // Alignment constants
 export const ALIGNMENT_VALUES = ['left', 'center', 'right', 'wrap-left', 'wrap-right'];
 export const DEFAULT_ALIGNMENT = 'center';
@@ -7,6 +40,7 @@ export const NATIVE_EMBED_PARAMETER_DEFAULTS = {
   alignment: DEFAULT_ALIGNMENT,
   displayText: undefined,
   height: 600,
+  aspectRatio: 1,
   width: undefined
 };
 

package/dist/es2019/utils/utils.js

@@ -14,8 +14,24 @@ const unwrapMacroParamValue = macroParamValue => {
 const PARAMETER_VALIDATORS = {
   alignment: value => ALIGNMENT_VALUES.includes(value)
 };
-const parseFromDefault = (defaultValue, value) => {
-  if (typeof defaultValue === 'boolean') {
+
+/**
+ * Explicitly declares the intended primitive type for each parameter key.
+ * This is necessary for keys whose default value is `undefined` (e.g. `url`, `width`),
+ * because `typeof undefined === 'undefined'` gives no type information for deserialization.
+ */
+const PARAMETER_TYPES = {
+  alignment: 'string',
+  alwaysShowTitle: 'boolean',
+  aspectRatio: 'number',
+  displayText: 'string',
+  height: 'number',
+  url: 'string',
+  width: 'number'
+};
+const parseFromDefault = (defaultValue, value, explicitType) => {
+  const resolvedType = explicitType !== null && explicitType !== void 0 ? explicitType : typeof defaultValue;
+  if (resolvedType === 'boolean') {
     if (typeof value === 'boolean') {
       return value;
     }
@@ -27,12 +43,12 @@ const parseFromDefault = (defaultValue, value) => {
     }
     return undefined;
   }
-  if (typeof defaultValue === 'number') {
+  if (resolvedType === 'number') {
     const parsed = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : NaN;
     return Number.isFinite(parsed) ? parsed : undefined;
   }
 
-  // String-like values (including keys whose default is undefined, e.g. url/width)
+  // String-like values
   return typeof value === 'string' ? value : undefined;
 };
 const serializeParameterValue = (key, value) => {
@@ -43,7 +59,7 @@ const serializeParameterValue = (key, value) => {
   return value === undefined ? undefined : String(value);
 };
 const deserializeParameterValue = (key, value) => {
-  const parsedValue = parseFromDefault(NATIVE_EMBED_PARAMETER_DEFAULTS[key], value);
+  const parsedValue = parseFromDefault(NATIVE_EMBED_PARAMETER_DEFAULTS[key], value, PARAMETER_TYPES[key]);
   const validator = PARAMETER_VALIDATORS[key];
   if (parsedValue === undefined) {
     return undefined;

package/dist/esm/embed-depth.js

@@ -0,0 +1 @@
+export { EMBED_DEPTH_QUERY_PARAM, getCurrentEmbedDepth, MAX_EMBED_DEPTH } from './utils/constants';

package/dist/esm/utils/constants.js

@@ -1,3 +1,36 @@
+// ─── Embed depth constants ──────────────────────────────────────────────────
+
+/**
+ * URL query-parameter key used to track the current embedding depth.
+ * Each nested native-embed iframe increments this value by 1.
+ */
+export var EMBED_DEPTH_QUERY_PARAM = 'nativeEmbedDepth';
+
+/**
+ * Maximum allowed embedding depth.  When `getCurrentEmbedDepth()` returns a
+ * value **≥** this limit the extension renderer should display a fallback
+ * instead of another iframe to prevent infinite recursion.
+ */
+export var MAX_EMBED_DEPTH = 2;
+
+/**
+ * Read the current embedding depth from `window.location.search`.
+ *
+ * Returns `0` when the parameter is absent or cannot be parsed as a
+ * non-negative integer, which is the expected case for top-level pages.
+ */
+export var getCurrentEmbedDepth = function getCurrentEmbedDepth() {
+  if (typeof window === 'undefined') {
+    return 0;
+  }
+  var raw = new URLSearchParams(window.location.search).get(EMBED_DEPTH_QUERY_PARAM);
+  if (raw === null) {
+    return 0;
+  }
+  var parsed = Number(raw);
+  return Number.isFinite(parsed) && parsed >= 0 ? Math.floor(parsed) : 0;
+};
+
 // Alignment constants
 export var ALIGNMENT_VALUES = ['left', 'center', 'right', 'wrap-left', 'wrap-right'];
 export var DEFAULT_ALIGNMENT = 'center';
@@ -7,6 +40,7 @@ export var NATIVE_EMBED_PARAMETER_DEFAULTS = {
   alignment: DEFAULT_ALIGNMENT,
   displayText: undefined,
   height: 600,
+  aspectRatio: 1,
   width: undefined
 };
 

package/dist/esm/utils/utils.js

@@ -21,8 +21,24 @@ var PARAMETER_VALIDATORS = {
     return ALIGNMENT_VALUES.includes(value);
   }
 };
-var parseFromDefault = function parseFromDefault(defaultValue, value) {
-  if (typeof defaultValue === 'boolean') {
+
+/**
+ * Explicitly declares the intended primitive type for each parameter key.
+ * This is necessary for keys whose default value is `undefined` (e.g. `url`, `width`),
+ * because `typeof undefined === 'undefined'` gives no type information for deserialization.
+ */
+var PARAMETER_TYPES = {
+  alignment: 'string',
+  alwaysShowTitle: 'boolean',
+  aspectRatio: 'number',
+  displayText: 'string',
+  height: 'number',
+  url: 'string',
+  width: 'number'
+};
+var parseFromDefault = function parseFromDefault(defaultValue, value, explicitType) {
+  var resolvedType = explicitType !== null && explicitType !== void 0 ? explicitType : _typeof(defaultValue);
+  if (resolvedType === 'boolean') {
     if (typeof value === 'boolean') {
       return value;
     }
@@ -34,12 +50,12 @@ var parseFromDefault = function parseFromDefault(defaultValue, value) {
     }
     return undefined;
   }
-  if (typeof defaultValue === 'number') {
+  if (resolvedType === 'number') {
     var parsed = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : NaN;
     return Number.isFinite(parsed) ? parsed : undefined;
   }
 
-  // String-like values (including keys whose default is undefined, e.g. url/width)
+  // String-like values
   return typeof value === 'string' ? value : undefined;
 };
 var serializeParameterValue = function serializeParameterValue(key, value) {
@@ -50,7 +66,7 @@ var serializeParameterValue = function serializeParameterValue(key, value) {
   return value === undefined ? undefined : String(value);
 };
 var deserializeParameterValue = function deserializeParameterValue(key, value) {
-  var parsedValue = parseFromDefault(NATIVE_EMBED_PARAMETER_DEFAULTS[key], value);
+  var parsedValue = parseFromDefault(NATIVE_EMBED_PARAMETER_DEFAULTS[key], value, PARAMETER_TYPES[key]);
   var validator = PARAMETER_VALIDATORS[key];
   if (parsedValue === undefined) {
     return undefined;

package/dist/types/embed-depth.d.ts

@@ -0,0 +1 @@
+export { EMBED_DEPTH_QUERY_PARAM, getCurrentEmbedDepth, MAX_EMBED_DEPTH } from './utils/constants';

package/dist/types/utils/constants.d.ts

@@ -1,4 +1,22 @@
 import type { NativeEmbedParameterValues } from './types';
+/**
+ * URL query-parameter key used to track the current embedding depth.
+ * Each nested native-embed iframe increments this value by 1.
+ */
+export declare const EMBED_DEPTH_QUERY_PARAM: "nativeEmbedDepth";
+/**
+ * Maximum allowed embedding depth.  When `getCurrentEmbedDepth()` returns a
+ * value **≥** this limit the extension renderer should display a fallback
+ * instead of another iframe to prevent infinite recursion.
+ */
+export declare const MAX_EMBED_DEPTH = 2;
+/**
+ * Read the current embedding depth from `window.location.search`.
+ *
+ * Returns `0` when the parameter is absent or cannot be parsed as a
+ * non-negative integer, which is the expected case for top-level pages.
+ */
+export declare const getCurrentEmbedDepth: () => number;
 export declare const ALIGNMENT_VALUES: readonly ["left", "center", "right", "wrap-left", "wrap-right"];
 export declare const DEFAULT_ALIGNMENT: "center";
 export declare const NATIVE_EMBED_PARAMETER_DEFAULTS: NativeEmbedParameterValues;

package/dist/types/utils/types.d.ts

@@ -7,6 +7,7 @@ export type NativeEmbedAppearance = 'url' | 'inline' | 'block' | 'embed';
 export type NativeEmbedParameterValues = {
     alignment: AlignmentValue;
     alwaysShowTitle: boolean;
+    aspectRatio: number;
     displayText?: string;
     height: number;
     url?: string;
@@ -19,6 +20,7 @@ export type NativeEmbedParameters = {
     macroParams?: {
         alignment?: NativeEmbedParameterValue;
         alwaysShowTitle?: NativeEmbedParameterValue;
+        aspectRatio?: NativeEmbedParameterValue;
         displayText?: NativeEmbedParameterValue;
         height?: NativeEmbedParameterValue;
         url?: NativeEmbedParameterValue;

package/dist/types-ts4.5/embed-depth.d.ts

@@ -0,0 +1 @@
+export { EMBED_DEPTH_QUERY_PARAM, getCurrentEmbedDepth, MAX_EMBED_DEPTH } from './utils/constants';

package/dist/types-ts4.5/utils/constants.d.ts

@@ -1,4 +1,22 @@
 import type { NativeEmbedParameterValues } from './types';
+/**
+ * URL query-parameter key used to track the current embedding depth.
+ * Each nested native-embed iframe increments this value by 1.
+ */
+export declare const EMBED_DEPTH_QUERY_PARAM: "nativeEmbedDepth";
+/**
+ * Maximum allowed embedding depth.  When `getCurrentEmbedDepth()` returns a
+ * value **≥** this limit the extension renderer should display a fallback
+ * instead of another iframe to prevent infinite recursion.
+ */
+export declare const MAX_EMBED_DEPTH = 2;
+/**
+ * Read the current embedding depth from `window.location.search`.
+ *
+ * Returns `0` when the parameter is absent or cannot be parsed as a
+ * non-negative integer, which is the expected case for top-level pages.
+ */
+export declare const getCurrentEmbedDepth: () => number;
 export declare const ALIGNMENT_VALUES: readonly [
     "left",
     "center",

package/dist/types-ts4.5/utils/types.d.ts

@@ -7,6 +7,7 @@ export type NativeEmbedAppearance = 'url' | 'inline' | 'block' | 'embed';
 export type NativeEmbedParameterValues = {
     alignment: AlignmentValue;
     alwaysShowTitle: boolean;
+    aspectRatio: number;
     displayText?: string;
     height: number;
     url?: string;
@@ -19,6 +20,7 @@ export type NativeEmbedParameters = {
     macroParams?: {
         alignment?: NativeEmbedParameterValue;
         alwaysShowTitle?: NativeEmbedParameterValue;
+        aspectRatio?: NativeEmbedParameterValue;
         displayText?: NativeEmbedParameterValue;
         height?: NativeEmbedParameterValue;
         url?: NativeEmbedParameterValue;

package/embed-depth/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/native-embeds-common/embed-depth",
+  "main": "../dist/cjs/embed-depth.js",
+  "module": "../dist/esm/embed-depth.js",
+  "module:es2019": "../dist/es2019/embed-depth.js",
+  "sideEffects": [
+    "*.compiled.css"
+  ],
+  "types": "../dist/types/embed-depth.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/embed-depth.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -25,7 +25,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/button": "^23.11.0",
-		"@atlaskit/editor-common": "^114.12.0",
+		"@atlaskit/editor-common": "^114.13.0",
 		"@atlaskit/editor-plugin-local-id": "^8.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/heading": "^5.4.0",
@@ -86,7 +86,7 @@
 		}
 	},
 	"name": "@atlaskit/native-embeds-common",
-	"version": "1.1.0",
+	"version": "1.1.1",
 	"description": "A shared package for native embeds to be used across experiences and plugin",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",