@atlaskit/editor-common 122.3.2 → 122.4.0

package/dist/es2019/extensibility/ExtensionNodeWrapper.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
 import { ExtensionSSRReactContextsProvider } from './ExtensionSSRReactContextsProvider';
+import { GeneratedContentReveal } from './GeneratedContentReveal';
 const styles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.inline-extension': {
@@ -20,6 +21,8 @@ const styles = css({
     position: 'relative'
   }
 });
+
+// Mirrored by the reveal span in `GeneratedContentReveal`; keep the two in step.
 const hoverStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   ':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
@@ -63,11 +66,20 @@ export const ExtensionNodeWrapper = ({
   children,
   nodeType,
   macroInteractionDesignFeatureFlags,
+  generatedContentMotion = false,
   intl
 }) => {
   const {
     showMacroInteractionDesignUpdates
   } = macroInteractionDesignFeatureFlags || {};
+
+  // Fixed for the node view's lifetime: switching would remount the subtree and reload the embed.
+  if (generatedContentMotion) {
+    return jsx(GeneratedContentReveal, {
+      intl: intl,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+    }, children);
+  }
   const wrapperClassNames = classnames({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

package/dist/es2019/extensibility/GeneratedContentReveal.compiled.css

@@ -0,0 +1,53 @@
+._10i01bym [data-native-embed-card-wrapper=true]{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._10t9kb7n:has(.extension-label:hover) .extension-edit-toggle-container{opacity:1}
+._114yglyw [data-testid$="--loading-overlay"]{display:none}
+._147ai9qs [data-native-embed-card-wrapper=true]{animation-duration:var(--ds-duration-medium,.2s)}
+._15k3glyw:has(.extension-edit-toggle-container:hover) .extension-label{box-shadow:none}
+._17sh1wug:has(.extension-edit-toggle-container:hover) .extension-label.always-hide-label{cursor:auto}
+._17w9indk iframe:not([data-native-embed-card-wrapper=true] iframe){animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._18m915vq{overflow-y:hidden}
+._1a2e1j9a:has(.extension-edit-toggle-container:hover) .extension-label.with-bodied-macro-live-page-styles{background-color:var(--ds-background-input,#fff)}
+._1e0c1ule{display:block}
+._1fdfidpf .extension-label:hover.always-hide-label{opacity:0}
+._1ghxysee:has(.extension-container:hover) .extension-label{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+._1i8c1j9a:has(.extension-container:hover) .extension-label.with-bodied-macro-live-page-styles{background-color:var(--ds-background-input,#fff)}
+._1jbo15uc iframe:not([data-native-embed-card-wrapper=true] iframe){animation-delay:var(--ds-duration-xlong,.4s)}
+._1kr5kb7n:has(.extension-container:hover) .extension-edit-toggle-container{opacity:1}
+._1nuetlke:has(.extension-container:hover) .extension-label{cursor:pointer}
+._1p7l15uc [data-native-embed-card-wrapper=true]{animation-delay:var(--ds-duration-xlong,.4s)}
+._1pfgidpf:has(.extension-container:hover) .extension-label.always-hide-label{opacity:0}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._1qac1nu9:has(.extension-container:hover) .extension-icon{display:inline}
+._1reo15vq{overflow-x:hidden}
+._1si41wug:has(.extension-container:hover) .extension-label.always-hide-label{cursor:auto}
+._1tr2ynbm:has(.extension-edit-toggle-container:hover) .extension-container{box-shadow:0 0 0 1px var(--ds-border-input,#8c8f97)}
+._1vs61nu9:has(.extension-label:hover) .extension-icon{display:inline}
+._26lx1tsb .extension-label:hover.with-bodied-macro-live-page-styles{box-shadow:0 0 0 1px var(--ds-border,#0b120e24)}
+._2z44kb7n:has(.extension-edit-toggle-container:hover) .extension-label{opacity:1}
+._54r11nu9:has(.extension-edit-toggle-container:hover) .extension-icon{display:inline}
+._5sag15uc{animation-duration:var(--ds-duration-xlong,.4s)}
+._9sz11bym iframe:not([data-native-embed-card-wrapper=true] iframe){animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._bcikkb7n:has(.extension-container:hover) .extension-label{opacity:1}
+._c71lidpf{max-height:0}
+._d1oeglyw:has(.extension-container:hover) .extension-label{box-shadow:none}
+._decvtlke:has(.extension-edit-toggle-container:hover) .extension-label{cursor:pointer}
+._gp9p1hrf iframe:not([data-native-embed-card-wrapper=true] iframe){animation-fill-mode:both}
+._j7hq1k3l{animation-name:k1legk7d}
+._jl0d1tsb:has(.extension-edit-toggle-container:hover) .extension-label.with-bodied-macro-live-page-styles{box-shadow:0 0 0 1px var(--ds-border,#0b120e24)}
+._kqswh2mm{position:relative}
+._ks721tsb:has(.extension-container:hover) .extension-label.with-bodied-macro-live-page-styles{box-shadow:0 0 0 1px var(--ds-border,#0b120e24)}
+._lbjpindk [data-native-embed-card-wrapper=true]{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._lwlpi9qs iframe:not([data-native-embed-card-wrapper=true] iframe){animation-duration:var(--ds-duration-medium,.2s)}
+._mi5m1wug .extension-label:hover.always-hide-label{cursor:auto}
+._okd3ysee:has(.extension-edit-toggle-container:hover) .extension-label{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+._pjh31hrf [data-native-embed-card-wrapper=true]{animation-fill-mode:both}
+._x3ro1j9a .extension-label:hover.with-bodied-macro-live-page-styles{background-color:var(--ds-background-input,#fff)}
+._xajsynbm:has(.extension-label:hover) .extension-container{box-shadow:0 0 0 1px var(--ds-border-input,#8c8f97)}
+._y7o7idpf:has(.extension-edit-toggle-container:hover) .extension-label.always-hide-label{opacity:0}
+._10pdkb7n .extension-edit-toggle-container:hover{opacity:1}
+._1er3glyw .extension-label:hover{box-shadow:none}
+._1ql7tlke .extension-label:hover{cursor:pointer}
+._1tmrkb7n .extension-label:hover{opacity:1}
+._dmn9ysee .extension-label:hover{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+@keyframes k1legk7d{0%{max-height:0}to{max-height:var(--extension-reveal-height)}}
+@media (prefers-reduced-motion:reduce){._2hwzru3m{animation-duration:0s}._dxfxru3m [data-native-embed-card-wrapper=true]{animation-duration:0s}._log5ru3m iframe:not([data-native-embed-card-wrapper=true] iframe){animation-duration:0s}._1pz3ru3m [data-native-embed-card-wrapper=true]{animation-delay:0s}._9hrrru3m iframe:not([data-native-embed-card-wrapper=true] iframe){animation-delay:0s}}

package/dist/es2019/extensibility/GeneratedContentReveal.js

@@ -0,0 +1,121 @@
+/* GeneratedContentReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./GeneratedContentReveal.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useCallback, useEffect, useState } from 'react';
+import { ExtensionSSRReactContextsProvider } from './ExtensionSSRReactContextsProvider';
+import { useNativeEmbedSettled } from './useNativeEmbedSettled';
+
+/*
+ * Animates a native embed into the document once it has loaded.
+ *
+ * 1. `collapsed` — clipped to zero height and `inert`. The embed loads behind it, full size but
+ *    unseen, with its own loading overlay hidden.
+ * 2. `useNativeEmbedSettled` calls back once the embed has finished loading.
+ * 3. `revealing` — the measured height goes into `--extension-reveal-height` and the node animates
+ *    open (400ms).
+ * 4. The embed fades in (200ms), delayed so it follows the opening instead of overlapping it.
+ * 5. `open` — on `animationend`, when the content first becomes visible, `inert` is dropped.
+ *
+ * Failure paths: never settles → `READY_TIMEOUT_MS` opens it and the embed's overlay reappears;
+ * fails with no frame → still settles and opens; no `animationend` → `REVEAL_TIMEOUT_MS`. Reduced
+ * motion runs the same steps with zero-length animations, so `animationend` still fires.
+ *
+ * Renders the wrapper span itself, in place of the default one in `ExtensionNodeWrapper`, so the
+ * reveal styles sit on the element editor-core reaches through `> span >` chains from the node view
+ * root. It therefore carries the default span's `relative` class and hover chrome as well.
+ */
+
+/** Long, because a MAUI app has to boot and render first. Reaching it means the signal is broken. */
+const READY_TIMEOUT_MS = 30_000;
+
+/** For when no `animationend` arrives. Must exceed the reveal. */
+const REVEAL_TIMEOUT_MS = 1000;
+
+/** Set inline from the measured content height just before the animation runs. */
+const REVEAL_HEIGHT_VARIABLE = '--extension-reveal-height';
+const relativeStyles = null;
+
+// Mirrors the default span's hover chrome in `ExtensionNodeWrapper`; keep the two in step.
+const hoverStyles = null;
+
+/**
+ * Animates `max-height`, so the rendered height is `min(content, max-height)` and overshooting is
+ * harmless — the measurement is taken before the embed has settled on its size. A measurement is
+ * needed because the embed writes a definite inline `height` onto `.extension-container`.
+ */
+const openHeight = null;
+
+// `display: block` because `overflow` and `max-height` do not apply to an inline span.
+const clippedStyles = null;
+
+/**
+ * Shut, and with the embed's own loading overlay hidden, so only one loading state shows. Only while
+ * closed: once open the embed shows its own progress again, which a node opened by the fail-safe
+ * timeout needs. Hiding the overlay here keeps `data-native-embed-loading` set, which is the signal
+ * the reveal waits on.
+ */
+const collapsedStyles = null;
+const revealingStyles = null;
+
+// Two selectors because MAUI renders a bare iframe and others nest theirs in the card wrapper; the
+// second excludes that nested case so the same content is not faded twice.
+const embedContentEnteringStyles = null;
+
+/** Mirrored onto `data-extension-reveal`. */
+
+export const GeneratedContentReveal = ({
+  children,
+  intl,
+  showMacroInteractionDesignUpdates
+}) => {
+  // Held in state so the effects below run once the span exists.
+  const [wrapperElement, setWrapperElement] = useState(null);
+  const [state, setState] = useState('collapsed');
+
+  // Only a collapsed node opens, so whichever of the readiness signal and the fail-safe timer
+  // comes second changes nothing. The measurement is repeated harmlessly in that case.
+  const startRevealing = useCallback(() => {
+    // The clipped wrapper's `scrollHeight` is the height its content wants.
+    wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.style.setProperty(REVEAL_HEIGHT_VARIABLE, `${wrapperElement.scrollHeight}px`);
+    setState(current => current === 'collapsed' ? 'revealing' : current);
+  }, [wrapperElement]);
+
+  // Step 2 → 3.
+  useNativeEmbedSettled(wrapperElement, startRevealing);
+
+  // Set once the span exists; `startRevealing` only changes with it.
+  useEffect(() => {
+    const timer = setTimeout(startRevealing, READY_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [startRevealing]);
+  useEffect(() => {
+    if (state !== 'revealing') {
+      return;
+    }
+    const timer = setTimeout(() => setState('open'), REVEAL_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [state]);
+
+  // Clipped content, and content waiting out the fade's delay, are invisible but still focusable.
+  // Set as an attribute because `inert` is absent from the React 18 JSX types.
+  useEffect(() => {
+    wrapperElement === null || wrapperElement === void 0 ? void 0 : wrapperElement.toggleAttribute('inert', state !== 'open');
+  }, [state, wrapperElement]);
+  const onAnimationEnd = useCallback(event => {
+    // The extension's own content animates too, and those events bubble.
+    if (event.target === event.currentTarget) {
+      setState('open');
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(ExtensionSSRReactContextsProvider, {
+    intl: intl
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-testid": "extension-node-wrapper",
+    "data-extension-reveal": state,
+    ref: setWrapperElement
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- the block controls and the SSR cleanup find the wrapper by `span.relative`
+    ,
+    className: ax(["_1tr2ynbm _xajsynbm _1tmrkb7n _bcikkb7n _2z44kb7n _dmn9ysee _1ghxysee _okd3ysee _1er3glyw _d1oeglyw _15k3glyw _1ql7tlke _1nuetlke _decvtlke _1fdfidpf _1pfgidpf _y7o7idpf _mi5m1wug _1si41wug _17sh1wug _x3ro1j9a _1i8c1j9a _1a2e1j9a _26lx1tsb _ks721tsb _jl0d1tsb _1qac1nu9 _54r11nu9 _1vs61nu9 _10pdkb7n _1kr5kb7n _10t9kb7n", showMacroInteractionDesignUpdates && "_kqswh2mm", state !== 'open' && "_1reo15vq _18m915vq _1e0c1ule", state === 'collapsed' && "_c71lidpf _114yglyw", state === 'revealing' && "", state === 'revealing' && "_j7hq1k3l _5sag15uc _1pglindk _2hwzru3m", state !== 'collapsed' && "_10i01bym _9sz11bym _147ai9qs _lwlpi9qs _lbjpindk _17w9indk _1p7l15uc _1jbo15uc _pjh31hrf _gp9p1hrf _dxfxru3m _log5ru3m _1pz3ru3m _9hrrru3m", showMacroInteractionDesignUpdates ? 'relative' : undefined]),
+    onAnimationEnd: onAnimationEnd
+  }, children));
+};

package/dist/es2019/extensibility/extensionNodeView.js

@@ -6,6 +6,7 @@ import { isSSR } from '../core-utils';
 import ReactNodeView from '../react-node-view';
 import { Extension } from './Extension';
 import { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
+import { isNativeEmbedExtension } from './nativeEmbedExtension';
 /**
  * Allowlists of extension keys + layout
  * Currently, only toc with default layout allows to skip React render.
@@ -252,7 +253,7 @@ export class ExtensionNode extends ReactNodeView {
     };
   }
   render(props, forwardRef) {
-    var _props$extensionNodeV;
+    var _props$extensionNodeV, _props$extensionNodeV2;
     // While sitting on SSR DOM, skip the React portal — see {@link didReuseSsrDom}.
     if (this.didReuseSsrDom) {
       return null;
@@ -261,6 +262,9 @@ export class ExtensionNode extends ReactNodeView {
       intl: props.intl,
       nodeType: this.node.type.name,
       macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags
+      // Only native embeds animate in; the reveal waits on the embed's own loading state.
+      ,
+      generatedContentMotion: !!((_props$extensionNodeV = props.extensionNodeViewOptions) !== null && _props$extensionNodeV !== void 0 && _props$extensionNodeV.allowAIGeneratedContentMotion) && isNativeEmbedExtension(this.node)
     }, /*#__PURE__*/React.createElement(Extension, {
       editorView: this.view,
       node: this.node,
@@ -277,7 +281,7 @@ export class ExtensionNode extends ReactNodeView {
       handleContentDOMRef: forwardRef,
       extensionHandlers: props.extensionHandlers,
       extensionLoadingHandlers: props.extensionLoadingHandlers,
-      editorAppearance: (_props$extensionNodeV = props.extensionNodeViewOptions) === null || _props$extensionNodeV === void 0 ? void 0 : _props$extensionNodeV.appearance,
+      editorAppearance: (_props$extensionNodeV2 = props.extensionNodeViewOptions) === null || _props$extensionNodeV2 === void 0 ? void 0 : _props$extensionNodeV2.appearance,
       pluginInjectionApi: props.pluginInjectionApi,
       macroInteractionDesignFeatureFlags: props.macroInteractionDesignFeatureFlags,
       showLivePagesBodiedMacrosRendererView: props.showLivePagesBodiedMacrosRendererView,

package/dist/es2019/extensibility/nativeEmbedExtension.js

@@ -0,0 +1,14 @@
+import { NATIVE_EMBED_EXTENSION_KEY, NATIVE_EMBED_EXTENSION_TYPE } from '../extensions/manifest-helpers';
+
+/**
+ * Whether a node is a native embed: the block `extension` that `editor-plugin-native-embeds` renders
+ * as an iframe. Bodied, multi-bodied and inline extensions do not qualify.
+ *
+ * The key can carry leading segments (`…:native-embed:database`), so it is matched with `includes`.
+ * `editor-plugin-native-embeds` and `editor-plugin-card` hold equivalent predicates; neither can be
+ * imported here, as both depend on this package.
+ */
+export const isNativeEmbedExtension = node => {
+  var _node$attrs, _node$attrs2;
+  return node.type.name === 'extension' && ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.extensionType) === NATIVE_EMBED_EXTENSION_TYPE && typeof ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionKey) === 'string' && node.attrs.extensionKey.includes(NATIVE_EMBED_EXTENSION_KEY);
+};

package/dist/es2019/extensibility/useNativeEmbedSettled.js

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+
+/** Set to `"true"` by the embed frame while loading, then removed — never set to `"false"`. */
+const NATIVE_EMBED_LOADING_ATTRIBUTE = 'data-native-embed-loading';
+
+/**
+ * Calls `onSettled` once the native embed inside `container` has finished loading, successfully or
+ * not. The extension handler mounts the embed asynchronously, so the subtree is observed rather
+ * than a known element.
+ *
+ * Two signals, because neither alone catches every embed: the attribute having been seen and gone,
+ * which covers a failure that renders no frame; or a frame with no attribute, which covers an embed
+ * that never advertises loading. The frame is present either way, so the attribute comes first.
+ *
+ * `onSettled` must be stable, and runs at most once per container.
+ */
+export const useNativeEmbedSettled = (container, onSettled) => {
+  useEffect(() => {
+    if (!container || typeof MutationObserver === 'undefined') {
+      return;
+    }
+    let hasBeenLoading = false;
+    let settled = false;
+    const read = () => {
+      if (settled) {
+        return;
+      }
+      if (container.querySelector(`[${NATIVE_EMBED_LOADING_ATTRIBUTE}="true"]`)) {
+        hasBeenLoading = true;
+        return;
+      }
+      if (hasBeenLoading || container.querySelector('iframe')) {
+        settled = true;
+        onSettled();
+      }
+    };
+    const observer = new MutationObserver(read);
+    observer.observe(container, {
+      attributes: true,
+      attributeFilter: [NATIVE_EMBED_LOADING_ATTRIBUTE],
+      childList: true,
+      subtree: true
+    });
+
+    // After `observe`, so a change landing in between is either read here or queued.
+    read();
+    return () => observer.disconnect();
+  }, [container, onSettled]);
+};

package/dist/es2019/monitoring/error.js

@@ -13,7 +13,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "122.3.1";
+const packageVersion = "122.3.3";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -1,12 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
@@ -342,15 +335,15 @@ function getPortalChildren({
     //  refactor. A test suite to catch any instances of this is ideal however
     //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
 
-    return jsx(ErrorBoundary, {
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
       component: ACTION_SUBJECT.REACT_NODE_VIEW,
       componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type2 = currentNode.type) === null || _currentNode$type2 === void 0 ? void 0 : _currentNode$type2.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }, jsx("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `zeroWidthSpaceContainer`
-    }, jsx("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `${inlineNodeViewClassname}AddZeroWidthSpace`
-    }), ZERO_WIDTH_SPACE), jsx(Component, _extends({
+    }), ZERO_WIDTH_SPACE), /*#__PURE__*/React.createElement(Component, _extends({
       view: nodeViewParams.view
       // TODO: ED-13910 - Remove the boolean to fix the prosemirror view type
       // Ignored via go/ees005
@@ -360,15 +353,17 @@ function getPortalChildren({
       node: currentNode
       // eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
     }, extraComponentProps)), getBrowserInfo().android ?
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx("span", {
+    React.createElement("span", {
       className: `zeroWidthSpaceContainer`,
       contentEditable: "false"
-    }, jsx("span", {
+    }, /*#__PURE__*/React.createElement("span", {
       className: `${inlineNodeViewClassname}AddZeroWidthSpace`
     }), ZERO_WIDTH_SPACE) :
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    jsx("span", {
+    React.createElement("span", {
       className: `${inlineNodeViewClassname}AddZeroWidthSpace`
     }));
   };

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "122.3.1";
+const packageVersion = "122.3.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/esm/ai-messages/ai-suggestions.js

@@ -5,6 +5,11 @@ export var aiSuggestionsMessages = defineMessages({
     defaultMessage: 'Review',
     description: 'Label for the Suggest edits button in the editor toolbar'
   },
+  suggestEditsButtonTooltip: {
+    id: 'fabric.editor.ai.suggestions.suggestEditsButtonTooltip',
+    defaultMessage: 'Get AI suggestions to improve content',
+    description: 'Tooltip for the Review button in the editor toolbar'
+  },
   suggestEditsPromptPrefix: {
     id: 'fabric.editor.ai.suggestions.suggestEditsPromptPrefix.non-final',
     defaultMessage: 'Review my content with ',

package/dist/esm/compiled-migration/withCompiledMigration.js

@@ -1,12 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 /**
- * @jsxRuntime classic
- * @jsx jsx
- *
- * IMPORTANT: This file MUST keep the emotion JSX pragma (@jsx jsx from @emotion/react).
+ * IMPORTANT: This file MUST keep using emotion's `jsx` factory (from @emotion/react).
  * This is intentional — it allows the HOC to apply emotion styles via the css prop
- * at the call site (where emotion's JSX runtime intercepts it), without requiring
- * the wrapped component to use the emotion pragma itself.
+ * without requiring the wrapped component to use the emotion pragma itself.
+ *
+ * Note: `jsx` is called directly rather than via the `@jsx jsx` pragma. The two are
+ * equivalent (the pragma just compiles JSX down to these calls), but the direct form
+ * avoids emotion's `EmotionJSX.LibraryManagedAttributes`, which since @emotion/react
+ * 11.13 is a distributive conditional type that TypeScript cannot resolve when the
+ * element's props are an uninstantiated generic parameter such as `P` below.
  *
  * This file is part of the Emotion → Compiled CSS-in-JS migration infrastructure.
  * It is temporary and should be removed once the migration is complete.
@@ -14,7 +18,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @see https://hello.atlassian.net/wiki/spaces/~712020e6f24689f2da470b80ba6873df7b44a2/pages/6788274038/Emotion+-+Compiled+Feature+Gating+Strategy
  */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: this file must use emotion's JSX pragma to apply emotion styles via the css prop
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional: this file must use emotion's element factory to apply emotion styles via the css prop
 import { jsx } from '@emotion/react';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 
@@ -63,7 +67,7 @@ import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-e
  */
 export function withCompiledMigration(WrappedComponent, emotionStyles) {
   var _ref, _WrappedComponent$dis;
-  // The cast is required because emotion's `css` prop is injected by the JSX pragma
+  // The cast is required because emotion's `css` prop is handled by the `jsx` factory
   // and is not part of the component's declared props type. We widen to P & { css? }
   // so TypeScript accepts the css prop in the emotion branch while preserving P.
   var Comp = WrappedComponent;
@@ -72,16 +76,14 @@ export function withCompiledMigration(WrappedComponent, emotionStyles) {
     if (compiledEnabled) {
       // Experiment ON — render directly. Compiled's statically-extracted CSS classes
       // are applied inside the component via its own css prop. No Emotion code runs.
-      // eslint-disable-next-line react/jsx-props-no-spreading -- HOC must forward all props
       return jsx(Comp, props);
     }
 
-    // Experiment OFF — render with Emotion css prop. Because this file has
-    // the emotion JSX pragma, Emotion's JSX runtime intercepts the css prop
-    // here, converts it to a className, and passes it through to the component.
-    // No wrapper div needed.
-    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/ui-styling-standard/use-compiled -- HOC must forward all props; intentional emotion usage for migration
-    return jsx(Comp, _extends({}, props, {
+    // Experiment OFF — render with Emotion css prop. `jsx` is Emotion's element
+    // factory, so it intercepts the css prop here, converts it to a className, and
+    // passes it through to the component. No wrapper div needed.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- intentional emotion usage for migration
+    return jsx(Comp, _objectSpread(_objectSpread({}, props), {}, {
       css: emotionStyles
     }));
   }

package/dist/esm/extensibility/ExtensionNodeWrapper.js

@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
 import { ExtensionSSRReactContextsProvider } from './ExtensionSSRReactContextsProvider';
+import { GeneratedContentReveal } from './GeneratedContentReveal';
 var styles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.inline-extension': {
@@ -20,6 +21,8 @@ var styles = css({
     position: 'relative'
   }
 });
+
+// Mirrored by the reveal span in `GeneratedContentReveal`; keep the two in step.
 var hoverStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
   ':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
@@ -63,9 +66,19 @@ export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
   var children = _ref.children,
     nodeType = _ref.nodeType,
     macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
+    _ref$generatedContent = _ref.generatedContentMotion,
+    generatedContentMotion = _ref$generatedContent === void 0 ? false : _ref$generatedContent,
     intl = _ref.intl;
   var _ref2 = macroInteractionDesignFeatureFlags || {},
     showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
+
+  // Fixed for the node view's lifetime: switching would remount the subtree and reload the embed.
+  if (generatedContentMotion) {
+    return jsx(GeneratedContentReveal, {
+      intl: intl,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+    }, children);
+  }
   var wrapperClassNames = classnames({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

package/dist/esm/extensibility/GeneratedContentReveal.compiled.css

@@ -0,0 +1,53 @@
+._10i01bym [data-native-embed-card-wrapper=true]{animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._10t9kb7n:has(.extension-label:hover) .extension-edit-toggle-container{opacity:1}
+._114yglyw [data-testid$="--loading-overlay"]{display:none}
+._147ai9qs [data-native-embed-card-wrapper=true]{animation-duration:var(--ds-duration-medium,.2s)}
+._15k3glyw:has(.extension-edit-toggle-container:hover) .extension-label{box-shadow:none}
+._17sh1wug:has(.extension-edit-toggle-container:hover) .extension-label.always-hide-label{cursor:auto}
+._17w9indk iframe:not([data-native-embed-card-wrapper=true] iframe){animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._18m915vq{overflow-y:hidden}
+._1a2e1j9a:has(.extension-edit-toggle-container:hover) .extension-label.with-bodied-macro-live-page-styles{background-color:var(--ds-background-input,#fff)}
+._1e0c1ule{display:block}
+._1fdfidpf .extension-label:hover.always-hide-label{opacity:0}
+._1ghxysee:has(.extension-container:hover) .extension-label{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+._1i8c1j9a:has(.extension-container:hover) .extension-label.with-bodied-macro-live-page-styles{background-color:var(--ds-background-input,#fff)}
+._1jbo15uc iframe:not([data-native-embed-card-wrapper=true] iframe){animation-delay:var(--ds-duration-xlong,.4s)}
+._1kr5kb7n:has(.extension-container:hover) .extension-edit-toggle-container{opacity:1}
+._1nuetlke:has(.extension-container:hover) .extension-label{cursor:pointer}
+._1p7l15uc [data-native-embed-card-wrapper=true]{animation-delay:var(--ds-duration-xlong,.4s)}
+._1pfgidpf:has(.extension-container:hover) .extension-label.always-hide-label{opacity:0}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._1qac1nu9:has(.extension-container:hover) .extension-icon{display:inline}
+._1reo15vq{overflow-x:hidden}
+._1si41wug:has(.extension-container:hover) .extension-label.always-hide-label{cursor:auto}
+._1tr2ynbm:has(.extension-edit-toggle-container:hover) .extension-container{box-shadow:0 0 0 1px var(--ds-border-input,#8c8f97)}
+._1vs61nu9:has(.extension-label:hover) .extension-icon{display:inline}
+._26lx1tsb .extension-label:hover.with-bodied-macro-live-page-styles{box-shadow:0 0 0 1px var(--ds-border,#0b120e24)}
+._2z44kb7n:has(.extension-edit-toggle-container:hover) .extension-label{opacity:1}
+._54r11nu9:has(.extension-edit-toggle-container:hover) .extension-icon{display:inline}
+._5sag15uc{animation-duration:var(--ds-duration-xlong,.4s)}
+._9sz11bym iframe:not([data-native-embed-card-wrapper=true] iframe){animation-name:var(--ds-keyframe-fade-in,FadeIn0to100)}
+._bcikkb7n:has(.extension-container:hover) .extension-label{opacity:1}
+._c71lidpf{max-height:0}
+._d1oeglyw:has(.extension-container:hover) .extension-label{box-shadow:none}
+._decvtlke:has(.extension-edit-toggle-container:hover) .extension-label{cursor:pointer}
+._gp9p1hrf iframe:not([data-native-embed-card-wrapper=true] iframe){animation-fill-mode:both}
+._j7hq1umn{animation-name:ke4lc1x}
+._jl0d1tsb:has(.extension-edit-toggle-container:hover) .extension-label.with-bodied-macro-live-page-styles{box-shadow:0 0 0 1px var(--ds-border,#0b120e24)}
+._kqswh2mm{position:relative}
+._ks721tsb:has(.extension-container:hover) .extension-label.with-bodied-macro-live-page-styles{box-shadow:0 0 0 1px var(--ds-border,#0b120e24)}
+._lbjpindk [data-native-embed-card-wrapper=true]{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._lwlpi9qs iframe:not([data-native-embed-card-wrapper=true] iframe){animation-duration:var(--ds-duration-medium,.2s)}
+._mi5m1wug .extension-label:hover.always-hide-label{cursor:auto}
+._okd3ysee:has(.extension-edit-toggle-container:hover) .extension-label{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+._pjh31hrf [data-native-embed-card-wrapper=true]{animation-fill-mode:both}
+._x3ro1j9a .extension-label:hover.with-bodied-macro-live-page-styles{background-color:var(--ds-background-input,#fff)}
+._xajsynbm:has(.extension-label:hover) .extension-container{box-shadow:0 0 0 1px var(--ds-border-input,#8c8f97)}
+._y7o7idpf:has(.extension-edit-toggle-container:hover) .extension-label.always-hide-label{opacity:0}
+._10pdkb7n .extension-edit-toggle-container:hover{opacity:1}
+._1er3glyw .extension-label:hover{box-shadow:none}
+._1ql7tlke .extension-label:hover{cursor:pointer}
+._1tmrkb7n .extension-label:hover{opacity:1}
+._dmn9ysee .extension-label:hover{background-color:var(--ds-background-accent-gray-subtlest,#f0f1f2)}
+@keyframes ke4lc1x{0%{max-height:0}to{max-height:var(--_1wl3sa9)}}
+@media (prefers-reduced-motion:reduce){._2hwzru3m{animation-duration:0s}._dxfxru3m [data-native-embed-card-wrapper=true]{animation-duration:0s}._log5ru3m iframe:not([data-native-embed-card-wrapper=true] iframe){animation-duration:0s}._1pz3ru3m [data-native-embed-card-wrapper=true]{animation-delay:0s}._9hrrru3m iframe:not([data-native-embed-card-wrapper=true] iframe){animation-delay:0s}}