@atlaskit/editor-plugin-media 20.0.3 → 20.1.0

package/dist/esm/ui/GeneratedMediaReveal.js

@@ -0,0 +1,116 @@
+/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./GeneratedMediaReveal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useEffect, useState } from 'react';
+
+/**
+ * Only `collapsed` and `revealing` size and clip the content. `open` drops back to plain
+ * block layout, so the reveal leaves nothing behind for selection outlines, resize handles
+ * or badges to collide with.
+ */
+
+/** Which path opened the node. Surfaced as a data attribute for debugging. */
+
+// A `0fr -> 1fr` grid row opens out to the content's natural height without anyone having to
+// measure it, which matters because the card's height comes from an aspect-ratio padding
+// further down the tree.
+var openRow = null;
+var collapsedStyles = null;
+var revealStyles = null;
+var clippedStyles = null;
+
+/**
+ * Fail-safe, not a normal path: opens the node even if the preview never reports itself
+ * rendered, so a failed or hanging image still ends up visible rather than staying collapsed.
+ * Also covers lazy loading, where a card collapsed to zero height may never satisfy the
+ * IntersectionObserver that triggers its fetch.
+ *
+ * Deliberately generous, because opening early is worse than opening late — the space then
+ * reveals the card's own loading treatment instead of the image, and an AI-generated image has
+ * to be generated, uploaded, processed and fetched first. `data-media-reveal-trigger` shows
+ * which path fired; `timeout` in normal use means the readiness signal is broken.
+ */
+var READY_TIMEOUT_MS = 30000;
+
+// Backstop for reduced motion and browsers that don't interpolate grid-template-rows, where no
+// animationend fires. Must stay comfortably longer than the reveal, or it cuts it off part way.
+var REVEAL_TIMEOUT_MS = 1000;
+/**
+ * Opens the document out to make room for a media node once its preview is ready, rather than
+ * having the node snap into place at full height. For AI-generated media in the Create with
+ * Rovo preview, where images are inserted after the surrounding content has streamed in:
+ * holding the node closed until the preview has rendered means the space opens exactly once,
+ * with the image already fading in, so there is no placeholder to look at in between.
+ */
+export var GeneratedMediaReveal = function GeneratedMediaReveal(_ref) {
+  var children = _ref.children,
+    isEnabled = _ref.isEnabled,
+    isReady = _ref.isReady,
+    mediaKey = _ref.mediaKey;
+  var _useState = useState('collapsed'),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    trigger = _useState4[0],
+    setTrigger = _useState4[1];
+
+  // Reset during render rather than remounting on a `key`, which would also remount the card
+  // below and restart its fetch. The reveal's effect only runs while `collapsed`, so without
+  // this a replacement would appear at once, having inherited the previous file's `open`.
+  var _useState5 = useState(mediaKey),
+    _useState6 = _slicedToArray(_useState5, 2),
+    renderedMediaKey = _useState6[0],
+    setRenderedMediaKey = _useState6[1];
+  if (mediaKey !== renderedMediaKey) {
+    setRenderedMediaKey(mediaKey);
+    setState('collapsed');
+    setTrigger(undefined);
+  }
+  useEffect(function () {
+    if (!isEnabled || state !== 'collapsed') {
+      return;
+    }
+    if (isReady) {
+      setTrigger('ready');
+      setState('revealing');
+      return;
+    }
+    var timer = setTimeout(function () {
+      setTrigger('timeout');
+      setState('revealing');
+    }, READY_TIMEOUT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [isEnabled, isReady, state]);
+  useEffect(function () {
+    if (state !== 'revealing') {
+      return;
+    }
+    var timer = setTimeout(function () {
+      return setState('open');
+    }, REVEAL_TIMEOUT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [state]);
+  if (!isEnabled) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    "data-media-reveal": state,
+    "data-media-reveal-trigger": trigger,
+    onAnimationEnd: function onAnimationEnd(event) {
+      // The media card runs animations of its own, which bubble through here.
+      if (event.target === event.currentTarget) {
+        setState('open');
+      }
+    },
+    className: ax([state === 'collapsed' && "_1e0c11p5 _2z0563bf", state === 'revealing' && "", state === 'revealing' && "_1e0c11p5 _2z05hkll _j7hq8gkt _5sag15uc _1pglindk _1o51eoah _1bumglyw"])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([state !== 'open' && "_1reo15vq _18m915vq _1tkeidpf"])
+  }, children));
+};

package/dist/types/nodeviews/mediaNodeView/media.d.ts

@@ -32,6 +32,13 @@ export interface MediaNodeProps extends ReactNodeProps, ImageLoaderProps {
 }
 interface MediaNodeState {
     contextIdentifierProvider?: ContextIdentifierProvider;
+    /** File the card reported a terminal error for. Keyed by id, as `previewRenderedFileId`. */
+    failedFileId?: string;
+    /**
+     * File the card last reported a rendered preview for. Keyed by id rather than a boolean,
+     * because the node's media can be replaced without remounting this component.
+     */
+    previewRenderedFileId?: string;
     viewAndUploadMediaClientConfig?: MediaClientConfig;
     viewMediaClientConfig?: MediaClientConfig;
 }
@@ -54,6 +61,20 @@ export declare class MediaNode extends Component<MediaNodeProps, MediaNodeState>
     private selectMediaSingleFromCard;
     private selectMediaSingle;
     private getMediaSettings;
+    /**
+     * Surface opt-in first, so surfaces that never ask for the motion are not exposed to the
+     * gate. The node type is checked after it, so every node on an opted-in surface counts
+     * towards the same exposure population.
+     */
+    private get hasGeneratedMediaMotion();
+    /**
+     * Media written straight into the document arrives without intrinsic dimensions, and the
+     * fetch that would supply them resolves `false` while the file is still processing. Only
+     * editor-driven uploads get a second attempt, from the plugin's media-state listener, so
+     * otherwise the card would keep its placeholder ratio forever. The preview rendering is the
+     * one moment the file is guaranteed ready, so the fetch is retried there.
+     */
+    private fetchMissingDimensions;
     private onPreviewRender;
     private onError;
     private onRemixRenderError;

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

@@ -34,6 +34,15 @@ export type MediaRenderEvent = {
 export interface MediaPluginOptions {
     alignLeftOnInsert?: boolean;
     allowAdvancedToolBarOptions?: boolean;
+    /**
+     * Animates media nodes into the document: the content opens out to make room for the node
+     * once its preview is ready, then the preview fades in. For surfaces where media arrives
+     * mid-flight, e.g. AI-generated images inserted into the Create with Rovo preview after the
+     * surrounding content has streamed in.
+     *
+     * Also behind `aifc_page_create_defer_generated_visuals`.
+     */
+    allowAIGeneratedMediaMotion?: boolean;
     allowAltTextOnImages?: boolean;
     allowBreakoutSnapPoints?: boolean;
     allowCaptions?: boolean;

package/dist/types/ui/GeneratedMediaReveal.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+type GeneratedMediaRevealProps = {
+    children: React.ReactNode;
+    isEnabled: boolean;
+    /** The node is held closed until this is true, so the wait happens before the document moves. */
+    isReady: boolean;
+    /**
+     * Identity of the media being revealed. Changing it restarts the reveal, so media replaced
+     * in place waits for its own preview instead of inheriting the previous file's open state.
+     */
+    mediaKey?: string;
+};
+/**
+ * Opens the document out to make room for a media node once its preview is ready, rather than
+ * having the node snap into place at full height. For AI-generated media in the Create with
+ * Rovo preview, where images are inserted after the surrounding content has streamed in:
+ * holding the node closed until the preview has rendered means the space opens exactly once,
+ * with the image already fading in, so there is no placeholder to look at in between.
+ */
+export declare const GeneratedMediaReveal: ({ children, isEnabled, isReady, mediaKey, }: GeneratedMediaRevealProps) => React.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "20.0.3",
+	"version": "20.1.0",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -25,6 +25,7 @@
 		"@atlaskit/analytics-namespaced-context": "^8.2.0",
 		"@atlaskit/analytics-next": "^12.5.0",
 		"@atlaskit/button": "^25.3.0",
+		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/editor-palette": "^3.5.0",
 		"@atlaskit/editor-plugin-analytics": "^18.0.0",
 		"@atlaskit/editor-plugin-annotation": "^18.0.0",
@@ -48,7 +49,7 @@
 		"@atlaskit/form": "^17.2.0",
 		"@atlaskit/icon": "^37.6.0",
 		"@atlaskit/icon-lab": "^7.8.0",
-		"@atlaskit/media-card": "^81.10.0",
+		"@atlaskit/media-card": "^81.11.0",
 		"@atlaskit/media-client": "^38.1.0",
 		"@atlaskit/media-client-react": "^6.4.0",
 		"@atlaskit/media-common": "^14.6.0",
@@ -60,10 +61,11 @@
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^191.0.0",
+		"@atlaskit/tmp-editor-statsig": "^192.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^1.0.2",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"classnames": "^2.2.5",
@@ -112,6 +114,10 @@
 		"platform_editor_media_border_radius_fix": {
 			"type": "boolean"
 		},
+		"aifc_page_create_defer_generated_visuals": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"cc-maui-phase-2": {
 			"type": "boolean"
 		},