@atlaskit/editor-common 122.3.2 → 122.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/editor-common
 
+## 122.4.0
+
+### Minor Changes
+
+- [`eded6b2abb218`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/eded6b2abb218) -
+  Add the `allowAIGeneratedContentMotion` extension plugin option, for surfaces where native embeds
+  arrive mid-flight such as AI-generated MAUI apps in the Create with Rovo preview. A native embed
+  extension is held closed while it loads, then the document opens out to make room for it and the
+  embed fades in, so nothing stands in for the content while it loads. Only native embeds are
+  animated, since the reveal waits on an embed reporting itself loaded. The referentiality plugin
+  registers extension node views of its own, so it takes the same option.
+
+  The option defaults off and its rollout is the consumer's to gate; Confluence's Create with Rovo
+  preview enables it behind `aifc_page_create_defer_generated_visuals`. MAUI's new
+  `waitForContentReady` is behind that same gate, so the reveal opens onto the rendered app rather
+  than a still-loading frame.
+
+- [`15dfafecc55f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/15dfafecc55f0) -
+  Add the tooltip "Get AI suggestions to improve content" to the Editor toolbar Review button.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 122.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 122.3.2
 
 ### Patch Changes

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

@@ -11,6 +11,11 @@ var aiSuggestionsMessages = exports.aiSuggestionsMessages = (0, _reactIntl.defin
     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/cjs/compiled-migration/withCompiledMigration.js

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withCompiledMigration = withCompiledMigration;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- *
- * IMPORTANT: This file MUST keep the emotion JSX pragma (@jsx jsx from @emotion/react).
+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; } /**
+ * 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.
  *
  * @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
 /**
  * A HOC that enables per-component feature-gated migration from Emotion to Compiled CSS-in-JS.
  *
@@ -70,7 +70,7 @@ var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-ex
  */
 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;
@@ -79,16 +79,14 @@ 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 (0, _react.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 (0, _react.jsx)(Comp, (0, _extends2.default)({}, 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 (0, _react.jsx)(Comp, _objectSpread(_objectSpread({}, props), {}, {
       css: emotionStyles
     }));
   }

package/dist/cjs/extensibility/ExtensionNodeWrapper.js

@@ -10,6 +10,7 @@ var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _whitespace = require("../whitespace");
 var _ExtensionSSRReactContextsProvider = require("./ExtensionSSRReactContextsProvider");
+var _GeneratedContentReveal = require("./GeneratedContentReveal");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -28,6 +29,8 @@ var styles = (0, _react2.css)({
     position: 'relative'
   }
 });
+
+// Mirrored by the reveal span in `GeneratedContentReveal`; keep the two in step.
 var hoverStyles = (0, _react2.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': {
@@ -71,9 +74,19 @@ var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNode
   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 (0, _react2.jsx)(_GeneratedContentReveal.GeneratedContentReveal, {
+      intl: intl,
+      showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
+    }, children);
+  }
   var wrapperClassNames = (0, _classnames.default)({
     'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
     relative: showMacroInteractionDesignUpdates

package/dist/cjs/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}}

package/dist/cjs/extensibility/GeneratedContentReveal.js

@@ -0,0 +1,146 @@
+/* GeneratedContentReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeneratedContentReveal = void 0;
+require("./GeneratedContentReveal.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ExtensionSSRReactContextsProvider = require("./ExtensionSSRReactContextsProvider");
+var _useNativeEmbedSettled = require("./useNativeEmbedSettled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/*
+ * 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. */
+var READY_TIMEOUT_MS = 30000;
+
+/** For when no `animationend` arrives. Must exceed the reveal. */
+var REVEAL_TIMEOUT_MS = 1000;
+
+/** Set inline from the measured content height just before the animation runs. */
+var REVEAL_HEIGHT_VARIABLE = '--extension-reveal-height';
+var relativeStyles = null;
+
+// Mirrors the default span's hover chrome in `ExtensionNodeWrapper`; keep the two in step.
+var 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`.
+ */
+var openHeight = null;
+
+// `display: block` because `overflow` and `max-height` do not apply to an inline span.
+var 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.
+ */
+var collapsedStyles = null;
+var 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.
+var embedContentEnteringStyles = null;
+
+/** Mirrored onto `data-extension-reveal`. */
+
+var GeneratedContentReveal = exports.GeneratedContentReveal = function GeneratedContentReveal(_ref) {
+  var children = _ref.children,
+    intl = _ref.intl,
+    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
+  // Held in state so the effects below run once the span exists.
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    wrapperElement = _useState2[0],
+    setWrapperElement = _useState2[1];
+  var _useState3 = (0, _react.useState)('collapsed'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
+
+  // 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.
+  var startRevealing = (0, _react.useCallback)(function () {
+    // The clipped wrapper's `scrollHeight` is the height its content wants.
+    wrapperElement === null || wrapperElement === void 0 || wrapperElement.style.setProperty(REVEAL_HEIGHT_VARIABLE, "".concat(wrapperElement.scrollHeight, "px"));
+    setState(function (current) {
+      return current === 'collapsed' ? 'revealing' : current;
+    });
+  }, [wrapperElement]);
+
+  // Step 2 → 3.
+  (0, _useNativeEmbedSettled.useNativeEmbedSettled)(wrapperElement, startRevealing);
+
+  // Set once the span exists; `startRevealing` only changes with it.
+  (0, _react.useEffect)(function () {
+    var timer = setTimeout(startRevealing, READY_TIMEOUT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [startRevealing]);
+  (0, _react.useEffect)(function () {
+    if (state !== 'revealing') {
+      return;
+    }
+    var timer = setTimeout(function () {
+      return setState('open');
+    }, REVEAL_TIMEOUT_MS);
+    return function () {
+      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.
+  (0, _react.useEffect)(function () {
+    wrapperElement === null || wrapperElement === void 0 || wrapperElement.toggleAttribute('inert', state !== 'open');
+  }, [state, wrapperElement]);
+  var onAnimationEnd = (0, _react.useCallback)(function (event) {
+    // The extension's own content animates too, and those events bubble.
+    if (event.target === event.currentTarget) {
+      setState('open');
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_ExtensionSSRReactContextsProvider.ExtensionSSRReactContextsProvider, {
+    intl: intl
+  }, /*#__PURE__*/_react.default.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: (0, _runtime.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' && "_j7hq1umn _5sag15uc _1pglindk _2hwzru3m", state !== 'collapsed' && "_10i01bym _9sz11bym _147ai9qs _lwlpi9qs _lbjpindk _17w9indk _1p7l15uc _1jbo15uc _pjh31hrf _gp9p1hrf _dxfxru3m _log5ru3m _1pz3ru3m _9hrrru3m", showMacroInteractionDesignUpdates ? 'relative' : undefined]),
+    onAnimationEnd: onAnimationEnd,
+    style: {
+      "--_1wl3sa9": (0, _runtime.ix)("var(".concat(REVEAL_HEIGHT_VARIABLE, ")"))
+    }
+  }, children));
+};

package/dist/cjs/extensibility/extensionNodeView.js

@@ -20,6 +20,7 @@ var _coreUtils = require("../core-utils");
 var _reactNodeView = _interopRequireDefault(require("../react-node-view"));
 var _Extension = require("./Extension");
 var _ExtensionNodeWrapper = require("./ExtensionNodeWrapper");
+var _nativeEmbedExtension = require("./nativeEmbedExtension");
 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; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
@@ -298,7 +299,7 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
   }, {
     key: "render",
     value: function 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;
@@ -307,6 +308,9 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
         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) && (0, _nativeEmbedExtension.isNativeEmbedExtension)(this.node)
       }, /*#__PURE__*/_react.default.createElement(_Extension.Extension, {
         editorView: this.view,
         node: this.node,
@@ -323,7 +327,7 @@ var ExtensionNode = exports.ExtensionNode = /*#__PURE__*/function (_ReactNodeVie
         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/cjs/extensibility/nativeEmbedExtension.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isNativeEmbedExtension = void 0;
+var _manifestHelpers = require("../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.
+ */
+var isNativeEmbedExtension = exports.isNativeEmbedExtension = function 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) === _manifestHelpers.NATIVE_EMBED_EXTENSION_TYPE && typeof ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.extensionKey) === 'string' && node.attrs.extensionKey.includes(_manifestHelpers.NATIVE_EMBED_EXTENSION_KEY);
+};

package/dist/cjs/extensibility/useNativeEmbedSettled.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNativeEmbedSettled = void 0;
+var _react = require("react");
+/** Set to `"true"` by the embed frame while loading, then removed — never set to `"false"`. */
+var 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.
+ */
+var useNativeEmbedSettled = exports.useNativeEmbedSettled = function useNativeEmbedSettled(container, onSettled) {
+  (0, _react.useEffect)(function () {
+    if (!container || typeof MutationObserver === 'undefined') {
+      return;
+    }
+    var hasBeenLoading = false;
+    var settled = false;
+    var read = function read() {
+      if (settled) {
+        return;
+      }
+      if (container.querySelector("[".concat(NATIVE_EMBED_LOADING_ATTRIBUTE, "=\"true\"]"))) {
+        hasBeenLoading = true;
+        return;
+      }
+      if (hasBeenLoading || container.querySelector('iframe')) {
+        settled = true;
+        onSettled();
+      }
+    };
+    var 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 function () {
+      return observer.disconnect();
+    };
+  }, [container, onSettled]);
+};

package/dist/cjs/monitoring/error.js

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

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

@@ -9,7 +9,6 @@ exports.inlineNodeViewClassname = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _analytics = require("../analytics");
@@ -21,10 +20,7 @@ var _whitespace = require("../whitespace");
 var _generateUniqueNodeKey = require("./generateUniqueNodeKey");
 var _onVisibleObserverFactory = require("./onVisibleObserverFactory");
 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; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; }
 var inlineNodeViewClassname = exports.inlineNodeViewClassname = 'inlineNodeView';
 var canRenderFallback = function canRenderFallback(node) {
   return node.type.isInline && node.type.isAtom && node.type.isLeaf;
@@ -341,15 +337,15 @@ function getPortalChildren(_ref3) {
     //  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 (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
+    return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
       component: _analytics.ACTION_SUBJECT.REACT_NODE_VIEW,
       componentId: (_currentNode$type$nam = currentNode === null || currentNode === 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 : _analytics.ACTION_SUBJECT_ID.UNKNOWN_NODE,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }, (0, _react2.jsx)("span", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
       className: "zeroWidthSpaceContainer"
-    }, (0, _react2.jsx)("span", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
-    }), _whitespace.ZERO_WIDTH_SPACE), (0, _react2.jsx)(Component, (0, _extends2.default)({
+    }), _whitespace.ZERO_WIDTH_SPACE), /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
       view: nodeViewParams.view
       // TODO: ED-13910 - Remove the boolean to fix the prosemirror view type
       // Ignored via go/ees005
@@ -359,15 +355,17 @@ function getPortalChildren(_ref3) {
       node: currentNode
       // eslint-disable-next-line react/jsx-props-no-spreading -- Spreading props to pass through dynamic component props
     }, extraComponentProps)), (0, _browser.getBrowserInfo)().android ?
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("span", {
+    _react.default.createElement("span", {
       className: "zeroWidthSpaceContainer",
       contentEditable: "false"
-    }, (0, _react2.jsx)("span", {
+    }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }), _whitespace.ZERO_WIDTH_SPACE) :
+    /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("span", {
+    _react.default.createElement("span", {
       className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }));
   };

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

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "122.3.1";
+var packageVersion = "122.3.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

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

@@ -5,6 +5,11 @@ export const 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/es2019/compiled-migration/withCompiledMigration.js

@@ -1,12 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
- * @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 +15,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 +64,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.
   const Comp = WrappedComponent;
@@ -72,18 +73,17 @@ 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, {
+      ...props,
       css: emotionStyles
-    }));
+    });
   }
   const name = (_ref = (_WrappedComponent$dis = WrappedComponent.displayName) !== null && _WrappedComponent$dis !== void 0 ? _WrappedComponent$dis : WrappedComponent.name) !== null && _ref !== void 0 ? _ref : 'Component';
   MigrationGatedComponent.displayName = `withCompiledMigration(${name})`;