@atlaskit/editor-common 118.10.3 → 118.12.0

package/dist/esm/ui/Mention/index.js

@@ -8,10 +8,12 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /* eslint-disable @repo/internal/react/no-class-components */
 import React, { PureComponent } from 'react';
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ProviderFactory, WithProviders } from '../../provider-factory';
-import { MentionWithProviders } from './mention-with-providers';
+import { MentionWithAvatarProviders, MentionWithProviders } from './mention-with-providers';
 var MENTION_PROVIDERS = ['mentionProvider', 'profilecardProvider'];
+var GENERIC_MENTION_IDS = ['HipChat', 'all', 'here'];
 var Mention = /*#__PURE__*/function (_PureComponent) {
   function Mention(props) {
     var _this;
@@ -26,9 +28,26 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         localId = _this$props.localId,
         userType = _this$props.userType,
         isDisabled = _this$props.isDisabled,
-        disabledTooltip = _this$props.disabledTooltip;
+        disabledTooltip = _this$props.disabledTooltip,
+        mentionNodeDataProvider = _this$props.mentionNodeDataProvider;
       var mentionProvider = providers.mentionProvider,
         profilecardProvider = providers.profilecardProvider;
+      var isAvatarEnabled = Boolean(mentionNodeDataProvider) && userType !== 'SPECIAL' && !GENERIC_MENTION_IDS.includes(id) && isExperimentEnabled('platform_editor_mention_node_avatar');
+      if (isAvatarEnabled && mentionNodeDataProvider) {
+        return /*#__PURE__*/React.createElement(MentionWithAvatarProviders, {
+          id: id,
+          text: text,
+          accessLevel: accessLevel,
+          localId: localId,
+          userType: userType,
+          isDisabled: isDisabled,
+          disabledTooltip: disabledTooltip,
+          eventHandlers: eventHandlers,
+          mentionProvider: mentionProvider,
+          mentionNodeDataProvider: mentionNodeDataProvider,
+          profilecardProvider: profilecardProvider
+        });
+      }
       return /*#__PURE__*/React.createElement(MentionWithProviders, {
         id: id,
         text: text,

package/dist/esm/ui/Mention/mention-node-data-provider.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/Mention/mention-with-profilecard.js

@@ -37,11 +37,15 @@ export default function MentionWithProfileCard(_ref) {
     id = _ref.id,
     text = _ref.text,
     accessLevel = _ref.accessLevel,
+    appType = _ref.appType,
+    avatarUrl = _ref.avatarUrl,
+    isAvatarImagePreShaped = _ref.isAvatarImagePreShaped,
     mentionProvider = _ref.mentionProvider,
     profilecardProvider = _ref.profilecardProvider,
     onClick = _ref.onClick,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
+    renderAvatarSlot = _ref.renderAvatarSlot,
     localId = _ref.localId,
     ssrPlaceholderId = _ref.ssrPlaceholderId,
     userType = _ref.userType;
@@ -55,11 +59,15 @@ export default function MentionWithProfileCard(_ref) {
     id: id,
     text: text,
     accessLevel: accessLevel,
+    appType: appType,
+    avatarUrl: avatarUrl,
+    isAvatarImagePreShaped: isAvatarImagePreShaped,
     localId: localId,
     mentionProvider: mentionProvider,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
+    renderAvatarSlot: renderAvatarSlot,
     ssrPlaceholderId: ssrPlaceholderId
   });
 

package/dist/esm/ui/Mention/mention-with-providers.js

@@ -1,23 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useLayoutEffect, useRef, useState } from 'react';
+var _excluded = ["id", "mentionNodeDataProvider", "userType"];
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
 import ResourcedMentionWithProfilecard from './mention-with-profilecard';
 var GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
-export var MentionWithProviders = /*#__PURE__*/React.memo(function (_ref) {
-  var accessLevel = _ref.accessLevel,
-    disabledTooltip = _ref.disabledTooltip,
-    eventHandlers = _ref.eventHandlers,
-    id = _ref.id,
-    isDisabled = _ref.isDisabled,
-    mentionProvider = _ref.mentionProvider,
-    profilecardProviderResolver = _ref.profilecardProvider,
-    text = _ref.text,
-    localId = _ref.localId,
+var useMentionNodeData = function useMentionNodeData(_ref) {
+  var _state$data;
+  var id = _ref.id,
+    mentionNodeDataProvider = _ref.mentionNodeDataProvider,
     userType = _ref.userType;
-  var _useState = useState(null),
+  var mention = useMemo(function () {
+    return {
+      id: id,
+      userType: userType
+    };
+  }, [id, userType]);
+  var mentionKey = "".concat(userType !== null && userType !== void 0 ? userType : 'DEFAULT', ":").concat(id);
+  var synchronousData = useMemo(function () {
+    return mentionNodeDataProvider.getMentionDataFromCache(mention);
+  }, [mention, mentionNodeDataProvider]);
+  var _useState = useState(function () {
+      return {
+        data: synchronousData,
+        key: mentionKey
+      };
+    }),
     _useState2 = _slicedToArray(_useState, 2),
-    profilecardProvider = _useState2[0],
-    setProfilecardProvider = _useState2[1];
+    state = _useState2[0],
+    setState = _useState2[1];
+  var data = state.key === mentionKey ? (_state$data = state.data) !== null && _state$data !== void 0 ? _state$data : synchronousData : synchronousData;
+  useEffect(function () {
+    if (synchronousData) {
+      return;
+    }
+    var isActive = true;
+    mentionNodeDataProvider.getMentionData(mention, function (payload) {
+      if (isActive && payload.data) {
+        setState({
+          data: payload.data,
+          key: mentionKey
+        });
+      }
+    });
+    return function () {
+      isActive = false;
+    };
+  }, [mention, mentionKey, mentionNodeDataProvider, synchronousData]);
+  return data;
+};
+export var MentionWithProviders = /*#__PURE__*/React.memo(function (_ref2) {
+  var accessLevel = _ref2.accessLevel,
+    disabledTooltip = _ref2.disabledTooltip,
+    eventHandlers = _ref2.eventHandlers,
+    id = _ref2.id,
+    isDisabled = _ref2.isDisabled,
+    mentionNodeData = _ref2.mentionNodeData,
+    mentionProvider = _ref2.mentionProvider,
+    profilecardProviderResolver = _ref2.profilecardProvider,
+    _ref2$renderAvatarSlo = _ref2.renderAvatarSlot,
+    renderAvatarSlot = _ref2$renderAvatarSlo === void 0 ? false : _ref2$renderAvatarSlo,
+    text = _ref2.text,
+    localId = _ref2.localId,
+    userType = _ref2.userType;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    profilecardProvider = _useState4[0],
+    setProfilecardProvider = _useState4[1];
   var mountedRef = useRef(true);
   useLayoutEffect(function () {
     mountedRef.current = true;
@@ -52,11 +102,15 @@ export var MentionWithProviders = /*#__PURE__*/React.memo(function (_ref) {
       accessLevel: accessLevel,
       localId: localId,
       mentionProvider: mentionProvider,
+      appType: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.appType,
+      avatarUrl: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.avatarUrl,
+      isAvatarImagePreShaped: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.isAvatarImagePreShaped,
       isDisabled: true,
       disabledTooltip: disabledTooltip,
       onClick: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onClick,
       onMouseEnter: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseEnter,
       onMouseLeave: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseLeave,
+      renderAvatarSlot: renderAvatarSlot,
       ssrPlaceholderId: ssrPlaceholderId
     });
   }
@@ -66,7 +120,10 @@ export var MentionWithProviders = /*#__PURE__*/React.memo(function (_ref) {
     accessLevel: accessLevel,
     localId: localId,
     userType: userType,
-    mentionProvider: mentionProvider
+    mentionProvider: mentionProvider,
+    appType: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.appType,
+    avatarUrl: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.avatarUrl,
+    isAvatarImagePreShaped: mentionNodeData === null || mentionNodeData === void 0 ? void 0 : mentionNodeData.isAvatarImagePreShaped
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     ,
@@ -74,6 +131,26 @@ export var MentionWithProviders = /*#__PURE__*/React.memo(function (_ref) {
     onClick: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onClick,
     onMouseEnter: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseEnter,
     onMouseLeave: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseLeave,
+    renderAvatarSlot: renderAvatarSlot,
     ssrPlaceholderId: ssrPlaceholderId
   });
+});
+export var MentionWithAvatarProviders = /*#__PURE__*/React.memo(function (_ref3) {
+  var id = _ref3.id,
+    mentionNodeDataProvider = _ref3.mentionNodeDataProvider,
+    userType = _ref3.userType,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  var mentionNodeData = useMentionNodeData({
+    id: id,
+    mentionNodeDataProvider: mentionNodeDataProvider,
+    userType: userType
+  });
+  return /*#__PURE__*/React.createElement(MentionWithProviders
+  // eslint-disable-next-line react/jsx-props-no-spreading -- The treatment adds only resolved avatar data to the existing mention props.
+  , _extends({}, props, {
+    id: id,
+    mentionNodeData: mentionNodeData,
+    renderAvatarSlot: true,
+    userType: userType
+  }));
 });

package/dist/esm/utils/content-visibility.js

@@ -0,0 +1,166 @@
+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; }
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { calcMediaSinglePixelWidth } from '../media-single/utils';
+
+// Rough per-node rendered-size constants (px), grounded in the real style defaults from
+// `styles/shared/table.ts`, `EditorContentContainer/styles/expandStyles.ts` and
+// `EditorContentContainer/styles/layout.ts`. These only need to be a decent first estimate: the
+// `auto` keyword in `contain-intrinsic-*: auto <estimate>` makes the browser remember each
+// element's real size after its first render, so any inaccuracy self-corrects on scroll. Where the
+// estimate can't be exact we intentionally err slightly HIGH — over-reserving leaves a marginally
+// long scrollbar that shrinks on scroll, whereas under-reserving makes content jump upward.
+var TABLE_ROW_HEIGHT = 44; // row content: line-height + cell padding (space.100 ×2) + cell border
+var TABLE_VERTICAL_MARGIN = 40; // tableMarginTop(24) + tableMarginBottom(16)
+var TABLE_MIN_HEIGHT = 120;
+var BLOCK_HEIGHT = 28; // a typical paragraph/block line + spacing
+
+var EXPAND_HEADER_HEIGHT = 48; // min-height:25 + padding + margin of the title row
+var EXPAND_CONTENT_PADDING = 8; // space.100 padding-top when expanded
+
+var MEDIA_SINGLE_MIN_HEIGHT = 100;
+var MEDIA_SINGLE_GUTTER = 12; // MEDIA_SINGLE_GUTTER_SIZE — gap between resizer handle and media
+var MEDIA_SINGLE_VERTICAL_MARGIN = 24; // rich-media-item margin: space.150 top + bottom
+var MEDIA_CAPTION_HEIGHT = 32; // caption line-height + vertical padding, when a caption is present
+var DEFAULT_MEDIA_ASPECT_RATIO = 9 / 16; // used only when the media has no intrinsic dimensions
+
+/**
+ * The intrinsic size a nodeView reserves while off-screen (`contain-intrinsic-width`/`-height`).
+ * `width` is optional: for block-level wrappers (expand, layout) the inline size comes from the
+ * containing block regardless of size containment, so only `height` is meaningful; for
+ * content-sized boxes (the `<table>` element, the mediaSingle wrapper) the width matters and must
+ * be supplied or the box collapses to 0 wide while contained.
+ */
+
+/**
+ * Estimate the rendered height of a table from its row count. Cell padding and cell borders are
+ * already folded into `TABLE_ROW_HEIGHT`; the table's block margins are added as a small buffer.
+ */
+export function estimateTableIntrinsicHeight(node) {
+  var rows = node.childCount;
+  return Math.max(TABLE_MIN_HEIGHT, rows * TABLE_ROW_HEIGHT + TABLE_VERTICAL_MARGIN);
+}
+
+/**
+ * Estimate the rendered height of an expand. A collapsed expand reserves only its header row; an
+ * expanded one additionally reserves space for its child blocks. `expanded` is passed in by the
+ * caller because the two expand implementations track expanded state differently (a WeakMap in
+ * single-player vs the `__expanded` attribute in legacy).
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function estimateExpandIntrinsicHeight(node, expanded) {
+  if (!expanded) {
+    return EXPAND_HEADER_HEIGHT;
+  }
+  return EXPAND_HEADER_HEIGHT + node.childCount * BLOCK_HEIGHT + EXPAND_CONTENT_PADDING;
+}
+
+/**
+ * Estimate the rendered width AND height of a mediaSingle. Unlike the structural estimates above,
+ * media carries its real dimensions in the ADF: the child `media` node's `width`/`height` attrs
+ * give the intrinsic aspect ratio, and the rendered pixel width is computed with the exact same
+ * `calcMediaSinglePixelWidth` helper the renderer uses (honouring `width`/`widthType`/`layout` and
+ * the editor's content/container width). Height then follows from width × aspect ratio — plus a
+ * caption row when present and the mediaSingle's block margins — so this is the most accurate
+ * estimate of any node type. The pixel width is returned as the intrinsic width because the
+ * mediaSingle wrapper is content-sized. `lineLength` and `containerWidth` come from the width
+ * plugin's shared state.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function estimateMediaSingleIntrinsicSize(node, lineLength, containerWidth) {
+  var _media$attrs, _media$attrs2, _node$attrs$width, _ref;
+  var media = node.firstChild;
+  var origWidth = Number(media === null || media === void 0 || (_media$attrs = media.attrs) === null || _media$attrs === void 0 ? void 0 : _media$attrs.width) || 0;
+  var origHeight = Number(media === null || media === void 0 || (_media$attrs2 = media.attrs) === null || _media$attrs2 === void 0 ? void 0 : _media$attrs2.height) || 0;
+  var aspectRatio = origWidth && origHeight ? origHeight / origWidth : DEFAULT_MEDIA_ASPECT_RATIO;
+  var pixelWidth = calcMediaSinglePixelWidth({
+    width: (_node$attrs$width = node.attrs.width) !== null && _node$attrs$width !== void 0 ? _node$attrs$width : undefined,
+    widthType: node.attrs.widthType,
+    origWidth: origWidth || lineLength || containerWidth,
+    layout: (_ref = node.attrs.layout) !== null && _ref !== void 0 ? _ref : 'center',
+    contentWidth: lineLength || undefined,
+    containerWidth: containerWidth || lineLength,
+    gutterOffset: MEDIA_SINGLE_GUTTER
+  });
+
+  // A caption child (childCount > 1) sits below the media, and the mediaSingle block reserves
+  // vertical margin above and below regardless.
+  var captionHeight = node.childCount > 1 ? MEDIA_CAPTION_HEIGHT : 0;
+  var height = Math.max(MEDIA_SINGLE_MIN_HEIGHT, Math.round(pixelWidth * aspectRatio) + captionHeight + MEDIA_SINGLE_VERTICAL_MARGIN);
+  return {
+    width: Math.round(pixelWidth),
+    height: height
+  };
+}
+
+/**
+ * Produce a single-axis `contain-intrinsic-width`/`-height` value using the `auto` keyword so the
+ * browser remembers the element's real size after its first render and only uses the estimate
+ * beforehand.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function formatIntrinsicSize(px) {
+  return "auto ".concat(Math.round(px), "px");
+}
+
+/**
+ * The `content-visibility` / `contain-intrinsic-*` styles applied to an eligible node. Width and
+ * height are kept as separate `contain-intrinsic-width`/`-height` axes rather than the
+ * `contain-intrinsic-size` shorthand: the shorthand's single value is applied to BOTH axes, which
+ * forces a wrong width on content-sized boxes (e.g. a 500px-tall `<table>` would reserve 500px
+ * wide). `containIntrinsicWidth` is omitted for block-level wrappers whose width comes from layout.
+ */
+
+/**
+ * Resolve the `content-visibility` styles for a node, or `undefined` when the optimisation should
+ * not apply.
+ *
+ * Gating is delegated to limited mode: `limitedModeEnabled` should come from the limited-mode
+ * plugin's shared state, so this feature shares a single "large document" definition with limited
+ * mode rather than a bespoke threshold. The optimisation applies only when the feature gate is on
+ * AND limited mode is active.
+ *
+ * The intrinsic size is supplied lazily via `getIntrinsicSize` so callers can compute a
+ * per-instance estimate from the node's structure, and is only evaluated when actually applied.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function getContentVisibilityStyle(limitedModeEnabled, getIntrinsicSize) {
+  if (!limitedModeEnabled || !isExperimentEnabled('cc_editor_limited_mode_perf_improvements')) {
+    return undefined;
+  }
+  var _getIntrinsicSize = getIntrinsicSize(),
+    width = _getIntrinsicSize.width,
+    height = _getIntrinsicSize.height;
+  return _objectSpread({
+    contentVisibility: 'auto',
+    containIntrinsicHeight: formatIntrinsicSize(height)
+  }, width !== undefined ? {
+    containIntrinsicWidth: formatIntrinsicSize(width)
+  } : {});
+}
+
+/**
+ * Imperatively apply the `content-visibility: auto` rendering optimisation to a node's top-level
+ * DOM element (for use in raw-DOM nodeViews), but only when both the feature gate is on and limited
+ * mode is active (see `getContentVisibilityStyle`).
+ *
+ * The intrinsic size uses the `auto` keyword so any initial inaccuracy self-corrects once the
+ * element has been rendered once. Safe to call repeatedly (e.g. on expand/collapse toggle) — it
+ * simply re-applies or, when ineligible, leaves the element untouched.
+ */
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
+export function applyContentVisibility(dom, limitedModeEnabled, getIntrinsicSize) {
+  var _style$containIntrins;
+  var style = getContentVisibilityStyle(limitedModeEnabled, getIntrinsicSize);
+  if (!style) {
+    dom.style.contentVisibility = '';
+    dom.style.containIntrinsicHeight = '';
+    dom.style.containIntrinsicWidth = '';
+    return false;
+  }
+  dom.style.contentVisibility = style.contentVisibility;
+  dom.style.containIntrinsicHeight = style.containIntrinsicHeight;
+  dom.style.containIntrinsicWidth = (_style$containIntrins = style.containIntrinsicWidth) !== null && _style$containIntrins !== void 0 ? _style$containIntrins : '';
+  return true;
+}

package/dist/types/core-utils/index.d.ts

@@ -1,4 +1,3 @@
 export { insideTable } from './inside';
 export { getDocStructure } from './document-logger';
 export { isSSR } from './is-ssr';
-export { isSSRStreaming } from './is-ssr-streaming';

package/dist/types/mention.d.ts

@@ -1,3 +1,4 @@
 export { default as Mention } from './ui/Mention';
+export type { MentionNodeDataCallback, MentionNodeDataIdentifier, MentionNodeDataProvider, MentionNodeDataUserType, } from './ui/Mention/mention-node-data-provider';
 export { MentionSharedCssClassName } from './styles/shared/mention';
 export { default as MentionWithProfileCard } from './ui/Mention/mention-with-profilecard';

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

@@ -3,6 +3,7 @@ import type { MentionUserType } from '@atlaskit/adf-schema';
 import { ProviderFactory } from '../../provider-factory';
 import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
 import type { MentionEventHandlers } from '../EventHandlers';
+import type { MentionNodeDataProvider } from './mention-node-data-provider';
 export interface MentionProps {
     accessLevel?: string;
     disabledTooltip?: string;
@@ -10,6 +11,7 @@ export interface MentionProps {
     id: string;
     isDisabled?: boolean;
     localId?: string;
+    mentionNodeDataProvider?: MentionNodeDataProvider;
     providers?: ProviderFactory;
     text: string;
     userType?: MentionUserType;

package/dist/types/ui/Mention/mention-node-data-provider.d.ts

@@ -0,0 +1,32 @@
+import type { MentionUserType } from '@atlaskit/adf-schema/mention';
+import type { MentionNodeData } from '@atlaskit/mention/types';
+export type MentionNodeDataCallback = (payload: {
+    data: MentionNodeData;
+    error?: undefined;
+} | {
+    data?: undefined;
+    error: Error;
+}) => void;
+/** `AGENT` is emitted by editor agent sources at runtime but is not serialized as an ADF user type. */
+export type MentionNodeDataUserType = MentionUserType | 'AGENT';
+export interface MentionNodeDataIdentifier {
+    id: string;
+    userType?: MentionNodeDataUserType;
+}
+/**
+ * Product-facing bridge between mention data resolution and mention UI.
+ *
+ * Create one provider per renderer or editor instance and pass it through the
+ * renderer props or mentions plugin options. `getMentionDataFromCache` is used
+ * during render, including SSR, so it must never start a network request.
+ * Deterministic products may return data from it synchronously; network-backed
+ * products should return cached data or `undefined`, then resolve through
+ * `getMentionData` on the client.
+ *
+ * The UI depends only on these mention-specific methods to avoid a package
+ * cycle with the reusable implementation in editor-plugin-mentions.
+ */
+export interface MentionNodeDataProvider {
+    getMentionData: (mention: MentionNodeDataIdentifier, callback: MentionNodeDataCallback) => void;
+    getMentionDataFromCache: (mention: MentionNodeDataIdentifier) => MentionNodeData | undefined;
+}

package/dist/types/ui/Mention/mention-with-profilecard.d.ts

@@ -5,14 +5,18 @@ import type { ProfilecardProvider } from '../../provider-factory/profile-card-pr
 import type { MentionEventHandler } from '../EventHandlers';
 export interface Props {
     accessLevel?: string;
+    appType?: string | null;
     autoFocus?: boolean;
+    avatarUrl?: string;
     id: string;
+    isAvatarImagePreShaped?: boolean;
     localId?: string;
     mentionProvider?: Promise<MentionProvider>;
     onClick?: MentionEventHandler;
     onMouseEnter?: MentionEventHandler;
     onMouseLeave?: MentionEventHandler;
     profilecardProvider: ProfilecardProvider;
+    renderAvatarSlot?: boolean;
     ssrPlaceholderId?: string;
     text: string;
     userType?: MentionUserType;
@@ -22,4 +26,4 @@ export interface Props {
  * 1. Agent mentions (`userType === 'APP'`, behind the `rovo_chat_mention_agents` experiment) open the Rovo agent profile card on click.
  * 2. Otherwise renders the person profile card (either via the provider's `renderUserMentionCard`/link fallback or the default user `ProfileCardTrigger`).
  */
-export default function MentionWithProfileCard({ autoFocus, id, text, accessLevel, mentionProvider, profilecardProvider, onClick, onMouseEnter, onMouseLeave, localId, ssrPlaceholderId, userType, }: Props): React.JSX.Element;
+export default function MentionWithProfileCard({ autoFocus, id, text, accessLevel, appType, avatarUrl, isAvatarImagePreShaped, mentionProvider, profilecardProvider, onClick, onMouseEnter, onMouseLeave, renderAvatarSlot, localId, ssrPlaceholderId, userType, }: Props): React.JSX.Element;

package/dist/types/ui/Mention/mention-with-providers.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { MentionUserType } from '@atlaskit/adf-schema';
 import type { MentionProvider } from '@atlaskit/mention/resource';
+import type { MentionNodeData } from '@atlaskit/mention/types';
 import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
 import type { MentionEventHandlers } from '../EventHandlers';
+import type { MentionNodeDataProvider } from './mention-node-data-provider';
 export interface Props {
     accessLevel?: string;
     disabledTooltip?: string;
@@ -10,12 +12,20 @@ export interface Props {
     id: string;
     isDisabled?: boolean;
     localId?: string;
+    mentionNodeDataProvider?: MentionNodeDataProvider;
     mentionProvider?: Promise<MentionProvider>;
     profilecardProvider?: Promise<ProfilecardProvider>;
     text: string;
     userType?: MentionUserType;
 }
+export interface MentionWithProvidersProps extends Props {
+    mentionNodeData?: MentionNodeData;
+    renderAvatarSlot?: boolean;
+}
 export interface State {
     profilecardProvider: ProfilecardProvider | null;
 }
-export declare const MentionWithProviders: React.MemoExoticComponent<({ accessLevel, eventHandlers, id, mentionProvider, profilecardProvider, text, localId, }: Props) => React.JSX.Element>;
+export declare const MentionWithProviders: React.MemoExoticComponent<(props: MentionWithProvidersProps) => React.JSX.Element>;
+export declare const MentionWithAvatarProviders: React.MemoExoticComponent<(props: Props & {
+    mentionNodeDataProvider: MentionNodeDataProvider;
+}) => React.JSX.Element>;

package/dist/types/utils/content-visibility.d.ts

@@ -0,0 +1,78 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * The intrinsic size a nodeView reserves while off-screen (`contain-intrinsic-width`/`-height`).
+ * `width` is optional: for block-level wrappers (expand, layout) the inline size comes from the
+ * containing block regardless of size containment, so only `height` is meaningful; for
+ * content-sized boxes (the `<table>` element, the mediaSingle wrapper) the width matters and must
+ * be supplied or the box collapses to 0 wide while contained.
+ */
+export type IntrinsicSize = {
+    height: number;
+    width?: number;
+};
+/**
+ * Estimate the rendered height of a table from its row count. Cell padding and cell borders are
+ * already folded into `TABLE_ROW_HEIGHT`; the table's block margins are added as a small buffer.
+ */
+export declare function estimateTableIntrinsicHeight(node: PMNode): number;
+/**
+ * Estimate the rendered height of an expand. A collapsed expand reserves only its header row; an
+ * expanded one additionally reserves space for its child blocks. `expanded` is passed in by the
+ * caller because the two expand implementations track expanded state differently (a WeakMap in
+ * single-player vs the `__expanded` attribute in legacy).
+ */
+export declare function estimateExpandIntrinsicHeight(node: PMNode, expanded: boolean): number;
+/**
+ * Estimate the rendered width AND height of a mediaSingle. Unlike the structural estimates above,
+ * media carries its real dimensions in the ADF: the child `media` node's `width`/`height` attrs
+ * give the intrinsic aspect ratio, and the rendered pixel width is computed with the exact same
+ * `calcMediaSinglePixelWidth` helper the renderer uses (honouring `width`/`widthType`/`layout` and
+ * the editor's content/container width). Height then follows from width × aspect ratio — plus a
+ * caption row when present and the mediaSingle's block margins — so this is the most accurate
+ * estimate of any node type. The pixel width is returned as the intrinsic width because the
+ * mediaSingle wrapper is content-sized. `lineLength` and `containerWidth` come from the width
+ * plugin's shared state.
+ */
+export declare function estimateMediaSingleIntrinsicSize(node: PMNode, lineLength: number, containerWidth: number): IntrinsicSize;
+/**
+ * Produce a single-axis `contain-intrinsic-width`/`-height` value using the `auto` keyword so the
+ * browser remembers the element's real size after its first render and only uses the estimate
+ * beforehand.
+ */
+export declare function formatIntrinsicSize(px: number): string;
+/**
+ * The `content-visibility` / `contain-intrinsic-*` styles applied to an eligible node. Width and
+ * height are kept as separate `contain-intrinsic-width`/`-height` axes rather than the
+ * `contain-intrinsic-size` shorthand: the shorthand's single value is applied to BOTH axes, which
+ * forces a wrong width on content-sized boxes (e.g. a 500px-tall `<table>` would reserve 500px
+ * wide). `containIntrinsicWidth` is omitted for block-level wrappers whose width comes from layout.
+ */
+type ContentVisibilityStyle = {
+    containIntrinsicHeight: string;
+    containIntrinsicWidth?: string;
+    contentVisibility: 'auto';
+};
+/**
+ * Resolve the `content-visibility` styles for a node, or `undefined` when the optimisation should
+ * not apply.
+ *
+ * Gating is delegated to limited mode: `limitedModeEnabled` should come from the limited-mode
+ * plugin's shared state, so this feature shares a single "large document" definition with limited
+ * mode rather than a bespoke threshold. The optimisation applies only when the feature gate is on
+ * AND limited mode is active.
+ *
+ * The intrinsic size is supplied lazily via `getIntrinsicSize` so callers can compute a
+ * per-instance estimate from the node's structure, and is only evaluated when actually applied.
+ */
+export declare function getContentVisibilityStyle(limitedModeEnabled: boolean, getIntrinsicSize: () => IntrinsicSize): ContentVisibilityStyle | undefined;
+/**
+ * Imperatively apply the `content-visibility: auto` rendering optimisation to a node's top-level
+ * DOM element (for use in raw-DOM nodeViews), but only when both the feature gate is on and limited
+ * mode is active (see `getContentVisibilityStyle`).
+ *
+ * The intrinsic size uses the `auto` keyword so any initial inaccuracy self-corrects once the
+ * element has been rendered once. Safe to call repeatedly (e.g. on expand/collapse toggle) — it
+ * simply re-applies or, when ineligible, leaves the element untouched.
+ */
+export declare function applyContentVisibility(dom: HTMLElement, limitedModeEnabled: boolean, getIntrinsicSize: () => IntrinsicSize): boolean;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "118.10.3",
+	"version": "118.12.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -64,7 +64,7 @@
 		"@atlaskit/media-picker": "^72.1.0",
 		"@atlaskit/media-ui": "^30.11.0",
 		"@atlaskit/media-viewer": "^54.5.0",
-		"@atlaskit/mention": "^27.15.0",
+		"@atlaskit/mention": "^27.16.0",
 		"@atlaskit/menu": "^10.0.0",
 		"@atlaskit/object": "^2.2.0",
 		"@atlaskit/onboarding": "^15.1.0",
@@ -84,7 +84,7 @@
 		"@atlaskit/task-decision": "^21.8.0",
 		"@atlaskit/teams-app-config": "^2.2.0",
 		"@atlaskit/textfield": "^10.0.0",
-		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tmp-editor-statsig": "^147.1.0",
 		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/width-detector": "^7.0.0",
@@ -266,5 +266,11 @@
 		"platform_editor_embed_height_only_fallback": {
 			"type": "boolean"
 		}
+	},
+	"platform-experiments": {
+		"platform_editor_mention_node_avatar": {
+			"param": "isEnabled",
+			"defaultValue": false
+		}
 	}
 }

package/utils/content-visibility/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@atlaskit/editor-common/utils/content-visibility",
+  "main": "../../dist/cjs/utils/content-visibility.js",
+  "module": "../../dist/esm/utils/content-visibility.js",
+  "module:es2019": "../../dist/es2019/utils/content-visibility.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../../dist/types/utils/content-visibility.d.ts"
+}